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

  return (
    <nav className={`top ${scrolled ? "scrolled" : ""}`}>
      <div className="wrap row">
        <a href="#" className="logo" aria-label="Cited Store home">
          <span className="bracket">[</span>
          <span>Cited Store</span>
          <span className="bracket">]</span>
        </a>
        <div className="links">
          <a href="#how">How it works</a>
          <a href="#report">Report</a>
          <a href="#index">Index</a>
          <a href="#pulse">Pulse</a>
          <a href="#" className="cta">See where you stand</a>
        </div>
      </div>
    </nav>
  );
};

window.Nav = Nav;