// Nav.jsx — sticky with scroll states
function Nav({ cartCount }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { label: 'Shop', href: 'products.html' },
    { label: 'Products', href: 'products.html' },
    { label: 'Systems', href: '#' },
    { label: 'Refills', href: '#' },
    { label: 'Service', href: '#' },
    { label: 'Journal', href: '#' },
  ];

  return (
    <nav className={`nav${scrolled ? ' scrolled' : ''}`}>
      <div className="wrap nav-inner">
        <a href="#" className="nav-logo" aria-label="AQUO">
          <img src="img/logo-light.png" alt="aquo" className="nav-logo-img" />
          <span className="dot" />
        </a>
        <div className="nav-links">
          {links.map(l => (
            <a key={l.label} href={l.href} className="nav-link">{l.label}</a>
          ))}
        </div>
        <div className="nav-right">
          <a href="products.html" className="nav-cart">
            Cart <span className="count">{cartCount}</span>
          </a>
        </div>
      </div>
    </nav>
  );
}

window.Nav = Nav;