@php
    $slides = $slides ?? collect();
    $tourTypes = $tourTypes ?? collect();
@endphp

<section class="relative">
    <div class="relative min-h-[92vh] md:min-h-[92vh]">

        {{-- SLIDES --}}
        <div class="absolute inset-0 overflow-hidden">
            <div id="heroSlider" class="absolute inset-0">

                @foreach ($slides as $i => $s)
                    @php
                        $overlay = max(0, min(0.9, (float) ($s->overlay_opacity ?? 0.45)));
                        $isActive = $i === 0;

                        $img = !empty($s->image_path) ? asset('storage/' . ltrim($s->image_path, '/')) : null;
                        $vid = !empty($s->video_path) ? asset('storage/' . ltrim($s->video_path, '/')) : null;
                        $poster = !empty($s->video_poster)
                            ? asset('storage/' . ltrim($s->video_poster, '/'))
                            : ($img ?: null);

                        $mediaType = $s->media_type ?? 'image';
                        $videoSource = $s->video_source ?? 'upload';
                        $videoUrl = $s->video_url ?? null;

                        $youtubeId = null;
                        if (!empty($videoUrl)) {
                            preg_match(
                                '/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([A-Za-z0-9_-]{11})/',
                                $videoUrl,
                                $matches
                            );
                            $youtubeId = $matches[1] ?? null;
                        }
                    @endphp

                    <div class="hero-slide absolute inset-0 transition-opacity duration-700 {{ $isActive ? 'opacity-100' : 'opacity-0 pointer-events-none' }}"
                        data-index="{{ $i }}">

                        {{-- Media --}}
                        @if ($mediaType === 'video' && $videoSource === 'upload' && $vid)
                            <video class="absolute inset-0 h-full w-full object-cover" autoplay muted loop playsinline
                                preload="metadata" @if ($poster) poster="{{ $poster }}" @endif>
                                <source src="{{ $vid }}" type="video/mp4">
                            </video>

                        @elseif ($mediaType === 'video' && $videoSource === 'youtube' && $youtubeId)
                            {{-- mobile fallback poster --}}
                            @if ($poster)
                                <div class="absolute inset-0 bg-cover bg-center md:hidden"
                                    style="background-image:url('{{ $poster }}')">
                                </div>
                            @endif

                            {{-- youtube background only desktop/tablet --}}
                            <div class="absolute inset-0 overflow-hidden hidden md:block">
                                <iframe
                                    class="hero-youtube absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none"
                                    src="https://www.youtube.com/embed/{{ $youtubeId }}?autoplay=1&mute=1&loop=1&playlist={{ $youtubeId }}&controls=0&showinfo=0&modestbranding=1&rel=0&playsinline=1"
                                    title="Hero Background Video" frameborder="0" allow="autoplay; encrypted-media"
                                    allowfullscreen>
                                </iframe>
                            </div>

                        @else
                            <div class="absolute inset-0 bg-cover bg-center" style="background-image:url('{{ $img ?? '' }}')">
                            </div>
                        @endif

                        {{-- Overlay --}}
                        <div class="absolute inset-0" style="background: rgba(0,0,0,{{ $overlay }});"></div>

                        {{-- premium light accents --}}
                        <div
                            class="absolute inset-0 bg-[radial-gradient(900px_520px_at_18%_20%,rgba(215,166,43,.18),transparent_60%),radial-gradient(820px_520px_at_85%_35%,rgba(255,255,255,.10),transparent_55%)]">
                        </div>

                        {{-- Text content (per slide) --}}
                        <div class="absolute inset-0 z-20">
                            <div class="container-site h-full flex flex-col items-center text-center text-white
                                        pt-[110px] md:pt-[170px] pb-[230px] md:pb-[260px]">

                                <div class="mx-auto max-w-4xl">
                                    @if (!empty($s->kicker))
                                        <div class="text-gold-400 font-semibold tracking-[.22em] uppercase text-[11px]">
                                            {{ $s->kicker }}
                                        </div>
                                    @endif

                                    @if (!empty($s->title))
                                        <h1 class="mt-4 font-semibold leading-[1.06] text-[clamp(2.2rem,4vw,4.6rem)]"
                                            style="font-family: var(--font-display);">
                                            {{ $s->title }}
                                        </h1>
                                    @endif

                                    {{--
                                    @if (!empty($s->subtitle))
                                    <p class="mt-4 text-white/85 text-sm md:text-lg max-w-2xl mx-auto">
                                        {{ $s->subtitle }}
                                    </p>
                                    @endif

                                    @if (!empty($s->cta_label) && !empty($s->cta_url))
                                    <div class="mt-7">
                                        <a href="{{ $s->cta_url }}" class="inline-flex items-center justify-center gap-2 px-8 py-3 bg-gold-500 hover:bg-gold-600
                                                        text-black font-semibold tracking-[.22em] uppercase text-[12px]
                                                        shadow-[0_12px_32px_rgba(0,0,0,.22)] rounded-2xl">
                                            <i class="fa-solid fa-compass"></i>
                                            {{ $s->cta_label }}
                                        </a>
                                    </div>
                                    @endif
                                    --}}
                                </div>

                            </div>
                        </div>
                    </div>
                @endforeach

            </div>
        </div>

        {{-- dark base gradient so content + filter always readable --}}
        <div
            class="absolute inset-x-0 bottom-0 h-52 md:h-56 bg-gradient-to-t from-black/55 via-black/15 to-transparent pointer-events-none">
        </div>

        {{-- FILTER BAR --}}
        <div class="absolute left-0 right-0 bottom-8 md:bottom-10 z-30">
            <div class="container-site">
                <form method="GET" action="{{ url('/tours') }}">
                    <div class="rounded-3xl bg-white border border-slate-200 shadow-soft overflow-hidden">
                        <div class="grid grid-cols-1 md:grid-cols-12">

                            {{-- Tour Type --}}
                            <div class="px-6 py-5 md:col-span-4 border-b md:border-b-0 md:border-r border-slate-200">
                                <div
                                    class="flex items-center gap-2 text-[11px] font-semibold tracking-[.22em] uppercase text-slate-500">
                                    <span class="text-gold-500"><i class="fa-solid fa-layer-group"></i></span>
                                    Tour Type
                                </div>

                                <div class="relative mt-3">
                                    <select name="type" class="hero-select w-full appearance-none rounded-2xl border border-slate-200 bg-white px-4 pr-11 py-3 text-sm text-slate-900
                                        focus:border-gold-500 focus:ring-2 focus:ring-gold-500/20">
                                        <option value="">Select type</option>
                                        @foreach ($tourTypes as $t)
                                            <option value="{{ $t->slug }}">{{ $t->name }}</option>
                                        @endforeach
                                    </select>

                                    <span
                                        class="pointer-events-none absolute inset-y-0 right-4 flex items-center text-slate-400">
                                        <i class="fa-solid fa-chevron-down text-xs"></i>
                                    </span>
                                </div>
                            </div>

                            {{-- Days Count --}}
                            <div class="px-6 py-5 md:col-span-5 border-b md:border-b-0 md:border-r border-slate-200">
                                <div
                                    class="flex items-center gap-2 text-[11px] font-semibold tracking-[.22em] uppercase text-slate-500">
                                    <span class="text-gold-500"><i class="fa-regular fa-calendar-days"></i></span>
                                    Duration
                                </div>

                                <div class="relative mt-3">
                                    <select name="days" class="hero-select w-full appearance-none rounded-2xl border border-slate-200 bg-white px-4 pr-11 py-3 text-sm text-slate-900
                                        focus:border-gold-500 focus:ring-2 focus:ring-gold-500/20">
                                        <option value="">Select days</option>
                                        <option value="1">1 Day</option>
                                        <option value="2">2 Days</option>
                                        <option value="3">3 Days</option>
                                        <option value="4">4 Days</option>
                                        <option value="5">5 Days</option>
                                        <option value="6">6 Days</option>
                                        <option value="7">7 Days</option>
                                        <option value="8">8 Days</option>
                                        <option value="9">9 Days</option>
                                        <option value="10">10 Days</option>
                                        <option value="12">12 Days</option>
                                        <option value="14">14 Days</option>
                                    </select>

                                    <span
                                        class="pointer-events-none absolute inset-y-0 right-4 flex items-center text-slate-400">
                                        <i class="fa-solid fa-chevron-down text-xs"></i>
                                    </span>
                                </div>
                            </div>

                            {{-- Button --}}
                            <div class="px-6 py-5 md:col-span-3">
                                <button type="submit" class="w-full h-full rounded-2xl bg-gold-500 hover:bg-gold-600 text-black
                                    font-semibold tracking-[.22em] uppercase text-[12px] py-4 md:py-0
                                    shadow-[0_12px_30px_rgba(215,166,43,.22)]">
                                    <i class="fa-solid fa-magnifying-glass mr-2"></i>
                                    Find Your Tour
                                </button>

                                <div class="hidden md:block mt-2 text-[11px] text-slate-500"></div>
                            </div>

                        </div>
                    </div>
                </form>

                {{-- Build custom tour --}}
                <div class="mt-8 flex flex-col items-center gap-3">
                    <div class="text-xs sm:text-sm text-white/85">
                        Want something more personal? Build your trip in minutes.
                    </div>

                    <a href="{{ route('custom.tour') }}" class="inline-flex items-center justify-center gap-2 px-8 py-3
                        bg-white/10 hover:bg-white/15 text-white border border-white/25
                        font-semibold tracking-[.22em] uppercase text-[12px] rounded-2xl backdrop-blur">
                        <i class="fa-solid fa-wand-magic-sparkles text-gold-400"></i>
                        Build Custom Tour
                    </a>
                </div>
            </div>
        </div>

        {{-- Dots --}}
        @if ($slides->count() > 1)
            <div class="absolute bottom-3 left-0 right-0 z-30">
                <div class="container-site flex justify-center gap-2">
                    @foreach ($slides as $i => $s)
                        <button type="button" class="hero-dot h-2.5 w-2.5 rounded-full bg-white/40 hover:bg-white/80 transition"
                            data-go="{{ $i }}" aria-label="Go to slide {{ $i + 1 }}"></button>
                    @endforeach
                </div>
            </div>
        @endif

        {{-- Reserve space so next section doesn’t overlap --}}
        <div class="h-[360px] md:h-[180px]"></div>
    </div>
</section>

<style>
    .hero-youtube {
        width: 177.78vh;
        height: 100vh;
        min-width: 100%;
        min-height: 100%;
    }

    @media (max-aspect-ratio: 16/9) {
        .hero-youtube {
            width: 100vw;
            height: 56.25vw;
            min-height: 100%;
        }
    }
</style>