// Sticky nav — brand mark + a single "Start Investing" pill (from the brief).
function NavBar() {
  const [solid, setSolid] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setSolid(window.scrollY > 32);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={"nav" + (solid ? " solid" : "")}>
      <a className="nav-logo" href="#top">
        <img src="assets/logos/rank-asset-white.svg" alt="Rank Asset Managers"/>
      </a>
      <div className="nav-spacer"/>
      <button className="nav-cta" onClick={() => window.dispatchEvent(new CustomEvent("open-get-started"))}>
        Get Started
        <Arrow size={16} strokeWidth={2}/>
      </button>
    </nav>
  );
}
window.NavBar = NavBar;