// 彤冠茶莊 website — Header (announcement + nav + wordmark + lang + cart)
const { IconButton: HdrIconButton, LangSwitcher: HdrLang } = window.TongguanTeaDesignSystem_a1a7a1;

function Wordmark({ onClick, compact }) {
  return (
    <button onClick={onClick} style={{ display: "flex", alignItems: "center", gap: 11, background: "none", border: "none", cursor: "pointer", padding: 0 }}>
      <img src="assets/brand/leaf-mark.png" alt="" style={{ width: compact ? 34 : 44, height: compact ? 34 : 44, objectFit: "contain", flex: "none", marginRight: 1 }} />
      <span style={{ lineHeight: 1, textAlign: "left" }}>
        <span style={{ display: "block", fontFamily: "var(--font-serif)", fontWeight: 500, fontSize: compact ? 19 : 22, letterSpacing: "0.06em", color: "var(--ink)", whiteSpace: "nowrap" }}>彤冠茶莊</span>
        <span style={{ display: "block", fontFamily: "var(--font-sans)", fontSize: 9.5, letterSpacing: "0.3em", textTransform: "uppercase", color: "var(--text-secondary)", marginTop: 4 }}>Tongguan Tea</span>
      </span>
    </button>
  );
}

function Header({ lang, setLang, t, route, go, cartCount, onCart }) {
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  const navItem = (key, label) => {
    const active = route.name === key;
    return (
      <button key={key} onClick={() => go(key)} style={{
        background: "none", border: "none", cursor: "pointer", padding: "6px 2px",
        fontFamily: "var(--font-sans)", fontSize: 14, fontWeight: active ? 600 : 400,
        color: active ? "var(--ink)" : "var(--text-secondary)", position: "relative",
        letterSpacing: lang === "en" ? "0.02em" : "0.06em",
      }}>
        {label}
        <span style={{ position: "absolute", left: 0, right: 0, bottom: -2, height: 1.5, background: "var(--tea)", transform: active ? "scaleX(1)" : "scaleX(0)", transformOrigin: "left", transition: "transform var(--dur-base) var(--ease-out)" }}></span>
      </button>
    );
  };
  return (
    <header style={{ position: "sticky", top: 0, zIndex: 40 }}>
      <div style={{ background: "var(--ink)", color: "var(--text-on-dark-2)", textAlign: "center", padding: "9px 16px", fontFamily: "var(--font-sans)", fontSize: 12.5, letterSpacing: "0.04em" }}>
        {t.announce}
      </div>
      <div style={{ background: "rgba(245,238,225,0.86)", backdropFilter: "blur(10px)", borderBottom: "1px solid var(--border-hairline)" }}>
        <div className="tg-container tg-container--wide" style={{ height: 74, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 20 }}>
          <Wordmark onClick={() => go("home")} />
          <nav style={{ display: "flex", alignItems: "center", gap: 30 }} className="tg-nav-desk">
            {navItem("shop", t.nav.shop)}
            {navItem("story", t.nav.story)}
            {navItem("journal", t.nav.journal)}
          </nav>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <HdrLang value={lang} onChange={setLang} />
            <HdrIconButton icon="search" variant="ghost" ariaLabel="search" />
            <HdrIconButton icon="shopping-bag" variant="outline" badge={cartCount} ariaLabel={t.nav.cart} onClick={onCart} />
          </div>
        </div>
      </div>
    </header>
  );
}
window.Header = Header;
window.Wordmark = Wordmark;