{{-- Мобильный нижний бар (fixed, 5 кнопок) --}}
<nav class="fixed inset-x-0 bottom-0 z-40 border-t border-gray-100 bg-white md:hidden">
    <div class="grid grid-cols-5">
        @php
            $items = [
                ['label' => 'Главная',    'route' => route('home'), 'active' => request()->routeIs('home'),
                 'icon' => 'M2.25 12 11.2 3.05a1.13 1.13 0 0 1 1.6 0L21.75 12M4.5 9.75v10.13c0 .62.5 1.12 1.13 1.12H9.75v-4.87c0-.63.5-1.13 1.13-1.13h2.24c.63 0 1.13.5 1.13 1.13V21h4.12c.63 0 1.13-.5 1.13-1.12V9.75'],
                ['label' => 'Разделы',    'modal' => 'sections', 'active' => false,
                 'icon' => 'M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6Zm9.75 0A2.25 2.25 0 0 1 15.75 3.75H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6Zm-9.75 9.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25Zm9.75 0a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z'],
                ['label' => 'Подать', 'active' => false, 'primary' => true,
                 'route' => auth()->check() ? route('cabinet.ads.create') : null,
                 'modal' => auth()->check() ? null : 'auth',
                 'icon' => 'M12 4.5v15m7.5-7.5h-15'],
                ['label' => 'Сообщения', 'route' => auth()->check() ? route('cabinet.chat.index') : route('login'),
                 'active' => request()->routeIs('cabinet.chat.*'), 'badge' => $unreadMessages ?? 0,
                 'icon' => 'M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.12 2.99 2.7 3.22 1.21.18 2.43.32 3.66.41l3.3 3.3a.75.75 0 0 0 1.28-.53v-2.7a25.7 25.7 0 0 0 1.8-.18 3.28 3.28 0 0 0 2.7-3.23v-5.5A3.28 3.28 0 0 0 18.7 5.5a25.6 25.6 0 0 0-13.4 0A3.28 3.28 0 0 0 2.6 8.74v5.5Z'],
                ['label' => 'Кабинет',    'route' => auth()->check() ? route('cabinet.dashboard') : route('login'), 'active' => request()->routeIs('cabinet.dashboard'),
                 'icon' => 'M17.98 19.42a8.25 8.25 0 0 0-11.96 0m11.96 0A8.97 8.97 0 0 0 21 12a9 9 0 1 0-3.02 7.42M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z'],
            ];
        @endphp

        @foreach($items as $item)
            @php
                $isModal = ! empty($item['modal']);
                $tag = $isModal ? 'button' : 'a';
                $modalState = ($item['modal'] ?? null) === 'auth' ? 'authModalOpen' : 'sectionsModalOpen';
            @endphp
            <{{ $tag }}
                @if($isModal) type="button" @click="{{ $modalState }} = true" @else href="{{ $item['route'] }}" @endif
                class="flex flex-col items-center gap-1 py-2 text-[11px]
                {{ ($item['active'] ?? false) ? 'text-brand-600' : 'text-gray-500' }}">
                @if($item['primary'] ?? false)
                    <span class="-mt-5 grid h-12 w-12 place-items-center rounded-full bg-brand-500 text-white shadow-lg shadow-brand-500/30">
                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="{{ $item['icon'] }}" />
                        </svg>
                    </span>
                @else
                    {{-- MD3 navigation bar: pill-индикатор активного пункта --}}
                    <span class="relative flex h-8 w-16 items-center justify-center rounded-full transition-colors
                        {{ ($item['active'] ?? false) ? 'bg-brand-100 text-brand-700' : 'text-gray-500' }}">
                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                            <path stroke-linecap="round" stroke-linejoin="round" d="{{ $item['icon'] }}" />
                        </svg>
                        @if (($item['label'] ?? '') === 'Сообщения')
                            {{-- Живой бейдж: обновляется фоновым поллингом чатов. --}}
                            <span x-data="{ n: {{ (int) ($item['badge'] ?? 0) }} }" @chat-unread.window="n = $event.detail"
                                  x-show="n > 0" x-cloak x-text="n"
                                  class="absolute right-3 top-0 grid h-4 min-w-4 place-items-center rounded-full bg-red-500 px-1 text-[10px] font-bold text-white"></span>
                        @elseif (($item['badge'] ?? 0) > 0)
                            <span class="absolute right-3 top-0 grid h-4 min-w-4 place-items-center rounded-full bg-red-500 px-1 text-[10px] font-bold text-white">{{ $item['badge'] }}</span>
                        @endif
                    </span>
                    <span>{{ $item['label'] }}</span>
                @endif
            </{{ $tag }}>
        @endforeach
    </div>
</nav>