@props(['compact' => false])

@php
    // Photo déposée par l'exploitant. Le WebP passe en premier : à qualité égale
    // il pèse deux à trois fois moins que le PNG, et le repli couvre le reste.
    $photo = collect(['webp', 'jpg', 'jpeg', 'png'])
        ->map(fn ($ext) => 'img/equipe/alexandre-baumberger.'.$ext)
        ->first(fn ($rel) => is_file(public_path($rel)));
    $repli = collect(['png', 'jpg', 'jpeg'])
        ->map(fn ($ext) => 'img/equipe/alexandre-baumberger.'.$ext)
        ->first(fn ($rel) => is_file(public_path($rel)));
@endphp

<section class="hero-cover text-white" aria-labelledby="fondateur">
    <div class="mx-auto grid max-w-6xl items-center gap-10 px-4 py-16 sm:py-20 md:grid-cols-[300px_1fr]">
        {{-- Portrait --}}
        <div class="mx-auto w-full max-w-[280px]">
            <div class="overflow-hidden rounded-2xl ring-1 ring-white/15 shadow-2xl">
                @if ($photo)
                    {{-- La source fait 1122x1402, soit le double de la taille d'affichage :
                         l'image reste nette sur écran à forte densité. --}}
                    <picture>
                        @if ($repli && $repli !== $photo)
                            <source srcset="{{ asset($photo) }}" type="image/webp">
                            <img src="{{ asset($repli) }}" alt="Alexandre Baumberger, fondateur de Sauver mon entreprise"
                                 width="560" height="700" class="aspect-[4/5] w-full object-cover" loading="lazy" decoding="async">
                        @else
                            <img src="{{ asset($photo) }}" alt="Alexandre Baumberger, fondateur de Sauver mon entreprise"
                                 width="560" height="700" class="aspect-[4/5] w-full object-cover" loading="lazy" decoding="async">
                        @endif
                    </picture>
                @else
                    <div class="grid aspect-[4/5] w-full place-items-center bg-gradient-to-br from-[#0a2647] to-[#061627]">
                        <span class="font-sans text-6xl font-bold text-white/90">AB</span>
                    </div>
                @endif
            </div>
            <span class="tricolore-tick mt-4 block"></span>
        </div>

        {{-- Texte --}}
        <div>
            <p class="text-xs font-bold uppercase tracking-[0.18em] text-slate-300">Qui est derrière cet outil</p>
            <h2 id="fondateur" class="mt-3 font-sans text-3xl font-bold leading-tight sm:text-4xl">Alexandre Baumberger</h2>
            <p class="mt-2 text-lg text-slate-200">
                <span class="font-semibold text-white">Ancien juge au tribunal de commerce de Bordeaux (2018-2026)</span>, <span class="font-semibold text-white">juge du contentieux, juge des procédures collectives et juge-commissaire</span>, et chef d'entreprise.
            </p>

            <div class="mt-6 space-y-4 text-[15px] leading-relaxed text-slate-200">
                <p>
                    Au tribunal, j'ai vu chaque semaine des dirigeants arriver <span class="font-semibold text-white">seuls</span>,
                    souvent trop tard, face à des procédures qu'ils ne connaissaient pas et dont le vocabulaire les dépassait.
                </p>
                @unless ($compact)
                    <p>
                        Cette conviction est antérieure. Dès <span class="font-semibold text-white">2011</span>, sept ans avant ma
                        nomination, j'ai travaillé au déploiement du <span class="font-semibold text-white">FSEE</span>, un fonds de
                        restructuration destiné à financer et accompagner les entreprises en difficulté avant qu'il ne soit trop
                        tard. En France, ces dispositifs peinent à voir le jour : on s'en remet volontiers à la destruction
                        créatrice, en oubliant qu'il faut parfois vingt ans pour reconstruire ce qu'on a laissé disparaître.
                    </p>
                    <p>
                        <a href="{{ route('page.fsee') }}" class="font-semibold text-white underline decoration-white/40 underline-offset-4 hover:decoration-white">Lire le rapport FSEE de 2011</a>
                    </p>
                @endunless
                <p>
                    Chef d'entreprise moi-même, je constate chaque jour que le dirigeant
                    <span class="font-semibold text-white">porte tout le monde</span> : ses salariés, la croissance qu'il génère,
                    l'impôt qu'elle finance. On oublie trop souvent ce qu'il y consacre.
                </p>
                <p>
                    J'ai créé <span class="font-semibold text-white">Sauver mon entreprise</span> pour ça :
                    donner à celles et ceux qui traversent une difficulté une information <span class="font-semibold text-white">claire, fiable et sourcée</span>,
                    pour comprendre où ils en sont, connaître leurs options et <span class="font-semibold text-white">agir au bon moment</span>.
                </p>
            </div>

            @unless ($compact)
                <div class="mt-8 flex flex-wrap gap-3">
                    <a href="{{ route('page.apropos') }}" class="rounded-md bg-white/10 px-5 py-3 text-sm font-semibold text-white no-underline ring-1 ring-white/25 hover:bg-white/15">En savoir plus</a>
                    <a href="{{ route('urgence') }}" class="rounded-md bg-rep-red px-5 py-3 text-sm font-semibold text-white no-underline hover:opacity-90">Faire le diagnostic</a>
                </div>
            @endunless
        </div>
    </div>
    <div class="tricolore"></div>
</section>