function SiteHeader({ route, onNavigate, cartCount }) {
  const { Icon, IconButton } = window.CedarHollowWineryDesignSystem_a59a90;
  const navItems = [
    { id: "story", label: "Story" },
    { id: "our-wine", label: "Our Wine" },
    { id: "visit", label: "Visit" },
    { id: "shop", label: "Shop" },
    { id: "club", label: "Wine Club" },
  ];
  const matches = (id) => route === id || (id === "shop" && (route.startsWith("wine:") || route === "cart"));

  return (
    <header style={{
      borderBottom: "1px solid var(--border-default)",
      background: "var(--color-parchment)",
      position: "sticky", top: 0, zIndex: 50,
    }}>
      <div style={{
        maxWidth: 1280, margin: "0 auto",
        display: "grid", gridTemplateColumns: "1fr auto 1fr",
        alignItems: "center", padding: "18px 32px", gap: 32,
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 28 }}>
          {navItems.slice(0, 2).map(item => (
            <NavLink key={item.id} active={matches(item.id)} onClick={() => onNavigate(item.id)}>{item.label}</NavLink>
          ))}
        </div>
        <button onClick={() => onNavigate("home")} style={{
          background: "transparent", border: "none", padding: 0, cursor: "pointer",
          display: "flex", alignItems: "center",
        }}>
          <img src="../../assets/logo-lockup-medium.png?v=3" height="54" alt="Cedar Hollow Winery"/>
        </button>
        <div style={{ display: "flex", alignItems: "center", gap: 22, justifyContent: "flex-end" }}>
          {navItems.slice(2).map(item => (
            <NavLink key={item.id} active={matches(item.id)} onClick={() => onNavigate(item.id)}>{item.label}</NavLink>
          ))}
          <IconButton aria-label="Search" variant="ghost" size="sm"><Icon name="search" size={18}/></IconButton>
          <IconButton aria-label="Account" variant="ghost" size="sm"><Icon name="user" size={18}/></IconButton>
          <button onClick={() => onNavigate("cart")} style={{
            background: "transparent", border: "none", padding: "6px 8px",
            cursor: "pointer", position: "relative", display: "inline-flex", alignItems: "center",
            color: "var(--text-primary)",
          }}>
            <Icon name="cart" size={20}/>
            {cartCount > 0 && (
              <span style={{
                position: "absolute", top: -2, right: -2,
                background: "var(--color-terracotta)", color: "var(--color-parchment)",
                fontSize: 10, fontWeight: 700,
                borderRadius: 999, width: 18, height: 18,
                display: "grid", placeItems: "center",
              }}>{cartCount}</span>
            )}
          </button>
        </div>
      </div>
    </header>
  );
}

function NavLink({ active, onClick, children }) {
  return (
    <button onClick={onClick} style={{
      background: "transparent", border: "none", padding: "0 0 4px",
      fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 700,
      letterSpacing: "0.18em", textTransform: "uppercase",
      color: active ? "var(--text-primary)" : "var(--text-secondary)",
      cursor: "pointer",
      borderBottom: active ? "1px solid var(--color-terracotta)" : "1px solid transparent",
    }}>{children}</button>
  );
}

window.SiteHeader = SiteHeader;