function Nav({ page, setPage, cartCount, onCartOpen }) {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);

  React.useEffect(() => {
    const handler = () => setScrolled(window.scrollY > 10);
    window.addEventListener('scroll', handler);
    return () => window.removeEventListener('scroll', handler);
  }, []);

  const links = ['Home', 'Shop', 'About'];

  const navStyle = {
    position: 'fixed', top: 0, left: 0, right: 0, zIndex: 1000,
    background: '#F5C400',
    borderBottom: scrolled ? '3px solid #111' : '3px solid #111',
    boxShadow: scrolled ? '0 4px 24px rgba(0,0,0,0.18)' : 'none',
    transition: 'box-shadow 0.3s',
    fontFamily: "'DM Sans', sans-serif",
  };

  const innerStyle = {
    maxWidth: 1280, margin: '0 auto', padding: '0 32px',
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    height: 64,
  };

  return (
    <nav style={navStyle}>
      <div style={innerStyle}>
        {/* Logo */}
        <button onClick={() => { setPage('Home'); setMenuOpen(false); }}
          style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}>
          <img src="assets/logo.png" alt="CLEANFATS" style={{ height: 30, width: 'auto', display: 'block' }}/>
        </button>

        {/* Desktop links */}
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }} className="nav-desktop">
          {links.map(l => (
            <button key={l} onClick={() => setPage(l)}
              style={{
                background: page === l ? '#111' : 'none',
                color: page === l ? '#F5C400' : '#111',
                border: '2px solid #111',
                borderRadius: 4, padding: '6px 18px',
                fontFamily: "'DM Sans', sans-serif", fontWeight: 700,
                fontSize: 15, cursor: 'pointer', letterSpacing: 0.5,
                transition: 'all 0.15s',
              }}
              onMouseEnter={e => { if (page !== l) { e.target.style.background='#111'; e.target.style.color='#F5C400'; }}}
              onMouseLeave={e => { if (page !== l) { e.target.style.background='none'; e.target.style.color='#111'; }}}
            >{l}</button>
          ))}
        </div>

        {/* Cart + Hamburger */}
        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
          <button onClick={onCartOpen} style={{
            background: '#111', color: '#F5C400', border: 'none', borderRadius: 4,
            padding: '8px 16px', cursor: 'pointer', fontWeight: 700, fontSize: 15,
            display: 'flex', alignItems: 'center', gap: 8, fontFamily: "'DM Sans', sans-serif",
          }}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
              <path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/>
              <line x1="3" y1="6" x2="21" y2="6"/>
              <path d="M16 10a4 4 0 01-8 0"/>
            </svg>
            {cartCount > 0 && (
              <span style={{
                background: '#F5C400', color: '#111', borderRadius: '50%',
                width: 20, height: 20, display: 'flex', alignItems: 'center',
                justifyContent: 'center', fontSize: 11, fontWeight: 900,
              }}>{cartCount}</span>
            )}
          </button>

          {/* Hamburger (mobile) */}
          <button onClick={() => setMenuOpen(!menuOpen)} className="nav-hamburger" style={{
            background: 'none', border: '2px solid #111', borderRadius: 4,
            padding: '6px 10px', cursor: 'pointer', display: 'none',
          }}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#111" strokeWidth="2.5">
              {menuOpen
                ? <><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></>
                : <><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></>
              }
            </svg>
          </button>
        </div>
      </div>

      {/* Mobile menu */}
      {menuOpen && (
        <div style={{
          background: '#F5C400', borderTop: '2px solid #111',
          padding: '16px 32px', display: 'flex', flexDirection: 'column', gap: 8,
        }}>
          {links.map(l => (
            <button key={l} onClick={() => { setPage(l); setMenuOpen(false); }}
              style={{
                background: page === l ? '#111' : 'none',
                color: page === l ? '#F5C400' : '#111',
                border: '2px solid #111', borderRadius: 4,
                padding: '10px 18px', fontWeight: 700, fontSize: 16,
                cursor: 'pointer', fontFamily: "'DM Sans', sans-serif", textAlign: 'left',
              }}
            >{l}</button>
          ))}
        </div>
      )}

      <style>{`
        @media (max-width: 700px) {
          .nav-desktop { display: none !important; }
          .nav-hamburger { display: flex !important; }
        }
      `}</style>
    </nav>
  );
}

Object.assign(window, { Nav });