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

<div class="sy-section sy-section--surface pt-40">
    <div class="sy-container">

        @if ($reference)
            {{-- ===================================================== CONFIRMED --}}
            <div class="mx-auto max-w-2xl text-center">
                <x-section-heading
                    eyebrow="Reservation Received"
                    lead="Your Charter Is"
                    hero="Reserved"
                    surface
                />

                <p class="mx-auto mt-10 max-w-xl font-serif text-xl font-light leading-relaxed text-body/65">
                    Thank you, {{ $customer_name }}. We’ve received your request and emailed a confirmation
                    to <span class="text-heading">{{ $customer_email }}</span>. Our concierge will be in touch shortly.
                </p>

                <div class="mx-auto mt-12 max-w-sm rounded-button border border-gold/40 bg-gold/[0.06] px-8 py-7">
                    <p class="font-label text-[11px] uppercase tracking-[0.42em] text-gold">Your Reference</p>
                    <p class="mt-3 font-display text-4xl text-heading">{{ $reference }}</p>
                </div>

                <p class="mx-auto mt-10 max-w-xl font-serif text-base italic text-body/45">
                    Secure online payment is coming soon — for now your booking is held as pending while
                    our team confirms availability and arranges payment with you directly.
                </p>

                <div class="mt-12">
                    <a href="{{ route('home') }}" wire:navigate class="sy-btn sy-btn--solid justify-center">
                        Return Home
                        <span class="sy-btn__arrow" aria-hidden="true">&rarr;</span>
                    </a>
                </div>
            </div>
        @elseif ($slot)
            {{-- ===================================================== CHECKOUT --}}
            <div class="text-center">
                <x-section-heading
                    eyebrow="Almost There"
                    lead="Confirm Your"
                    hero="Charter"
                    surface
                />
            </div>

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

                {{-- ----- LEFT · GUEST DETAILS ----------------------------- --}}
                <form wire:submit="placeReservation" class="space-y-10">
                    @error('booking')
                        <div class="rounded-button border border-red-400/40 bg-red-500/[0.08] px-6 py-4 font-serif text-base italic text-red-600" role="alert">
                            {{ $message }}
                        </div>
                    @enderror

                    <div>
                        <p class="font-label text-[11px] uppercase tracking-[0.42em] text-gold">Your Details</p>
                        <h3 class="mt-2 font-display text-3xl text-heading">Who’s sailing?</h3>

                        <div class="mt-8 space-y-6">
                            <div>
                                <label for="customer_name" class="font-label text-[10px] uppercase tracking-[0.3em] text-body/45">Full name</label>
                                <input id="customer_name" type="text" wire:model="customer_name"
                                    class="mt-2 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">
                                @error('customer_name') <p class="mt-2 font-serif text-sm italic text-red-600">{{ $message }}</p> @enderror
                            </div>

                            <div class="grid gap-6 sm:grid-cols-2">
                                <div>
                                    <label for="customer_email" class="font-label text-[10px] uppercase tracking-[0.3em] text-body/45">Email</label>
                                    <input id="customer_email" type="email" wire:model="customer_email"
                                        class="mt-2 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">
                                    @error('customer_email') <p class="mt-2 font-serif text-sm italic text-red-600">{{ $message }}</p> @enderror
                                </div>
                                <div>
                                    <label for="customer_phone" class="font-label text-[10px] uppercase tracking-[0.3em] text-body/45">Phone <span class="text-body/25">(optional)</span></label>
                                    <input id="customer_phone" type="tel" wire:model="customer_phone"
                                        class="mt-2 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">
                                    @error('customer_phone') <p class="mt-2 font-serif text-sm italic text-red-600">{{ $message }}</p> @enderror
                                </div>
                            </div>

                            <div>
                                <label for="special_requests" class="font-label text-[10px] uppercase tracking-[0.3em] text-body/45">Special requests <span class="text-body/25">(occasion, dietary, notes)</span></label>
                                <textarea id="special_requests" rows="3" wire:model="special_requests"
                                    class="mt-2 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"></textarea>
                                @error('special_requests') <p class="mt-2 font-serif text-sm italic text-red-600">{{ $message }}</p> @enderror
                            </div>

                            {{-- Honeypot — visually hidden, must stay empty. --}}
                            <div class="absolute -left-[9999px]" aria-hidden="true">
                                <label>Website<input type="text" wire:model="website" tabindex="-1" autocomplete="off"></label>
                            </div>
                        </div>
                    </div>

                    <div class="border-t border-hairline pt-8">
                        <label class="flex cursor-pointer items-start gap-4 font-serif text-base text-body/70">
                            <input type="checkbox" wire:model="accept_terms"
                                class="mt-1 h-5 w-5 shrink-0 border-hairline bg-surface-deep text-gold">
                            <span>
                                I accept the <a href="{{ route('legal.terms') }}" target="_blank" class="text-gold underline-offset-4 hover:underline">Terms &amp; Cancellation Policy</a>
                                and the <a href="{{ route('legal.privacy') }}" target="_blank" class="text-gold underline-offset-4 hover:underline">Privacy Policy</a>.
                            </span>
                        </label>
                        @error('accept_terms') <p class="mt-2 font-serif text-sm italic text-red-600">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <button type="submit" wire:loading.attr="disabled" class="sy-btn sy-btn--solid w-full justify-center">
                            <span wire:loading.remove wire:target="placeReservation">Confirm Reservation</span>
                            <span wire:loading wire:target="placeReservation">Reserving…</span>
                            <span class="sy-btn__arrow" aria-hidden="true" wire:loading.remove wire:target="placeReservation">&rarr;</span>
                        </button>
                        <p class="mt-4 text-center font-serif text-sm italic text-body/40">
                            No payment is taken now — your charter is held as pending while we confirm.
                        </p>
                    </div>
                </form>

                {{-- ----- RIGHT · ORDER 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">{{ $slot->date->translatedFormat('D, j F Y') }}</dd>
                            </div>
                            <div class="flex items-baseline justify-between gap-4">
                                <dt class="text-body/45">Experience</dt>
                                <dd class="text-right text-heading">{{ $slot->experience->name }} · {{ $slot->experience->time_label }}</dd>
                            </div>
                            <div class="flex items-baseline justify-between gap-4">
                                <dt class="text-body/45">Destination</dt>
                                <dd class="text-right text-heading">{{ $destination?->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">{{ $slot->yacht->full_name }}</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">{{ $slot->experience->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($slot->yacht->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">
                                    Incl. {{ $money($pricing['vat_amount']) }} VAT ({{ rtrim(rtrim(number_format((float) $pricing['vat_rate'], 2), '0'), '.') }}%).
                                </p>
                            </div>
                        @endif

                        @if ($includedCopy || $excludedCopy)
                            <div class="mt-7 space-y-5 border-t border-hairline pt-7 font-serif text-sm leading-relaxed">
                                @if ($includedCopy)
                                    <div>
                                        <p class="font-label text-[10px] uppercase tracking-[0.3em] text-gold">What’s included</p>
                                        <p class="mt-2 text-body/55">{{ $includedCopy }}</p>
                                    </div>
                                @endif
                                @if ($excludedCopy)
                                    <div>
                                        <p class="font-label text-[10px] uppercase tracking-[0.3em] text-body/45">Not included</p>
                                        <p class="mt-2 text-body/55">{{ $excludedCopy }}</p>
                                    </div>
                                @endif
                            </div>
                        @endif
                    </div>
                </aside>
            </div>
        @else
            {{-- ===================================================== NO SESSION --}}
            <div class="mx-auto max-w-2xl text-center">
                <x-section-heading
                    eyebrow="Nothing To Confirm"
                    lead="Start Your"
                    hero="Booking"
                    surface
                />
                <p class="mx-auto mt-10 max-w-xl font-serif text-lg leading-relaxed text-body/65">
                    We couldn’t find a charter in progress. Choose your date, experience and yacht to begin.
                </p>
                <div class="mt-12">
                    <a href="{{ route('book') }}" wire:navigate class="sy-btn sy-btn--solid justify-center">
                        Book a Charter
                        <span class="sy-btn__arrow" aria-hidden="true">&rarr;</span>
                    </a>
                </div>
            </div>
        @endif
    </div>
</div>