// Header + language switcher + nav (with mobile burger menu)

const Header = ({ active, onNav, lang, setLang, dark = false, t }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [isMobile, setIsMobile] = React.useState(
    typeof window !== "undefined" && window.matchMedia("(max-width: 768px)").matches
  );

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

  React.useEffect(() => {
    const mq = window.matchMedia("(max-width: 768px)");
    const handle = (e) => setIsMobile(e.matches);
    mq.addEventListener("change", handle);
    return () => mq.removeEventListener("change", handle);
  }, []);

  // close menu after nav
  const goTo = (id) => { setMenuOpen(false); onNav(id); };

  const items = [
    { id: "object", label: t.nav.object },
    { id: "surroundings", label: t.nav.surroundings },
    { id: "prices", label: t.nav.prices },
    { id: "contact", label: t.nav.contact }
  ];

  const onLight = scrolled || menuOpen;
  const fg = onLight ? "var(--graphite)" : "var(--bone)";
  const fgMuted = onLight ? "var(--fg-muted)" : "rgba(245,241,234,0.7)";
  const goldFg = "var(--gold)";

  return (
    <header style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 50,
      padding: scrolled ? "14px 40px" : "22px 40px",
      display: "grid",
      gridTemplateColumns: isMobile ? "1fr auto" : "1fr auto 1fr",
      alignItems: "center",
      background: (scrolled || menuOpen) ? "rgba(251,248,243,0.96)" : "transparent",
      borderBottom: (scrolled || menuOpen) ? "1px solid var(--border)" : "1px solid transparent",
      color: fg,
      transition: "padding 280ms ease, background 280ms ease, border-color 280ms ease"
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
        <div style={{ lineHeight: 1.05 }}>
          <div style={{
            fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: scrolled ? 18 : 20,
            fontWeight: 500, color: fg, transition: "font-size 280ms"
          }}></div>
          <div style={{
            fontFamily: "var(--font-sans)", fontSize: 9.5, letterSpacing: "0.28em",
            textTransform: "uppercase", color: fgMuted, marginTop: 2
          }}>{t.nav_lead}</div>
        </div>
      </div>

      {/* Desktop nav */}
      {!isMobile && (
        <nav style={{ display: "flex", gap: 30, justifyContent: "center", alignItems: "center", fontSize: "13px" }}>
          {items.map((it) =>
            <a key={it.id} onClick={(e) => { e.preventDefault(); goTo(it.id); }}
              href={`#${it.id}`}
              style={{
                fontFamily: "var(--font-sans)", letterSpacing: "0.22em",
                textTransform: "uppercase", cursor: "pointer", textDecoration: "none",
                color: active === it.id ? goldFg : fgMuted,
                paddingBottom: 4,
                borderBottom: active === it.id ? "1px solid var(--gold)" : "1px solid transparent",
                transition: "color 200ms, border-color 200ms", fontSize: "25px"
              }}>{it.label}</a>
          )}
        </nav>
      )}

      <div style={{ display: "flex", justifyContent: "flex-end", alignItems: "center", gap: 14, fontSize: "15px" }}>
        <span style={{
          fontFamily: "var(--font-sans)", letterSpacing: "0.22em",
          textTransform: "uppercase", fontSize: isMobile ? "12px" : "15px"
        }}>
          {["de", "it", "en"].map((l, i) =>
            <React.Fragment key={l}>
              <button onClick={() => setLang(l)} style={{
                background: "transparent", border: "none", padding: "4px 2px",
                cursor: "pointer", letterSpacing: "0.22em",
                fontFamily: "inherit", textTransform: "inherit",
                color: lang === l ? goldFg : fgMuted,
                borderBottom: lang === l ? "1px solid var(--gold)" : "1px solid transparent",
                fontSize: isMobile ? "12px" : "15px"
              }}>{l.toUpperCase()}</button>
              {i < 2 && <span style={{ color: fgMuted, padding: "0 4px" }}>·</span>}
            </React.Fragment>
          )}
        </span>

        {/* Burger toggle (mobile only) */}
        {isMobile && (
          <button
            aria-label="Menu"
            onClick={() => setMenuOpen(o => !o)}
            style={{
              background: "transparent", border: "none", cursor: "pointer",
              padding: 8, marginLeft: 4, color: fg,
              display: "inline-flex", flexDirection: "column", gap: 5
            }}>
            <span style={{
              width: 22, height: 1.5, background: "currentColor",
              transform: menuOpen ? "translateY(6.5px) rotate(45deg)" : "none",
              transition: "transform 220ms"
            }}></span>
            <span style={{
              width: 22, height: 1.5, background: "currentColor",
              opacity: menuOpen ? 0 : 1,
              transition: "opacity 200ms"
            }}></span>
            <span style={{
              width: 22, height: 1.5, background: "currentColor",
              transform: menuOpen ? "translateY(-6.5px) rotate(-45deg)" : "none",
              transition: "transform 220ms"
            }}></span>
          </button>
        )}
      </div>

      {/* Mobile menu drawer */}
      {isMobile && menuOpen && (
        <div style={{
          gridColumn: "1 / -1",
          paddingTop: 18, paddingBottom: 8,
          display: "flex", flexDirection: "column", gap: 4,
          borderTop: "1px solid var(--border)",
          marginTop: 14
        }}>
          {items.map((it) =>
            <a key={it.id} onClick={(e) => { e.preventDefault(); goTo(it.id); }}
              href={`#${it.id}`}
              style={{
                fontFamily: "var(--font-sans)", letterSpacing: "0.22em",
                textTransform: "uppercase", cursor: "pointer", textDecoration: "none",
                color: active === it.id ? goldFg : "var(--graphite)",
                padding: "14px 4px", fontSize: 15,
                borderBottom: "1px solid var(--border)"
              }}>{it.label}</a>
          )}
        </div>
      )}
    </header>
  );
};

window.Header = Header;