// Top navigation bar — sticky, theme-aware
function Nav({ cartCount, onNav, currentSection, onCartClick }) {
  const items = [
    { id: 'collection', label: 'Collection' },
    { id: 'story',      label: 'Our Story' },
    { id: 'journal',    label: 'Diary' },
    { id: 'access',     label: 'Private Access' },
  ];
  return (
    <nav style={navStyles.bar}>
      <div style={navStyles.inner}>
        <button onClick={() => onNav('top')} style={navStyles.brand}>
          <Monogram size={26}/>
          <span className="serif" style={{fontSize: 18, letterSpacing: '0.04em'}}>Discrete Pleasures</span>
        </button>
        <div style={navStyles.links}>
          {items.map(it => (
            <button key={it.id} onClick={() => onNav(it.id)}
                    className="mini" style={{
                      ...navStyles.link,
                      color: currentSection === it.id ? 'var(--gold)' : 'var(--ink-soft)',
                    }}>
              {it.label}
            </button>
          ))}
        </div>
        <button style={navStyles.cart} onClick={onCartClick} className="mini">
          <Icon.cart/>
          <span>Cart ({cartCount})</span>
        </button>
      </div>
    </nav>
  );
}

const navStyles = {
  bar: {
    position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
    backdropFilter: 'blur(20px)',
    WebkitBackdropFilter: 'blur(20px)',
    background: 'color-mix(in oklab, var(--bg) 75%, transparent)',
    borderBottom: '1px solid var(--hairline)',
    transition: 'background 900ms cubic-bezier(.65,.05,.36,1), border-color 900ms',
  },
  inner: {
    maxWidth: 1480, margin: '0 auto', padding: '20px 56px',
    display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', gap: 40,
  },
  brand: {
    display: 'flex', alignItems: 'center', gap: 12, justifySelf: 'start',
    color: 'var(--gold)',
  },
  links: {
    display: 'flex', gap: 36, justifySelf: 'center',
  },
  link: {
    background: 'none', cursor: 'pointer', padding: '6px 0',
    transition: 'color 300ms',
  },
  cart: {
    display: 'flex', alignItems: 'center', gap: 8,
    color: 'var(--ink-soft)', justifySelf: 'end',
    padding: '8px 14px',
    border: '1px solid var(--hairline)',
    borderRadius: 999,
  },
};

window.Nav = Nav;