{{-- Experience cards render from the Experience models passed by PageController. --}}
<x-layouts.app
    page-key="book"
    title="Book a Charter"
    description="Reserve your private yacht charter in Mykonos — choose your date, experience, guests and yacht with live pricing."
>
    @livewire('booking-wizard')

    {{-- ===================================================================
         EXPERIENCE EXPLANATIONS — mirrors suggestions/Experiences.jpg.
         =================================================================== --}}
    <section class="sy-section sy-section--surface border-t border-hairline">
        <div class="sy-container">
            <x-section-heading
                eyebrow="Choose Your Day"
                lead="The"
                hero="Experiences"
                surface
            />

            <div class="mt-20 grid gap-8 md:grid-cols-2 lg:grid-cols-4">
                @foreach ($experiences as $exp)
                    <div class="group flex flex-col">
                        <div class="relative overflow-hidden rounded-button">
                            <img
                                src="{{ $exp->card_image }}"
                                alt="{{ $exp->name }} experience"
                                loading="lazy"
                                class="aspect-[3/4] w-full object-cover transition duration-[1400ms] ease-house group-hover:scale-105"
                            >
                            <span class="absolute left-4 top-4 font-label text-[10px] uppercase tracking-[0.4em] text-white/90 drop-shadow">{{ $exp->time_label }}</span>
                        </div>
                        <h3 class="mt-7 font-display text-3xl text-heading">
                            {{ $exp->name }} <span class="font-serif italic text-body/55">experience</span>
                        </h3>
                        <p class="mt-4 font-serif text-lg leading-relaxed text-body/60">{{ $exp->description }}</p>
                        <div class="mt-5">
                            <x-cta :href="route('experiences').'#'.$exp->slug">Discover more</x-cta>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
</x-layouts.app>