@php
    $navMode = $storeConfig['headerNavigationMode'] ?? 'MODE_A';
    $currentPath = '/' . ltrim(request()->path(), '/');

    if ($navMode === 'MODE_B') {
        $drawerLinks = [
            ['label' => 'Home', 'url' => '/'],
            ['label' => 'All Sarees', 'url' => '/sarees'],
            ['label' => 'New Arrivals', 'url' => '/collections/new-arrivals'],
            ['label' => 'Festive Edit', 'url' => '/collections/festive-edit'],
            ['label' => 'Offers', 'url' => '/collections/offers'],
        ];
    } else {
        $drawerLinks = [
            ['label' => 'Home', 'url' => '/'],
            ['label' => 'All Sarees', 'url' => '/sarees'],
        ];
        foreach ($activeCategories as $cat) {
            if (!empty($cat['showInHeaderModeA'])) {
                $drawerLinks[] = [
                    'label' => $cat['shortName'] ?? $cat['name'],
                    'url' => '/category/' . $cat['slug'],
                ];
            }
        }
    }
@endphp

{{-- Slide-Out Mobile Menu Drawer (Left-to-Right Overlay, z-overlay) --}}
<div x-data
     x-show="$store.ui.mobileMenuOpen"
     x-cloak
     class="fixed inset-0 z-overlay lg:hidden"
     role="dialog"
     aria-modal="true"
     aria-label="Mobile Navigation Menu">

    {{-- Dimmed Backdrop (--text-primary at 60% opacity) --}}
    <div x-show="$store.ui.mobileMenuOpen"
         x-transition:enter="transition-opacity ease-out duration-200"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition-opacity ease-in duration-200"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         @click="$store.ui.closeMobileMenu()"
         class="fixed inset-0 overlay-backdrop"></div>

    {{-- Drawer Panel: width 82vw (max-width: 320px), height 100dvh, --bg-main with 1px --border-subtle right border --}}
    <div x-show="$store.ui.mobileMenuOpen"
         x-transition:enter="transition-transform ease-out duration-250"
         x-transition:enter-start="-translate-x-full"
         x-transition:enter-end="translate-x-0"
         x-transition:leave="transition-transform ease-in duration-200"
         x-transition:leave-start="translate-x-0"
         x-transition:leave-end="-translate-x-full"
         class="relative w-[82vw] max-w-[320px] h-[100dvh] bg-bg-main border-r border-border-subtle flex flex-col justify-between overflow-y-auto">

        {{-- Top Section: Drawer Top Bar + Flat Navigation List --}}
        <div>
            {{-- Drawer Top Bar (height: 60px, solid --brand-primary) --}}
            <div class="h-[60px] bg-brand-primary px-[16px] flex items-center justify-between">
                <a href="{{ url('/') }}"
                   @click="$store.ui.closeMobileMenu()"
                   class="font-heading font-bold text-[22px] tracking-[1px] text-text-light">
                    {{ $storeConfig['brandName'] }}
                </a>
                <button type="button"
                        @click="$store.ui.closeMobileMenu()"
                        aria-label="Close menu"
                        class="w-[44px] h-[44px] -mr-[8px] inline-flex items-center justify-center text-text-light hover:text-brand-accent transition-colors duration-200 cursor-pointer">
                    <svg class="w-[22px] h-[22px] stroke-current fill-none" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>

            {{-- Flat Vertical Navigation List (Synced with MODE_A or MODE_B) --}}
            <nav aria-label="Mobile Navigation Links" class="divide-y divide-border-subtle border-b border-border-subtle">
                @foreach($drawerLinks as $link)
                    @php
                        $isActive = ($link['url'] === '/' && $currentPath === '/')
                            || ($link['url'] !== '/' && str_starts_with($currentPath, $link['url']));
                    @endphp
                    <a href="{{ url($link['url']) }}"
                       @click="$store.ui.closeMobileMenu()"
                       class="h-[50px] px-[20px] flex items-center justify-between font-body text-[15px] transition-colors duration-200 hover:bg-bg-surface {{ $isActive ? 'font-semibold text-brand-primary bg-bg-surface' : 'font-medium text-text-primary' }}">
                        <span>{{ $link['label'] }}</span>
                        <span class="text-text-muted text-[14px]" aria-hidden="true">→</span>
                    </a>
                @endforeach
            </nav>
        </div>

        {{-- Drawer Bottom Support Box (Pinned Bottom, --bg-surface Container, 1px --border-subtle Top Border) --}}
        <div class="bg-bg-surface border-t border-border-subtle p-[20px] space-y-[8px]">
            <p class="font-body font-semibold text-[13px] text-text-primary">
                Helpline / WhatsApp:
                <a href="tel:{{ $storeConfig['storeContactInfo']['phoneRaw'] }}" class="text-brand-primary underline decoration-brand-accent">
                    {{ $storeConfig['storeContactInfo']['phone'] }}
                </a>
            </p>
            <p class="font-body text-[12px] text-text-muted">
                Support Hours: {{ $storeConfig['storeContactInfo']['supportHours'] }}
            </p>
            <p class="font-body font-medium text-[13px] text-text-primary pt-[4px]">
                ✓ Cash on Delivery Across Bangladesh
            </p>
        </div>
    </div>
</div>