const Hero = () => (
  <section className="hero" id="top">
    <div className="hero-grid-bg" />
    <div className="hero-glow" />
    <div className="hero-pins" />
    <div className="wrap hero-inner">
      <div>
        <div className="hero-live">
          <span className="dot" /> On-Prem AI · Florida Roofing
        </div>
        <h1>
          <span className="line-1">Your Roof.</span><br/>
          <span className="line-2">Your Proof.</span><br/>
          <span className="line-3">On Record.</span>
        </h1>
        <p className="hero-sub">
          <strong>On-prem AI</strong> — your cameras, your compute, your data advantage.
          Self-contained field unit on your jobsite, inference on the box, evidence
          you can defend.
        </p>
        <div className="hero-cta">
          <a href="#demo" className="btn btn-amber">Request Demo <Arrow/></a>
          <a href="#pricing" className="btn btn-outline">See Pricing</a>
        </div>
        <div className="hero-sig">
          <div className="item">
            <div className="k">$399<span style={{ color: "var(--muted)", fontSize: 14, marginLeft: 4 }}>/mo</span></div>
            <div className="l">+ $0 hardware when prepaid</div>
          </div>
          <div className="item">
            <div className="k">Signed</div>
            <div className="l">Cryptographic tamper-proof chain</div>
          </div>
          <div className="item">
            <div className="k">Armed</div>
            <div className="l">Active-deployment monitoring</div>
          </div>
        </div>
      </div>

      <div className="hero-gear-wrap">
        <span className="gear-corner tl">Field Unit <span className="v">ARMED</span></span>
        <span className="gear-corner tr">Network <span className="v">5G</span></span>
        <span className="gear-corner bl">Inference <span className="v">ON-DEVICE</span></span>
        <span className="gear-corner br">Cam 01 · 02 <span className="v">NOMINAL</span></span>
        <img className="hero-mark" src="assets/sitinel-mark.svg" alt="Sitinel" />
      </div>
    </div>
  </section>
);

Object.assign(window, { Hero });