{{-- Top bar: social links on the left, language and currency on the right. Scrolls away; the menu below stays pinned. --}}
<div class="bg-primary text-on-primary">
    <div class="mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-x-4 gap-y-1 px-4 py-1.5 text-xs sm:px-6">
        <ul class="flex items-center gap-3 font-bold text-on-primary-container" aria-label="{{ __('Social media') }}">
            @foreach ($shop->social() as $name => $url)
                <li><a href="{{ $url }}" target="_blank" rel="noopener noreferrer" class="hover:text-white">{{ $name }}</a></li>
            @endforeach
        </ul>
        <div class="ml-auto flex items-center gap-4">
            <div class="flex items-center gap-1" aria-label="{{ __('Language') }}">
                @foreach (\App\Services\StorefrontContext::LOCALES as $code => $label)
                    <a href="{{ route('locale', $code) }}" @if ($shop->locale === $code) aria-current="true" @endif class="rounded-full px-2.5 py-1 font-bold {{ $shop->locale === $code ? 'bg-tertiary text-on-tertiary' : 'text-on-primary-container hover:text-white' }}">{{ $label }}</a>
                @endforeach
            </div>
            <span class="h-4 w-px bg-primary-container" aria-hidden="true"></span>
            <div class="flex items-center gap-1" aria-label="{{ __('Currency') }}">
                @foreach ($shop->currencies() as $code => $label)
                    <a href="{{ route('currency', $code) }}" @if ($shop->money->code === $code) aria-current="true" @endif class="rounded-full px-2.5 py-1 font-bold {{ $shop->money->code === $code ? 'bg-tertiary text-on-tertiary' : 'text-on-primary-container hover:text-white' }}">{{ $label }}</a>
                @endforeach
            </div>
        </div>
    </div>
</div>

<header class="sticky top-0 z-40 px-4 pt-4">
    <div class="mx-auto flex max-w-7xl items-center justify-between gap-3 rounded-full border border-surface-variant bg-white/50 px-4 py-2.5 shadow-soft backdrop-blur sm:px-6">
        <a href="{{ route('home') }}" class="text-xl font-extrabold tracking-tight text-primary">Songha_IT</a>

        <nav class="hidden items-center gap-1 md:flex" aria-label="{{ __('Main') }}">
            @php
            $about = collect($shop->pages())->first(fn ($pg) => in_array($pg->slug, ['about-us', 'about'], true));
            $links = [[__('Home'), route('home')], [__('Shop'), route('shop')], [__('Discount'), route('shop', ['sale' => 1])]];
            if ($about) { $links[] = [__('About us'), route('page', $about->slug)]; }
            @endphp
            @foreach ($links as [$label, $url])
                <a href="{{ $url }}" class="rounded-full px-4 py-2 text-sm font-bold text-on-surface-variant hover:bg-surface-mid hover:text-primary">{{ $label }}</a>
            @endforeach
            @if ($social = $shop->social())
                <details class="group relative" data-menu>
                    <summary class="flex cursor-pointer list-none items-center gap-1 rounded-full px-4 py-2 text-sm font-bold text-on-surface-variant hover:bg-surface-mid hover:text-primary [&::-webkit-details-marker]:hidden">{{ __('Follow us') }}
                        <svg class="h-4 w-4 transition-transform group-open:rotate-180" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></summary>
                    <ul class="absolute left-0 top-full z-50 mt-2 w-48 rounded-2xl border border-surface-variant bg-white p-2 shadow-soft">
                        @foreach ($social as $name => $url)
                            <li><a href="{{ $url }}" target="_blank" rel="noopener noreferrer" class="block rounded-xl px-4 py-2.5 text-sm font-bold text-primary hover:bg-surface-mid">{{ $name }}</a></li>
                        @endforeach
                    </ul>
                </details>
            @endif
        </nav>

        <div class="flex items-center gap-1">
            <form action="{{ route('shop') }}" class="hidden lg:block" role="search">
                <label class="sr-only" for="hdr-q">{{ __('Search') }}</label>
                <input id="hdr-q" name="q" value="{{ request('q') }}" placeholder="{{ __('Search') }}" class="h-11 w-52 rounded-full border border-outline-variant bg-surface-mid px-4 text-sm placeholder:text-outline focus:border-primary focus:outline-none">
            </form>
            <a href="{{ route('shop') }}" class="flex h-11 w-11 items-center justify-center rounded-full text-primary hover:bg-surface-mid lg:hidden" aria-label="{{ __('Search') }}"><x-icon name="search"/></a>

            {{-- Language and currency: small drop-down menus (they used to be in the footer). --}}
            <!--<details class="group relative" data-menu>-->
            <!--    <summary class="flex h-11 cursor-pointer list-none items-center gap-1 rounded-full px-3 text-sm font-bold text-primary hover:bg-surface-mid [&::-webkit-details-marker]:hidden" aria-label="{{ __('Language') }}">{{ strtoupper($shop->locale) }}-->
            <!--        <svg class="h-3.5 w-3.5 transition-transform group-open:rotate-180" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></summary>-->
            <!--    <ul class="absolute right-0 top-full z-50 mt-2 w-40 rounded-2xl border border-surface-variant bg-white p-2 shadow-soft">-->
            <!--        @foreach (\App\Services\StorefrontContext::LOCALES as $code => $label)-->
            <!--            <li><a href="{{ route('locale', $code) }}" @if ($shop->locale === $code) aria-current="true" @endif class="block rounded-xl px-4 py-2.5 text-sm font-bold {{ $shop->locale === $code ? 'bg-primary text-on-primary' : 'text-primary hover:bg-surface-mid' }}">{{ $label }}</a></li>-->
            <!--        @endforeach-->
            <!--    </ul>-->
            <!--</details>-->
            <details class="group relative" data-menu>
                <summary class="flex h-11 cursor-pointer list-none items-center gap-1 rounded-full px-3 text-sm font-bold text-primary hover:bg-surface-mid [&::-webkit-details-marker]:hidden" aria-label="{{ __('Currency') }}">{{ $shop->money->code }}
                    <svg class="h-3.5 w-3.5 transition-transform group-open:rotate-180" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></summary>
                <ul class="absolute right-0 top-full z-50 mt-2 w-40 rounded-2xl border border-surface-variant bg-white p-2 shadow-soft">
                    @foreach ($shop->currencies() as $code => $label)
                        <li><a href="{{ route('currency', $code) }}" @if ($shop->money->code === $code) aria-current="true" @endif class="block rounded-xl px-4 py-2.5 text-sm font-bold {{ $shop->money->code === $code ? 'bg-primary text-on-primary' : 'text-primary hover:bg-surface-mid' }}">{{ $label }}</a></li>
                    @endforeach
                </ul>
            </details>

            <a href="{{ auth()->check() ? route('account.wishlist') : route('login') }}" class="hidden h-11 w-11 items-center justify-center rounded-full text-primary hover:bg-surface-mid sm:flex" aria-label="{{ __('Wishlist') }}"><x-icon name="heart"/></a>
            @auth
                @php $unread = $shop->unreadNotifications(); @endphp
                <a href="{{ route('account.notifications') }}" class="relative flex h-11 w-11 items-center justify-center rounded-full text-primary hover:bg-surface-mid" aria-label="{{ $unread ? __('Notifications, :n new', ['n' => $unread]) : __('Notifications') }}"><x-icon name="bell"/>@if ($unread)<span class="absolute right-1 top-1 grid min-h-[18px] min-w-[18px] place-items-center rounded-full bg-error px-1 text-[11px] font-extrabold leading-none text-white">{{ $unread > 9 ? '9+' : $unread }}</span>@endif</a>
            @endauth
            <a href="{{ auth()->check() ? route('account.orders') : route('login') }}" class="flex h-11 w-11 items-center justify-center rounded-full text-primary hover:bg-surface-mid" aria-label="{{ __('Account') }}"><x-icon name="user"/></a>
            <a href="{{ route('cart') }}" id="cart-link" class="relative flex h-11 items-center gap-2 rounded-full bg-primary px-4 text-sm font-bold text-on-primary hover:bg-primary-container" aria-label="{{ __('Bag, :n items', ['n' => $shop->cartCount()]) }}">
                <x-icon name="bag"/><span data-cart-count>{{ $shop->cartCount() }}</span>
            </a>
        </div>
    </div>
</header>
<script>
// Header drop-down menus (Follow us, language, currency): a click outside, or opening another one, closes the open one.
document.addEventListener('click', (e) => document.querySelectorAll('details[data-menu][open]').forEach(d => { if (!d.contains(e.target)) d.open = false; }));
</script>