@php($months = app(\App\Services\AvailabilityService::class)->calendar(4))

<section id="disponibilites" class="max-w-6xl mx-auto px-4 py-12">
    <h2 class="font-display text-3xl md:text-4xl font-bold text-[var(--color-brand)] mb-2 text-center">Disponibilités</h2>
    <p class="text-center text-gray-600 mb-8">Calendrier synchronisé en temps réel avec nos plateformes de réservation.</p>

    <div class="flex flex-wrap justify-center gap-4 mb-6 text-sm">
        <span class="flex items-center gap-2"><span class="w-4 h-4 rounded bg-white border border-gray-300"></span> Disponible</span>
        <span class="flex items-center gap-2"><span class="w-4 h-4 rounded bg-[var(--color-brand)]"></span> Occupé</span>
    </div>

    <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
        @foreach($months as $month)
            <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4">
                <h3 class="font-semibold text-center text-[var(--color-brand)] mb-3">{{ $month['label'] }}</h3>
                <div class="grid grid-cols-7 gap-1 text-center text-[11px] text-gray-400 mb-1">
                    @foreach(['L','M','M','J','V','S','D'] as $d)<div>{{ $d }}</div>@endforeach
                </div>
                <div class="grid grid-cols-7 gap-1 text-center text-sm">
                    @foreach($month['days'] as $day)
                        @if($day === null)
                            <div></div>
                        @else
                            <div @class([
                                'py-1 rounded',
                                'text-gray-300' => $day['past'],
                                'bg-[var(--color-brand)] text-white' => $day['booked'] && !$day['past'],
                                'text-gray-700' => !$day['booked'] && !$day['past'],
                            ])>{{ $day['day'] }}</div>
                        @endif
                    @endforeach
                </div>
            </div>
        @endforeach
    </div>
</section>