// Site header — logo, primary nav, persistent sign CTA. Mobile-first with hamburger menu.
function Header({ count, onSign, active }) {
  const { Button, Logo } = window.IAIGADesignSystem_db07e0;
  const { Icon } = window;
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener("scroll", onScroll);
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

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

  const nav = [
    { href: "/#problem", label: "The problem", key: "problem" },
    { href: "/#need", label: "Our proposal", key: "need" },
    { href: "/#signatories", label: "Signatories", key: "signatories" },
    { href: "learn-more", label: "Learn more", key: "learn" },
  ];

  return (
    <React.Fragment>
      <header className={"site-header" + (scrolled ? " is-scrolled" : "")}>
        <div className="site-header__inner">
          <a href="/" className="site-header__brand" aria-label="IAIGA home">
            <Logo variant="horizontal" src="assets/logo-horizontal-blue.svg" height={30} />
          </a>
          <nav className="site-nav" aria-label="Primary">
            {nav.map((n) => (
              <a key={n.key} href={n.href} className={active === n.key ? "is-active" : ""}>{n.label}</a>
            ))}
          </nav>
          <div className="site-header__actions">
            {typeof count === "number" ? <span className="site-header__count">{count.toLocaleString()} signed</span> : null}
            {onSign
              ? <Button variant="gold" size="sm" onClick={onSign}>Sign the petition</Button>
              : <Button variant="gold" size="sm" as="a" href="/?sign=1">Sign the petition</Button>}
          </div>
          <button
            className="site-header__menu-btn"
            aria-label={menuOpen ? "Close menu" : "Open menu"}
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen((v) => !v)}
          >
            {menuOpen
              ? <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M6 18L18 6M6 6l12 12" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>
              : <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4 6h16M4 12h16M4 18h16" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>
            }
          </button>
        </div>
      </header>

      {/* Mobile nav drawer */}
      <div className={"site-nav-mobile" + (menuOpen ? " is-open" : "")} aria-hidden={!menuOpen}>
        <div className="site-nav-mobile__backdrop" onClick={() => setMenuOpen(false)} />
        <div className="site-nav-mobile__panel">
          <button className="site-nav-mobile__close" onClick={() => setMenuOpen(false)} aria-label="Close menu">×</button>
          {nav.map((n) => (
            <a key={n.key} href={n.href} className={active === n.key ? "is-active" : ""} onClick={() => setMenuOpen(false)}>{n.label}</a>
          ))}
          <div style={{ marginTop: "var(--space-5)", paddingTop: "var(--space-5)", borderTop: "1px solid var(--border)" }}>
            {onSign
              ? <Button variant="gold" block onClick={() => { setMenuOpen(false); onSign(); }}>Sign the petition</Button>
              : <Button variant="gold" block as="a" href="/?sign=1">Sign the petition</Button>}
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}
window.Header = Header;