/* ============================================================
   header.jsx — sticky glass header, lang switcher, single CTA
   ============================================================ */
const { useState: useHState, useRef: useHRef, useEffect: useHEffect } = React;

function LangSwitcher({ compact }) {
  const { lang, setLang } = window.LU.useLang();
  const { Icon } = window.UI;
  const [open, setOpen] = useHState(false);
  const ref = useHRef(null);
  useHEffect(() => {
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, []);
  const langs = [["en", "EN"], ["fr", "FR"], ["nl", "NL"]];
  return (
    <div className="relative" ref={ref}>
      <button
        onClick={() => setOpen((o) => !o)}
        className="inline-flex h-10 items-center gap-1.5 px-3 rounded-lg text-sm font-medium text-navy hover:bg-secondary transition border border-transparent hover:border-border"
        aria-label="Taal / Langue / Language"
      >
        <Icon name="globe" className="w-4 h-4 text-brand" />
        <span className="tabular">{lang.toUpperCase()}</span>
        <Icon name="chevron-down" className={`w-3.5 h-3.5 text-slate transition-transform ${open ? "rotate-180" : ""}`} />
      </button>
      {open && (
        <div className="absolute right-0 mt-2 w-36 rounded-xl border border-border bg-card shadow-card overflow-hidden z-50">
          {langs.map(([code, label]) => (
            <button
              key={code}
              onClick={() => { setLang(code); setOpen(false); }}
              className={`w-full flex items-center justify-between px-3.5 py-2.5 text-sm transition ${
                lang === code ? "bg-brand-soft text-brand font-semibold" : "text-navy hover:bg-secondary"
              }`}
            >
              <span>{window.LU.STR[code].name}</span>
              <span className="tabular text-xs text-slate">{label}</span>
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

function Header() {
  const { t } = window.LU.useLang();
  const { Icon } = window.UI;
  const [scrolled, setScrolled] = useHState(false);
  const [mobOpen, setMobOpen] = useHState(false);
  useHEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <header className={`sticky top-0 z-50 transition-all duration-300 ${scrolled ? "glass border-b border-border shadow-soft" : "bg-background/0 border-b border-transparent"}`}>
      <div className="mx-auto max-w-7xl px-6 h-16 flex items-center justify-between gap-6">
        {/* logo */}
        <a href="#top" className="flex items-center gap-2.5 shrink-0">
          <img src="assets/legion-logo.png" alt="LEGION UNITED" className="w-10 h-10 object-contain shrink-0" />
          <div className="leading-none">
            <p className="font-display font-bold text-[15px] text-navy track-tight">LEGION UNITED</p>
            <p className="text-[10px] uppercase tracking-[0.16em] text-slate mt-0.5">{t.brandSub}</p>
          </div>
        </a>

        {/* nav */}
        <nav className="hidden lg:flex items-center gap-7 text-sm text-slate">
          {t.nav.map(([href, label]) => (
            <a key={href} href={href} className="hover:text-navy transition-colors">{label}</a>
          ))}
        </nav>

        <div className="flex items-center gap-2">
          <LangSwitcher />
          <a
            href="#demo"
            className="inline-flex h-10 items-center gap-2 px-4 rounded-lg text-sm font-medium bg-navy text-navy-foreground hover:opacity-90 transition shadow-soft"
          >
            <Icon name="phone" className="w-4 h-4" /> {t.callDemo}
          </a>
          <button
            className="lg:hidden inline-flex h-10 w-10 items-center justify-center rounded-lg text-navy hover:bg-secondary transition"
            onClick={() => setMobOpen((o) => !o)}
            aria-label="Menu"
          >
            <Icon name={mobOpen ? "x" : "menu"} className="w-5 h-5" />
          </button>
        </div>
      </div>

      {/* mobile nav */}
      {mobOpen && (
        <div className="lg:hidden glass border-t border-border">
          <nav className="mx-auto max-w-7xl px-6 py-4 flex flex-col gap-1">
            {t.nav.map(([href, label]) => (
              <a key={href} href={href} onClick={() => setMobOpen(false)}
                 className="py-2.5 text-navy font-medium border-b border-border/60 last:border-0">{label}</a>
            ))}
          </nav>
        </div>
      )}
    </header>
  );
}

window.Header = Header;