const Nav = () => {
  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={`nav ${scrolled ? "scrolled" : ""}`}>
      <a href="#top" className="mark">
        <img src="images/logo_stylistcoach_Fullcolored.png" alt="Stylist Coach" style={{height:"28px",width:"auto",display:"block"}} />
      </a>
      <ul>
        <li><a href="#about">Over mij</a></li>
        <li><a href="#services">Diensten</a></li>
        <li><a href="#reviews">Ervaringen</a></li>
        <li><a href="#quiz">Stijl-quiz</a></li>
      </ul>
      <a href="#contact" className="cta">
        Plan een gesprek
        <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
          <path d="M1 6h10M7 2l4 4-4 4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </a>
    </nav>
  );
};

window.Nav = Nav;