// Process.jsx — How we work (4 steps on dark)
const STEPS = [
  { n: "01", title: "We sit with you.", desc: "A morning in your shop, van, or studio. We learn the real workflow, not the one on the website." },
  { n: "02", title: "A plan, in plain English.", desc: "No decks full of jargon. A few pages, what we'll build, what it costs, what it saves. Yours to keep." },
  { n: "03", title: "We build in the open.", desc: "Weekly Loom updates, a shared Linear board, real WhatsApp replies. You always know where we're at." },
  { n: "04", title: "You own it.", desc: "Handover with docs, training, and a month of free support. Then it's yours — no lock-in, no mystery vendor." },
];

function Process() {
  return (
    <section className="section section--dark" id="process">
      <div className="container-xl">
        <header className="section__head reveal">
          <div className="section__num">02 &nbsp;/&nbsp; How we work</div>
          <SectionOrbit variant="process" />
          <h2 className="section__title">A quiet, <em>unhurried</em> way of building.</h2>
        </header>
        <p className="reveal" style={{maxWidth:'60ch', fontSize:'var(--fs-20)', color:'rgba(251,250,255,0.7)', lineHeight:1.55, margin:'0 0 var(--sp-10)'}} data-delay="1">
          Four steps. No surprises in the middle, no ambush invoices at the end. The same rhythm whether we're writing your website copy or plumbing GPT into your booking system.
        </p>
        <div className="process">
          {STEPS.map((s, i) => (
            <div className="process__step reveal" key={s.n} data-delay={i+1} data-num={s.n} data-hover>
              <div className="process__num"><span>Step {s.n}</span></div>
              <h4 className="process__title">{s.title}</h4>
              <p className="process__desc">{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Process = Process;