{{-- Mobile Side Drawer Overlay --}}
<div class="mobile-drawer-overlay md:hidden"></div>

{{-- Mobile Side Drawer --}}
<div class="mobile-drawer md:hidden">
    <!-- Drawer Header -->
    <div class="flex items-center justify-between px-6 py-4 border-b border-[hsl(var(--border)/0.3)]">
        <span class="text-[15px] font-bold text-foreground">Menu</span>
        <button
            class="mobile-drawer-close flex items-center justify-center w-9 h-9 rounded-lg text-foreground/70 hover:text-foreground hover:bg-[hsl(var(--border)/0.3)] transition-colors cursor-pointer"
            aria-label="Close menu">
            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
            </svg>
        </button>
    </div>

    <!-- Drawer Body -->
    <div class="px-5 py-5 space-y-1.5 flex-1 overflow-y-auto">
        <!-- Mobile Nav Links -->
        <a href="{{ route('front.index') }}" class="mobile-nav-link">
            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
            </svg>
            {{ $frontSetting->home_text ?? 'Home' }}
        </a>
        <a href="{{ route('front.features') }}" class="mobile-nav-link">
            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 0 0-2.455 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z" />
            </svg>
            {{ $frontSetting->features_text ?? 'Features' }}
        </a>
        <a href="{{ route('front.pricing') }}" class="mobile-nav-link">
            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M12 6v12m-3-2.818.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
            </svg>
            {{ $frontSetting->pricing_text ?? 'Pricing' }}
        </a>
        <a href="{{ route('front.contact') }}" class="mobile-nav-link">
            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
            </svg>
            {{ $frontSetting->contact_text ?? 'Contact Us' }}
        </a>

        <!-- Divider -->
        <div class="border-t border-[hsl(var(--border)/0.3)] !my-4"></div>

        <!-- Mobile Language Selector -->
        @if (isset($allLangs) && count($allLangs) > 1)
            <div class="mobile-lang-accordion">
                <button
                    class="mobile-lang-toggle flex items-center justify-between w-full px-4 py-3 rounded-xl border border-[hsl(var(--border))] cursor-pointer">
                    <span class="flex items-center gap-2.5">
                        <svg class="w-5 h-5 text-foreground/70" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                            stroke-width="1.5">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418" />
                        </svg>
                        <span class="text-[14px] font-semibold text-foreground/85">Language</span>
                        <span
                            class="mobile-lang-current text-[13px] font-medium text-muted-foreground">{{ $selectedLang->name ?? 'English' }}</span>
                    </span>
                    <svg class="w-4 h-4 text-foreground/50 mobile-lang-chevron transition-transform duration-200"
                        fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                    </svg>
                </button>
                <div class="mobile-lang-options">
                    @foreach ($allLangs as $lang)
                        <button
                            class="mobile-lang-option {{ ($selectedLang->key ?? '') == $lang->key ? 'active' : '' }}"
                            data-lang="{{ $lang->key }}"
                            data-name="{{ $lang->name }}">{{ $lang->name }}</button>
                    @endforeach
                </div>
            </div>
        @endif
    </div>

    <!-- Drawer Footer -->
    <div class="px-5 py-5 border-t border-[hsl(var(--border)/0.3)]">
        <div class="flex gap-3">
            <a href="{{ route('main', ['path' => 'admin/login']) }}"
                class="btn-secondary flex-1 inline-flex items-center justify-center gap-2 px-4 py-2.5 text-[14px] font-semibold rounded-lg">
                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9" />
                </svg>
                {{ $frontSetting->login_button_text ?? 'Login' }}
            </a>
            <a href="{{ route('front.register') }}"
                class="btn-primary flex-1 inline-flex items-center justify-center gap-2 px-4 py-2.5 text-[14px] font-semibold rounded-lg">
                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z" />
                </svg>
                {{ $frontSetting->register_button_text ?? 'Register' }}
            </a>
        </div>
    </div>
</div>