{{--
    Шапка портала (ТЗ §17.1), разметка по макету `design/new design and ui`.

    Выбор города и вход открываются модальными окнами, но остаются обычными
    ссылками: без JavaScript они ведут на `/cities` и `/login`, и оба сценария
    работают полностью. Окна лежат в макете — см. layouts/app.

    x-data на шапке обязателен: директивы вне компонента Alpine не обрабатывает.
--}}
{{-- Счётчик избранного приходит с сервера: инлайновый <script> запрещён CSP,
     а выражение Alpine — обычный атрибут и политике не противоречит. --}}
<header x-data
        @if ($currentGuest ?? null) x-init="$store.favorites.count = {{ ($favorites ?? null)?->count() ?? 0 }}" @endif
        class="border-b border-border bg-surface">
    <div class="container-page flex h-[68px] items-center gap-7">
        <a href="{{ route('home') }}" class="shrink-0 no-underline hover:no-underline">
            <x-logo :size="30" />
        </a>

        <nav class="hidden items-center gap-[22px] text-[15px] font-medium text-ink-70 md:flex"
             aria-label="Основная навигация">
            <a href="{{ $currentCity ? route('catalog.city', $currentCity->slug) : route('cities.index') }}"
               class="text-ink-70 no-underline transition-colors hover:text-primary-hover">Рестораны</a>
            <a href="{{ route('static-page', 'about') }}"
               class="text-ink-70 no-underline transition-colors hover:text-primary-hover">О проекте</a>
        </nav>

        <div class="ml-auto flex items-center gap-2">
            <a href="{{ route('cities.index') }}"
               x-on:click.prevent="$store.cityModal.show()"
               class="flex items-center gap-1.5 rounded-[9px] px-2.5 py-2 text-[15px] text-ink no-underline transition-colors hover:bg-surface-alt hover:no-underline">
                <x-ui-icon name="pin" :size="17" class="text-primary" />
                <span class="hidden sm:inline">{{ $currentCity?->name ?? 'Выбрать город' }}</span>
                <span class="sr-only sm:hidden">{{ $currentCity?->name ?? 'Выбрать город' }}</span>
            </a>

            @if ($currentGuest ?? null)
                @php($favoritesCount = ($favorites ?? null)?->count() ?? 0)

                <a href="{{ route('cabinet.favorites') }}"
                   class="relative hidden rounded-[9px] px-2.5 py-2 text-ink-40 no-underline transition-colors hover:bg-surface-alt hover:text-primary sm:block"
                   title="Избранное">
                    <x-ui-icon name="heart" :size="20" />

                    {{-- Значение и видимость дублируются на сервере и в Alpine:
                         без JavaScript счётчик остаётся верным, со скриптом —
                         меняется сразу после нажатия на сердце в карточке. --}}
                    <span x-text="$store.favorites.count"
                          x-bind:class="{ 'hidden': $store.favorites.count === 0 }"
                          @class([
                              'absolute -right-0.5 -top-0.5 grid h-4 min-w-4 place-items-center rounded-pill bg-primary px-1 font-mono text-[10px] font-medium leading-none text-primary-contrast',
                              'hidden' => $favoritesCount === 0,
                          ])>{{ $favoritesCount }}</span>

                    <span class="sr-only">Избранное</span>
                </a>

                <a href="{{ route('cabinet.profile') }}"
                   class="flex items-center gap-2 rounded-pill border border-border py-[7px] pl-2 pr-3.5 text-[15px] font-medium text-ink no-underline transition-colors hover:border-ink hover:no-underline">
                    <span class="grid size-[26px] place-items-center rounded-pill bg-primary-soft text-[12px] font-bold text-primary-hover">
                        {{ $currentGuest->initials() }}
                    </span>
                    <span class="max-w-32 truncate">{{ $currentGuest->displayName() }}</span>
                </a>
            @else
                {{-- На самой странице входа кнопка остаётся обычной ссылкой: окна там нет. --}}
                <a href="{{ route('auth.login') }}"
                   @if ($showAuthModal ?? false) x-on:click.prevent="$store.authModal.show()" @endif
                   class="btn btn-secondary btn-sm no-underline hover:no-underline">
                    Войти
                </a>
            @endif
        </div>
    </div>
</header>