/* AI Scan landing — top navigation. Sentence-case links, mono-feel wordmark,
   one blue CTA. On mobile the actions collapse into a tap-to-open menu. */
const { Button } = window.AIScanDesignSystem_81b9d1;
const CarbonIcon = window.CarbonIcon;
/* On sub-pages set window.__LS_HOME = "/" so anchors point back to the home page. */
const LS_HOME = (typeof window !== "undefined" && window.__LS_HOME) || "";

function Nav() {
  const links = ["How it works", "Why it works", "What you get", "FAQ"];
  const [open, setOpen] = React.useState(false);

  const close = () => setOpen(false);

  return (
    <header className="ls-nav">
      <div className="ls-nav__inner">
        <a className="ls-wordmark" href={LS_HOME + "#top"} aria-label="AI Scan — home" onClick={close}>
          <img className="ls-wordmark__img" src="assets/logo/AI-Scan-logo.svg" alt="AI Scan" width="970" height="325" decoding="async" />
        </a>
        <nav className="ls-nav__links" aria-label="Primary">
          {links.map((l) => (
            <a key={l} href={LS_HOME + "#" + l.replace(/\s+/g, "-").toLowerCase()}>{l}</a>
          ))}
        </nav>
        <div className="ls-nav__actions">
          <Button variant="primary" size="sm" className="aisn-btn--scan" href={LS_HOME + "#book"} data-cta="book-scan" data-cta-location="nav" data-ph-event="book_scan_click">Book a scan</Button>
          <Button variant="secondary" size="sm" href="https://ai-scan.k8s.aai-labs.com/" target="_blank" rel="noopener noreferrer" aria-label="Client login (opens in a new tab)" data-cta="client-login" data-cta-location="nav" data-ph-event="client_login_click" iconRight={<CarbonIcon name="arrow--right" />}>Client login<span className="ls-sr-only">(opens in a new tab)</span></Button>
        </div>
        <button
          type="button"
          className="ls-nav__toggle"
          aria-label={open ? "Close menu" : "Open menu"}
          aria-expanded={open}
          aria-controls="ls-nav-drawer"
          onClick={() => setOpen((v) => !v)}
        >
          <CarbonIcon key={open ? "close" : "menu"} name={open ? "close" : "menu"} />
        </button>
      </div>

      <div id="ls-nav-drawer" className={"ls-nav__drawer" + (open ? " is-open" : "")}>
        <nav className="ls-nav__drawerlinks" aria-label="Primary (mobile)">
          {links.map((l) => (
            <a key={l} href={LS_HOME + "#" + l.replace(/\s+/g, "-").toLowerCase()} onClick={close}>{l}</a>
          ))}
        </nav>
        <div className="ls-nav__draweractions">
          <Button variant="primary" size="md" className="aisn-btn--scan" href={LS_HOME + "#book"} onClick={close} data-cta="book-scan" data-cta-location="nav-drawer" data-ph-event="book_scan_click">Book a scan</Button>
          <Button variant="secondary" size="md" href="https://ai-scan.k8s.aai-labs.com/" target="_blank" rel="noopener noreferrer" aria-label="Client login (opens in a new tab)" onClick={close} data-cta="client-login" data-cta-location="nav-drawer" data-ph-event="client_login_click" iconRight={<CarbonIcon name="arrow--right" />}>Client login<span className="ls-sr-only">(opens in a new tab)</span></Button>
        </div>
      </div>
    </header>
  );
}
window.Nav = Nav;