@php
    // $experiences is provided by PageController (active Experience models, ordered).
    // $yachts is provided by PageController (active Yacht models, ordered).

    $destinations = [
        [
            'index' => 'I', 'name' => 'Mykonos South', 'tagline' => 'Ornos to Elia',
            'image' => 'media/destinations/paros.jpg',
            'overlay' => 'The South Shore',
        ],
        [
            'index' => 'II', 'name' => 'Delos', 'tagline' => 'The Sacred Isle',
            'image' => 'media/destinations/ios.jpg',
            'overlay' => 'Ancient Waters',
        ],
    ];
@endphp

<x-layouts.app
    page-key="home"
    title="Private Yacht Charters in Mykonos"
    description="Saint Yachting — private luxury yacht charters across the south shore of Mykonos and the sacred island of Delos. Exceptional yachts, unforgettable journeys."
>
    {{-- ===================================================================
         HERO — scroll-scrubbed video
         =================================================================== --}}
    <section class="sy-hero" data-hero>
        <div class="sy-hero__sticky" data-hero-sticky>
            <img class="sy-hero__poster" src="{{ asset('media/hero-poster.jpg') }}" alt="" aria-hidden="true">
            <video
                class="sy-hero__video"
                data-hero-video
                src="{{ asset('media/yacht-reel-scrub-1080.mp4') }}"
                poster="{{ asset('media/hero-poster.jpg') }}"
                muted playsinline preload="auto"
            ></video>
            <div class="sy-hero__overlay"></div>

            <div class="sy-hero__content">
                <p class="sy-hero__eyebrow">
                    Mykonos <span class="sy-dot"></span> Delos <span class="sy-dot"></span> The Cyclades
                </p>
                <h1 class="sy-hero__title">Saint<b>Yachting</b></h1>
                <p class="sy-hero__tagline">Exceptional yachts. Unforgettable journeys.</p>
            </div>

            <div class="sy-hero__scroll">
                <span>Scroll</span>
                <span class="sy-hero__scroll-line"></span>
            </div>
        </div>
    </section>

    {{-- ===================================================================
         INTRO + FEATURE STRIP
         =================================================================== --}}
    <section class="sy-section sy-section--surface">
        <div class="sy-container">
            <x-separator />
            <div class="mx-auto mt-16 max-w-3xl text-center">
                <p class="sy-eyebrow">Private Journeys Across Mykonos &amp; Beyond</p>
                <p class="mt-8 font-serif text-2xl font-light leading-relaxed text-heading/90 md:text-3xl">
                    A curated fleet, a discreet crew and the freedom of the open Aegean.
                    Saint Yachting designs days at sea that feel entirely your own — from sunrise
                    rituals to golden-hour anchorages off the south shore.
                </p>
            </div>

            <div class="mt-20 grid grid-cols-2 gap-y-12 border-t border-hairline pt-14 text-center md:grid-cols-4">
                @foreach ([
                    ['Swim Stops', 'Hidden beaches & sea caves'],
                    ['Champagne Service', 'Onboard, all day'],
                    ['Dining at Sea', 'Curated Greek menus'],
                    ['English-Speaking Crew', 'Captain & hostess'],
                ] as [$label, $detail])
                    <div class="px-4">
                        <p class="font-label text-[11px] uppercase tracking-[0.42em] text-gold">{{ $label }}</p>
                        <p class="mt-3 font-serif text-lg italic text-body/65">{{ $detail }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    {{-- ===================================================================
         YACHTS — alternating image / text
         =================================================================== --}}
    <section id="yachts" class="sy-section sy-section--surface border-t border-hairline">
        <div class="sy-container">
            <x-section-heading
                eyebrow="The Fleet"
                lead="Explore Our"
                hero="Yachts"
                surface
            />

            <div class="mt-20 space-y-24 lg:space-y-28">
                @foreach ($yachts as $i => $yacht)
                    <article class="grid items-center gap-10 lg:grid-cols-2 lg:gap-16">
                        {{-- Rounded full-bleed photo --}}
                        <div class="sy-media aspect-[5/4] {{ $i % 2 === 1 ? 'lg:order-2' : '' }}">
                            <img
                                src="{{ $yacht->homepage_image }}"
                                alt="{{ $yacht->name }} {{ $yacht->model }}"
                                loading="lazy"
                            >
                        </div>

                        {{-- Details --}}
                        <div class="{{ $i % 2 === 1 ? 'lg:order-1' : '' }}">
                            <span class="sy-eyebrow sy-eyebrow--flanked">{{ $yacht->tagline }}</span>
                            <h3 class="mt-6 font-serif text-5xl font-light italic leading-none text-heading md:text-6xl">
                                {{ $yacht->name }}
                                <span class="ml-1 font-display not-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/80">
                                {{ $yacht->short_description }}
                            </p>

                            {{-- Pick an experience, then book it on this yacht (pre-selected on /book) --}}
                            <div x-data="{ exp: '{{ $experiences->first()?->slug }}' }" class="mt-7">
                                <div class="sy-pills">
                                    @foreach ($experiences as $experience)
                                        @php
                                            $pillIcon = match ($experience->slug) {
                                                'day' => 'sun',
                                                'sunset' => 'sunset',
                                                'full-saint' => 'clock',
                                                'wellness' => 'lotus',
                                                default => 'anchor',
                                            };
                                        @endphp
                                        <button
                                            type="button"
                                            @click="exp = '{{ $experience->slug }}'"
                                            class="sy-pill cursor-pointer"
                                            :class="{ 'sy-pill--active': exp === '{{ $experience->slug }}' }"
                                            :aria-pressed="(exp === '{{ $experience->slug }}').toString()"
                                        >
                                            <x-spec-icon :name="$pillIcon" />
                                            {{ $experience->name }}
                                        </button>
                                    @endforeach
                                </div>

                                <div class="mt-7">
                                    <a
                                        :href="'{{ route('book', ['yacht' => $yacht->slug]) }}&experience=' + exp"
                                        class="sy-pill-btn"
                                    >
                                        Book this Experience
                                        <span class="sy-btn__arrow" aria-hidden="true">&rarr;</span>
                                    </a>
                                </div>
                            </div>

                            @if (!empty($yacht->homepage_specs))
                            <div class="mt-9 sy-specs">
                                @foreach ($yacht->homepage_specs as $spec)
                                    <div class="sy-spec">
                                        <span class="sy-spec__icon"><x-spec-icon :name="$spec['icon'] ?? 'boat'" /></span>
                                        <span class="sy-spec__value">{{ $spec['value'] ?? '' }}</span>
                                        <span class="sy-spec__label">{{ $spec['label'] ?? '' }}</span>
                                    </div>
                                @endforeach
                            </div>
                            @endif
                        </div>
                    </article>
                @endforeach
            </div>

            <div class="mt-24 text-center">
                <x-btn :href="route('yachts')" variant="outline">View the Full Fleet</x-btn>
            </div>
        </div>
    </section>

    {{-- ===================================================================
         EXPERIENCES — 4-card band
         =================================================================== --}}
    <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="sy-media aspect-[3/4]">
                            <img
                                src="{{ $exp->card_image }}"
                                alt="{{ $exp->name }} experience"
                                loading="lazy"
                            >
                            <span class="absolute left-4 top-4 z-[3] 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/70">{{ $exp->description }}</p>
                        <div class="mt-5">
                            <x-cta :href="route('experiences').'#'.$exp->slug">Discover more</x-cta>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    {{-- ===================================================================
         DESTINATIONS — arched portraits
         =================================================================== --}}
    <section class="sy-section sy-section--surface border-t border-hairline">
        <div class="sy-container">
            <x-section-heading
                eyebrow="Where We Sail"
                lead="Our"
                hero="Destinations"
                surface
            />

            <div class="mx-auto mt-20 grid max-w-3xl gap-10 sm:grid-cols-2">
                @foreach ($destinations as $i => $dest)
                    <a href="{{ route('destinations') }}" class="sy-arch-card group block {{ $i === 1 ? 'sm:translate-y-10' : '' }}">
                        <div class="sy-arch">
                            <img src="{{ asset($dest['image']) }}" alt="{{ $dest['name'] }}" loading="lazy">
                        </div>
                        <div class="mt-7 text-center">
                            <span class="font-serif text-lg italic tracking-widest text-gold">{{ $dest['index'] }}</span>
                            <h3 class="mt-1 font-display text-4xl text-heading">{{ $dest['name'] }}</h3>
                            <p class="mt-1 font-serif text-lg italic text-body/60">{{ $dest['tagline'] }}</p>
                        </div>
                    </a>
                @endforeach
            </div>

            <div class="mt-24 text-center sm:mt-32">
                <x-btn :href="route('destinations')" variant="solid">Discover the Routes</x-btn>
            </div>
        </div>
    </section>

    {{-- ===================================================================
         STAY — Saint Suites Oia (cinematic closing)
         =================================================================== --}}
    <section class="relative isolate min-h-[92vh] overflow-hidden bg-atmosphere">
        <div class="absolute inset-0 z-0">
            <img
                src="{{ asset('media/hotel/saint-suites-hero.jpg') }}"
                alt="Saint Suites Oia, Santorini"
                class="h-full w-full object-cover"
                style="animation: sy-ken 22s ease-in-out infinite alternate;"
            >
        </div>
        <div class="absolute inset-0 z-10" style="background: linear-gradient(115deg, rgba(6,10,16,0.88) 0%, rgba(6,10,16,0.62) 35%, rgba(6,10,16,0.18) 60%, rgba(6,10,16,0) 80%), linear-gradient(to top, rgba(6,10,16,0.55) 0%, rgba(6,10,16,0) 45%);"></div>

        <div class="absolute bottom-[12vh] left-[8vw] z-20 flex max-w-xl flex-col items-start">
            <p class="font-label text-[11px] uppercase tracking-[0.5em] text-gold-champagne">Sister Property</p>
            <h2 class="mt-6 font-serif text-5xl font-light italic leading-none text-pearl md:text-7xl">
                Recharge at
                <span class="mt-1 block font-display not-italic text-gold-champagne">Saint Suites Oia</span>
            </h2>
            <p class="mt-7 max-w-md font-serif text-xl font-light italic leading-relaxed text-pearl/90">
                “A luxurious haven for the passionate and free-spirited.”
            </p>
            <p class="mt-4 max-w-md font-serif text-lg font-light leading-relaxed text-pearl/70">
                Cliffside cave suites carved into the caldera of Oia, Santorini. Pair your days at sea
                with nights above the Aegean.
            </p>
            <a href="https://www.saintsuitesoia.com" target="_blank" rel="noopener" class="sy-btn sy-btn--outline mt-9">
                Visit the Hotel
                <span class="sy-btn__arrow" aria-hidden="true">&rarr;</span>
            </a>
            <p class="mt-8 font-label text-[10px] uppercase tracking-[0.55em] text-pearl/55">Oia · Santorini</p>
        </div>
    </section>

    {{-- ===================================================================
         CONTACT CTA
         =================================================================== --}}
    <section class="sy-section sy-section--surface border-t border-hairline">
        <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/75">
                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>