{#
  UI/UX V2 Phase 1A — Desktop navigation component (INERT UNTIL INCLUDED)

  Expected optional context:
    navigation_items_v2: list of mappings with:
      label (required), url, active, visible, badge, children
    navigation_aria_label_v2: accessible label (default: "Primary navigation")

  The component is deliberately data-driven and contains no role or permission
  assumptions. A later role pilot will build navigation_items_v2 from the
  existing permission helpers without changing current access rules.
#}
{% set _nav_items = navigation_items_v2|default([], true) %}
{% set _nav_label = navigation_aria_label_v2|default('Primary navigation', true) %}

{% if _nav_items %}
<nav aria-label="{{ _nav_label }}" class="hidden border-b border-slate-200 bg-white lg:block" data-uiux-v2="desktop-navigation">
  <div class="mx-auto max-w-[1500px] px-4 sm:px-6 lg:px-8">
    <ul class="flex min-h-12 items-stretch gap-1" role="list">
      {% for item in _nav_items %}
        {% set _visible = item.get('visible', true) %}
        {% set _children = item.get('children', []) or [] %}
        {% set _active = item.get('active', false) %}
        {% if _visible %}
          <li class="relative flex items-stretch">
            {% if _children %}
              <details class="group relative flex items-stretch">
                <summary
                  class="flex cursor-pointer list-none items-center gap-2 border-b-2 px-3 py-3 text-sm font-semibold transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 {{ 'border-brand-600 text-brand-700' if _active else 'border-transparent text-slate-700 hover:border-slate-300 hover:text-slate-950' }}"
                  aria-haspopup="menu"
                >
                  <span>{{ item.get('label', '') }}</span>
                  {% if item.get('badge') is not none %}
                    <span class="rounded-full bg-brand-50 px-2 py-0.5 text-[11px] font-bold text-brand-700">{{ item.get('badge') }}</span>
                  {% endif %}
                  <svg class="h-4 w-4 transition-transform group-open:rotate-180" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.938a.75.75 0 1 1 1.08 1.04l-4.25 4.51a.75.75 0 0 1-1.08 0l-4.25-4.51a.75.75 0 0 1 .02-1.06Z" clip-rule="evenodd" />
                  </svg>
                </summary>

                <div class="absolute left-0 top-full z-50 mt-1 min-w-64 overflow-hidden rounded-2xl border border-slate-200 bg-white p-2 shadow-card" role="menu">
                  {% for child in _children %}
                    {% if child.get('visible', true) %}
                      {% set _child_active = child.get('active', false) %}
                      <a
                        href="{{ child.get('url', '#') }}"
                        class="flex items-center justify-between gap-3 rounded-xl px-3 py-2.5 text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 {{ 'bg-brand-50 text-brand-700' if _child_active else 'text-slate-700 hover:bg-slate-50 hover:text-slate-950' }}"
                        role="menuitem"
                        {% if _child_active %}aria-current="page"{% endif %}
                        {% if child.get('external', false) %}target="_blank" rel="noopener noreferrer"{% endif %}
                      >
                        <span>{{ child.get('label', '') }}</span>
                        {% if child.get('badge') is not none %}
                          <span class="rounded-full bg-slate-100 px-2 py-0.5 text-[11px] font-bold text-slate-600">{{ child.get('badge') }}</span>
                        {% endif %}
                      </a>
                    {% endif %}
                  {% endfor %}
                </div>
              </details>
            {% else %}
              <a
                href="{{ item.get('url', '#') }}"
                class="flex items-center gap-2 border-b-2 px-3 py-3 text-sm font-semibold transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 {{ 'border-brand-600 text-brand-700' if _active else 'border-transparent text-slate-700 hover:border-slate-300 hover:text-slate-950' }}"
                {% if _active %}aria-current="page"{% endif %}
                {% if item.get('external', false) %}target="_blank" rel="noopener noreferrer"{% endif %}
              >
                <span>{{ item.get('label', '') }}</span>
                {% if item.get('badge') is not none %}
                  <span class="rounded-full bg-brand-50 px-2 py-0.5 text-[11px] font-bold text-brand-700">{{ item.get('badge') }}</span>
                {% endif %}
              </a>
            {% endif %}
          </li>
        {% endif %}
      {% endfor %}
    </ul>
  </div>
</nav>
{% endif %}