function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  useEffect(() => {
    const onResize = () => {
      if (window.innerWidth > 720) setMenuOpen(false);
    };
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`} aria-label="Navegacao principal">
      <a href="#inicio" className="nav__logo" aria-label="Ir para o inicio">
        <img
          src="assets/logo-clean.jpg"
          alt="Logo da LavaX"
          className="nav__logo-img"
          width="180"
          height="40"
        />
      </a>
      <button
        type="button"
        className="nav__toggle"
        aria-expanded={menuOpen}
        aria-controls="nav-menu"
        aria-label={menuOpen ? 'Fechar menu' : 'Abrir menu'}
        onClick={() => setMenuOpen(!menuOpen)}
      >
        <span/>
        <span/>
        <span/>
      </button>
      <div id="nav-menu" className={`nav__links ${menuOpen ? 'is-open' : ''}`}>
        <a href="#economia">Economia</a>
        <a href="#valor">Ganho</a>
        <a href="#como">Como funciona</a>
        <a href="#perguntas">Perguntas</a>
      </div>
      <a href="#contato" className="nav__cta">Agendar visita</a>
    </nav>
  );
}

Object.assign(window, { Nav });