const STEPS = [
  { n: '01', t: 'A proper chat', d: 'Half an hour on the phone or over coffee. We ask what you actually need, what\'s broken, what you\'ve tried. If we\'re not the right fit we\'ll tell you that day.', len: 'Day 1' },
  { n: '02', t: 'A written quote', d: 'One page. Scope, price, timeline, what\'s not included. No hourly rates, no "estimates subject to change". If we\'re wrong on the quote, that\'s on us.', len: 'Within 3 days' },
  { n: '03', t: 'Build it', d: 'You get a shared folder and a weekly update (text, not a meeting). We show work in progress — you\'ll probably change your mind once, we\'ve budgeted for that.', len: 'Usually 2–6 weeks' },
  { n: '04', t: 'Launch & look after it', d: 'We launch quietly, watch it for a week, and hand over notes your future developer will thank us for. If something breaks in the first 60 days it\'s free.', len: 'Week of launch' },
  { n: '05', t: 'Stay in touch', d: 'Ongoing is opt-in, monthly, cancel anytime. If you don\'t need us, you don\'t pay us — we\'d rather you call when something actually matters.', len: 'If you want it' },
];

const Process = () => {
  const ref = useReveal();
  const [active, setActive] = useState(0);
  return (
    <section id="process" className="section" style={{ background: 'var(--section-alt)' }}>
      <div className="container">
        <div ref={ref} className="reveal">
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom: 56, flexWrap:'wrap', gap: 20 }}>
            <div>
              <span className="eyebrow">How it usually goes</span>
              <h2 className="h-xl" style={{ marginTop: 20, maxWidth: 720 }}>
                No discovery workshops. <span className="serif-i" style={{color:'var(--accent)'}}>No 90-day roadmaps.</span>
              </h2>
              <p style={{ fontSize: 17, color:'var(--fg-2)', marginTop: 20, lineHeight: 1.55, maxWidth: 560 }}>
                Five steps. We've done it roughly this way about forty times. It's not glamorous on a slide, but it's honest.
              </p>
            </div>
          </div>

          <div className="split" style={{ alignItems:'flex-start' }}>
            <div style={{ display:'flex', flexDirection:'column' }}>
              {STEPS.map((s, i) => (
                <button key={s.n} onMouseEnter={() => setActive(i)} onFocus={() => setActive(i)} onClick={() => setActive(i)}
                  style={{
                    display:'grid', gridTemplateColumns: 'auto 1fr auto', gap: 16, alignItems:'center',
                    padding: '22px 4px', borderBottom: '1px solid var(--line)',
                    textAlign:'left', color: active === i ? 'var(--fg)' : 'var(--fg-3)',
                    transition: 'color .3s', cursor:'pointer', background:'none', border:'none', borderBottom:'1px solid var(--line)',
                  }}>
                  <span className="mono" style={{ fontSize: 12, color: active === i ? 'var(--accent)' : 'var(--fg-3)' }}>{s.n}</span>
                  <span style={{ fontSize: 'clamp(18px, 3vw, 22px)', fontFamily:'var(--serif)', letterSpacing:'-0.02em' }}>{s.t}</span>
                  <span className="mono" style={{ fontSize: 11 }}>{s.len}</span>
                </button>
              ))}
            </div>

            <div style={{ position: 'sticky', top: 120 }}>
              <div className="glass" style={{ padding: 'clamp(24px, 4vw, 40px)', minHeight: 340 }}>
                <div style={{
                  fontFamily:'var(--serif)', fontSize: 'clamp(80px, 12vw, 160px)', lineHeight: 0.85,
                  letterSpacing: '-0.04em', color: 'var(--fg-3)', opacity: .35,
                }}>{STEPS[active].n}</div>
                <div style={{ fontSize: 28, fontWeight: 500, letterSpacing:'-0.02em', marginTop: 12, fontFamily:'var(--serif)' }}>{STEPS[active].t}</div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--fg-3)', letterSpacing:'.14em', textTransform:'uppercase', marginTop: 6 }}>
                  {STEPS[active].len}
                </div>
                <p style={{ fontSize: 17, color:'var(--fg-2)', lineHeight: 1.6, marginTop: 24, maxWidth: 520 }}>
                  {STEPS[active].d}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Process = Process;