@php
    $logo = $site->image('theme.logo_path');
    $shopName = $site->string('shop.name', config('app.name'));
    $navigation = $chrome->navigation();
@endphp

{{--
    En-tête volontairement discret : pas de fond translucide ni d'ombre au
    repos, seulement un filet d'un pixel qui apparaît au défilement. La
    navigation est centrée pour laisser respirer le nom du salon.
--}}
<header
    data-site-header
    class="sticky top-0 z-40 bg-surface transition-colors data-scrolled:border-b data-scrolled:border-line"
>
    <div class="site-container grid h-20 grid-cols-[auto_1fr_auto] items-center gap-6 lg:h-24">
        <a href="{{ route('home') }}" class="flex items-center" aria-label="{{ $shopName }}, retour à l’accueil">
            @if ($logo)
                <img src="{{ $logo }}" alt="{{ $shopName }}" class="h-9 w-auto max-w-52 object-contain">
            @else
                <span class="font-display text-[1.6rem] leading-none">{{ $shopName }}</span>
            @endif
        </a>

        <nav class="hidden items-center justify-center gap-9 lg:flex" aria-label="Navigation principale">
            @foreach ($navigation as $item)
                <a
                    href="{{ $item['route'] }}"
                    @class([
                        'relative py-1 text-[0.8125rem] font-medium tracking-wide transition-colors',
                        'text-ink after:absolute after:inset-x-0 after:-bottom-0.5 after:h-px after:bg-accent' => $item['active'],
                        'text-ink-muted hover:text-ink' => ! $item['active'],
                    ])
                    @if ($item['active']) aria-current="page" @endif
                >{{ $item['label'] }}</a>
            @endforeach
        </nav>

        <div class="flex items-center justify-end gap-5">
            @if ($phone = $site->get('shop.phone'))
                <a
                    href="tel:{{ preg_replace('/\s+/', '', (string) $phone) }}"
                    class="hidden text-[0.8125rem] text-ink-muted transition-colors hover:text-ink xl:block"
                >{{ $phone }}</a>
            @endif

            <x-site.booking-button class="btn-sm hidden sm:inline-flex" />

            <button
                type="button"
                data-nav-toggle
                aria-expanded="false"
                aria-controls="navigation-mobile"
                class="-mr-2 inline-flex size-11 items-center justify-center rounded-site text-ink lg:hidden"
            >
                <span class="sr-only">Ouvrir le menu</span>
                <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
                    <path d="M3 7h18M3 17h18" stroke-linecap="round"/>
                </svg>
            </button>
        </div>
    </div>

    <div
        id="navigation-mobile"
        data-nav-panel
        hidden
        class="border-t border-line bg-surface lg:hidden"
    >
        <nav class="site-container flex flex-col py-6" aria-label="Navigation principale (mobile)">
            @foreach ($navigation as $item)
                <a
                    href="{{ $item['route'] }}"
                    @class([
                        'py-3 font-display text-2xl',
                        'text-accent' => $item['active'],
                        'text-ink' => ! $item['active'],
                    ])
                >{{ $item['label'] }}</a>
            @endforeach

            <x-site.booking-button class="mt-6" />
        </nav>
    </div>
</header>