{{-- Sticky-шапка портала --}}
<header x-data="{ scrolled: false }" @scroll.window="scrolled = window.scrollY > 6"
        class="sticky top-0 z-40 border-b border-gray-200 transition-colors duration-200"
        :class="scrolled ? 'bg-white/85 backdrop-blur-md backdrop-saturate-150' : 'bg-white'">
    <div class="mx-auto flex h-[74px] max-w-[1320px] items-center gap-3 px-4 md:gap-4 md:px-6">

        {{-- Логотип --}}
        <a href="{{ route('home') }}" class="flex shrink-0 items-center gap-[9px]">
            <x-pin-mark :size="32" class="sm:!h-9 sm:!w-9" />
            <span class="font-display text-xl font-extrabold tracking-[-0.03em] text-ink sm:text-2xl">Placeo</span>
        </a>

        {{-- Выбор города --}}
        <button type="button" @click="cityModalOpen = true"
                class="btn-ghost icon-thin shrink-0 gap-1 max-sm:px-2">
            <span class="hidden text-[18px] text-brand-600 sm:inline-flex"><i data-lucide="map-pin"></i></span>
            <span class="max-w-[110px] truncate sm:max-w-[140px]">{{ $currentCity?->name ?? 'Вся Россия' }}</span>
            <span class="text-[16px] text-gray-400"><i data-lucide="chevron-down"></i></span>
        </button>

        {{-- Поиск --}}
        <form action="{{ route('search') }}" method="GET" class="search-pill icon-thin relative hidden flex-1 md:flex"
              x-data="searchSuggest(@js(request('q', '')))" @click.outside="open = false">
            <span class="text-[19px] text-gray-500"><i data-lucide="search"></i></span>
            <input type="search" name="q" placeholder="Поиск по объявлениям" autocomplete="off"
                   x-model="q" @input.debounce.200ms="fetchSuggest()" @focus="fetchSuggest()">
            @include('partials.search-dropdown')
        </form>

        <div class="ml-auto flex items-center gap-1 md:ml-0 md:gap-1">
            {{-- Подать объявление --}}
            @auth
                <a href="{{ route('cabinet.ads.create') }}" class="btn-brand icon-thin hidden h-11 sm:inline-flex">
                    <span class="text-[19px]"><i data-lucide="plus"></i></span>
                    <span class="hidden lg:inline">Подать объявление</span>
                </a>
            @else
                <button type="button" @click="authModalOpen = true" class="btn-brand icon-thin hidden h-11 sm:inline-flex">
                    <span class="text-[19px]"><i data-lucide="plus"></i></span>
                    <span class="hidden lg:inline">Подать объявление</span>
                </button>
            @endauth

            @auth
                {{-- Сообщения --}}
                <a href="{{ route('cabinet.chat.index') }}" title="Сообщения"
                   x-data="{ n: {{ (int) ($unreadMessages ?? 0) }} }" @chat-unread.window="n = $event.detail"
                   class="icon-thin relative hidden h-10 w-10 place-items-center rounded-lg text-[21px] text-gray-700 hover:bg-gray-100 sm:grid">
                    <i data-lucide="message-circle"></i>
                    <span x-show="n > 0" x-cloak x-text="n"
                          class="absolute right-1.5 top-1.5 grid h-4 min-w-4 place-items-center rounded-full bg-[var(--danger)] px-1 text-[10px] font-bold text-white"></span>
                </a>
                {{-- Уведомления --}}
                <a href="{{ route('cabinet.notifications') }}" title="Уведомления"
                   class="icon-thin relative hidden h-10 w-10 place-items-center rounded-lg text-[21px] text-gray-700 hover:bg-gray-100 sm:grid">
                    <i data-lucide="bell"></i>
                    @if (($unreadNotifications ?? 0) > 0)
                        <span class="absolute right-2 top-2 h-2 w-2 rounded-full bg-[var(--danger)] ring-2 ring-white"></span>
                    @endif
                </a>
                {{-- Избранное --}}
                <a href="{{ route('cabinet.favorites') }}" title="Избранное"
                   class="icon-thin relative hidden h-10 w-10 place-items-center rounded-lg text-[21px] text-gray-700 hover:bg-gray-100 sm:grid">
                    <i data-lucide="heart"></i>
                    @if (($favoritesCount ?? 0) > 0)
                        <span class="absolute right-1.5 top-1.5 grid h-4 min-w-4 place-items-center rounded-full bg-[var(--danger)] px-1 text-[10px] font-bold text-white">{{ $favoritesCount }}</span>
                    @endif
                </a>

                {{-- Профиль (пилюля) --}}
                <a href="{{ route('cabinet.dashboard') }}"
                   class="ml-1 flex shrink-0 items-center gap-[9px] rounded-full border-[1.5px] border-gray-200 py-[5px] pl-[6px] pr-3 transition-colors hover:border-brand-500">
                    <span class="bg-brand-gradient grid h-8 w-8 shrink-0 place-items-center overflow-hidden rounded-full text-xs font-bold text-white">
                        @if (auth()->user()->avatarUrl())
                            <img src="{{ auth()->user()->avatarUrl() }}" class="h-full w-full object-cover" alt="">
                        @else
                            {{ auth()->user()->initial() }}
                        @endif
                    </span>
                    <span class="hidden text-sm font-semibold text-ink sm:block">{{ \Illuminate\Support\Str::of(auth()->user()->displayName())->explode(' ')->first() }}</span>
                </a>
            @else
                <button type="button" @click="authModalOpen = true" class="btn-secondary h-10">Войти</button>
            @endauth
        </div>
    </div>

    {{-- Мобильный поиск под шапкой --}}
    <div class="border-t border-gray-200 px-4 py-2 md:hidden">
        <form action="{{ route('search') }}" method="GET" class="search-pill icon-thin relative h-[42px]"
              x-data="searchSuggest(@js(request('q', '')))" @click.outside="open = false">
            <span class="text-[18px] text-gray-500"><i data-lucide="search"></i></span>
            <input type="search" name="q" placeholder="Поиск по объявлениям" autocomplete="off"
                   x-model="q" @input.debounce.200ms="fetchSuggest()" @focus="fetchSuggest()">
            @include('partials.search-dropdown')
        </form>
    </div>
</header>