@props([
    'title' => 'Archive detail hero image',
    'heroImage' => null,
    // Provide either a full embed URL or only a YouTube video id.
    // Example videoId: "oAOUNZXGaJo"
    'youtubeVideoId' => null,
    'youtubeEmbedUrl' => null,
    // Optional: custom slides array (overrides heroImage/youtube* if provided)
    // Each item: ['type' => 'image'|'youtube', 'src' => '...', 'alt' => '...', 'title' => '...']
    'slides' => null,
])

@php
    // If custom slides are provided and non-empty, use them directly
    if (is_array($slides) && count($slides) > 0) {
        $resolvedSlides = $slides;
    } else {
        // Fallback: one image + optional single YouTube slide
        $defaultImage = 'https://images.pexels.com/photos/1190298/pexels-photo-1190298.jpeg?auto=compress&cs=tinysrgb&w=1600';
        $imageSrc = $heroImage ?: $defaultImage;

        $videoSrc = $youtubeEmbedUrl;
        if (empty($videoSrc) && !empty($youtubeVideoId)) {
            $videoSrc = \Modules\Frontend\app\Support\YoutubeEmbed::playerUrl(
                "https://www.youtube-nocookie.com/embed/{$youtubeVideoId}?rel=0&modestbranding=1"
            );
        }

        $resolvedSlides = [
            [
                'type' => 'image',
                'src' => $imageSrc,
                'alt' => $title ?: 'Archive detail hero image',
            ],
        ];

        if (!empty($videoSrc)) {
            $resolvedSlides[] = [
                'type' => 'youtube',
                'src' => $videoSrc,
                'title' => $title ?: 'YouTube video',
            ];
        }
    }
@endphp

<div class="mb-10 lg:mb-16 relative">
    <div class="swiper production-hero-swiper">
        <div class="swiper-wrapper">
            @foreach ($resolvedSlides as $slide)
                <div class="swiper-slide">
                    @if (($slide['type'] ?? '') === 'youtube')
                        <div class="production-hero-youtube-slide aspect-[16/9] rounded-3xl bg-[#111111] border border-white/10 overflow-hidden shadow-[0_30px_80px_rgba(0,0,0,0.8)] relative flex items-center justify-center">
                            <iframe
                                class="pointer-events-auto absolute inset-0 z-0 w-full h-full border-0"
                                src="{{ \Modules\Frontend\app\Support\YoutubeEmbed::playerUrl((string) ($slide['src'] ?? '')) }}"
                                title="{{ $slide['title'] ?? 'YouTube video' }}"
                                loading="lazy"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                allowfullscreen
                            ></iframe>
                        </div>
                    @else
                        <div class="aspect-[16/9] rounded-3xl bg-[#111111] border border-white/10 overflow-hidden shadow-[0_30px_80px_rgba(0,0,0,0.8)] flex items-center justify-center relative">
                            <img
                                src="{{ $slide['src'] }}"
                                alt="{{ $slide['alt'] ?? 'Archive detail hero image' }}"
                                class="w-full h-full object-cover opacity-80"
                            >
                        </div>
                    @endif
                </div>
            @endforeach
        </div>

        <div class="swiper-pagination production-hero-pagination"></div>
        <button type="button" class="swiper-button-prev production-hero-nav-prev" aria-label="Previous slide"></button>
        <button type="button" class="swiper-button-next production-hero-nav-next" aria-label="Next slide"></button>
    </div>
</div>