function ProcessStep({ number, label, title, body, delay }) {
  return (
    <motion.div {...fadeUp(delay)}
      style={{
        background: 'var(--card)',
        border: '1px solid var(--border)',
        borderRadius: 4,
        padding: 32,
        display: 'flex', flexDirection: 'column',
        gap: 18, position: 'relative', overflow: 'hidden',
      }}>
      <div style={{
        position: 'absolute', top: 0, left: 0, height: 2, width: '40%',
        background: 'var(--accent)',
      }} />

      <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
        <span style={{
          fontFamily: "'Space Mono', monospace", fontWeight: 700,
          fontSize: 11, letterSpacing: '0.22em', color: 'var(--muted)',
        }}>STEP {String(number).padStart(2, '0')}</span>
        <span style={{ flex: 1, height: 1, background: 'var(--border)' }} />
        <span className="eyebrow" style={{ color: 'var(--accent)' }}>{label}</span>
      </div>

      <h3 className="h3" style={{ fontSize: 16, lineHeight: 1.3 }}>{title}</h3>

      <p className="body-muted" style={{ marginTop: 'auto' }}>{body}</p>
    </motion.div>
  );
}

function Process() {
  const steps = [
    {
      label: '90-MIN CALL',
      title: 'UNDERSTAND THE OPERATION',
      body: "A focused conversation about how the business actually runs day to day — what the repetitive work looks like, where time is being spent, what tasks people do on autopilot. Not a discovery call for selling. A real look at your operation.",
    },
    {
      label: 'WRITTEN BRIEF',
      title: 'IDENTIFY THE RIGHT FIX',
      body: "Out of everything that surfaces, one problem is the right starting point. We write it down: here’s the problem, here’s why it’s the right one to fix first, here’s what a working solution looks like.",
    },
    {
      label: 'CUSTOM TOOL',
      title: 'BUILD IT — AND MAKE SURE IT RUNS',
      body: "Built for that specific task, for that specific person. Not a prototype. Not a proof of concept. Something they use on day one in their actual workflow — without setup or training on your end.",
    },
  ];

  return (
    <section id="process">
      <div className="container">
        <div style={{ marginBottom: 56, maxWidth: 760 }}>
          <motion.div {...fadeUp(0)} style={{ marginBottom: 16 }}>
            <span className="eyebrow" style={{ color: 'var(--muted)' }}>02 · HOW IT WORKS</span>
          </motion.div>
          <motion.h2 {...fadeUp(0.06)} className="h2" style={{ marginBottom: 24 }}>
            THREE STAGES.<br />
            NO JARGON.<br />
            <span className="accent-it" style={{
              fontWeight: 400, fontSize: 'clamp(22px, 3vw, 32px)',
              textTransform: 'none', letterSpacing: '0',
            }}>Understanding first. Working tool second.</span>
          </motion.h2>
          <motion.p {...fadeUp(0.14)} className="body-muted" style={{ maxWidth: 600 }}>
            Every other AI vendor runs assessment {'→'} report {'→'} proposal for more work. We run
            understanding {'→'} working tool. You leave the engagement with something that runs
            {'—'} not a plan for what could run.
          </motion.p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
          gap: 18,
        }}>
          {steps.map((s, i) => (
            <ProcessStep key={i} number={i + 1} delay={i * 0.1} {...s} />
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Process, ProcessStep });