// Nav.jsx
function Nav() {
  const [open, setOpen] = React.useState(false);

  return (
    <React.Fragment>
      <header className="nav">
        <a href="/" className="nav__brand" onClick={() => setOpen(false)}>
          <img src="/images/logo-white.png" alt="Autoscience" className="nav__logo" />
          <span className="nav__wm">AUTOSCIENCE</span>
        </a>
        <div className={"nav__links" + (open ? " nav__links--open" : "")}>
          <a className="nav__link" href="/mira" onClick={() => setOpen(false)}>Mira</a>
          <a className="nav__link" href="/carl" onClick={() => setOpen(false)}>Carl</a>
          <a className="nav__link" href="/blog" onClick={() => setOpen(false)}>Blog</a>
          <a className="nav__link" href="/careers" onClick={() => setOpen(false)}>Careers</a>
          <a className="nav__mobile-cta" href="/get-started" onClick={() => setOpen(false)}>Get started</a>
        </div>
        <a className="nav__cta" href="/get-started">Get started</a>
        <button
          type="button"
          className="nav__mobile-btn"
          aria-label="Toggle menu"
          aria-expanded={open}
          onClick={() => setOpen(!open)}
        >
          <span></span>
          <span></span>
          <span></span>
        </button>
      </header>
      <hr className="hairline" />
    </React.Fragment>
  );
}
window.Nav = Nav;