{{-- Shared mobile menu, included by all navbar variants --}}
<div id="mobile-menu" class="hidden lg:hidden bg-black/95 backdrop-blur-lg border-t border-white/10">
    <div class="px-4 py-4 space-y-1">
        @foreach($sections as $section)
            <a href="#section-{{ $section->section_key->value }}"
               class="block px-4 py-3 text-white/80 hover:text-white hover:bg-white/5 rounded-lg transition-colors"
               onclick="document.getElementById('mobile-menu').classList.add('hidden')">
                {{ $section->title ?? $section->section_key->label() }}
            </a>
        @endforeach

        <div class="border-t border-white/10 pt-3 mt-3">
            @auth
                <a href="{{ route('dashboard') }}" class="block px-4 py-3 text-white/80 hover:text-white hover:bg-white/5 rounded-lg transition-colors">
                    {{ __('لوحة التحكم') }}
                </a>
            @else
                <a href="{{ route('login') }}" class="block px-4 py-3 text-white/80 hover:text-white hover:bg-white/5 rounded-lg transition-colors">
                    {{ __('تسجيل الدخول') }}
                </a>
            @endauth
        </div>
    </div>
</div>
