@php
    /* ============================================================================
       The Fleet — yacht data
       Slugs / names / models / blurbs reuse the SAME values as home.blade.php.
       Each yacht's `gallery` is an ARRAY of image paths so the gallery component
       can scroll through many photos. Only one real image exists per yacht today,
       so we seed the strip by repeating the single available asset (placeholder).
       NOTE: pardo-silver's file uses an UPPERCASE .JPG extension.
       ========================================================================== */

    $yachts = [
        [
            'slug' => '55-sunreef',
            'eyebrow' => 'This is the One',
            'name' => 'Sunreef 55',
            'model' => 'Ultima',
            'image' => 'media/yachts/55-sunreef/55sunreef_homepage.jpg',
            'blurb' => 'Our flagship Sunreef. Two master suites, a private foredeck island, and crew quietly tuned to your itinerary across Mykonos & beyond.',
            'chips' => ['55 ft / 16.8 m', 'Up to 10 guests', '2 Master Suites'],
            'specs' => [
                ['Guests', 'Up to 10'],
                ['Cabins', '2 Master Suites'],
                ['Bathrooms', '2 En-suite'],
                ['Day Charter', '5 hrs'],
                ['Full Day', '8 hrs'],
                ['Fuel', 'Included'],
                ['Premium Towels', 'Onboard'],
                ['Wi-Fi', 'Onboard'],
            ],
        ],
        [
            'slug' => 'pardo-white',
            'eyebrow' => 'Riviera Elegance',
            'name' => 'Pardo 43',
            'model' => 'White',
            'image' => 'media/yachts/pardo-white/pardowhite_homepage.jpg',
            'blurb' => 'Italian design. Effortless performance. All-day comfort and style, crafted for private journeys across the Greek isles.',
            'chips' => ['43 ft / 13.1 m', 'Up to 12 guests', 'Sun-loungers & Shade'],
            'specs' => [
                ['Guests', 'Up to 12'],
                ['Cabins', '1 Cabin'],
                ['Bathrooms', '1 Bathroom'],
                ['Day Charter', '5 hrs'],
                ['Full Day', '8 hrs'],
                ['Fuel', 'Included'],
                ['Premium Towels', 'Onboard'],
                ['Wi-Fi', 'Onboard'],
            ],
        ],
        [
            'slug' => 'pardo-silver',
            'eyebrow' => 'Hermès Edition',
            'name' => 'Pardo 43',
            'model' => 'Silver',
            'image' => 'media/yachts/pardo-silver/pardosilver_homepage.JPG',
            'blurb' => 'The perfect balance of Italian design and performance. Sophisticated, spacious, and made for unforgettable days at sea.',
            'chips' => ['43 ft / 13.1 m', 'Up to 12 guests', 'Fuel Included'],
            'specs' => [
                ['Guests', 'Up to 12'],
                ['Cabins', '1 Cabin'],
                ['Bathrooms', '1 Bathroom'],
                ['Day Charter', '5 hrs'],
                ['Full Day', '8 hrs'],
                ['Fuel', 'Included'],
                ['Premium Towels', 'Onboard'],
                ['Wi-Fi', 'Onboard'],
            ],
        ],
        [
            'slug' => 'wally',
            'eyebrow' => 'Tiffany Edition',
            'name' => 'Wally 45',
            'model' => 'Tiffany',
            'image' => 'media/yachts/wally/wally_homepage.jpg',
            'blurb' => 'A stylish open-air yacht for unforgettable days at sea. Elegant, fast, and effortless — built for those who live for the moment.',
            'chips' => ['45 ft / 13.7 m', 'Up to 8 guests', '1 Cabin · 1 Bathroom'],
            'specs' => [
                ['Guests', 'Up to 8'],
                ['Cabins', '1 Cabin'],
                ['Bathrooms', '1 Bathroom'],
                ['Day Charter', '5 hrs'],
                ['Full Day', '8 hrs'],
                ['Fuel', 'Included'],
                ['Premium Towels', 'Onboard'],
                ['Wi-Fi', 'Onboard'],
            ],
        ],
        [
            'slug' => 'sunreef',
            'eyebrow' => 'The Catamaran',
            'name' => 'Sunreef',
            'model' => 'Classic',
            'image' => 'media/yachts/sunreef/sunreef_homepage.jpg',
            'blurb' => 'Space, stability and shade. A serene catamaran for groups who want to swim, dine and drift through the Aegean in comfort.',
            'chips' => ['60 ft / 18.3 m', 'Up to 12 guests', 'Wide Sun Deck'],
            'specs' => [
                ['Guests', 'Up to 12'],
                ['Cabins', '3 Cabins'],
                ['Bathrooms', '2 Bathrooms'],
                ['Day Charter', '5 hrs'],
                ['Full Day', '8 hrs'],
                ['Fuel', 'Included'],
                ['Premium Towels', 'Onboard'],
                ['Wi-Fi', 'Onboard'],
            ],
        ],
    ];

    /* Shared "all-inclusive" amenities strip + experience pills (mirror the mock). */
    $amenities = [
        'Swim Stops', 'Champagne Service', 'Dining Onboard',
        'Sunset Cruising', 'Wellness Escape', 'Ornos Bay Departure',
    ];

    $experiencePills = ['Day', 'Sunset', 'All Day', 'Wellness Escape'];

    /* Captain & hostess are constant across the fleet — surfaced in the spec grid. */
    $crewNote = 'English-Speaking Captain & Hostess';
@endphp

<x-layouts.app
    page-key="yachts"
    title="The Fleet"
    description="Explore the Saint Yachting fleet — a curated collection of luxury yachts for private charter across Mykonos, Delos and the Cyclades."
>
    {{-- ===================================================================
         HERO / INTRO
         =================================================================== --}}
    <section class="sy-section sy-section--surface pt-40 lg:pt-48">
        <div class="sy-container">
            <x-section-heading
                eyebrow="The Fleet"
                lead="Explore Our"
                hero="Yachts"
                surface
            />
            <p class="mx-auto mt-12 max-w-2xl text-center font-serif text-2xl font-light leading-relaxed text-body/90 md:text-3xl">
                Five exceptional vessels, one discreet crew and the freedom of the open Aegean.
                Choose your yacht, then unfold the details — gallery, specifications and the
                all-inclusive day we design entirely around you.
            </p>
        </div>
    </section>

    {{-- ===================================================================
         FLEET — alternating expandable rows
         =================================================================== --}}
    <section class="sy-section sy-section--surface border-t border-hairline !pt-0">
        <div class="sy-container">
            <div class="space-y-24 lg:space-y-36">
                @foreach ($yachts as $i => $yacht)
                    @php
                        $gallery = ($yachtModels[$yacht['slug']] ?? null)?->gallery_images
                            ?: [asset($yacht['image'] ?? 'media/yachts/'.$yacht['slug'].'/homepage.jpg')];
                    @endphp
                    <article
                        x-data="{
                            open: false,
                            index: 0,
                            go(i) { this.index = i; },
                        }"
                        class="scroll-mt-32"
                        id="yacht-{{ $yacht['slug'] }}"
                    >
                        {{-- ---- Summary row (alternating sides) ---- --}}
                        <div class="grid items-center gap-10 lg:grid-cols-2 lg:gap-16">
                            {{-- Image --}}
                            {{-- Image — doubles as the gallery; thumbnails below cycle it --}}
                            <div class="min-w-0 {{ $i % 2 === 1 ? 'lg:order-2' : '' }}">
                                <button
                                    type="button"
                                    @click="open = !open"
                                    :aria-expanded="open"
                                    aria-label="View details for {{ $yacht['name'] }} {{ $yacht['model'] }}"
                                    class="group relative block w-full overflow-hidden rounded-button text-left"
                                >
                                    @foreach ($gallery as $g => $img)
                                        @if ($g === 0)
                                            <img
                                                src="{{ $img }}"
                                                alt="{{ $yacht['name'] }} {{ $yacht['model'] }}"
                                                loading="lazy"
                                                class="aspect-[4/3] w-full object-cover transition duration-[1400ms] ease-house group-hover:scale-105"
                                            >
                                        @else
                                            <img
                                                src="{{ $img }}"
                                                alt="{{ $yacht['name'] }} {{ $yacht['model'] }} — image {{ $g + 1 }}"
                                                loading="lazy"
                                                x-show="index === {{ $g }}"
                                                x-transition.opacity.duration.500ms
                                                class="absolute inset-0 h-full w-full object-cover transition duration-[1400ms] ease-house group-hover:scale-105"
                                            >
                                        @endif
                                    @endforeach
                                    <span class="pointer-events-none absolute inset-0 bg-gradient-to-t from-ink/50 via-transparent to-transparent opacity-0 transition duration-700 group-hover:opacity-100"></span>
                                    <span class="pointer-events-none absolute bottom-5 left-5 font-label text-[10px] uppercase tracking-[0.4em] text-pearl/90 opacity-0 transition duration-500 group-hover:opacity-100">
                                        <span x-text="open ? 'Hide Details' : 'View Details'"></span>
                                    </span>
                                    <span class="pointer-events-none absolute right-5 top-5 inline-flex h-9 w-9 items-center justify-center rounded-full border border-white/30 bg-ink/40 text-pearl backdrop-blur-sm transition duration-500">
                                        <span class="text-base leading-none transition duration-500" :class="open && 'rotate-45'" aria-hidden="true">+</span>
                                    </span>
                                </button>

                                {{-- Thumbnails — appear under the main image once expanded; click to cycle --}}
                                <div
                                    x-show="open"
                                    x-cloak
                                    x-transition.opacity.duration.500ms
                                    class="mt-4 flex flex-wrap gap-3"
                                >
                                    @foreach ($gallery as $g => $img)
                                        <button
                                            type="button"
                                            @click="go({{ $g }})"
                                            aria-label="Show image {{ $g + 1 }}"
                                            class="relative h-16 w-24 shrink-0 overflow-hidden rounded-button transition"
                                            :class="index === {{ $g }} ? 'ring-1 ring-gold' : 'opacity-50 hover:opacity-90'"
                                        >
                                            <img
                                                src="{{ $img }}"
                                                alt="{{ $yacht['name'] }} thumbnail {{ $g + 1 }}"
                                                loading="lazy"
                                                class="h-full w-full object-cover"
                                            >
                                        </button>
                                    @endforeach
                                </div>
                            </div>

                            {{-- Text --}}
                            <div class="{{ $i % 2 === 1 ? 'lg:order-1' : '' }}">
                                <p class="font-label text-[11px] uppercase tracking-[0.5em] text-gold">
                                    <span class="text-body/35">{{ str_pad($i + 1, 2, '0', STR_PAD_LEFT) }}</span>
                                    <span class="mx-3 text-body/20">/</span>{{ $yacht['eyebrow'] }}
                                </p>
                                <h3 class="mt-5 font-display text-5xl text-heading md:text-6xl">
                                    {{ $yacht['name'] }}
                                    <span class="font-serif italic text-hero-word">{{ $yacht['model'] }}</span>
                                </h3>
                                <p class="mt-6 max-w-md font-serif text-xl font-light leading-relaxed text-body/65">
                                    {{ $yacht['blurb'] }}
                                </p>

                                {{-- Experience pills (static styled) --}}
                                <div class="mt-7 flex flex-wrap gap-3">
                                    @foreach ($experiencePills as $pill)
                                        <span class="rounded-full border border-hairline px-4 py-2 font-label text-[10px] uppercase tracking-[0.28em] text-body/55">
                                            {{ $pill }}
                                        </span>
                                    @endforeach
                                </div>

                                {{-- Spec chip row --}}
                                <div class="mt-8 flex flex-wrap gap-x-10 gap-y-3 border-t border-hairline pt-6">
                                    @foreach ($yacht['chips'] as $chip)
                                        <span class="font-label text-[10px] uppercase tracking-[0.3em] text-body/50">{{ $chip }}</span>
                                    @endforeach
                                </div>

                                <div class="mt-9 flex flex-wrap items-center gap-x-10 gap-y-4">
                                    <x-cta :href="route('book', ['yacht' => $yacht['slug']])">
                                        Charter this Yacht
                                    </x-cta>
                                    <button
                                        type="button"
                                        @click="open = !open"
                                        class="sy-cta"
                                        :aria-expanded="open"
                                    >
                                        <span x-text="open ? 'Hide Details' : 'View Details'"></span>
                                        <span class="sy-cta__arrow transition duration-500" :class="open && 'rotate-90'" aria-hidden="true">&darr;</span>
                                    </button>
                                </div>
                            </div>
                        </div>

                        {{-- ---- Expanded detail panel ---- --}}
                        <div
                            x-show="open"
                            x-transition:enter="transition duration-700 ease-house"
                            x-transition:enter-start="opacity-0"
                            x-transition:enter-end="opacity-100"
                            x-cloak
                            class="mt-12 border-t border-hairline pt-12"
                        >
                            {{-- Specifications --}}
                            <p class="font-label text-[11px] uppercase tracking-[0.5em] text-gold">Specifications</p>

                            <div class="mt-7 grid grid-cols-2 gap-x-8 gap-y-7 sm:grid-cols-4 lg:grid-cols-6">
                                @foreach ($yacht['specs'] as [$label, $value])
                                    <div>
                                        <p class="font-label text-[9px] uppercase tracking-[0.32em] text-body/40">{{ $label }}</p>
                                        <p class="mt-2 font-serif text-lg leading-tight text-heading/90">{{ $value }}</p>
                                    </div>
                                @endforeach
                            </div>

                            {{-- Crew note --}}
                            <div class="mt-8 border-t border-hairline pt-6">
                                <p class="font-label text-[10px] uppercase tracking-[0.32em] text-hero-word">{{ $crewNote }}</p>
                            </div>

                            {{-- All-inclusive amenities strip --}}
                            <div class="mt-8">
                                <p class="font-label text-[11px] uppercase tracking-[0.5em] text-gold">All Inclusive</p>
                                <div class="mt-5 flex flex-wrap items-center gap-x-5 gap-y-3">
                                    @foreach ($amenities as $a => $amenity)
                                        <span class="font-serif text-base italic text-body/65">{{ $amenity }}</span>
                                        @if (! $loop->last)
                                            <span class="h-1 w-1 rounded-full bg-gold/60" aria-hidden="true"></span>
                                        @endif
                                    @endforeach
                                </div>
                                <p class="mt-6 font-serif text-lg italic text-body/80">
                                    All inclusive. No hidden costs. Just pure luxury.
                                </p>
                            </div>

                            <div class="mt-10">
                                <x-btn :href="route('book', ['yacht' => $yacht['slug']])" variant="solid">
                                    Charter this Yacht
                                </x-btn>
                            </div>
                        </div>

                        {{-- Row separator --}}
                        @unless ($loop->last)
                            <div class="mt-24 lg:mt-36">
                                <x-separator />
                            </div>
                        @endunless
                    </article>
                @endforeach
            </div>
        </div>
    </section>

    {{-- ===================================================================
         CONTACT CTA — closing
         =================================================================== --}}
    <section class="sy-section sy-section--surface">
        <div class="sy-container text-center">
            <x-section-heading
                eyebrow="Begin the Conversation"
                lead="Plan Your"
                hero="Charter"
                surface
            />
            <p class="mx-auto mt-10 max-w-xl font-serif text-xl font-light leading-relaxed text-body/60">
                Tell us your dates and what you have in mind. We'll craft the rest.
            </p>
            <div class="mt-10 flex flex-wrap justify-center gap-6">
                <x-btn :href="route('book')" variant="solid">Book a Charter</x-btn>
                <x-btn :href="route('contact')" variant="outline">Contact Us</x-btn>
            </div>
        </div>
    </section>
</x-layouts.app>