/* global React */
const { useState: useNState, useEffect: useNEffect } = React;

function Nav() {
  const [scrolled, setScrolled] = useNState(false);
  useNEffect(() => {
    const on = () => setScrolled(window.scrollY > 12);
    on();
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  return (
    <header className={"nav" + (scrolled ? " scrolled" : "")}>
      <div className="wrap nav-inner">
        <a className="brand" href="#">
          <BrandMark />
          <span>Dispatch</span>
        </a>
        <nav className="nav-links">
          <a href="#product">Product</a>
          <a href="#operate">Operate</a>
          <a href="#stores">Stores</a>
          <a href="#pricing">Pricing</a>
          <a href="#changelog">Changelog</a>
        </nav>
        <div className="nav-actions">
          <a href="product.html" className="nav-link">Sign in</a>
          <a href="product.html" className="btn btn-primary">
            Start building <Arrow />
          </a>
        </div>
      </div>
    </header>
  );
}

window.Nav = Nav;