{{--
    Smart navigation bar (SOW 1.4): logo, global search, three-level admin-managed
    menu, sticky with a backdrop once the page scrolls, and the primary CTA.
--}}
<header x-data="siteHeader"
        class="sticky top-0 z-40 border-b transition-[background-color,border-color,height] duration-300"
        :class="scrolled ? 'border-border bg-surface/92 backdrop-blur-md' : 'border-transparent bg-surface'">

    <div class="container-page flex items-center justify-between gap-8 transition-[height] duration-300"
         :class="scrolled ? 'h-18' : 'h-24'">

        <a href="{{ route('home') }}" class="flex shrink-0 items-center gap-3" aria-label="{{ setting('site_name', config('app.name')) }} — {{ __('home') }}">
            @if ($logo = setting('site_logo'))
                <img src="{{ asset_path($logo) }}" alt="{{ setting('site_name', config('app.name')) }}"
                     class="w-auto transition-[height] duration-300" :class="scrolled ? 'h-11 sm:h-12' : 'h-14 sm:h-16'">
            @else
                <span class="font-display text-lg font-bold tracking-[-0.02em] text-primary">
                    {{ setting('site_name', config('app.name')) }}
                </span>
            @endif
        </a>

        <nav class="hidden items-center lg:flex" aria-label="{{ __('Main navigation') }}">
            @foreach ($headerMenu as $item)
                @include('partials.menu-item', ['item' => $item, 'level' => 0])
            @endforeach
        </nav>

        <div class="flex items-center gap-1.5">
            <button type="button" @click="searchOpen = !searchOpen"
                    class="inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-text-secondary transition hover:bg-surface-muted hover:text-primary"
                    :aria-expanded="searchOpen" aria-controls="global-search"
                    aria-label="{{ __('Search the site') }}">
                <x-icon name="search" class="size-4" />
                <kbd class="hidden rounded border border-border px-1.5 py-0.5 font-mono text-[0.625rem] text-text-muted xl:inline">/</kbd>
            </button>

            {{--
                Account entry point. A signed-out visitor sees one link; a signed-in
                one gets their own menu, and staff are pointed at the panel rather
                than at a buyer dashboard they have no use for.
            --}}
            @auth
                <div class="relative hidden sm:block" x-data="{ accountOpen: false }" @keydown.escape="accountOpen = false">
                    <button type="button" @click="accountOpen = !accountOpen"
                            class="inline-flex items-center gap-2 rounded-lg px-2.5 py-1.5 text-sm text-text-secondary transition hover:bg-surface-muted hover:text-text"
                            :aria-expanded="accountOpen" aria-haspopup="true">
                        @if (auth()->user()->avatar)
                            <img src="{{ thumb_url(auth()->user()->avatar) }}" alt=""
                                 class="size-7 rounded-full object-cover">
                        @else
                            <span class="flex size-7 items-center justify-center rounded-full bg-surface-muted text-xs font-semibold text-text-secondary">
                                {{ auth()->user()->initials() }}
                            </span>
                        @endif
                        <span class="hidden max-w-28 truncate xl:inline">{{ auth()->user()->name }}</span>
                    </button>

                    <div x-show="accountOpen" x-cloak x-transition.opacity @click.outside="accountOpen = false"
                         class="absolute right-0 z-50 mt-2 w-56 rounded-xl border border-border bg-surface p-1.5 shadow-raised">
                        @if (auth()->user()->isStaff())
                            <a href="{{ route('admin.dashboard') }}"
                               class="block rounded-lg px-3 py-2 text-sm text-text-secondary transition hover:bg-surface-muted hover:text-text">
                                {{ __('Content panel') }}
                            </a>
                        @else
                            <a href="{{ route('account.dashboard') }}"
                               class="block rounded-lg px-3 py-2 text-sm text-text-secondary transition hover:bg-surface-muted hover:text-text">
                                {{ __('My account') }}
                            </a>
                            <a href="{{ route('account.profile.edit') }}"
                               class="block rounded-lg px-3 py-2 text-sm text-text-secondary transition hover:bg-surface-muted hover:text-text">
                                {{ __('Profile & settings') }}
                            </a>
                        @endif

                        <form action="{{ route('logout') }}" method="POST" class="mt-1 border-t border-border pt-1">
                            @csrf
                            <button type="submit"
                                    class="block w-full rounded-lg px-3 py-2 text-left text-sm text-text-secondary transition hover:bg-surface-muted hover:text-text">
                                {{ __('Sign out') }}
                            </button>
                        </form>
                    </div>
                </div>
            @else
                <a href="{{ route('login') }}"
                   class="hidden rounded-lg px-3 py-2 text-sm font-medium text-text-secondary transition hover:bg-surface-muted hover:text-text sm:inline-flex">
                    {{ __('Sign in') }}
                </a>
            @endauth

            <a href="{{ route('contact.index') }}" class="btn-primary btn-sm hidden sm:inline-flex">
                {{ setting('header_cta_label', __('Work with Us')) }}
                <x-icon name="arrow-right" class="icon-arrow size-3.5" />
            </a>

            <button type="button" @click="mobileOpen = true"
                    class="rounded-lg p-2.5 text-text-secondary transition hover:bg-surface-muted lg:hidden"
                    aria-label="{{ __('Open menu') }}">
                <x-icon name="menu" class="size-5" />
            </button>
        </div>
    </div>

    {{-- Global search with instant, server-rendered suggestions. --}}
    <div id="global-search" x-show="searchOpen" x-cloak x-collapse class="border-t border-border bg-surface">
        <div class="container-page py-5" x-data="globalSearch('{{ route('fragments.search') }}')">
            <form action="{{ route('search') }}" method="GET" class="flex items-center gap-3">
                <x-icon name="search" class="size-5 shrink-0 text-text-muted" />
                <label for="site-search" class="sr-only">{{ __('Search') }}</label>
                <input id="site-search" type="search" name="q" x-model="term" @input.debounce.250ms="suggest()"
                       required minlength="2" autocomplete="off"
                       placeholder="{{ __('Search projects, sectors, notices, team…') }}"
                       class="w-full border-0 bg-transparent p-0 text-base text-text placeholder:text-text-muted focus:ring-0"
                       x-ref="searchInput" x-effect="searchOpen && $nextTick(() => $refs.searchInput.focus())">

                <span x-show="loading" x-cloak class="text-xs text-text-muted">{{ __('Searching…') }}</span>
                <button type="submit" class="btn-primary btn-sm shrink-0">{{ __('Search') }}</button>
            </form>

            <div x-show="results" x-cloak x-html="results" class="mt-5 border-t border-border pt-5"></div>
        </div>
    </div>

    {{-- Mobile drawer: three-level navigation as nested disclosures. --}}
    <div x-show="mobileOpen" x-cloak class="fixed inset-0 z-50 lg:hidden" role="dialog" aria-modal="true"
         aria-label="{{ __('Site navigation') }}">
        <div class="absolute inset-0 bg-dark/60" @click="mobileOpen = false"></div>

        <div class="absolute right-0 top-0 flex h-full w-[22rem] max-w-[88%] flex-col bg-surface shadow-raised"
             x-trap.noscroll="mobileOpen"
             x-transition:enter="transition duration-250 ease-out"
             x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0"
             x-transition:leave="transition duration-200 ease-in"
             x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full">

            <div class="flex items-center justify-between border-b border-border px-5 py-4">
                <span class="font-display font-semibold text-text">{{ __('Menu') }}</span>
                <button type="button" @click="mobileOpen = false" class="rounded-lg p-2 hover:bg-surface-muted"
                        aria-label="{{ __('Close menu') }}">
                    <x-icon name="close" class="size-5" />
                </button>
            </div>

            <nav class="flex-1 overflow-y-auto px-4 py-4" aria-label="{{ __('Mobile navigation') }}">
                @foreach ($headerMenu as $item)
                    @include('partials.menu-item-mobile', ['item' => $item])
                @endforeach
            </nav>

            <div class="space-y-2 border-t border-border p-4">
                <a href="{{ route('search') }}" class="btn-outline w-full">
                    <x-icon name="search" class="size-4" /> {{ __('Search') }}
                </a>

                @auth
                    <a href="{{ auth()->user()->isStaff() ? route('admin.dashboard') : route('account.dashboard') }}"
                       class="btn-outline w-full">
                        <x-icon name="users" class="size-4" />
                        {{ auth()->user()->isStaff() ? __('Content panel') : __('My account') }}
                    </a>
                @else
                    <a href="{{ route('login') }}" class="btn-outline w-full">{{ __('Sign in') }}</a>
                @endauth

                <a href="{{ route('contact.index') }}" class="btn-primary w-full">
                    {{ setting('header_cta_label', __('Work with Us')) }}
                </a>
            </div>
        </div>
    </div>
</header>