const Pricing = () => {
  return (
    <section className="section" id="pricing">
      <div className="wrap">
        <div className="section-head">
          <Reveal><Eyebrow>Pricing</Eyebrow></Reveal>
          <Reveal delay={80}>
            <h2>One simple rate.<br/>Prepay and the hardware's <span style={{ color: "var(--amber)" }}>on us</span>.</h2>
          </Reveal>
          <Reveal delay={160}>
            <p className="lead">
              Flat monthly service. No per-camera charges, no per-minute
              video fees, no seat tax. Cancel anytime.
            </p>
          </Reveal>
        </div>

        <div className="pricing-grid pricing-grid-3">
          <Reveal>
            <div className="pricing-card">
              <div className="tier">Monthly</div>
              <h3>Month-to-Month</h3>
              <div className="amt">
                <span className="big tabular">$399</span>
                <span className="unit">/ mo</span>
              </div>
              <div className="sub">For crews who want to start without a prepay.</div>
              <ul>
                <li>Field unit · 1 camera · magnetic ladder sensor</li>
                <li>Active-deployment monitoring</li>
                <li>Cryptographic evidence chain</li>
                <li>1 month cloud retention included</li>
                <li>Cancel anytime</li>
              </ul>
              <div className="hardware">
                + <b>$1,000</b> one-time hardware
              </div>
            </div>
          </Reveal>

          <Reveal delay={90}>
            <div className="pricing-card feat">
              <div className="ribbon">Best Value</div>
              <div className="tier">Prepaid</div>
              <h3>3 Months Prepaid</h3>
              <div className="amt">
                <span className="big tabular">$1,197</span>
                <span className="unit">upfront</span>
              </div>
              <div className="sub">3 months of service prepaid. Hardware on us.</div>
              <ul>
                <li>Everything in Monthly</li>
                <li className="pricing-hi"><b>$0 hardware</b> — we ship it</li>
                <li>Priority setup &amp; onboarding</li>
                <li>Auto-renews monthly at $399 after</li>
                <li>Cancel anytime</li>
              </ul>
              <div className="hardware">
                You save <b>$1,000</b> on hardware
              </div>
            </div>
          </Reveal>

          <Reveal delay={180}>
            <div className="pricing-card">
              <div className="tier">Fleet · 5+ Units</div>
              <h3>Fleet Pricing</h3>
              <div className="amt">
                <span className="big tabular">Let's talk</span>
              </div>
              <div className="sub">For crews running 5+ active jobsites or brokers placing books.</div>
              <ul>
                <li>Everything in Prepaid</li>
                <li>Fleet dashboard · crew assignments</li>
                <li>Consolidated billing per policy</li>
                <li>Broker co-pilot access</li>
                <li>Dedicated onboarding</li>
              </ul>
              <div className="hardware" style={{ paddingTop: 24 }}>
                <a href="#demo" className="btn btn-outline btn-small">Contact us <Arrow/></a>
              </div>
            </div>
          </Reveal>
        </div>

        <div className="anchor-line">
          <span className="lbl">What's in the box</span>
          <span>
            Every unit ships with a <b>Sitinel field device</b>, <b>one
            camera</b>, one <b>magnetic ladder sensor</b>, 5G connectivity,
            on-device AI, and the full evidence chain. Add more cameras
            and sensors as your jobsite grows. No per-seat upsell, no
            cloud-GPU meter, no surprise renewal fee.
          </span>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Pricing });