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

  return (
    <nav className="nav" style={{ boxShadow: scrolled ? "0 1px 0 rgba(11,15,25,0.04)" : "none" }}>
      <div className="container nav-inner">
        <a href="#" className="logo" aria-label="MouNa">
          Mou<span className="dot">N</span>a
          <span className="logo-sub">Group Technology S.A</span>
        </a>
        <div className="nav-links">
          <a className="nav-link" href="#offres">Offres Internet</a>
          <a className="nav-link" href="#business">Business Solutions</a>
          <a className="nav-link" href="#story">Notre histoire</a>
          <a className="nav-link" href="#eligibilite">Éligibilité</a>
        </div>
        <div className="nav-cta">
          <a className="btn btn-ghost btn-sm" href="https://selfcare.mounagroup.com" target="_blank" rel="noopener">Espace Client</a>
          <a className="btn btn-primary btn-sm" href="onboarding.html">
            Souscrire en 3 min <Icons.Arrow size={14} />
          </a>
        </div>
      </div>
    </nav>
  );
}

window.Nav = Nav;