function Nav({ route }) {
  const items = [
  { label: "Mission", href: "#/mission" },
  { label: "Counter-Drone", href: "#/counter-drone" },
  { label: "Soft Robotics", href: "#/soft-robotics" },
  { label: "Partners", href: "#/partners" }];

  const isActive = (href) => "#" + route === href || route === "/" && href === "#/" || ("#" + route).startsWith(href + "/");

  return (
    <nav className="nav" data-screen-label="Global Nav">
      <div className="nav-inner">
        <a href="#/" className="brand">
          <img src={(window.__resources && window.__resources.logoImg) || "assets/logo.png"} alt="America First Defense.AI" style={{ height: 56, width: "auto", display: "block" }} />
          <div className="brand-text">
            <span className="a">America First Defense<span style={{ color: "var(--crimson)" }}>.AI</span></span>
          </div>
        </a>
        <div className="nav-links">
          {items.map((it) =>
          <a key={it.href} href={it.href}
          className={`nav-link ${isActive(it.href) ? "active" : ""}`}>
              {it.label}
            </a>
          )}
        </div>
        <div className="nav-actions">
          <a href="#/contact" className="nav-cta">CONTACT</a>
        </div>
      </div>
    </nav>);

}

Object.assign(window, { Nav });