/* global React */

const STEPS = [
  { n: "01", label: "Diagnose", t: "Read the code.", d: "Two weeks reading code, sitting with operators, drawing the map. You get a written architecture, not a slide deck.", m: "2 weeks" },
  { n: "02", label: "Architect", t: "Write the spec.",  d: "One document. The right agents, the right tools, the right boundaries. Reviewed with you before a line of code ships.", m: "1 week" },
  { n: "03", label: "Ship",      t: "Behind your auth.", d: "Working software in your stack, with an eval harness from day one. We deploy. You watch the dashboards turn green.", m: "4–8 weeks" },
  { n: "04", label: "Operate",   t: "Carry the pager.",  d: "On-call rota, monthly model swaps, quarterly architecture reviews. The system doesn't rot when we walk away.", m: "Retainer" },
];

function Process() {
  return (
    <section className="at-section at-process" id="process">
      <div className="at-container">
        <div style={{ marginBottom: 56 }}>
          <div className="at-eyebrow">The method</div>
          <h2 className="at-h-section">Four weeks.<br />Then it runs without you.</h2>
        </div>

        {/* Dashed connector that "draws" left-to-right as section enters view */}
        <div className="at-process-connector" aria-hidden="true"></div>

        <div className="at-process-grid">
          {STEPS.map((step, i) => (
            <div
              key={i}
              className="at-process-step"
              style={{ '--i': i }}
              data-cursor-label={`${step.n} · ${step.label.toLowerCase()}`}
            >
              {/* Big faded ghost number — visual heavyweight, follows brand discipline */}
              <span className="at-process-ghost" aria-hidden="true">{step.n}</span>

              <div className="at-process-num">{step.n} · {step.label}</div>
              <h3 className="at-process-h">{step.t}</h3>
              <p className="at-process-d">{step.d}</p>
              <div className="at-process-meta">→ {step.m}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Process = Process;