@props(['title', 'kicker' => 'Espace client', 'intro' => null])

<section class="relative min-h-screen bg-ivoire">
    <div class="mx-auto grid min-h-screen max-w-[1440px] lg:grid-cols-2">
        <div class="relative hidden overflow-hidden bg-encre lg:block">
            <img src="{{ asset('images/volailles-caille.jpg') }}" alt="" class="absolute inset-0 size-full object-cover opacity-50">
            <div class="absolute inset-0 bg-gradient-to-t from-encre via-encre/40 to-transparent"></div>
            <div class="absolute inset-x-14 bottom-16 text-ivoire">
                <p class="font-serif text-5xl leading-tight">De l'élevage<br><em class="text-laiton">à votre table.</em></p>
                <p class="kicker mt-6 text-ivoire/60">Maison fondée en {{ config('renard-rouge.founded') }} · Gourgé</p>
            </div>
        </div>
        <div class="flex items-center px-5 pt-32 pb-16 sm:px-10 lg:px-20 xl:pt-48">
            <div class="w-full max-w-md">
                <p class="kicker mb-5 text-rouge">{{ $kicker }}</p>
                <h1 class="font-serif text-[clamp(2.4rem,4vw,3.6rem)] leading-none">{{ $title }}</h1>
                @if ($intro)
                    <p class="mt-6 leading-relaxed text-gris">{{ $intro }}</p>
                @endif
                @if (session('status'))
                    <p class="alerte mt-8">{{ session('status') }}</p>
                @endif
                <div class="mt-12">{{ $slot }}</div>
            </div>
        </div>
    </div>
</section>