function Nav({ theme, onToggleTheme }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <nav className="nav" style={{ top: scrolled ? 14 : 20, transition: 'top 300ms' }}>
      <div className="nav-inner">
        <a href="#" className="nav-logo">
          <span className="dot" />
          <span>veiron</span>
        </a>
        <div className="nav-links">
          <a href="#products">Products</a>
          <a href="#features">Platform</a>
          <a href="#how">How it works</a>
          <a href="#pricing">Pricing</a>
          <a href="#testimonials">Users</a>
        </div>
        <button className="theme-toggle" onClick={onToggleTheme} aria-label="toggle theme">
          {theme === 'dark' ? (
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
              <path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z"/>
            </svg>
          ) : (
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
              <circle cx="12" cy="12" r="4"/>
              <path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/>
            </svg>
          )}
        </button>
        <a href="#cta" className="nav-cta">Get access →</a>
      </div>
    </nav>
  );
}
window.Nav = Nav;