@props(['variant' => 'header'])

@php
    // Marque « Sauver mon entreprise.fr ».
    //  - en-tête : le BANDEAU COMPACT (blason + « Sauver mon entreprise ») ;
    //  - pied de page : le BANDEAU COMPLET, qui ajoute le .fr et la baseline.
    // Le bandeau d'en-tête portant déjà le nom, aucun wordmark typographique ne
    // l'accompagne : il ferait doublon. Le blason carré reste en repli si les
    // bandeaux ne sont pas déposés.
    // Chaque visuel existe en deux déclinaisons, servies par CSS selon le thème
    // du système et le thème choisi dans le mode accessibilité : les fichiers
    // sont en encre blanche pour le fond navy (-sombre) et en encre navy pour
    // le fond papier (-clair). Servir un seul des deux le rendrait invisible sur
    // la moitié des thèmes.
    $isFooter = $variant === 'footer';
    $symboleDispo = is_file(public_path('img/symbole-clair.png')) && is_file(public_path('img/symbole-sombre.png'));
    $logoDispo = is_file(public_path('img/logo-clair.png')) && is_file(public_path('img/logo-sombre.png'));
    $menuDispo = is_file(public_path('img/menu-clair.png')) && is_file(public_path('img/menu-sombre.png'));
@endphp

<span {{ $attributes->merge(['class' => 'inline-flex items-center gap-3 no-underline']) }}>
    @if ($isFooter)
        {{-- Pied de page : blason + wordmark et slogan EN TEXTE, le texte HTML
             est toujours net, quand le bandeau raster paraissait flou. --}}
        <span class="inline-flex items-center gap-3.5">
            {{-- Blason DÉTOURÉ, et non le carré : logo-carre-sombre porte un fond
                 navy opaque qui dessinait un rectangle visible sur le fond de
                 page, et logo-carre-clair embarque déjà le nom, qui faisait
                 doublon avec le texte posé juste à côté. --}}
            <span class="inline-flex shrink-0">
                <img src="{{ asset('img/symbole-clair.png') }}" alt=""
                     class="logo-clair h-16 w-16 sm:h-20 sm:w-20" decoding="async">
                <img src="{{ asset('img/symbole-sombre.png') }}" alt="" aria-hidden="true"
                     class="logo-sombre h-16 w-16 sm:h-20 sm:w-20" decoding="async">
            </span>
            <span class="leading-tight">
                <span class="block font-sans text-base font-bold uppercase tracking-tight text-title sm:text-lg">Sauver</span>
                <span class="block font-sans text-base font-bold uppercase tracking-tight text-title sm:text-lg">mon entreprise<span class="text-rep-red">.fr</span></span>
                <span class="mt-1 block text-[11px] font-semibold uppercase tracking-[0.14em] text-muted sm:text-xs">Anticiper · Comprendre · Agir</span>
            </span>
        </span>
    @elseif ($menuDispo)
        {{-- En-tête : bandeau compact. Il nomme déjà le site, donc pas de
             wordmark typographique à côté. --}}
        <span class="inline-flex items-center">
            <img src="{{ asset('img/menu-clair.png') }}" alt="Sauver mon entreprise.fr"
                 class="logo-clair h-11 w-auto shrink-0 sm:h-14" decoding="async">
            <img src="{{ asset('img/menu-sombre.png') }}" alt="" aria-hidden="true"
                 class="logo-sombre h-11 w-auto shrink-0 sm:h-14" decoding="async">
        </span>
    @elseif ($symboleDispo)
        {{-- Repli : blason seul, plus le wordmark typographique. Pas de coins
             arrondis, le blason est détouré sur fond transparent. --}}
        <span class="inline-flex items-center">
            <img src="{{ asset('img/symbole-clair.png') }}" alt="Sauver mon entreprise.fr"
                 class="logo-clair h-11 w-11 shrink-0 sm:h-[3.9rem] sm:w-[3.9rem]" decoding="async">
            <img src="{{ asset('img/symbole-sombre.png') }}" alt="" aria-hidden="true"
                 class="logo-sombre h-11 w-11 shrink-0 sm:h-[3.9rem] sm:w-[3.9rem]" decoding="async">
        </span>
        {{-- Wordmark visible dès le mobile : le symbole seul ne nomme pas le site.
             Il rétrécit simplement sur les petits écrans plutôt que de disparaître. --}}
        <span class="leading-tight">
            <span class="block font-sans text-[13px] font-bold uppercase tracking-tight text-title sm:text-[15px]">Sauver</span>
            <span class="block font-sans text-[13px] font-bold uppercase tracking-tight text-title sm:text-[15px]">mon entreprise<span class="text-rep-red">.fr</span></span>
        </span>
    @else
        {{-- Repli typographique tant que les visuels ne sont pas déposés. --}}
        <span class="grid {{ $isFooter ? 'h-12 w-12' : 'h-10 w-10' }} flex-none place-items-center rounded-[28%] p-[2px]"
              style="background: linear-gradient(150deg, #ff8a8a 0%, #e30613 55%, #b3000c 100%)">
            <span class="grid h-full w-full place-items-center rounded-[24%]" style="background:#0d1b2a">
                <span class="select-none font-sans {{ $isFooter ? 'text-2xl' : 'text-xl' }} font-black leading-none text-white">S</span>
            </span>
        </span>
        <span class="leading-tight">
            <span class="block font-sans {{ $isFooter ? 'text-lg' : 'text-base' }} font-bold tracking-tight text-title">Sauver</span>
            <span class="block font-sans {{ $isFooter ? 'text-lg' : 'text-base' }} font-bold tracking-tight text-title">mon entreprise<span class="text-rep-red">.fr</span></span>
        </span>
    @endif
</span>