/* Nav.jsx — sticky glass navigation, 52px to match in-product toolbar. */

const BrandMark = () => (
  <span className="brand-mark" aria-hidden="true">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="4" width="18" height="18" rx="2.5"/>
      <line x1="16" y1="2" x2="16" y2="6"/>
      <line x1="8" y1="2" x2="8" y2="6"/>
      <line x1="3" y1="10" x2="21" y2="10"/>
      <rect x="7" y="14" width="3.4" height="3.4" rx="0.6" fill="currentColor" stroke="none"/>
    </svg>
  </span>
);

function Nav() {
  return (
    <header className="nav" role="banner" data-screen-label="00 Nav">
      <div className="nav-inner">
        <a className="brand" href="#top" aria-label="Ordentus home">
          <BrandMark />
          <span className="brand-name">Ordentus</span>
        </a>
        <nav className="nav-links" aria-label="Primary">
          <a href="#calendar">Calendar</a>
          <a href="#health">Health</a>
          <a href="#how">How it works</a>
          <a href="#privacy">Privacy</a>
        </nav>
        <div className="nav-right">
          <a className="btn btn--outline" href="#sign-in">Sign in</a>
          <a className="nav-cta" href="#waitlist">Get on the waitlist</a>
        </div>
      </div>
    </header>
  );
}

window.Nav = Nav;
window.BrandMark = BrandMark;