// Process page
function ProcessPage({ onQuote }) {
  const chapters = [
    {
      n: '01', t: 'Scope', d: '3–5 days',
      body: [
        'We start with a 45-minute call. No slides, no pitch — just questions. What are you trying to build? Who is it for? What does "done" look like? What have you tried already?',
        'Then we go away and write. You get back a plain-English brief: the problem as we understand it, the shape of a solution, a rough architecture, risk areas, and a proposal with either a fixed scope or a capped-time-and-materials path. Usually two pages. You can read it on a phone.',
      ],
      ai: 'AI drafts initial architectures, surfaces prior art in the space, and — if you share an existing codebase — summarizes it so we walk into kick-off already oriented.',
      color: 'teal',
    },
    {
      n: '02', t: 'Design', d: '1–2 weeks',
      body: [
        'Interface and architecture happen in parallel. Low-fi flows first, then a visual direction, then a clickable prototype you can break. Data model and API sketches happen in the same week so nothing gets designed that can\'t be built.',
        "You're in Figma and Slack with us. Reviews are short (30 minutes) and frequent (twice a week). The goal is to make the costly decisions while they're still cheap.",
      ],
      ai: 'AI generates three or four layout alternatives for us to critique, writes first-draft schemas from our ERD sketches, and pressure-tests our API designs against common edge cases.',
      color: 'yellow',
    },
    {
      n: '03', t: 'Build', d: '2–8 weeks',
      body: [
        "Every working day ends with something demo-able on a staging URL you can bookmark. Weekly 20-minute syncs. Async updates the rest of the time. Your PM dashboard is a Linear board you already have access to.",
        "When scope shifts — it always does a little — we surface the tradeoff the same day, and either absorb it, trade it for something, or flag it for the next sprint. No quiet accumulation of change requests.",
      ],
      ai: "AI pair-programs on boilerplate, reviews every pull request alongside a human reviewer, and writes the first draft of our tests. No code reaches your staging branch without a human sign-off.",
      color: 'red',
    },
    {
      n: '04', t: 'Handover', d: 'ongoing',
      body: [
        "We don't vanish. The handover week covers: a runbook, architecture docs, a recorded walkthrough per subsystem, and 30 days of no-cost email support while your team gets its hands on it.",
        "Most clients keep us on a light monthly retainer after that — a few hours a week for the ongoing small stuff. The option is there; it's never a condition of working with us.",
      ],
      ai: "AI generates and maintains the documentation so it doesn't rot. When the code changes, the docs get a PR too.",
      color: 'teal',
    },
  ];

  return (
    <main className="process-page">
      <section className="page-hero">
        <Reveal>
          <p className="eyebrow">Process</p>
          <h1>How we work — and where AI fits in.</h1>
          <p className="page-lead">We're opinionated about process because process is where most agency projects quietly fall apart. Here's ours, in detail, including the honest parts.</p>
        </Reveal>
      </section>

      <section className="chapters">
        {chapters.map((c, i) => (
          <Reveal key={c.n} delay={i * 40}>
            <article className={`chapter chapter-${c.color}`}>
              <div className="chapter-rail">
                <span className="chapter-n mono">{c.n}</span>
                <span className="chapter-d mono">{c.d}</span>
              </div>
              <div className="chapter-body">
                <h2>{c.t}</h2>
                {c.body.map((p, j) => <p key={j}>{p}</p>)}
                <aside className="ai-callout">
                  <span className="ai-label mono">WHAT AI DOES HERE</span>
                  <p>{c.ai}</p>
                </aside>
              </div>
            </article>
          </Reveal>
        ))}
      </section>

      <Reveal>
        <section className="human-principle">
          <p className="eyebrow">The human principle</p>
          <h2>Every AI output gets a human review before it touches your product.</h2>
          <p>We're enthusiastic about AI because it lets a small team do more. We're also careful about it, because AI is fluent and confident in ways that can hide small mistakes. Every generated line of code, every drafted copy block, every suggested architecture passes through a person who's been doing this long enough to notice. That's the deal — and it's not changing.</p>
        </section>
      </Reveal>

      <Reveal>
        <section className="svc-closing">
          <h2>Ready to start?</h2>
          <p>A short brief gets us moving. No call required to get a first response.</p>
          <button className="btn btn-primary btn-lg" onClick={onQuote}>Request a quote</button>
        </section>
      </Reveal>
    </main>
  );
}

Object.assign(window, { ProcessPage });