@php($cats = config('bassin.categories'))

{{-- Bandeau d'accroche --}}
<section class="bg-gradient-to-br from-[var(--color-brand)] to-[var(--color-teal)] text-white">
    <div class="max-w-5xl mx-auto px-4 py-14 text-center">
        <h2 class="font-display text-3xl md:text-5xl font-bold mb-4">Bien plus qu'un appartement…<br>tout un art de vivre</h2>
        <p class="text-white/90 text-lg max-w-2xl mx-auto">
            Vélo, plages, gastronomie, nature, sport : le Bassin d'Arcachon regorge de pépites.
            Voici nos adresses et conseils, testés et approuvés, pour des vacances inoubliables.
        </p>
        <div class="mt-7 flex flex-wrap justify-center gap-3 text-sm">
            <span class="bg-white/15 rounded-full px-4 py-1.5">🏖️ Plage à 80 m</span>
            <span class="bg-white/15 rounded-full px-4 py-1.5">🚴 Pistes cyclables au pied de l'immeuble</span>
            <span class="bg-white/15 rounded-full px-4 py-1.5">🦪 Capitale de l'huître</span>
            <span class="bg-white/15 rounded-full px-4 py-1.5">🌲 Forêt & océan</span>
        </div>
    </div>
</section>

{{-- Grille de catégories --}}
<section class="max-w-6xl mx-auto px-4 py-12">
    <h2 class="font-display text-2xl md:text-3xl font-bold text-[var(--color-brand)] text-center mb-2">Que voulez-vous vivre ?</h2>
    <p class="text-center text-gray-500 mb-9">Choisissez une envie — on s'occupe des bonnes adresses.</p>

    <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
        @foreach($cats as $cat)
            <a href="{{ $cat['url'] }}"
               class="group relative bg-white rounded-2xl border border-gray-100 shadow-sm p-6 hover:shadow-xl hover:-translate-y-1 transition-all duration-200 overflow-hidden">
                <div class="absolute -right-4 -top-4 text-7xl opacity-10 group-hover:opacity-20 group-hover:scale-110 transition">{{ $cat['icon'] }}</div>
                <div class="text-4xl mb-3">{{ $cat['icon'] }}</div>
                <h3 class="font-display text-lg font-bold text-[var(--color-brand)] mb-1">{{ $cat['label'] }}</h3>
                <p class="text-sm text-gray-600 leading-snug">{{ $cat['desc'] }}</p>
                <span class="inline-block mt-3 text-sm font-semibold text-[var(--color-teal)] group-hover:translate-x-1 transition">Explorer →</span>
            </a>
        @endforeach
    </div>
</section>

{{-- Carte interactive --}}
@include('partials.bassin-map')

{{-- Appel à l'action --}}
<section class="max-w-4xl mx-auto px-4 pb-14">
    <div class="bg-[var(--color-gold)]/10 border border-[var(--color-gold)]/30 rounded-2xl p-8 text-center">
        <h3 class="font-display text-2xl font-bold text-[var(--color-brand)] mb-2">Convaincu ? Le plus dur sera de repartir.</h3>
        <p class="text-gray-600 mb-5">Vérifiez les disponibilités et réservez votre séjour au cœur du Moulleau.</p>
        <a href="/tarifs/" class="btn-brand mr-2">Voir les tarifs</a>
        <a href="/#contact" class="btn-gold">Nous contacter</a>
    </div>
</section>