function Footer() {
  return (
    <section style={{ paddingTop: 0 }}>
      <div className="container">
        <div className="footer-cta glass">
          <div className="eyebrow" style={{ marginBottom: 12 }}>Ready when you are</div>
          <h2>Drop. Done.</h2>
          <p className="lede" style={{ margin: "16px auto 0" }}>
            Launching later this year. macOS 14 Sonoma and up.
          </p>
          <div className="hero-cta" style={{ justifyContent: "center" }}>
            <span className="btn btn-soon" role="text" aria-disabled="true">
              <span className="soon-dot" aria-hidden="true"></span>
              Coming soon
            </span>
            <a className="btn btn-ghost" href="index.html#pricing">See pricing</a>
          </div>
        </div>

        <div className="footer">
          <div className="footer-brand">
            <a href="index.html" className="nav-brand">
              <img className="brand-mark brand-light" src="assets/flik-icon-light.png" alt="" />
              <img className="brand-mark brand-dark"  src="assets/flik-icon-dark.png"  alt="" />
              <span>Flik</span>
            </a>
            <p>The shelf your Downloads folder always wanted. Made by one person, for Mac.</p>
          </div>
          <div className="footer-col">
            <h5>Product</h5>
            <a href="index.html#how">How it works</a>
            <a href="index.html#features">Features</a>
            <a href="index.html#pricing">Pricing</a>
            <a href="index.html#faq">FAQ</a>
          </div>
          <div className="footer-col">
            <h5>Support</h5>
            <a href="mailto:support@getflick.app">Email support</a>
            <a href="index.html#faq">System requirements</a>
            <a href="mailto:support@getflick.app?subject=License%20activation">Activate license</a>
          </div>
          <div className="footer-col">
            {/* All three legal links point to the placeholder page for now.
                The finalised pages (privacy.html, terms.html, refund.html)
                live in the repo and will be swapped in once the company
                details are confirmed. */}
            <h5>Legal</h5>
            <a href="legal.html">Privacy</a>
            <a href="legal.html">Terms</a>
            <a href="legal.html">Refund policy</a>
          </div>
        </div>
        <div className="footer-base">
          <span>© 2026 Flik · Indie-made on macOS</span>
          <span>support@getflick.app</span>
        </div>
      </div>
    </section>
  );
}

window.Footer = Footer;