const Footer = ({ navigate }) => (
  <footer className="footer" data-nosnippet>
    <div className="container">
      <div className="footer-grid">
        <div>
          <Logo />
          <p style={{ color: "var(--fg-2)", fontSize: 13.5, margin: "14px 0 0", maxWidth: 320 }}>
            FiveM scripts built for server owners who want immersive roleplay!
          </p>
          <div style={{ display: "flex", gap: 8, marginTop: 18 }}>
            <a className="icon-btn" href="https://discord.gg/ey2sMahZ6t" target="_blank" rel="noreferrer noopener" title="Discord"><Icon.Discord size={16} /></a>
            <a className="icon-btn" href="https://github.com/NateDoggDev" target="_blank" rel="noreferrer noopener" title="GitHub"><Icon.Github /></a>
          </div>
        </div>
        <div>
          <h5>Shop</h5>
          <ul>
            <li><a href="/" onClick={(e) => { e.preventDefault(); navigate("home"); }} style={{ cursor: "pointer" }}>Home</a></li>
            <li><a href="/scripts" onClick={(e) => { e.preventDefault(); navigate("scripts"); }} style={{ cursor: "pointer" }}>Scripts</a></li>
            <li><a href="/scripts/used-car-dealership" onClick={(e) => { e.preventDefault(); navigate("product", "used-car-dealership"); }} style={{ cursor: "pointer" }}>Used Car Dealership</a></li>
          </ul>
        </div>
        <div>
          <h5>Support</h5>
          <ul>
            <li><a href="https://discord.gg/ey2sMahZ6t" target="_blank" rel="noreferrer noopener">Discord support</a></li>
            <li><a href="https://discord.gg/ey2sMahZ6t" target="_blank" rel="noreferrer noopener">Report a bug</a></li>
          </ul>
        </div>
        <div>
          <h5>Legal</h5>
          <ul>
            <li><a href="/terms" onClick={(e) => { e.preventDefault(); navigate("terms"); }} style={{ cursor: "pointer" }}>Terms of service</a></li>
            <li>
              <a
                href="/terms#refunds"
                onClick={(e) => {
                  e.preventDefault();
                  // Land on the terms page with #refunds in the URL so the
                  // page's mount handler can scroll to §4.
                  try { window.history.replaceState({}, "", window.location.pathname + "#refunds"); } catch {}
                  navigate("terms");
                }}
                style={{ cursor: "pointer" }}
              >
                Refund policy
              </a>
            </li>
            <li><a href="https://www.tebex.io/terms-of-service" target="_blank" rel="noreferrer noopener">Tebex terms</a></li>
            <li><a href="/about" onClick={(e) => { e.preventDefault(); navigate("about"); }} style={{ cursor: "pointer" }}>About</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 LINT ERROR · PAYMENTS BY TEBEX</span>
        <span>BUILT FOR FIVEM · UNOFFICIAL · NOT AFFILIATED WITH ROCKSTAR / CFX.RE</span>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Footer });