// ======== HERO ========
function Hero() {
  return (
    <section className="hero page" id="top">
      <div className="hero-top">
        <div className="eyebrow">
          <span>[ VTL / 001 ]</span>
          <span>Software studio</span>
        </div>
        <FadeUp delay={800}>
          <p className="hero-meta">
            A small, precise studio building software for founders who don't write code.
            Web, mobile, AI , shipped in weeks, not quarters.
          </p>
        </FadeUp>
      </div>

      <h1 className="hero-headline">
        <RevealLine as="span" className="word-block" delay={0}>We design</RevealLine>
        <RevealLine as="span" className="word-block indent" delay={120}>
          & <span className="serif">engineer</span>
        </RevealLine>
        <RevealLine as="span" className="word-block" delay={240}>software</RevealLine>
        <RevealLine as="span" className="word-block indent" delay={360}>
          that <span className="serif">ships.</span>
        </RevealLine>
      </h1>


      <div className="hero-bottom">
        <FadeUp delay={200}>
          <div>
            <div className="hero-stat-num">24</div>
            <div className="hero-stat-label">Products shipped</div>
          </div>
        </FadeUp>
        <FadeUp delay={300}>
          <div>
            <div className="hero-stat-num">6<span style={{fontFamily:'Geist', fontStyle:'normal'}}>w</span></div>
            <div className="hero-stat-label">Avg. time to launch</div>
          </div>
        </FadeUp>
        <FadeUp delay={400}>
          <div style={{display:'flex', justifyContent:'flex-end'}}>
            <a href="#contact" className="btn" data-cursor="invert">
              <span className="dot" /> Start a project
            </a>
          </div>
        </FadeUp>
      </div>
    </section>
  );
}

// ======== MARQUEE ========
function Marquee() {
  const items = ['Web apps', 'Native mobile', 'AI features', 'MVPs', 'Design systems', 'Internal tools'];
  const doubled = [...items, ...items];
  return (
    <div className="marquee" aria-hidden>
      <div className="marquee-track">
        {doubled.map((it, i) => (
          <span className="marquee-item" key={i}>{it}</span>
        ))}
      </div>
    </div>
  );
}

// ======== SERVICES ========
const SERVICES = [
  {
    n: '01',
    title: 'Web Applications',
    desc: 'Production-grade web apps with typed APIs, auth, billing, and admin , deployed on day one.',
    tags: ['Next.js', 'tRPC', 'Postgres', 'Stripe'],
  },
  {
    n: '02',
    title: 'Mobile Apps',
    desc: 'Native-feeling iOS & Android apps from a single codebase. OTA updates, crash-free releases.',
    tags: ['React Native', 'Expo', 'Sentry'],
  },
  {
    n: '03',
    title: 'AI Features',
    desc: 'Streaming UIs, retrieval, agents, evals. Shipped behind a real product , not a demo.',
    tags: ['LLM', 'RAG', 'Evals', 'Vector DB'],
  },
  {
    n: '04',
    title: 'MVPs',
    desc: 'Zero-to-launch builds for founders. A narrow, polished product in users\' hands in weeks.',
    tags: ['Fixed scope', '4–8 wks'],
  },
];

function Services() {
  return (
    <section className="section page" id="services">
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom: 80, gap: 48, flexWrap:'wrap'}}>
        <div>
          <div className="eyebrow" style={{marginBottom: 32}}>
            <span>[ 02 / Services ]</span>
          </div>
          <h2 className="display" style={{fontSize:'clamp(48px, 8vw, 140px)'}}>
            <RevealLine as="span" className="word-block">What we</RevealLine>
            <RevealLine as="span" className="word-block" delay={100}><span className="serif">build.</span></RevealLine>
          </h2>
        </div>
        <FadeUp delay={300}>
          <p style={{maxWidth: 360, color: 'var(--fg-2)', fontSize: 15, lineHeight: 1.5}}>
            Four focused disciplines. Every engagement is scoped, priced, and shipped
            with the same discipline, no matter the surface.
          </p>
        </FadeUp>
      </div>

      <div className="services-grid">
        {SERVICES.map((s) => (
          <div className="service-row" data-cursor="hover" key={s.n}>
            <div className="service-num">{s.n}</div>
            <div className="service-title">{s.title}</div>
            <div className="service-desc">{s.desc}</div>
            <div className="service-arrow">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                <path d="M3 11L11 3M11 3H5M11 3V9" stroke="currentColor" strokeWidth="1.5" />
              </svg>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ======== PROCESS ========
const STEPS = [
  { n: '01', title: 'Scoping call', dur: 'Week 0', desc: 'A 60-minute working session. We leave with a one-pager: problem, users, scope, success criteria, and a fixed price.' },
  { n: '02', title: 'Shape', dur: 'Week 1', desc: 'Research, flows, and a clickable prototype. We agree on exactly what will and won\'t exist at launch.' },
  { n: '03', title: 'Build', dur: 'Week 2–5', desc: 'Daily commits, weekly demos. You see real software in a real environment from day two.' },
  { n: '04', title: 'Ship', dur: 'Week 6', desc: 'Production launch, telemetry, and a 30-day stabilization window included.' },
  { n: '05', title: 'Iterate', dur: 'Ongoing', desc: 'Optional monthly retainer , steady, predictable velocity once users are in the product.' },
];

function Process() {
  return (
    <section className="section page" id="process">
      <div className="process">
        <div>
          <div className="eyebrow" style={{marginBottom: 32}}>
            <span>[ 03 / Process ]</span>
          </div>
          <h2 className="display" style={{fontSize:'clamp(48px, 7vw, 120px)'}}>
            <RevealLine as="span" className="word-block">Six weeks</RevealLine>
            <RevealLine as="span" className="word-block" delay={100}>from call</RevealLine>
            <RevealLine as="span" className="word-block" delay={200}>to <span className="serif">launch.</span></RevealLine>
          </h2>
          <FadeUp delay={400}>
            <p style={{marginTop: 32, maxWidth: 440, color:'var(--fg-2)', fontSize: 15, lineHeight: 1.6}}>
              A deliberate process, tuned for non-technical founders. You'll never wonder what we're
              doing this week , because we told you last Friday.
            </p>
          </FadeUp>
        </div>
        <div className="process-steps">
          {STEPS.map((s) => (
            <FadeUp key={s.n} className="process-step">
              <div className="process-step-num">{s.n}</div>
              <div className="process-step-title">{s.title}</div>
              <div className="process-step-dur">{s.dur}</div>
              <div className="process-step-desc">{s.desc}</div>
            </FadeUp>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, Marquee, Services, Process });