const Footer = () => {
  return (
    <footer className="site">
      <div className="wrap">
        <div className="grid">
          <div>
            <a href="#" style={{
              fontFamily: "Fraunces, serif", fontWeight: 600, fontSize: 22,
              display: "inline-flex", alignItems: "baseline", gap: 4, color: "inherit",
            }}>
              <span style={{ color: "var(--teal)", fontWeight: 700 }}>[</span>
              Cited Store
              <span style={{ color: "var(--teal)", fontWeight: 700 }}>]</span>
            </a>
            <p style={{ color: "var(--muted)", fontSize: 14.5, maxWidth: "36ch", marginTop: 16 }}>
              The AI visibility index for e-commerce. We help stores get cited by ChatGPT, Claude, Gemini &amp; Perplexity.
            </p>
          </div>
          <div>
            <h5>Products</h5>
            <ul>
              <li><a href="#">Store Visibility Report</a></li>
              <li><a href="#">The Cited Index</a></li>
              <li><a href="#">Citation Engine</a></li>
              <li><a href="#">Cited Pulse</a></li>
            </ul>
          </div>
          <div>
            <h5>Company</h5>
            <ul>
              <li><a href="#">About</a></li>
              <li><a href="#">Methodology</a></li>
              <li><a href="#">Press</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </div>
          <div>
            <h5>Resources</h5>
            <ul>
              <li><a href="#">Sample Report</a></li>
              <li><a href="#">Q1 2026 Index</a></li>
              <li><a href="#">Newsletter</a></li>
              <li><a href="#">Case studies</a></li>
            </ul>
          </div>
        </div>
        <div className="signature">
          <span>© 2026 Cited Store · citedstore.com</span>
          <span>Powered by Cited Store · the AI visibility index for e-commerce</span>
        </div>
      </div>
    </footer>
  );
};

window.Footer = Footer;