/* SiteHeader — sticky glass nav (Frosted Cream default → adapted for dark 4b: frosted plum). */
function SiteHeader({ route, go, cartCount, wishCount }) {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const NAV = [
    { label: 'New Drop', key: 'new' },
    { label: 'Top Picks', key: 'sale' },
    { label: 'Gifting', key: 'gifting' },
    { label: 'Shop', key: 'all' },
  ];
  const linkStyle = (active) => ({
    fontFamily: 'var(--font-body)', fontSize: 12.5, fontWeight: 400, letterSpacing: '.14em',
    textTransform: 'uppercase', color: active ? 'var(--sf-gold-hi)' : 'var(--sf-text-muted)',
    cursor: 'pointer', background: 'none', border: 0, padding: 0,
  });
  const iconBtn = { all: 'unset', cursor: 'pointer', width: 44, height: 44, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--sf-text)', position: 'relative' };
  const badge = { position: 'absolute', top: 2, right: 2, minWidth: 15, height: 15, borderRadius: 999, background: 'var(--sf-gold)', color: 'var(--color-ink)', fontSize: 9.5, fontWeight: 600, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '0 3px' };

  const IconAccount = () => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="8.2" r="3.6" stroke="currentColor" strokeWidth="1.6"/><path d="M4.8 19.6c1.3-3.3 4-5 7.2-5s5.9 1.7 7.2 5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
  );
  const IconHeart = ({ filled }) => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill={filled ? 'var(--sf-sale)' : 'none'} stroke={filled ? 'var(--sf-sale)' : 'currentColor'}><path d="M12 20.5s-8-5.02-8-11.2C4 5.9 6.2 4 8.7 4c1.6 0 3 .8 3.3 2 .3-1.2 1.7-2 3.3-2 2.5 0 4.7 1.9 4.7 5.3 0 6.18-8 11.2-8 11.2z" strokeWidth="1.6" strokeLinejoin="round"/></svg>
  );
  const IconBag = ({ filled }) => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M7 8V6.5a5 5 0 0 1 10 0V8" stroke={filled ? 'var(--sf-gold)' : 'currentColor'} strokeWidth="1.6" strokeLinecap="round"/><rect x="4" y="8" width="16" height="12.5" rx="2" fill={filled ? 'var(--sf-gold)' : 'none'} stroke={filled ? 'var(--sf-gold)' : 'currentColor'} strokeWidth="1.6"/></svg>
  );
  const IconMenu = () => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4 7h16M4 12h16M4 17h16" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round"/></svg>
  );
  const IconClose = () => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M5 5l14 14M19 5L5 19" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round"/></svg>
  );
  const go_ = (route, param) => { setMenuOpen(false); go(route, param); };
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 40, background: 'rgba(28,15,30,0.72)',
      backdropFilter: 'blur(18px) saturate(140%)', borderBottom: '1px solid var(--sf-border-soft)',
    }}>
      <div className="sf-maxw" style={{ height: 76, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 36 }}>
          <button className="sf-show-mobile" style={{ all: 'unset', cursor: 'pointer', width: 44, height: 44, alignItems: 'center', justifyContent: 'center', color: 'var(--sf-text)' }} aria-label="Menu" onClick={() => setMenuOpen(true)}><IconMenu /></button>
          <button onClick={() => go('home')} style={{ all: 'unset', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 10 }}>
            <window.SS.BrandMark size={26} color="var(--sf-gold-hi)" />
            <span className="sf-wordmark-text" style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 19, letterSpacing: '.04em', whiteSpace: 'nowrap' }}>
              <span style={{ color: 'var(--color-wine)' }}>{window.SS_SITE.brandNameWine.toUpperCase()}</span> <em style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--sf-gold-hi)' }}>{window.SS_SITE.brandNameGold}</em>
            </span>
          </button>
          <nav className="sf-hide-mobile" style={{ display: 'flex', gap: 26 }}>
            {NAV.map((n) => (
              <button key={n.key} style={linkStyle(route === 'listing:' + n.key)} onClick={() => go('listing', n.key)}>{n.label}</button>
            ))}
          </nav>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
          <button style={iconBtn} aria-label="Account" onClick={() => go('account')}><IconAccount /></button>
          <button style={iconBtn} aria-label="Wishlist" onClick={() => go('wishlist')}><IconHeart filled={wishCount > 0} />{wishCount > 0 && <span style={badge}>{wishCount}</span>}</button>
          <button style={{ ...iconBtn, color: 'var(--sf-gold-hi)' }} aria-label="Bag" onClick={() => go('cart')}><IconBag filled={cartCount > 0} />{cartCount > 0 && <span style={badge}>{cartCount}</span>}</button>
        </div>
      </div>

      {menuOpen && (
        <div className="sf-show-mobile" style={{ position: 'fixed', inset: 0, zIndex: 60 }}>
          <div onClick={() => setMenuOpen(false)} style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.55)' }} />
          <div style={{
            position: 'relative', width: 'min(78vw, 320px)', height: '100%', background: 'var(--sf-surface, #2A1430)', opacity: 1,
            borderRight: '1px solid var(--sf-border-soft)', padding: '24px 22px', display: 'flex', flexDirection: 'column', gap: 4,
            boxShadow: 'var(--sf-shadow)', backdropFilter: 'none', WebkitBackdropFilter: 'none',
          }}>
            <button style={{ all: 'unset', cursor: 'pointer', width: 44, height: 44, display: 'flex', alignItems: 'center', color: 'var(--sf-text)', marginBottom: 18 }} aria-label="Close menu" onClick={() => setMenuOpen(false)}><IconClose /></button>
            {NAV.map((n) => (
              <button key={n.key} style={{
                all: 'unset', cursor: 'pointer', minHeight: 48, display: 'flex', alignItems: 'center',
                fontFamily: 'var(--font-body)', fontSize: 15, fontWeight: 400, letterSpacing: '.06em', textTransform: 'uppercase',
                color: route === 'listing:' + n.key ? 'var(--sf-gold-hi)' : 'var(--sf-text)',
                borderBottom: '1px solid var(--sf-border-soft)',
              }} onClick={() => go_('listing', n.key)}>{n.label}</button>
            ))}
          </div>
        </div>
      )}
    </header>
  );
}