/* How it works — 4 step process */

const STEPS = [
  {
    num: "01",
    title: "Diagnose",
    desc: "Two weeks embedded. We audit your workflows, tech, and team skill map — then show you exactly where AI compounds and where it doesn't.",
    time: "Week 1–2"
  },
  {
    num: "02",
    title: "Align",
    desc: "One artifact: a transformation plan your executives sign. Clear scope, measurable outcomes, and a 90-day roadmap.",
    time: "Week 2"
  },
  {
    num: "03",
    title: "Execute",
    desc: "We build, retrain, and ship alongside your people. Paired sessions, not handoffs. Your team learns by shipping.",
    time: "Week 3–12"
  },
  {
    num: "04",
    title: "Hand over",
    desc: "Your team runs it. We stay on-call for 30 days, then step back. No lock-in, no black boxes, no ongoing dependency.",
    time: "Week 12+"
  }
];

function Process() {
  return (
    <section id="process" style={{ background: "var(--bg-1)" }}>
      <div className="container">
        <Reveal>
          <div className="section-head">
            <div className="eyebrow">How we work</div>
            <h2>Twelve weeks from first call to handover.</h2>
            <p className="sub">
              Most transformation programs fail because consultants stay forever.
              Ours finish on time because we're building you an in-house capability — not a dependency.
            </p>
          </div>
        </Reveal>

        <Reveal delay={1}>
          <div className="process">
            {STEPS.map((s, i) => (
              <div className="step" key={s.num}>
                <div className="step-num">PHASE {s.num}</div>
                <div className="step-title">{s.title}</div>
                <div className="step-desc">{s.desc}</div>
                <div className="step-time">→ {s.time}</div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Process });