const DataUseNote = () => (
  <section className="datause" id="data-use-note">
    <div className="wrap datause-card">
      <div className="lbl">Data Use · Transparency</div>
      <p>
        Customer footage helps train Sitinel's on-device AI under a written
        agreement. Faces and license plates will be anonymized on-device
        before any training ingestion. Opt-out is available at the base
        price — no penalty, no feature tax. The evidence chain is kept
        separate from training data, always.
      </p>
      <a href="data-use.html" className="more">Read the policy →</a>
    </div>
  </section>
);

const DemoCTA = () => {
  return (
    <section className="demo" id="demo">
      <div className="wrap">
        <div className="demo-head">
          <Reveal><Eyebrow>Request a Demo</Eyebrow></Reveal>
          <Reveal delay={80}>
            <h2>See it <span className="hi">armed</span>.<br/>Live, on a roof, this week.</h2>
          </Reveal>
          <Reveal delay={160}>
            <p>
              Tell us a little about your crew. We'll ship a demo unit, or
              schedule a 20-minute walkthrough — whichever moves faster for you.
            </p>
          </Reveal>
        </div>
        <Reveal delay={200}>
          <form className="demo-form" action="/api/lead" method="post">
            <div className="fld">
              <label>Name</label>
              <input required name="name" placeholder="Full name" />
            </div>
            <div className="fld">
              <label>Company</label>
              <input required name="company" placeholder="Roofing co. or brokerage" />
            </div>
            <div className="fld">
              <label>Email</label>
              <input required type="email" name="email" placeholder="you@company.com" />
            </div>
            <div className="fld">
              <label>Phone</label>
              <input required name="phone" placeholder="(___) ___-____" />
            </div>
            <div className="fld">
              <label>Role</label>
              <select name="role" defaultValue="">
                <option value="" disabled>Select one</option>
                <option value="roofer">Roofing contractor</option>
                <option value="broker">Insurance broker</option>
                <option value="other">Other</option>
              </select>
            </div>
            <div className="fld">
              <label>Crews</label>
              <input name="crews" placeholder="How many crews?" />
            </div>
            <div className="fld full">
              <label>How many active jobsites?</label>
              <textarea name="message" placeholder="Rough count + any detail you want to share." />
            </div>
            <div className="submit-row">
              <span className="hint">We reply within one business day.</span>
              <button type="submit" className="btn btn-amber">
                Request Demo <Arrow/>
              </button>
            </div>
          </form>
        </Reveal>
      </div>
    </section>
  );
};

const Footer = () => (
  <footer className="footer">
    <div className="wrap">
      <div className="footer-grid">
        <div>
          <div className="brand">
            <BrandLockup height={28} />
          </div>
          <p className="tag">On-prem AI cameras for the crews who build Florida.
            On-device AI · Cryptographic evidence · Defensible by design.</p>
          <div className="mail">hello@sitinel.ai</div>
        </div>
        <div>
          <h4>Product</h4>
          <ul>
            <li><a href="#how">How it works</a></li>
            <li><a href="evidence-chain.html">Evidence chain</a></li>
            <li><a href="#storage">Storage tiers</a></li>
            <li><a href="#pricing">Pricing</a></li>
          </ul>
        </div>
        <div>
          <h4>For partners</h4>
          <ul>
            <li><a href="brokers.html">For brokers</a></li>
            <li><a href="mailto:brokers@sitinel.ai">brokers@sitinel.ai</a></li>
            <li><a href="#demo">Request demo</a></li>
          </ul>
        </div>
        <div>
          <h4>Trust & Policy</h4>
          <ul>
            <li><a href="evidence-chain.html">Evidence chain</a></li>
            <li><a href="data-use.html">Data-use policy</a></li>
            <li><a href="data-use.html">Privacy</a></li>
            <li><a href="#">Terms of service</a></li>
            <li><a href="#">Security</a></li>
          </ul>
        </div>
      </div>
      <div className="bottom">
        <span>© 2026 Sitinel, Inc.</span>
        <span>Built in Tampa · FL</span>
      </div>
    </div>
  </footer>
);

const StickyMobile = () => (
  <div className="sticky-mobile">
    <div className="price">
      <span className="hi">$399</span>/mo · <span className="hi">$0</span> hardware prepaid
    </div>
    <a href="#demo" className="btn btn-amber btn-small">Demo</a>
  </div>
);

Object.assign(window, { DataUseNote, DemoCTA, Footer, StickyMobile });