// Navbar.jsx
function Navbar() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={`navbar${scrolled ? ' scrolled' : ''}`}>
      <Logo size={30} />
      <ul className="nav-links">
        <li><a href="#workforce">Workforce</a></li>
        <li><a href="#console">Live Console</a></li>
        <li><a href="#quality">Quality Layer</a></li>
      </ul>
      <a href="#console" className="nav-cta">See It Work</a>
    </nav>
  );
}
window.Navbar = Navbar;