{{-- Boutique --}}
<section id="boutique" class="scroll-mt-20 py-24 lg:py-40">
    <div class="mx-auto max-w-[1440px] px-5 sm:px-10 lg:px-14">
        <div class="mb-14 flex flex-wrap items-end justify-between gap-6">
            <div>
                <p class="kicker mb-5 text-rouge">{{ $home->plain($data['kicker'] ?? '') }}</p>
                <h2 class="font-serif text-[clamp(2.2rem,4.6vw,4.2rem)] leading-[1.02]">{{ $home->rich($data['title'] ?? '') }}</h2>
            </div>
            @if (filled($data['link_label'] ?? null))
                <a href="{{ route('shop.index') }}" class="lien-filet">{{ $data['link_label'] }}</a>
            @endif
        </div>

        <div class="grid gap-x-5 gap-y-14 sm:grid-cols-2 lg:grid-cols-4">
            @foreach ($products->take((int) ($data['count'] ?? 4)) as $product)
                <x-product-card :product="$product" />
            @endforeach
        </div>

        @if (filled($data['reassurances'] ?? null))
            <ul class="kicker mt-20 flex flex-wrap justify-center gap-x-10 gap-y-4 border-t border-filet pt-10 text-gris">
                @foreach (array_values($data['reassurances']) as $index => $reassurance)
                    @if ($index > 0)
                        <li aria-hidden="true" class="text-laiton">◆</li>
                    @endif
                    <li>{{ $reassurance['text'] ?? '' }}</li>
                @endforeach
            </ul>
        @endif
    </div>
</section>