{{--
    Customer dashboard sub-layout (sidebar + content slot).
    Breakpoint matches front header: lg (1024px).

    Identity (avatar, name, email) lives on each page — not repeated here.
    < lg  — compact account menu trigger + dropdown nav
    ≥ lg  — sticky navigation-only sidebar
--}}
@php
    use Illuminate\Support\Facades\Route;

    $navItems = config('user-nav.sidebar-items', []);
    $activeNavLabel = __('pages/profile.title');

    foreach ($navItems as $item) {
        if (! empty($item['route']) && Route::has($item['route']) && request()->routeIs($item['route'])) {
            $activeNavLabel = $item['label'];
            break;
        }
    }
@endphp

<section class="overflow-x-clip border-b border-border bg-gradient-to-b from-muted/50 via-background to-background">
    <div class="container pt-6 pb-6 sm:pt-8 sm:pb-8 lg:pt-10 lg:pb-12">
        <div class="flex min-w-0 flex-col gap-4 lg:flex-row lg:items-start lg:gap-8 xl:gap-10">

            <aside
                class="w-full min-w-0 shrink-0 lg:w-64 lg:sticky lg:top-[calc(4.25rem+2rem)] lg:z-40 lg:max-h-[calc(100vh-4.25rem+2rem)] lg:overflow-y-auto xl:w-72"
                aria-label="Account navigation"
            >
                {{-- < lg: compact menu trigger (no profile identity — shown on page content) --}}
                <div
                    class="relative z-30 lg:hidden"
                    x-data="{ accountOpen: false }"
                    @keydown.escape.window="accountOpen = false"
                >
                    <div class="flex items-center justify-between gap-3 rounded-2xl border border-border/80 bg-card px-4 py-3 shadow-card dark:shadow-soft">
                        <div class="min-w-0">
                            <p class="text-2xs font-medium uppercase tracking-wider text-muted-foreground">Account</p>
                            <p class="truncate text-sm font-semibold text-foreground">{{ $activeNavLabel }}</p>
                        </div>
                        <x-buttons.icon
                            variant="ghost"
                            size="sm"
                            title="Account navigation menu"
                            class="h-10 w-10 shrink-0 rounded-xl border border-border/80 text-foreground hover:bg-muted/60 focus-visible:ring-2 focus-visible:ring-ring"
                            aria-controls="account-nav-panel"
                            x-bind:aria-expanded="accountOpen"
                            @click="accountOpen = !accountOpen"
                        >
                            <x-heroicon-o-bars-3 class="h-5 w-5" x-show="!accountOpen" />
                            <x-heroicon-o-x-mark class="h-5 w-5" x-show="accountOpen" x-cloak />
                        </x-buttons.icon>
                    </div>

                    <div
                        id="account-nav-panel"
                        x-show="accountOpen"
                        x-cloak
                        x-transition:enter="transition ease-out duration-200"
                        x-transition:enter-start="opacity-0 -translate-y-1"
                        x-transition:enter-end="opacity-100 translate-y-0"
                        x-transition:leave="transition ease-in duration-150"
                        x-transition:leave-start="opacity-100 translate-y-0"
                        x-transition:leave-end="opacity-0 -translate-y-1"
                        @click.outside="accountOpen = false"
                        class="absolute left-0 right-0 mt-2 overflow-hidden rounded-2xl border border-border/80 bg-card shadow-hover dark:shadow-soft"
                        role="region"
                        aria-label="Account menu"
                    >
                        {{-- Mobile: vertical list · Tablet (md+): item box grid --}}
                        <ul
                            class="grid grid-cols-1 gap-0.5 p-2 md:grid-cols-2 md:gap-1.5 min-[880px]:grid-cols-3 min-[880px]:gap-2"
                            role="list"
                        >
                            @foreach ($navItems as $item)
                                @php
                                    $href = 'javascript:void(0)';
                                    $isActive = false;
                                    if (isset($item['route']) && ! empty($item['route']) && Route::has($item['route'])) {
                                        $href = route($item['route']);
                                        $isActive = request()->routeIs($item['route']);
                                    }
                                    $activeTone = $isActive
                                        ? 'bg-brand/10 text-brand ring-1 ring-brand/20 shadow-sm dark:bg-primary-500/15 dark:text-primary-300 dark:ring-primary-500/30'
                                        : 'text-muted-foreground hover:bg-muted/70 hover:text-foreground dark:hover:bg-muted/40';
                                    $linkClass = 'group flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium transition-colors duration-200 '
                                        . 'md:min-h-[4.25rem] md:flex-col md:items-center md:justify-center md:gap-1.5 md:px-2 md:py-3 md:text-center md:text-xs '
                                        . $activeTone;
                                @endphp
                                <li class="min-w-0">
                                    <a
                                        href="{{ $href }}"
                                        @if (! empty($item['click'])) @click.prevent="{{ $item['click'] }}" @endif
                                        @click="accountOpen = false"
                                        @if ($isActive) aria-current="page" @endif
                                        class="{{ $linkClass }}"
                                    >
                                        @if (isset($item['icon']))
                                            <x-dynamic-component
                                                :component="$item['icon']"
                                                class="h-5 w-5 shrink-0 opacity-80 group-hover:opacity-100 md:h-5 md:w-5"
                                            />
                                        @endif
                                        <span class="truncate md:whitespace-normal md:leading-tight">{{ $item['label'] }}</span>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>

                {{-- ≥ lg: navigation-only sidebar --}}
                <nav
                    class="hidden overflow-hidden rounded-2xl border border-border/80 bg-card shadow-card lg:block dark:border-border/60 dark:shadow-soft"
                    aria-label="Account pages"
                >
                    <div class="border-b border-border/80 px-4 py-3.5">
                        <p class="text-2xs font-medium uppercase tracking-wider text-muted-foreground">Account</p>
                        <p class="mt-0.5 text-sm font-semibold text-foreground">{{ $activeNavLabel }}</p>
                    </div>

                    <ul class="space-y-0.5 p-3" role="list">
                        @foreach ($navItems as $item)
                            @php
                                $href = 'javascript:void(0)';
                                $isActive = false;
                                if (isset($item['route']) && ! empty($item['route']) && Route::has($item['route'])) {
                                    $href = route($item['route']);
                                    $isActive = request()->routeIs($item['route']);
                                }
                                $linkClass = 'group flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium transition-colors duration-200 ' . (
                                    $isActive
                                        ? 'bg-brand/10 text-brand shadow-sm dark:bg-primary-500/15 dark:text-primary-300'
                                        : 'text-muted-foreground hover:bg-muted/70 hover:text-foreground dark:hover:bg-muted/40'
                                );
                            @endphp
                            <li class="min-w-0">
                                <a
                                    href="{{ $href }}"
                                    @if (! empty($item['click'])) @click.prevent="{{ $item['click'] }}" @endif
                                    @if ($isActive) aria-current="page" @endif
                                    class="{{ $linkClass }}"
                                >
                                    @if (isset($item['icon']))
                                        <x-dynamic-component
                                            :component="$item['icon']"
                                            class="h-5 w-5 shrink-0 opacity-80 group-hover:opacity-100"
                                        />
                                    @endif
                                    <span class="truncate">{{ $item['label'] }}</span>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </nav>
            </aside>

            <div class="min-w-0 w-full flex-1">
                {{ $slot }}
            </div>
        </div>
    </div>
</section>

@once
    @push('before-app-js')
        @auth('user')
            <x-profile.change-password-modal role="user" />
        @endauth
    @endpush
@endonce