const Footer = () =>
<footer className="foot">
    <div className="shell">
      <div className="foot-top">
        <div className="foot-brand">
          <div className="logo" style={{ marginBottom: 14 }}>
            <span className="logo-mark"><Sparkle size={20} /></span>
            Rankly.app
          </div>
          <p className="foot-tag">
            Modern SEO analytics for teams who'd rather climb the SERP than read a manual.
          </p>
          <a href="#" className="btn-pill foot-cta-btn">Start a Free Trial <span className="arrow"><ArrowRight /></span></a>
        </div>

        <div className="foot-cols">
          <div className="foot-col">
            <h4>Legal</h4>
            <a href="#">Privacy Policy</a>
            <a href="#">Terms of Service</a>
            <a href="#">Cookies</a>
            <a href="#">DPA</a>
          </div>
          <div className="foot-col">
            <h4>Pages</h4>
            <a href="#">Features</a>
            <a href="#">Pricing</a>
            <a href="#">Changelog</a>
            <a href="#">Roadmap</a>
          </div>
          <div className="foot-col">
            <h4>Social Media</h4>
            <a href="#">Twitter / X</a>
            <a href="#">LinkedIn</a>
            <a href="#">YouTube</a>
            <a href="#">Substack</a>
          </div>
        </div>
      </div>

      <div className="foot-meta">
        <span>© 2026 Rankly Inc.</span>
        <span>All rights reserved.</span>
        <span>Made with ✦ in Paris</span>
      </div>

      <div className="brand-huge"><span className="metal-light">Rank</span><span className="metal-dark" style={{ fontSize: "280px" }}>ly</span></div>
    </div>
  </footer>;


window.Footer = Footer;