@php
$navItems = config('front-navigation.items', []);
@endphp

{{-- Backdrop --}}
<div
    x-show="mobileOpen"
    x-cloak
    @click="closeMobile()"
    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-150"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
    class="fixed inset-0 z-[60] bg-foreground/20 backdrop-blur-sm lg:hidden"
    aria-hidden="true"></div>

{{-- Drawer: fixed to left edge, slides in from the left (not right) --}}
<aside
    x-show="mobileOpen"
    x-cloak
    @keydown.escape.window="closeMobile()"
    x-transition:enter="transform transition ease-out duration-300"
    x-transition:enter-start="-translate-x-full opacity-0"
    x-transition:enter-end="translate-x-0 opacity-100"
    x-transition:leave="transform transition ease-in duration-250"
    x-transition:leave-start="translate-x-0 opacity-100"
    x-transition:leave-end="-translate-x-full opacity-0"
    class="fixed top-0 bottom-0 left-0 right-auto z-[70] flex w-full max-w-sm flex-col border-r border-border bg-card shadow-soft lg:hidden"
    aria-modal="true"
    aria-label="Mobile navigation">
    @php
    $themeToggleClass = 'inline-flex cursor-pointer select-none items-center justify-center rounded-lg border border-border bg-card p-2 text-card-foreground shadow-sm transition-colors hover:bg-muted active:bg-muted/80';
    @endphp

    <div class="flex items-center justify-between gap-3 border-b border-border px-4 py-3">
        <x-common.theme-toggle :class="$themeToggleClass" />
        <div class="flex items-center gap-1">
            @auth('user')
                <x-common.auth.user-dropdown
                    guard="user"
                    :menu-items="config('user-nav.dropdown-items')"
                    logout-route="#"
                />
            @endauth
            <button
                type="button"
                @click="closeMobile()"
                class="inline-flex h-10 w-10 items-center justify-center rounded-xl text-muted-foreground transition-colors hover:bg-muted"
                aria-label="Close menu">
                <x-heroicon-o-x-mark class="h-5 w-5" />
            </button>
        </div>
    </div>

    <nav class="flex-1 overflow-y-auto px-3 py-4" aria-label="Mobile primary">
        <ul class="space-y-1">
            @foreach ($navItems as $index => $item)
            @php
            $key = 'mobile-' . $index;
            $type = $item['type'] ?? 'link';
            @endphp

            <li>
                @if ($type === 'link')
                <x-layouts.front.navigation.link
                    :entry="$item"
                    prepend-click="closeMobile()"
                    class="block rounded-xl px-3 py-2.5 text-sm font-medium text-foreground hover:bg-muted">
                    {{ $item['label'] }}
                </x-layouts.front.navigation.link>
                @else
                <button
                    type="button"
                    @click="toggleSubmenu('{{ $key }}')"
                    class="flex w-full items-center justify-between rounded-xl px-3 py-2.5 text-sm font-medium text-foreground hover:bg-muted"
                    :aria-expanded="isSubmenuOpen('{{ $key }}')">
                    {{ $item['label'] }}
                    <x-heroicon-o-chevron-down
                        class="h-4 w-4 text-muted-foreground transition-transform"
                        ::class="isSubmenuOpen('{{ $key }}') ? 'rotate-180' : ''" />
                </button>

                <div x-show="isSubmenuOpen('{{ $key }}')" x-collapse class="mt-1 space-y-1 pl-2">
                    @if ($type === 'dropdown')
                    @foreach ($item['children'] ?? [] as $child)
                    <x-layouts.front.navigation.link
                        :entry="$child"
                        prepend-click="closeMobile()"
                        class="block rounded-lg px-3 py-2 text-sm text-muted-foreground hover:bg-muted hover:text-foreground">
                        {{ $child['label'] }}
                    </x-layouts.front.navigation.link>
                    @endforeach
                    @elseif ($type === 'mega')
                    @foreach ($item['sections'] ?? [] as $section)
                    <p class="px-3 pt-3 text-2xs font-semibold uppercase tracking-wider text-muted-foreground">
                        {{ $section['title'] }}
                    </p>
                    @foreach ($section['links'] ?? [] as $link)
                    <x-layouts.front.navigation.link
                        :entry="$link"
                        prepend-click="closeMobile()"
                        class="block rounded-lg px-3 py-2 text-sm text-muted-foreground hover:bg-muted hover:text-foreground">
                        {{ $link['label'] }}
                    </x-layouts.front.navigation.link>
                    @endforeach
                    @endforeach
                    @foreach ($item['featured'] ?? [] as $featured)
                    <x-layouts.front.navigation.link
                        :entry="$featured"
                        prepend-click="closeMobile()"
                        class="mx-1 mt-2 block rounded-xl border border-border bg-muted/50 p-3 text-sm font-medium text-foreground">
                        {{ $featured['title'] }}
                    </x-layouts.front.navigation.link>
                    @endforeach
                    @endif
                </div>
                @endif
            </li>
            @endforeach
        </ul>
    </nav>

</aside>