// Sticky header — logo, nav, pinned aanmeld-CTA, mobile menu
function Header({ route, go }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const menuRef = useRef(null);

  useEffect(() => {
    if (menuRef.current) menuRef.current.inert = !menuOpen;
  }, [menuOpen]);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 4);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);

  // Close menu when route changes
  useEffect(() => { setMenuOpen(false); }, [route]);

  const isActive = (key) => route === key || route === key + "-beheerder";
  const nav = [
    ["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 onBrand = (e) => { e.preventDefault(); go("home"); };
  const onLink = (key) => (e) => { e.preventDefault(); go(key); };

  return (
    <React.Fragment>
      <header className={"bb-header" + (scrolled ? " scrolled" : "")} role="banner">
        <div className="bb-header__inner">
          <a className="bb-header__brand" href={window.bbHref("home")} onClick={onBrand} aria-label="Buiten Buddies, home">
            <img src="assets/logo/logo.png" alt="" />
            <span className="wm">Buiten Buddies</span>
          </a>
          <div className="bb-header__spacer"></div>
          <nav className="bb-header__nav" aria-label="Hoofdnavigatie">
            {nav.map(([key, label]) => (
              <a
                key={key}
                href={window.bbHref(key)}
                className={isActive(key) ? "active" : ""}
                onClick={onLink(key)}
                aria-current={isActive(key) ? "page" : undefined}
              >
                {label}
              </a>
            ))}
          </nav>
          <Button variant="primary" size="sm" onClick={() => go("meedoen")}>
            Meld je aan
          </Button>
          <button
            className="bb-burger"
            onClick={() => {
              // De social pop-up ligt boven het menu. Opent de bezoeker het menu, dan
              // gaat het menu voor en verdwijnt de pop-up.
              window.dispatchEvent(new Event("bb-social-popup-sluit"));
              setMenuOpen(true);
            }}
            aria-label="Menu openen"
            aria-expanded={menuOpen}
            aria-controls="bb-mobile-menu"
          >
            <Icon name="menu" size={22} />
          </button>
        </div>
      </header>

      <div
        id="bb-mobile-menu"
        ref={menuRef}
        className={"bb-mobile-menu" + (menuOpen ? " open" : "")}
        role="dialog"
        aria-modal="true"
        aria-label="Mobiel menu"
        aria-hidden={!menuOpen}
      >
        <div className="bb-mobile-menu__top">
          <a className="bb-header__brand" href={window.bbHref("home")} onClick={onBrand}>
            <img src="assets/logo/logo.png" alt="" />
            <span className="wm">Buiten Buddies</span>
          </a>
          <button
            className="bb-burger"
            onClick={() => setMenuOpen(false)}
            aria-label="Menu sluiten"
          >
            <Icon name="close" size={22} />
          </button>
        </div>
        <nav aria-label="Mobiele navigatie">
          {nav.map(([key, label]) => (
            <a
              key={key}
              href={window.bbHref(key)}
              className={isActive(key) ? "active" : ""}
              onClick={onLink(key)}
              aria-current={isActive(key) ? "page" : undefined}
            >
              {label}
            </a>
          ))}
        </nav>
        <div className="bb-mobile-menu__foot">
          <Button variant="primary" full onClick={() => { setMenuOpen(false); go("meedoen"); }}>
            Meld je aan <Icon name="arrowRight" />
          </Button>
        </div>
      </div>
    </React.Fragment>
  );
}

Object.assign(window, { Header });