<%
  const _path = typeof currentPath !== 'undefined' ? currentPath : '';
  const _nav = typeof linkNav === 'function' ? linkNav : (target) => {
    const active = _path === target;
    return active
      ? "font-['Noto_Serif'] tracking-widest uppercase text-sm text-[#e9c176] border-b border-[#e9c176] pb-1"
      : "font-['Noto_Serif'] tracking-widest uppercase text-sm text-[#aacfbe] hover:text-[#e9c176] transition-colors";
  };
  const _navDrawer = (target) => {
    const active = _path === target;
    return active
      ? "site-nav__drawer-link site-nav__drawer-link--active"
      : "site-nav__drawer-link";
  };
  const _primaryNav = (site.architecture && site.architecture.primaryNav && site.architecture.primaryNav.length)
    ? site.architecture.primaryNav
    : [
        { path: '/', label: 'Home' },
        { path: '/leistungen', label: 'Leistungen' },
        { path: '/team', label: 'Team' },
        { path: '/galerie', label: 'Galerie' },
        { path: '/kontakt', label: 'Kontakt' },
      ];
%>
<nav class="site-nav site-nav--enter fixed top-0 left-0 right-0 z-[100] bg-[#00170f]/92 backdrop-blur-xl border-b border-[#aacfbe]/10 shadow-[0_8px_32px_0_rgba(197,235,217,0.04)]" aria-label="Hauptnavigation">
  <div class="max-w-screen-2xl mx-auto px-4 sm:px-6 md:px-12 pt-[max(12px,env(safe-area-inset-top,0px))] pb-3 md:py-6">
    <div class="flex flex-row items-center justify-between gap-3 md:gap-8">
      <a href="/" class="min-w-0 text-lg sm:text-2xl font-headline tracking-tighter text-[#e9c176] truncate py-2 -my-2 pr-2"><%= site.brand %></a>

      <div class="hidden md:flex items-center space-x-10 lg:space-x-12 flex-1 justify-center">
        <% _primaryNav.forEach(function (item) { %>
        <a class="<%= _nav(item.path) %>" href="<%= item.path %>"><%= item.label %></a>
        <% }); %>
      </div>

      <div class="flex items-center gap-2 shrink-0">
        <a href="/buchung" class="md:hidden inline-flex items-center justify-center min-h-11 min-w-[44px] px-4 rounded-md bg-gradient-to-r from-primary to-on-primary-container text-on-primary font-label uppercase tracking-[0.12em] text-[10px] font-bold active:scale-[0.98] transition-transform">Termin</a>
        <button type="button" id="site-nav-toggle" class="md:hidden site-nav__menu-btn" aria-expanded="false" aria-controls="site-nav-drawer" aria-label="Menü öffnen">
          <span class="material-symbols-outlined text-[26px]" aria-hidden="true">menu</span>
        </button>
        <a href="/buchung" class="hidden md:inline-flex items-center justify-center bg-gradient-to-r from-primary to-on-primary-container text-on-primary px-6 lg:px-8 py-3 rounded-md font-label uppercase tracking-[0.1em] text-xs font-bold min-h-11 hover:shadow-[0_0_32px_rgba(233,193,118,0.2)] transition-all active:scale-95">
          Termin anfragen
        </a>
      </div>
    </div>

    <div id="site-nav-drawer" class="site-nav__drawer md:hidden" hidden>
      <div class="site-nav__drawer-inner border-t border-[#aacfbe]/10 mt-3 pt-1">
        <div class="flex flex-col pb-[max(8px,env(safe-area-inset-bottom,0px))]">
          <% _primaryNav.forEach(function (item) { %>
          <a class="<%= _navDrawer(item.path) %>" href="<%= item.path %>"><%= item.label %></a>
          <% }); %>
        </div>
      </div>
    </div>
  </div>
</nav>
