@props([
    'title',
    'kicker' => null,
    'intro' => null,
    'breadcrumbs' => [],
    'image' => null,
])

{{-- En-tête des pages intérieures : fil d'Ariane, surtitre, titre. --}}
<section {{ $attributes->class('relative overflow-hidden bg-encre text-ivoire') }}>
    @if ($image)
        <div aria-hidden="true" class="absolute inset-0">
            <img src="{{ $image }}" alt="" class="size-full object-cover opacity-35">
            <div class="absolute inset-0 bg-gradient-to-t from-encre via-encre/70 to-encre/40"></div>
        </div>
    @endif
    <div class="relative mx-auto max-w-[1440px] px-5 pt-36 pb-16 sm:px-10 lg:px-14 lg:pt-44 lg:pb-24 xl:pt-52">
        @if ($breadcrumbs)
            <nav aria-label="Fil d'Ariane" class="kicker mb-10 flex flex-wrap items-center gap-x-3 gap-y-2 text-[0.6rem] text-ivoire/55">
                <a href="{{ route('home') }}" class="hover:text-ivoire">Accueil</a>
                @foreach ($breadcrumbs as $label => $href)
                    <span aria-hidden="true" class="text-laiton">/</span>
                    @if ($href)
                        <a href="{{ $href }}" class="hover:text-ivoire">{{ $label }}</a>
                    @else
                        <span aria-current="page" class="text-ivoire/80">{{ $label }}</span>
                    @endif
                @endforeach
            </nav>
        @endif
        @if ($kicker)
            <p class="kicker mb-6 text-laiton">{{ $kicker }}</p>
        @endif
        <h1 class="max-w-5xl font-serif text-[clamp(2.6rem,6vw,5.6rem)] leading-[1] tracking-[-0.01em]">{{ $title }}</h1>
        @if ($intro)
            <p class="mt-8 max-w-2xl text-lg leading-relaxed text-ivoire/75">{{ $intro }}</p>
        @endif
        {{ $slot }}
    </div>
</section>