function Process() {
  const steps = [
    {
      num: "01",
      tag: "Week 1",
      title: "Discover",
      desc: "We spend a half-day with your team. Watch the work happen. Find the three tasks costing you the most hours — and the one that secretly drives everyone mad.",
      deliverables: ["AI-readiness audit", "Top-3 opportunity map", "Tool stack review"],
    },
    {
      num: "02",
      tag: "Week 2–4",
      title: "Build",
      desc: "We pick one — just one — and ship it. A custom GPT, a workflow, an agent. Small enough to finish, useful enough to feel.",
      deliverables: ["Working pilot", "Documentation", "Team walkthrough"],
    },
    {
      num: "03",
      tag: "Ongoing",
      title: "Scale",
      desc: "Once the first one earns its keep, we move to the next. Monthly check-ins, a shared Slack, and a roadmap that grows with you.",
      deliverables: ["Monthly review", "On-tap support", "Quarterly roadmap"],
    },
  ];

  return (
    <section className="process" id="process">
      <div className="process-grid-bg" />
      <div className="container">
        <div className="process-header reveal">
          <span className="eyebrow">How we work</span>
          <h2 className="h-section">Three steps. No theatre.</h2>
        </div>

        <div className="process-steps">
          <div className="process-line" aria-hidden />
          {steps.map((s, i) => (
            <div key={i} className="proc-card reveal" style={{ transitionDelay: `${i * 0.12}s` }}>
              <div className="proc-num">{s.num}</div>
              <span className="tag">{s.tag}</span>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
              <ul className="proc-deliverables">
                {s.deliverables.map((d, j) => <li key={j}>{d}</li>)}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Process = Process;