/* Process — How I work, four steps */

const STEPS = [
  {
    n: '01',
    title: 'Map the friction',
    body: 'A working session to find where time, money, or attention is leaking. Not where you think — where it actually is.',
    artifact: 'Friction map · 1 week',
  },
  {
    n: '02',
    title: 'Prototype the cut',
    body: 'A real, working slice that proves the smallest version of the fix. No slideware, no roadmaps for the roadmap.',
    artifact: 'Working prototype · 2 weeks',
  },
  {
    n: '03',
    title: 'Ship to production',
    body: 'Wire it into your stack — auth, monitoring, cost guardrails. Deploy on Vercel / DO / Cloudflare. Measure the delta.',
    artifact: 'Live system · 4–6 weeks',
  },
  {
    n: '04',
    title: 'Hand off or stay on',
    body: 'Documented runbooks, type-safe boundaries, dashboards your team owns. Or I stay on retainer for the next thing.',
    artifact: 'Handoff or retainer',
  },
];

const Process = () => {
  const ref = React.useRef(null);
  const { scrollYProgress } = useScroll({ target: ref, offset: ['start 80%', 'end 20%'] });
  const lineH = useTransform(scrollYProgress, [0, 1], ['0%', '100%']);

  return (
  <Section id="process" className="border-t hairline">
    <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-14">
      <div>
        <Eyebrow index="03">How I work</Eyebrow>
        <SectionTitle className="mt-5">
          Small loops,<br />
          <span style={{ fontFamily: "'Instrument Serif', serif", fontStyle: 'italic', fontWeight: 400 }}>shipped fast.</span>
        </SectionTitle>
      </div>
      <p className="max-w-md text-sm leading-relaxed" style={{ color: 'var(--fg-muted)' }}>
        Four phases, no bloat. Most engagements run six to ten weeks before the system is doing real work.
      </p>
    </div>

    <div ref={ref} className="relative grid md:grid-cols-2 lg:grid-cols-4 gap-px" style={{ background: 'var(--line)' }}>
      {/* scroll-linked progress line (desktop) */}
      <div className="hidden lg:block absolute left-0 right-0 top-12 h-px pointer-events-none" style={{ background: 'var(--line)' }} aria-hidden>
        <motion.div className="h-full origin-left" style={{ scaleX: scrollYProgress, background: 'var(--accent)' }} />
      </div>
      {/* mobile vertical line */}
      <div className="lg:hidden absolute left-7 top-0 bottom-0 w-px pointer-events-none" style={{ background: 'var(--line)' }} aria-hidden>
        <motion.div className="w-full origin-top" style={{ scaleY: scrollYProgress, background: 'var(--accent)', height: '100%' }} />
      </div>

      {STEPS.map((s, idx) => (
        <motion.div
          key={s.n}
          {...fadeUp(idx * 0.08)}
          whileHover={{ y: -4 }}
          className="relative p-7 md:p-8 group"
          style={{ background: 'var(--bg)' }}
        >
          <div className="flex items-center gap-3 mb-6">
            <motion.span
              whileHover={{ scale: 1.1 }}
              className="font-mono text-xs px-2 py-1 rounded-md"
              style={{ background: 'var(--accent-soft)', color: 'var(--accent)' }}
            >{s.n}</motion.span>
            <span className="h-px flex-1" style={{ background: 'var(--line)' }}></span>
          </div>
          <h3 className="text-lg font-medium tracking-tight">{s.title}</h3>
          <p className="mt-3 text-sm leading-relaxed" style={{ color: 'var(--fg-muted)', textWrap: 'pretty' }}>{s.body}</p>
          <div className="mt-6 pt-4 border-t hairline font-mono text-[10px] uppercase tracking-[0.18em]" style={{ color: 'var(--fg-dim)' }}>
            {s.artifact}
          </div>
        </motion.div>
      ))}
    </div>
  </Section>
  );
};

window.Process = Process;