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

  Uses native <details>, so it requires no JavaScript and cannot interfere with
  the current application shell. It consumes the same navigation_items_v2 data
  as navigation_v2.html.
#}
{% set _mobile_items = navigation_items_v2|default([], true) %}
{% set _mobile_label = navigation_aria_label_v2|default('Mobile navigation', true) %}

{% if _mobile_items %}
<div class="lg:hidden" data-uiux-v2="mobile-navigation">
  <details class="group border-b border-slate-200 bg-white">
    <summary class="mx-auto flex min-h-12 max-w-[1500px] cursor-pointer list-none items-center justify-between gap-3 px-4 py-2 text-sm font-semibold text-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand-500 sm:px-6">
      <span class="inline-flex items-center gap-2">
        <svg class="h-5 w-5 group-open:hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <path stroke-linecap="round" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
        <svg class="hidden h-5 w-5 group-open:block" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <path stroke-linecap="round" d="M6 6l12 12M18 6 6 18" />
        </svg>
        <span>Menu</span>
      </span>
      <span class="text-xs font-medium text-slate-500">{{ _mobile_label }}</span>
    </summary>

    <nav aria-label="{{ _mobile_label }}" class="border-t border-slate-100 bg-slate-50/80 px-4 py-3 sm:px-6">
      <ul class="mx-auto max-w-[1500px] space-y-1" role="list">
        {% for item in _mobile_items %}
          {% if item.get('visible', true) %}
            {% set _children = item.get('children', []) or [] %}
            {% set _active = item.get('active', false) %}
            <li>
              {% if _children %}
                <details class="group/sub rounded-xl border {{ 'border-brand-200 bg-brand-50/60' if _active else 'border-transparent bg-white' }}">
                  <summary class="flex cursor-pointer list-none items-center justify-between gap-3 rounded-xl px-3 py-2.5 text-sm font-semibold {{ 'text-brand-700' if _active else 'text-slate-800' }}">
                    <span class="inline-flex items-center gap-2">
                      {{ item.get('label', '') }}
                      {% if item.get('badge') is not none %}
                        <span class="rounded-full bg-brand-100 px-2 py-0.5 text-[11px] font-bold text-brand-700">{{ item.get('badge') }}</span>
                      {% endif %}
                    </span>
                    <svg class="h-4 w-4 transition-transform group-open/sub: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="space-y-1 border-t border-slate-100 p-2">
                    {% 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-lg px-3 py-2 text-sm {{ 'bg-brand-100 font-semibold text-brand-800' if _child_active else 'text-slate-700 hover:bg-slate-100' }}"
                          {% 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-white 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 justify-between gap-3 rounded-xl px-3 py-2.5 text-sm font-semibold {{ 'bg-brand-50 text-brand-700' if _active else 'bg-white text-slate-800 hover:bg-slate-100' }}"
                  {% 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-100 px-2 py-0.5 text-[11px] font-bold text-brand-700">{{ item.get('badge') }}</span>
                  {% endif %}
                </a>
              {% endif %}
            </li>
          {% endif %}
        {% endfor %}
      </ul>
    </nav>
  </details>
</div>
{% endif %}