// Process.jsx — 5-step timeline
function Process() {
  const steps = [
    { n: "01", t: "Discovery", d: "We map your operation in a 30-min call. No homework, no scoping doc.", dur: "Day 1" },
    { n: "02", t: "Strategy", d: "You get a written plan: what gets automated, what gets staffed, what it costs.", dur: "Day 2–3" },
    { n: "03", t: "Build", d: "Engineers and operators ship the first workflow live, end-to-end.", dur: "Day 4–7" },
    { n: "04", t: "Deploy", d: "We run it for a week alongside you. You sign off, we hand over dashboards.", dur: "Week 2" },
    { n: "05", t: "Support", d: "Named ops lead, monthly review, agents under monitoring 24/7.", dur: "Ongoing" },
  ];

  return (
    <section className="section process-section" id="process">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow"><span className="dot"></span>How we work</span>
          <h2>Five steps. <em>From first call to running workflow.</em></h2>
          <p>
            We've shortened the typical agency engagement from months to days by doing the
            scoping live, building lean, and shipping early.
          </p>
        </div>

        <div className="process">
          <div className="process-track"></div>
          <div className="process-grid">
            {steps.map((s, i) => (
              <div className="process-step reveal" style={{ transitionDelay: `${i * 90}ms` }} key={s.n}>
                <div className="step-num">{s.n}</div>
                <div className="duration">{s.dur}</div>
                <h4>{s.t}</h4>
                <p>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.Process = Process;