function Nav({ page, navigate, cartCount, openCart }) {
  const linkStyle = (slug) => ({
    color: 'var(--wht)',
    textDecoration: 'none',
    fontSize: 13,
    fontWeight: 700,
    letterSpacing: '0.08em',
    textTransform: 'uppercase',
    cursor: 'pointer',
    padding: '4px 0',
    borderBottom: page === slug ? '2px solid var(--wht)' : '2px solid transparent',
    opacity: page === slug ? 1 : 0.78,
    transition: 'opacity 120ms, border-color 120ms',
  });

  return (
    <>
      <header style={{
        background: 'var(--blk)', color: 'var(--wht)',
        height: 64, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '0 48px', position: 'sticky', top: 0, zIndex: 30,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, cursor: 'pointer' }} onClick={() => navigate('home')}>
          <img src="../../assets/squirrel-mark.png" alt="" style={{ height: 36, filter: 'invert(1)' }} />
          <div style={{
            fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22,
            textTransform: 'uppercase', letterSpacing: '-0.01em',
          }}>BLK SQRL<sup style={{ fontFamily: 'var(--font-body)', fontSize: 10, fontWeight: 700, verticalAlign: 'super', opacity: 0.85, marginLeft: 2 }}>®</sup></div>
        </div>
        <nav style={{ display: 'flex', gap: 30 }}>
          <a style={linkStyle('shop')} onClick={() => navigate('shop')}>Shop</a>
          <a style={linkStyle('tees')} onClick={() => navigate('shop', { filter: 'Tees' })}>Tees</a>
          <a style={linkStyle('hoodies')} onClick={() => navigate('shop', { filter: 'Hoodies' })}>Hoodies</a>
          <a style={linkStyle('gear')} onClick={() => navigate('shop', { filter: 'Gear' })}>Gear</a>
          <a style={linkStyle('about')} onClick={() => navigate('about')}>About</a>
        </nav>
        <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
          <span style={{ fontSize: 13, opacity: 0.7, cursor: 'pointer', letterSpacing: '0.04em' }}>Search</span>
          <button onClick={openCart} style={{
            background: 'transparent', color: 'var(--wht)',
            border: '1.5px solid var(--wht)', borderRadius: 999,
            padding: '6px 14px', fontSize: 11, fontWeight: 700,
            letterSpacing: '0.1em', textTransform: 'uppercase', cursor: 'pointer',
            fontFamily: 'var(--font-body)', whiteSpace: 'nowrap',
          }}>Cart · {cartCount}</button>
        </div>
      </header>
      <div style={{
        background: 'var(--cream)', color: 'var(--blk)',
        padding: '8px 48px', display: 'flex', justifyContent: 'space-between',
        borderBottom: '1px solid var(--blk)',
        fontSize: 12, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase',
      }}>
        <span>Free shipping on orders over $75</span>
        <span style={{ opacity: 0.55 }}>Ships from Washington, DC</span>
      </div>
    </>
  );
}

window.Nav = Nav;