function useSmalScherm(breakpoint = 719) {
  const [smal, setSmal] = useState(() => window.matchMedia("(max-width: " + breakpoint + "px)").matches);
  useEffect(() => {
    const mq = window.matchMedia("(max-width: " + breakpoint + "px)");
    const on = (e) => setSmal(e.matches);
    mq.addEventListener ? mq.addEventListener("change", on) : mq.addListener(on);
    return () => { mq.removeEventListener ? mq.removeEventListener("change", on) : mq.removeListener(on); };
  }, [breakpoint]);
  return smal;
}

// Op mobiel klappen de linkkolommen dicht, zodat de footer kort blijft.
function FooterKolom({ id, titel, smal, label, children }) {
  const [open, setOpen] = useState(false);
  if (!smal) {
    return (
      <nav aria-label={label}>
        <h4>{titel}</h4>
        {children}
      </nav>
    );
  }
  return (
    <nav aria-label={label} className={"bb-footer__acc" + (open ? " is-open" : "")}>
      <h4>
        <button type="button" aria-expanded={open} aria-controls={"foot-" + id} onClick={() => setOpen(!open)}>
          {titel}
          <span className="chev" aria-hidden="true"><Icon name="chevronDown" size={18} /></span>
        </button>
      </h4>
      <div id={"foot-" + id} className="bb-footer__accbody" hidden={!open}>{children}</div>
    </nav>
  );
}

function Footer({ go, route }) {
  const smal = useSmalScherm();
  const bel = bbBellink();
  const site = [
    ["home", "Home"],
    ["hoe-werkt-het", "Hoe werkt het?"],
    ["waar-actief", "Waar actief"],
    ["meedoen", "Meedoen"],
    ["over", "Over"],
    ["in-de-media", "In de media"],
    ["faq", "FAQ"],
  ];
  const juridisch = [
    ["privacybeleid", "Privacybeleid"],
    ["cookiebeleid", "Cookiebeleid"],
    ["disclaimer", "Disclaimer"],
    ["toegankelijkheid", "Toegankelijkheid"],
  ];
  const onLink = (k) => (e) => { e.preventDefault(); go(k); };

  return (
    <footer className="bb-footer" role="contentinfo" data-screen-label="Footer">
      <Container>
        {route === "home" && <FooterSignup />}
        <div className="bb-footer__grid">
          <div className="bb-footer__intro">
            <div className="bb-footer__brand">
              <img src="assets/logo/logo-footer-wit.png" alt="" />
              <span className="wm">Buiten Buddies</span>
            </div>
            <p className="bb-footer__desc">
              Buurtinitiatief voor jongeren van 10 tot 16 jaar om buiten afspreken
              weer simpel te maken.
            </p>
            <p className="bb-footer__tagline">&ldquo;Log uit, beleef echt.&rdquo;</p>
          </div>

          <FooterKolom id="site" titel="Site" label="Site" smal={smal}>
            {site.map(([k, l]) => (
              <a key={k} href={window.bbHref(k)} onClick={onLink(k)}>{l}</a>
            ))}
          </FooterKolom>

          <div className="bb-footer__contact">
            <h4>Contact</h4>
            <a href={window.bbHref("contact")} onClick={onLink("contact")}>Contactformulier</a>
            <a href="mailto:info@buitenbuddies.org">info@buitenbuddies.org</a>
            <a href={bel.href} target={bel.extern ? "_blank" : undefined} rel={bel.extern ? "noopener noreferrer" : undefined} aria-label={bel.label}>06 18 39 15 32</a>
            <a
              href="#doneren" className="bb-footer__steun"
              onClick={(e) => { e.preventDefault(); window.bbNaarDoneren(go); }}
            >Steun Buiten Buddies</a>
            <SocialLinks variant="dark" size={22} />
          </div>

          <FooterKolom id="juridisch" titel="Juridisch" label="Juridisch" smal={smal}>
            {juridisch.map(([k, l]) => (
              <a key={k} href={window.bbHref(k)} onClick={onLink(k)}>{l}</a>
            ))}
            <CookieSettingsLink />
          </FooterKolom>
        </div>

        <div className="bb-footer__base">
          <span>© 2026 Buiten Buddies · Mogelijk gemaakt met steun van Gemeente Haarlem</span>
          <span>KVK-nummer, op aanvraag</span>
        </div>
      </Container>
    </footer>
  );
}

Object.assign(window, { Footer, FooterKolom, useSmalScherm });