// Process — 4 steps with sticky scroll-driven feel
const STEPS = [
  {
    n: '01',
    title: 'we talk',
    sub: 'twenty minutes. zero pressure.',
    body: 'tell me where you\'re stuck. i\'ll tell you, honestly, whether i can help — and exactly what it\'ll cost. by the next morning you have a one-page plan in your inbox. that\'s it.',
    deliv: ['the call', 'a real plan', 'a fixed quote'],
    days: 'day 1',
  },
  {
    n: '02',
    title: 'we shape it',
    sub: 'see it before it\'s built.',
    body: 'i sketch the site (or the workflow) so you can see exactly what you\'re getting before a single line is written. you change anything, anytime. no surprises later.',
    deliv: ['the sketches', 'the words', 'your green light'],
    days: 'day 2–4',
  },
  {
    n: '03',
    title: 'i build, you watch',
    sub: 'live link from day one.',
    body: 'you get a private link the day i start. watch it come together in real time. comment whenever. nothing happens behind a curtain — that\'s how this stays fast.',
    deliv: ['daily updates', 'a live preview', 'video walkthroughs'],
    days: 'day 4–12',
  },
  {
    n: '04',
    title: 'you own it',
    sub: 'plus a month of free fixes.',
    body: 'i hand you the keys, walk you through everything in plain english, and stick around for thirty days to fix anything that pops up. if you\'re not thrilled, you don\'t pay. ever.',
    deliv: ['the handoff', 'a quick training', '30 days on call'],
    days: 'day 12–14',
  },
];

function Process() {
  return (
    <section id="process" className="section" style={{ background: 'var(--bg-2)' }}>
      <SectionHead
        id="how.it.works"
        kicker="how we'll work together"
        title='no agencies. no jargon.<br/><span class="italic-em">no surprises.</span>'
        lede="four steps. fourteen days. a fixed price you agree to before anything starts. if i miss the deadline, the next week is on me."
      />

      <div className="container" style={{ display: 'grid', gap: 0 }}>
        {STEPS.map((s, i) => (
          <Reveal key={s.n} delay={(i % 3) + 1}>
            <Step s={s} last={i === STEPS.length - 1} />
          </Reveal>
        ))}
      </div>
    </section>
  );
}

function Step({ s, last }) {
  return (
    <div className="step-grid" style={{
      display: 'grid',
      gridTemplateColumns: '120px 1fr 200px',
      gap: 32,
      padding: '40px 0',
      borderTop: '1px solid var(--line-2)',
      borderBottom: last ? '1px solid var(--line-2)' : 'none',
      alignItems: 'start',
    }}>
      <div>
        <div className="serif step-number" style={{
          fontSize: 72, lineHeight: 1, letterSpacing: '-0.04em', color: 'var(--ink)',
        }}>{s.n}</div>
        <div className="label" style={{ marginTop: 8 }}>{s.days}</div>
      </div>
      <div>
        <h3 className="serif step-title" style={{
          fontSize: 44, lineHeight: 1, letterSpacing: '-0.03em', margin: 0, fontWeight: 400,
        }}>
          {s.title} <span className="italic-em step-subtitle" style={{ color: 'var(--ink-3)', fontSize: 22 }}>— {s.sub}</span>
        </h3>
        <p style={{ marginTop: 18, maxWidth: 620, color: 'var(--ink-2)', fontSize: 17, lineHeight: 1.55, textWrap: 'pretty' }}>{s.body}</p>
      </div>
      <div className="step-deliverables" style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div className="label">deliverables</div>
        {s.deliv.map(d => (
          <div key={d} className="mono" style={{ fontSize: 12, padding: '6px 10px', border: '1px solid var(--line-2)', borderRadius: 6, background: 'var(--bg)' }}>{d}</div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Process });