{{-- Section libre : titre, texte mis en forme, image facultative et bouton. --}}
@php
    $image = $home->image($data['image'] ?? null);
    $background = $data['background'] ?? 'clair';
@endphp
<section @class([
    'py-24 lg:py-40',
    'border-t border-filet' => $background === 'clair',
    'bg-ivoire-2' => $background === 'ivoire',
    'bg-encre text-ivoire' => $background === 'sombre',
])>
    <div @class([
        'mx-auto grid max-w-[1440px] items-center gap-16 px-5 sm:px-10 lg:px-14',
        'lg:grid-cols-12' => $image,
    ])>
        <div @class([
            'lg:col-span-5' => $image,
            'lg:row-start-1 lg:col-start-8' => $image && ($data['image_position'] ?? 'droite') === 'gauche',
            'max-w-3xl' => ! $image,
        ])>
            @if (filled($data['kicker'] ?? null))
                <p @class(['kicker mb-5', 'text-laiton' => $background === 'sombre', 'text-rouge' => $background !== 'sombre'])>{{ $home->plain($data['kicker']) }}</p>
            @endif
            @if (filled($data['title'] ?? null))
                <h2 @class(['font-serif text-[clamp(2.2rem,4.6vw,4.2rem)] leading-[1.02]', '[&_em]:text-laiton' => $background === 'sombre'])>{{ $home->rich($data['title']) }}</h2>
            @endif
            @if (filled($data['body'] ?? null))
                <div @class(['prose-maison mt-8 max-w-xl leading-relaxed', 'text-gris-clair' => $background === 'sombre', 'text-gris' => $background !== 'sombre'])>
                    {!! str($data['body'])->sanitizeHtml() !!}
                </div>
            @endif
            @if (filled($data['button_label'] ?? null))
                <a href="{{ $home->url($data['button_url'] ?? null) }}" @class(['bouton mt-12', 'bouton-clair' => $background === 'sombre', 'bouton-plein' => $background !== 'sombre'])>{{ $data['button_label'] }}</a>
            @endif
        </div>

        @if ($image)
            <x-photo :src="$image" :alt="$data['title'] ?? ''" :class="Arr::toCssClasses([
                'aspect-[4/3] lg:col-span-6',
                'lg:col-start-7' => ($data['image_position'] ?? 'droite') !== 'gauche',
                'lg:col-start-1 lg:row-start-1' => ($data['image_position'] ?? 'droite') === 'gauche',
            ])" />
        @endif
    </div>
</section>