const Nav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <header className={"nav " + (scrolled ? "nav--scrolled" : "")}>
      <a href="#top" className="brand">
        <span className="brand-mark">LA</span>
        <span className="brand-text">
          <div className="name">Leonardo Ariello</div>
          <div className="sub">Dr · Neuro-oftalmologia</div>
        </span>
      </a>

      <nav className="nav-menu">
        <a href="#sobre">O Médico</a>
        <a href="#tratamentos">Tratamentos</a>
        <a href="#exames">Exames</a>
        <a href="#ciencia">Área Científica</a>
        <a href="#visita">Contato</a>
      </nav>

      <a href="#visita" className="nav-cta">Agendar</a>
    </header>
  );
};

window.Nav = Nav;