const { Logo, Button, Icon, IconButton } = window.BuildingInvestDesignSystem_f8840b;

function Header({ route, onNavigate, lang, setLang }) {
  const t = window.I18N[lang];
  const width = useViewportWidth();
  const isMobile = width < 900;
  const [menuOpen, setMenuOpen] = React.useState(false);
  const NAV = [
    { id: "home", label: t.nav.home },
    { id: "services", label: t.nav.services },
    { id: "projects", label: t.nav.projects },
    { id: "about", label: t.nav.about },
    { id: "contact", label: t.nav.contact },
  ];
  const go = (id) => { setMenuOpen(false); onNavigate(id); };
  return (
    <header style={{ position: "sticky", top: 0, zIndex: 200, background: "var(--surface-glass)", backdropFilter: "blur(12px)", borderBottom: "1px solid var(--border-color)" }}>
      <div style={{ height: 34, background: "var(--concrete-900)", display: "flex", alignItems: "center" }}>
        <Container style={{ display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }}>
          <div style={{ display: "flex", gap: "var(--space-6)", alignItems: "center", minWidth: 0, overflow: "hidden" }}>
            <span style={{ display: "flex", alignItems: "center", gap: 6, flex: "0 0 auto", font: "var(--weight-medium) var(--text-xs)/1 var(--font-condensed)", letterSpacing: "var(--tracking-wider)", textTransform: "uppercase", color: "var(--alpha-white-72)", whiteSpace: "nowrap" }}><Icon name="phone" size={12} color="var(--amber-400)" />{t.company.phone}</span>
            {!isMobile ? <span style={{ display: "flex", alignItems: "center", gap: 6, font: "var(--weight-medium) var(--text-xs)/1 var(--font-condensed)", letterSpacing: "var(--tracking-wider)", textTransform: "uppercase", color: "var(--alpha-white-72)", whiteSpace: "nowrap" }}><Icon name="map-pin" size={12} color="var(--amber-400)" />{t.company.location}</span> : null}
          </div>
          <div style={{ display: "flex", gap: "var(--space-3)", flex: "0 0 auto" }}>
            {["hu", "ro"].map((l) => (
              <button key={l} onClick={() => setLang(l)} style={{ display: "flex", alignItems: "center", gap: 6, background: "none", border: "none", padding: "0 4px", cursor: "pointer", font: "var(--weight-semibold) var(--text-xs)/1 var(--font-condensed)", letterSpacing: "var(--tracking-wider)", whiteSpace: "nowrap", color: l === lang ? "var(--amber-400)" : "var(--concrete-400)" }}>
                <span aria-hidden="true">{l === "ro" ? "🇷🇴" : "🇭🇺"}</span>{l === "ro" ? "Română" : "Magyar"}
              </button>
            ))}
          </div>
        </Container>
      </div>
      <Container style={{ display: "flex", alignItems: "center", justifyContent: "space-between", height: "var(--header-h)" }}>
        <a href="#" onClick={(e) => { e.preventDefault(); go("home"); }} style={{ borderBottom: "none", display: "flex", flex: "0 0 auto" }}>
          <Logo height={isMobile ? 30 : 38} assetPath="assets/" />
        </a>
        {!isMobile ? (
          <nav style={{ display: "flex", alignItems: "center", gap: "var(--space-7)" }}>
            {NAV.map((n) => {
              const on = route === n.id;
              return (
                <a key={n.id} href="#" onClick={(e) => { e.preventDefault(); go(n.id); }}
                  style={{ position: "relative", paddingBottom: 4, borderBottom: `var(--border-thick) solid ${on ? "var(--amber-400)" : "transparent"}`, font: "var(--weight-semibold) var(--text-sm)/1 var(--font-sans)", letterSpacing: "var(--tracking-wide)", textTransform: "uppercase", color: on ? "var(--text-primary)" : "var(--text-secondary)", whiteSpace: "nowrap" }}>{n.label}</a>
              );
            })}
          </nav>
        ) : null}
        {!isMobile ? (
          <div style={{ display: "flex", gap: "var(--space-3)", alignItems: "center", flex: "0 0 auto" }}>
            <Button size="md" iconRight="arrow-right" onClick={() => go("contact")}>{t.header.cta}</Button>
          </div>
        ) : (
          <IconButton icon={menuOpen ? "x" : "menu"} label={menuOpen ? t.common.close : t.header.menu} size="md" onClick={() => setMenuOpen(!menuOpen)} />
        )}
      </Container>
      {isMobile && menuOpen ? (
        <div style={{ borderTop: "1px solid var(--border-color)", background: "var(--surface-card)", padding: "var(--space-5) var(--page-margin-lg) var(--space-7)", display: "flex", flexDirection: "column", gap: "var(--space-5)" }}>
          {NAV.map((n) => {
            const on = route === n.id;
            return (
              <a key={n.id} href="#" onClick={(e) => { e.preventDefault(); go(n.id); }}
                style={{ font: "var(--weight-semibold) var(--text-lg)/1 var(--font-sans)", textTransform: "uppercase", letterSpacing: "var(--tracking-wide)", color: on ? "var(--amber-700)" : "var(--text-primary)" }}>{n.label}</a>
            );
          })}
          <Button size="lg" iconRight="arrow-right" onClick={() => go("contact")} style={{ marginTop: "var(--space-2)" }}>{t.header.cta}</Button>
        </div>
      ) : null}
    </header>
  );
}

Object.assign(window, { Header });