/* ============================================================
   Header — fixed chrome (AIR pattern)
   left: menu pill + heart square · right: primary capsule
   center stays empty (the hero tagline sits top-center;
   the giant А|Л letters are the wordmark)
   ============================================================ */

function Header({ onMenu, onContact }) {
  const { t } = useT();
  const [onDark, setOnDark] = React.useState(true);
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => {
      let d = false;
      const home = document.querySelector('[data-screen-label="Home"]');
      if (home) { const r = home.getBoundingClientRect(); if (r.bottom > 88) d = true; }
      const res = document.querySelector('[data-screen-label="Results"]');
      if (res) { const r = res.getBoundingClientRect(); if (r.top <= 70 && r.bottom >= 40) d = true; }
      setOnDark(d);
      setScrolled(window.scrollY > 40);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const lightPill = onDark ? { background: "var(--paper-on-ink)", color: "var(--ink)" } : null;
  return (
    <header style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 40,
      display: "flex", alignItems: "flex-start", justifyContent: "space-between",
      padding: "20px 28px", pointerEvents: "none",
    }}>
      {/* left cluster */}
      <div style={{ display: "flex", gap: 10, pointerEvents: "auto" }}>
        <IconButton icon="menu" variant={onDark ? "out" : "ink"} onClick={onMenu} style={{ height: 20 }} />
        {/* language switcher (replaces the old heart); hides on scroll so it never
           collides with the collapsing А|Л monogram */}
        <div style={{ opacity: scrolled ? 0 : 1, transform: scrolled ? "scale(0.85)" : "none",
          pointerEvents: scrolled ? "none" : "auto",
          transition: "opacity var(--dur) var(--ease), transform var(--dur) var(--ease)" }}>
          <LangSwitcher tone="out" menuAlign="left" height={20} />
        </div>
      </div>

      {/* right cluster: account + primary capsule */}
      <div style={{ display: "flex", alignItems: "center", gap: 10, pointerEvents: "auto" }}>
        <div className="subheader-account"><AccountChip height={26} /></div>
        <div className="header-cta" data-scrolled={scrolled ? "1" : "0"}>
          <Pill variant="primary" icon="plus" style={{ height: 26, ...(lightPill || {}) }}
            onClick={() => { window.location.href = "course.html#enroll"; }}>{t("common.enroll")}</Pill>
        </div>
      </div>
    </header>
  );
}

Object.assign(window, { Header });