@php
    $money = fn ($value) => '€'.number_format((float) $value, 0);

    $selectedExperience = $experienceId ? $experiences->firstWhere('id', $experienceId) : null;
    $selectedYacht = $yachtId ? $yachts->firstWhere('id', $yachtId) : null;
    $selectedDestination = $destinationId ? $destinations->firstWhere('id', $destinationId) : null;

    $isUnavailable = fn ($yacht) => $availableYachtIds !== null && ! in_array($yacht->id, $availableYachtIds, true);
    $canContinue = $pricing !== null
        && $availableYachtIds !== null
        && $selectedYacht
        && in_array($selectedYacht->id, $availableYachtIds, true);

    $prettyDate = $date
        ? \Carbon\Carbon::parse($date)->translatedFormat('D, j F Y')
        : null;
@endphp

<div>
    {{-- =============================================================== HEADER --}}
    <section class="sy-section sy-section--surface pb-12 pt-40 lg:pb-16">
        <div class="sy-container text-center">
            <x-section-heading
                eyebrow="Reserve Your Day"
                lead="Book Your"
                hero="Charter"
                surface
            />
            <p class="mx-auto mt-10 max-w-xl font-serif text-xl font-light leading-relaxed text-body/60">
                Choose your date, your experience and your yacht. We'll prepare the rest —
                a crew, a route and a day at sea entirely your own.
            </p>
        </div>
    </section>

    {{-- =============================================================== WIZARD GRID --}}
    <section class="sy-section sy-section--surface border-t border-hairline pt-0">
        <div class="sy-container">

            @if (session('wizard-notice'))
                <div class="mb-12 rounded-button border border-gold/40 bg-gold/[0.06] px-6 py-4 font-serif text-base italic text-hero-word" role="status">
                    {{ session('wizard-notice') }}
                </div>
            @endif

            <div class="grid gap-12 lg:grid-cols-[1fr_22rem] lg:gap-16 xl:grid-cols-[1fr_24rem]">

                {{-- ==================================== LEFT — SELECTION STEPS --}}
                <div class="space-y-20">

                    {{-- ----- STEP 1 · DATE ----------------------------- --}}
                    <div>
                        <div class="flex items-baseline gap-5">
                            <span class="font-serif text-3xl italic text-hero-word">01</span>
                            <div>
                                <p class="font-label text-[11px] uppercase tracking-[0.42em] text-gold">Your Date</p>
                                <h3 class="mt-2 font-display text-3xl text-heading md:text-4xl">When do you sail?</h3>
                            </div>
                        </div>

                        <div class="mt-8 max-w-sm">
                            <input
                                type="date"
                                wire:model.live="date"
                                min="{{ $minDate }}"
                                class="w-full rounded-button border border-hairline bg-surface-deep px-5 py-4 font-serif text-lg text-heading outline-none transition focus:border-gold/60 focus:bg-surface-deep"
                                aria-label="Charter date"
                            >
                            <p class="mt-3 font-serif text-base italic text-body/45">No same-day departures.</p>
                        </div>
                    </div>

                    {{-- ----- STEP 2 · EXPERIENCE ----------------------- --}}
                    <div class="border-t border-hairline pt-16">
                        <div class="flex items-baseline gap-5">
                            <span class="font-serif text-3xl italic text-hero-word">02</span>
                            <div>
                                <p class="font-label text-[11px] uppercase tracking-[0.42em] text-gold">The Experience</p>
                                <h3 class="mt-2 font-display text-3xl text-heading md:text-4xl">Choose your day at sea.</h3>
                            </div>
                        </div>

                        <div class="mt-8 grid gap-4 sm:grid-cols-2">
                            @foreach ($experiences as $exp)
                                <button
                                    type="button"
                                    wire:click="$set('experienceId', {{ $exp->id }})"
                                    @class([
                                        'group flex flex-col items-start rounded-button border px-6 py-5 text-left transition duration-300 ease-house',
                                        'border-gold bg-gold/[0.08]' => $experienceId === $exp->id,
                                        'border-hairline bg-surface-deep hover:border-hairline' => $experienceId !== $exp->id,
                                    ])
                                    aria-pressed="{{ $experienceId === $exp->id ? 'true' : 'false' }}"
                                >
                                    <span class="flex w-full items-baseline justify-between gap-3">
                                        <span class="font-display text-2xl text-heading">{{ $exp->name }}</span>
                                        <span @class([
                                            'font-label text-[10px] uppercase tracking-[0.3em] transition',
                                            'text-gold' => $experienceId === $exp->id,
                                            'text-body/35' => $experienceId !== $exp->id,
                                        ])>Select</span>
                                    </span>
                                    <span class="mt-2 font-label text-[10px] uppercase tracking-[0.3em] text-body/45">{{ $exp->time_label }}</span>
                                </button>
                            @endforeach
                        </div>
                    </div>

                    {{-- ----- STEP 3 · DESTINATION ---------------------- --}}
                    <div class="border-t border-hairline pt-16">
                        <div class="flex items-baseline gap-5">
                            <span class="font-serif text-3xl italic text-hero-word">03</span>
                            <div>
                                <p class="font-label text-[11px] uppercase tracking-[0.42em] text-gold">The Route</p>
                                <h3 class="mt-2 font-display text-3xl text-heading md:text-4xl">Where to?</h3>
                            </div>
                        </div>

                        <div class="mt-8 grid gap-4 sm:grid-cols-2">
                            @foreach ($destinations as $destination)
                                <button
                                    type="button"
                                    wire:click="$set('destinationId', {{ $destination->id }})"
                                    @class([
                                        'group rounded-button border px-6 py-5 text-left transition duration-300 ease-house',
                                        'border-gold bg-gold/[0.08]' => $destinationId === $destination->id,
                                        'border-hairline bg-surface-deep hover:border-hairline' => $destinationId !== $destination->id,
                                    ])
                                    aria-pressed="{{ $destinationId === $destination->id ? 'true' : 'false' }}"
                                >
                                    <span class="block font-display text-2xl text-heading">{{ $destination->name }}</span>
                                    @if ($destination->tagline)
                                        <span class="mt-1 block font-serif text-base italic text-body/45">{{ $destination->tagline }}</span>
                                    @endif
                                </button>
                            @endforeach
                        </div>
                        <p class="mt-4 font-serif text-base italic text-body/40">Optional — your captain will tailor the route on the day.</p>
                    </div>

                    {{-- ----- STEP 4 · GUESTS --------------------------- --}}
                    <div class="border-t border-hairline pt-16">
                        <div class="flex items-baseline gap-5">
                            <span class="font-serif text-3xl italic text-hero-word">04</span>
                            <div>
                                <p class="font-label text-[11px] uppercase tracking-[0.42em] text-gold">The Guests</p>
                                <h3 class="mt-2 font-display text-3xl text-heading md:text-4xl">How many aboard?</h3>
                            </div>
                        </div>

                        <div class="mt-8 flex flex-wrap items-center gap-8">
                            <div class="flex items-center gap-7 rounded-button border border-hairline bg-surface-deep px-7 py-4">
                                <button
                                    type="button"
                                    wire:click="decrementGuests"
                                    @disabled($guests <= 1)
                                    class="flex h-9 w-9 items-center justify-center rounded-button border border-hairline font-serif text-2xl leading-none text-heading transition enabled:hover:border-gold enabled:hover:text-gold disabled:cursor-not-allowed disabled:opacity-30"
                                    aria-label="Remove a guest"
                                >&minus;</button>

                                <span class="min-w-[3ch] text-center font-display text-4xl text-heading">{{ $guests }}</span>

                                <button
                                    type="button"
                                    wire:click="incrementGuests"
                                    @disabled($guests >= $maxGuests)
                                    class="flex h-9 w-9 items-center justify-center rounded-button border border-hairline font-serif text-2xl leading-none text-heading transition enabled:hover:border-gold enabled:hover:text-gold disabled:cursor-not-allowed disabled:opacity-30"
                                    aria-label="Add a guest"
                                >+</button>
                            </div>

                            <p class="font-serif text-base italic text-body/45">
                                Max {{ $maxGuests }} guests for this yacht.
                            </p>
                        </div>
                    </div>

                    {{-- ----- STEP 5 · YACHT ---------------------------- --}}
                    <div class="border-t border-hairline pt-16">
                        <div class="flex items-baseline gap-5">
                            <span class="font-serif text-3xl italic text-hero-word">05</span>
                            <div>
                                <p class="font-label text-[11px] uppercase tracking-[0.42em] text-gold">The Yacht</p>
                                <h3 class="mt-2 font-display text-3xl text-heading md:text-4xl">Select your vessel.</h3>
                            </div>
                        </div>

                        @if ($availableYachtIds === null)
                            <p class="mt-6 font-serif text-base italic text-body/45">Pick a date and experience to see which yachts are free.</p>
                        @endif

                        <div class="mt-8 grid gap-6 sm:grid-cols-2 xl:grid-cols-3">
                            @foreach ($yachts as $yacht)
                                @php $unavailable = $isUnavailable($yacht); @endphp
                                <button
                                    type="button"
                                    @if (! $unavailable) wire:click="$set('yachtId', {{ $yacht->id }})" @endif
                                    @disabled($unavailable)
                                    @class([
                                        'group block overflow-hidden rounded-button border bg-surface-deep text-left transition duration-300 ease-house',
                                        'border-gold ring-1 ring-gold/40' => $yachtId === $yacht->id && ! $unavailable,
                                        'border-hairline hover:border-hairline' => $yachtId !== $yacht->id && ! $unavailable,
                                        'cursor-not-allowed border-hairline opacity-40 grayscale' => $unavailable,
                                    ])
                                    aria-pressed="{{ $yachtId === $yacht->id ? 'true' : 'false' }}"
                                >
                                    <span class="relative block overflow-hidden">
                                        <img
                                            src="{{ $yacht->hero_image }}"
                                            alt="{{ $yacht->full_name }}"
                                            loading="lazy"
                                            class="aspect-[4/3] w-full object-cover transition duration-[1400ms] ease-house group-hover:scale-105"
                                        >
                                        @if ($unavailable)
                                            <span class="absolute inset-0 flex items-center justify-center bg-ink/55 font-label text-[10px] uppercase tracking-[0.4em] text-white/80">Unavailable</span>
                                        @endif
                                    </span>
                                    <span class="flex items-baseline justify-between gap-3 px-5 py-4">
                                        <span>
                                            <span class="block font-display text-2xl text-heading">
                                                {{ $yacht->name }}
                                                <span class="font-serif italic text-hero-word">{{ $yacht->model }}</span>
                                            </span>
                                            <span class="mt-1 block font-label text-[10px] uppercase tracking-[0.3em] text-body/45">
                                                Up to {{ $yacht->max_persons }} guests
                                            </span>
                                        </span>
                                        @if ($yachtId === $yacht->id && ! $unavailable)
                                            <span class="font-label text-[10px] uppercase tracking-[0.3em] text-gold">&#10003;</span>
                                        @endif
                                    </span>
                                </button>
                            @endforeach
                        </div>
                    </div>
                </div>

                {{-- ==================================== RIGHT — LIVE SUMMARY --}}
                <aside class="lg:sticky lg:top-28 lg:self-start">
                    <div class="rounded-button border border-hairline bg-surface-deep p-7 lg:p-8">
                        <p class="font-label text-[11px] uppercase tracking-[0.42em] text-gold">Your Charter</p>
                        <h3 class="mt-4 font-display text-3xl text-heading">Summary</h3>

                        <x-separator class="!mx-0 mt-6" />

                        <dl class="mt-7 space-y-4 font-serif text-base">
                            <div class="flex items-baseline justify-between gap-4">
                                <dt class="text-body/45">Date</dt>
                                <dd class="text-right text-heading">{{ $prettyDate ?? 'Not selected' }}</dd>
                            </div>
                            <div class="flex items-baseline justify-between gap-4">
                                <dt class="text-body/45">Experience</dt>
                                <dd class="text-right text-heading">{{ $selectedExperience ? $selectedExperience->name.' · '.$selectedExperience->time_label : 'Not selected' }}</dd>
                            </div>
                            <div class="flex items-baseline justify-between gap-4">
                                <dt class="text-body/45">Destination</dt>
                                <dd class="text-right text-heading">{{ $selectedDestination?->name ?? 'Captain’s choice' }}</dd>
                            </div>
                            <div class="flex items-baseline justify-between gap-4">
                                <dt class="text-body/45">Guests</dt>
                                <dd class="text-right text-heading">{{ $guests }}</dd>
                            </div>
                            <div class="flex items-baseline justify-between gap-4">
                                <dt class="text-body/45">Yacht</dt>
                                <dd class="text-right text-heading">{{ $selectedYacht ? $selectedYacht->full_name : 'Not selected' }}</dd>
                            </div>
                        </dl>

                        @if ($pricing)
                            <div class="mt-7 border-t border-hairline pt-7">
                                <dl class="space-y-3 font-serif text-base">
                                    <div class="flex items-baseline justify-between gap-4">
                                        <dt class="text-body/55">Date slot base</dt>
                                        <dd class="text-heading">{{ $money($pricing['base_price']) }}</dd>
                                    </div>
                                    <div class="flex items-baseline justify-between gap-4">
                                        <dt class="text-body/55">{{ $selectedExperience?->name }} experience</dt>
                                        <dd class="text-heading">{{ $money($pricing['experience_price']) }}</dd>
                                    </div>
                                    <div class="flex items-baseline justify-between gap-4">
                                        <dt class="text-body/55">
                                            Per guest
                                            <span class="text-body/35">({{ $money($selectedYacht?->price_per_person) }} × {{ $guests }})</span>
                                        </dt>
                                        <dd class="text-heading">{{ $money($pricing['per_person_total']) }}</dd>
                                    </div>
                                </dl>

                                <div class="mt-6 flex items-baseline justify-between gap-4 border-t border-hairline pt-6">
                                    <span class="font-label text-[11px] uppercase tracking-[0.42em] text-gold">Total</span>
                                    <span class="font-display text-4xl text-heading">{{ $money($pricing['total_price']) }}</span>
                                </div>
                                <p class="mt-3 text-right font-serif text-sm italic text-body/40">VAT included.</p>
                            </div>
                        @else
                            <p class="mt-7 border-t border-hairline pt-7 font-serif text-base italic text-body/45">
                                Select a date, experience and yacht to see live pricing.
                            </p>
                        @endif

                        <div class="mt-8">
                            <button
                                type="button"
                                wire:click="continueToCheckout"
                                wire:loading.attr="disabled"
                                @disabled(! $canContinue)
                                @class([
                                    'sy-btn sy-btn--solid w-full justify-center',
                                    'pointer-events-none opacity-40' => ! $canContinue,
                                ])
                            >
                                Continue to Checkout
                                <span class="sy-btn__arrow" aria-hidden="true">&rarr;</span>
                            </button>

                            @error('selection')
                                <p class="mt-4 text-center font-serif text-sm italic text-red-600">{{ $message }}</p>
                            @enderror

                            @unless ($canContinue)
                                <p class="mt-4 text-center font-serif text-sm italic text-body/40">
                                    Choose a date, experience and yacht to continue.
                                </p>
                            @endunless
                        </div>
                    </div>
                </aside>
            </div>
        </div>
    </section>
</div>