@props([
    'kicker' => null,
    'title' => null,
    'lead' => null,
    'link' => null,
    'linkLabel' => null,
    'tone' => 'surface',
    'align' => 'start',
])

{{--
    Rythme vertical du site. Les sections sont séparées par le vide : le fond
    sable (`tone="sand"`) reste une exception réservée à un ou deux moments de
    la page, jamais une alternance systématique.
--}}
<section {{ $attributes->class([
    'py-section',
    'bg-surface' => $tone === 'surface',
    'bg-sunken' => $tone === 'sand',
]) }}>
    <div class="site-container">
        @if ($kicker || $title || $lead)
            <div @class([
                'flex flex-wrap items-baseline justify-between gap-x-10 gap-y-5',
                'flex-col items-center text-center' => $align === 'center',
            ])>
                <div @class(['max-w-2xl', 'flex flex-col items-center' => $align === 'center'])>
                    @if ($kicker)
                        <p class="kicker">{{ $kicker }}</p>
                    @endif

                    @if ($title)
                        <h2 @class(['display-section', 'mt-4' => (bool) $kicker])>{{ $title }}</h2>
                    @endif

                    @if ($lead)
                        <p @class(['lead mt-5', 'mx-auto' => $align === 'center'])>{{ $lead }}</p>
                    @endif
                </div>

                @if ($link && $linkLabel)
                    <a href="{{ $link }}" class="btn-text shrink-0">
                        {{ $linkLabel }}
                        <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">
                            <path d="M5 12h14M13 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </a>
                @endif
            </div>
        @endif

        <div @class(['mt-14' => $kicker || $title || $lead])>
            {{ $slot }}
        </div>
    </div>
</section>