const HowItWorks = () => {
  const steps = [
    {
      idx: "01",
      head: "Step 01 · Deploy",
      h: "Place it.",
      bullets: [
        "Mounts at roof level — not pointed at lawns",
        "Self-contained field unit · no wiring or permits",
        "Minutes from truck to armed",
      ],
      glyph: "◼︎  ROOF-MOUNTED · SELF-CONTAINED · ARMED",
    },
    {
      idx: "02",
      head: "Step 02 · Operate",
      h: "Tap to view.",
      bullets: [
        "Live HD over 5G, any phone",
        "Crew leads + back-office see every job",
        "No VPN, no NVR, no seats",
      ],
      glyph: "◼︎  LIVE HD · 5G · IOS + ANDROID",
    },
    {
      idx: "03",
      head: "Step 03 · Protect",
      h: "Foreman gets alerts.",
      bullets: [
        "BLE harness off-body → instant push alert",
        "Magnetic ladder sensor → flagged at sundown",
        "Before OSHA. Before the climb.",
      ],
      glyph: "◼︎  BLE SAFETY · LADDER · OFF-HARNESS",
    },
    {
      idx: "04",
      head: "Step 04 · Defend",
      h: "AI dispatches.",
      bullets: [
        "On-device AI flags intrusion in real time",
        "Central station verifies and dispatches",
        "Hand over a signed clip that proves itself",
      ],
      glyph: "◼︎  CENTRAL STATION · SIGNED EVIDENCE",
    },
  ];
  return (
    <section className="section" id="how" style={{ paddingTop: 80 }}>
      <div className="wrap">
        <div className="section-head">
          <Reveal><Eyebrow>How It Works</Eyebrow></Reveal>
          <Reveal delay={80}>
            <h2>Four steps from<br/>truck to signed clip.</h2>
          </Reveal>
        </div>
      </div>
      <div className="wrap">
        <div className="how-grid">
          {steps.map((s, i) => (
            <Reveal key={s.idx} delay={i * 120}>
              <div className="how-step">
                <div className="idx tabular">{s.idx}</div>
                <div className="step-head">{s.head}</div>
                <h3>{s.h}</h3>
                <ul className="step-bullets">
                  {s.bullets.map((b) => <li key={b}>{b}</li>)}
                </ul>
                <div className="glyph">{s.glyph}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { HowItWorks });