// ─────────────────────────────────────────────────────────
//  Process Timeline — visual 4-week engagement journey
// ─────────────────────────────────────────────────────────

const STEPS = [
  {
    n: '01', wk: 'Week 0 · Pre-flight',
    title: 'Diagnose.',
    desc: 'A 14-minute walkthrough. We map your three highest-leverage rebuilds and confirm fit.',
    deliv: ['Free audit', 'Scope clarity', 'No-pressure exit'],
  },
  {
    n: '02', wk: 'Week 1–2 · Foundations',
    title: 'Architect.',
    desc: 'Design tokens, component library, content architecture, and the automation graph behind it.',
    deliv: ['Token system', 'Component library', 'n8n flow map'],
  },
  {
    n: '03', wk: 'Week 2–3 · Build',
    title: 'Engineer.',
    desc: 'Production build with edge-deployed serverless layer. Lighthouse 95+ enforced on every commit.',
    deliv: ['Staging URL', 'CMS handover', 'Lighthouse 95+'],
  },
  {
    n: '04', wk: 'Week 4 · Ship',
    title: 'Launch.',
    desc: 'Domain cutover, live monitoring, and a 30-day post-launch retainer included by default.',
    deliv: ['Zero-downtime cutover', '30-day retainer', 'Loom handover'],
  },
];

function Process() {
  return (
    <section className="section shell" data-screen-label="Process">
      <div>
        <div className="kicker">§Process · 4-week engagement default</div>
        <h2 style={{
          fontFamily:'var(--serif)', fontWeight:400,
          fontSize:'clamp(40px, 5vw, 76px)', lineHeight:1.0,
          letterSpacing:'-0.02em', margin:'18px 0 0', maxWidth:'20ch',
          textWrap:'balance',
        }}>
          From signed scope<br/>
          to <span style={{fontStyle:'italic', color:'var(--accent)'}}>shipped asset.</span>
        </h2>
      </div>

      <div className="process-grid">
        {STEPS.map((s, i) => (
          <div key={s.n} className="process-step">
            <div className="num">{s.n}</div>
            <div className="wk">{s.wk}</div>
            <h4>{s.title}</h4>
            <p>{s.desc}</p>
            <ul>
              {s.deliv.map(d => <li key={d}>{d}</li>)}
            </ul>
          </div>
        ))}
      </div>
    </section>
  );
}

window.Process = Process;