// components/nav.el — Top navigation bar.
//
// Responsive: desktop shows full link bar, ≤1060px collapses to hamburger.
// Hamburger toggles .nav-mobile panel. Closes on link click or outside click.

fn nav() -> String {
    return "
<nav id=\"nav\">
  <div class=\"nav-inner\">
    <a href=\"/\" class=\"nav-logo\" aria-label=\"Neuron home\"><img src=\"/assets/brand/neuron-wordmark-on-light.png\" srcset=\"/assets/brand/neuron-wordmark-on-light@2x.png 2x\" alt=\"Neuron\" height=\"28\"></a>

    <!-- Order mirrors page section order: how-it-works → enterprise →
         mission/safety/environment → marketplace → pricing. -->
    <div class=\"nav-links\">
      <a href=\"/#how-it-works\"  class=\"nav-link\">How it works</a>
      <a href=\"/#enterprise\"    class=\"nav-link\">Enterprise</a>
      <div class=\"nav-dropdown\">
        <button class=\"nav-link nav-dropdown-btn\" aria-haspopup=\"true\" aria-expanded=\"false\">Mission &#9662;</button>
        <div class=\"nav-dropdown-menu\">
          <a href=\"/#mission\"       class=\"nav-dropdown-item\">Our mission</a>
          <a href=\"/#safety\"        class=\"nav-dropdown-item\">Safety</a>
          <a href=\"/#environmental\" class=\"nav-dropdown-item\">Environment</a>
        </div>
      </div>
      <a href=\"/#marketplace\"   class=\"nav-link\">Marketplace</a>
      <a href=\"/#pricing\"       class=\"nav-link\">Pricing</a>
      <a href=\"/about\"          class=\"nav-link\">About</a>
      <a href=\"/said\"           class=\"nav-link\">Gallery</a>
      <a href=\"/account\"        class=\"nav-link\">Account</a>
      <a href=\"/#pricing\"       class=\"nav-cta\">Get Access</a>
    </div>

    <button class=\"nav-hamburger\" id=\"nav-hamburger\" aria-label=\"Open navigation\" aria-expanded=\"false\" aria-controls=\"nav-mobile\">
      <span></span>
      <span></span>
      <span></span>
    </button>

    <div class=\"nav-mobile\" id=\"nav-mobile\" role=\"navigation\" aria-label=\"Mobile navigation\">
      <a href=\"/#how-it-works\" class=\"nav-mobile-link\">How it works</a>
      <a href=\"/#enterprise\"    class=\"nav-mobile-link\">Enterprise</a>
      <a href=\"/#mission\"       class=\"nav-mobile-link\">Mission</a>
      <a href=\"/#safety\"        class=\"nav-mobile-link\" style=\"padding-left:1.75rem;font-size:0.8rem;color:var(--t3)\">- Safety</a>
      <a href=\"/#environmental\" class=\"nav-mobile-link\" style=\"padding-left:1.75rem;font-size:0.8rem;color:var(--t3)\">- Environment</a>
      <a href=\"/#marketplace\"   class=\"nav-mobile-link\">Marketplace</a>
      <a href=\"/#pricing\"       class=\"nav-mobile-link\">Pricing</a>
      <a href=\"/about\"          class=\"nav-mobile-link\">About</a>
      <a href=\"/said\"           class=\"nav-mobile-link\">Gallery</a>
      <a href=\"/account\"        class=\"nav-mobile-link\">Account</a>
      <a href=\"/#pricing\"       class=\"nav-mobile-cta\">Get Access</a>
    </div>
  </div>
</nav>

<script src=\"/js/nav.js\" defer></script>
"
}