/* Site footer — appears on every route. Houses the legal links, the pressing
   identification guide link, and the affiliate disclosure. */

function Footer({ onLegal, onHelp, onPressingGuide, onList, onCollection, onAmbassadors }) {
  const year = new Date().getFullYear();
  // Real crawlable href with an SPA-intercept on plain left-click — /ambassadors
  // is a prerendered page not linked from the main nav, so this footer link is
  // its only internal entry point for crawlers. Mirrors navTo() in App.jsx.
  const ambNav = {
    href: "/ambassadors",
    onClick: (e) => {
      if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0) return;
      e.preventDefault();
      if (onAmbassadors) onAmbassadors();
    },
  };
  return (
    <footer className="site-footer">
      <div className="sf-inner">
        <div className="sf-brand">
          <div className="sf-lockup">
            <img className="sf-mark" src="/brand-mark-cream.png?v=1" alt="" />
            <span className="sf-mast"><em className="brand-art">The</em>Lead-In</span>
          </div>
          <p className="sf-tag">
            The one hundred greatest albums, defended in writing. Independent, ad-free, reader-accountable.
          </p>
        </div>

        <nav className="sf-col">
          <div className="sf-col-head">The site</div>
          <button className="sf-link" onClick={onList}>The List 100 to 1</button>
          <button className="sf-link" onClick={onCollection}>My Collection</button>
        </nav>

        <nav className="sf-col">
          <div className="sf-col-head">Collectors</div>
          <button className="sf-link" onClick={onPressingGuide}>Pressing identification guide</button>
          <button className="sf-link" onClick={onCollection}>Track your collection</button>
        </nav>

        <nav className="sf-col">
          <div className="sf-col-head">Follow</div>
          <a
            className="sf-link"
            href="https://www.tiktok.com/@the.leadin"
            target="_blank"
            rel="noopener noreferrer"
          >
            TikTok
          </a>
          <a
            className="sf-link"
            href="https://www.instagram.com/the.leadin"
            target="_blank"
            rel="noopener noreferrer"
          >
            Instagram
          </a>
        </nav>

        <nav className="sf-col">
          <div className="sf-col-head">Record shops</div>
          <a className="sf-link" {...ambNav}>Ambassador programme</a>
        </nav>

        <nav className="sf-col">
          <div className="sf-col-head">Support</div>
          <button className="sf-link" onClick={onHelp}>Help &amp; FAQ</button>
          <a className="sf-link" href="mailto:luca@thelead-in.com">Contact us</a>
          <button className="sf-link" onClick={onLegal}>Privacy &amp; terms</button>
        </nav>
      </div>

      <div className="sf-base">
        <span className="sf-copy">© {year} The Lead-In. All rights reserved.</span>
        <span className="sf-disclosure">
          As an affiliate, we may earn a small commission on vinyl purchases made through our links. The price you pay does not change.
        </span>
      </div>
    </footer>
  );
}

window.Footer = Footer;