/* global React */
function Foot() {
  return (
    <footer className="foot">
      <div className="wrap">
        <div className="foot-grid">
          <div>
            <a className="brand" href="#"><BrandMark /> <span>Dispatch</span></a>
            <p className="muted" style={{ marginTop: 16, fontSize: 14, maxWidth: "32ch", lineHeight: 1.5 }}>
              An AI-native commerce operating system. Made in San Francisco and Kyoto.
            </p>
            <div style={{ display: "flex", gap: 8, marginTop: 20 }}>
              <a href="#" className="btn btn-outline" style={{ height: 34, fontSize: 13 }}>Start building <Arrow /></a>
              <a href="#" className="btn btn-ghost" style={{ height: 34, fontSize: 13 }}>Book a demo</a>
            </div>
          </div>
          <div>
            <h4>Product</h4>
            <ul>
              <li><a href="#">Storefront</a></li>
              <li><a href="#">Operator</a></li>
              <li><a href="#">Brand kit</a></li>
              <li><a href="#">Checkout</a></li>
              <li><a href="#">Integrations</a></li>
            </ul>
          </div>
          <div>
            <h4>For</h4>
            <ul>
              <li><a href="#">Founders</a></li>
              <li><a href="#">Agencies</a></li>
              <li><a href="#">Wholesalers</a></li>
              <li><a href="#">Migrating from Shopify</a></li>
            </ul>
          </div>
          <div>
            <h4>Resources</h4>
            <ul>
              <li><a href="#">Documentation</a></li>
              <li><a href="#">Changelog</a></li>
              <li><a href="#">Manifesto</a></li>
              <li><a href="#">Pricing</a></li>
            </ul>
          </div>
          <div>
            <h4>Company</h4>
            <ul>
              <li><a href="#">About</a></li>
              <li><a href="#">Careers</a></li>
              <li><a href="#">Press</a></li>
              <li><a href="#">Security</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </div>
        </div>

        <div className="foot-wordmark" style={{ textAlign: "center" }}>Dispatch.</div>

        <div className="foot-bottom">
          <span>© 2026 Dispatch Labs, Inc.</span>
          <span style={{ display: "inline-flex", gap: 18 }}>
            <a href="#">Terms</a>
            <a href="#">Privacy</a>
            <a href="#">Trust &amp; Security</a>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6, color: "var(--ink-3)" }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--ember)" }} />
              All systems normal
            </span>
          </span>
        </div>
      </div>
    </footer>);

}

window.Foot = Foot;