// Top navigation. Sticky, hairline border, backdrop blur on scroll.

function Nav() {
  return (
    <header className="mx-nav">
      <div className="mx-nav-inner">
        <a className="mx-nav-brand" href="/">
          <img src="/assets/logo-horizontal.svg" alt="memberx" />
        </a>
        <nav className="mx-nav-links">
          <a href="#product">Product</a>
          <a href="#insights">AI Insights</a>
          <a href="#modules">Modules</a>
          <a href="#early-access">Early access</a>
        </nav>
        <div className="mx-nav-cta">
          <a className="mx-btn mx-btn-primary" href="/apply?source=nav">
            Sign up for early access <ArrowRight size={14} />
          </a>
        </div>
      </div>
    </header>
  );
}

window.Nav = Nav;