@php
$locale = current_locale();

$fallbackSlides = [
    [
        'type' => 'image',
        'src' => 'c610-s.jpg',
        'poster' => null,
        'subtitle' => match($locale) {
            'en' => 'Thoughtful superiority',
            'ru' => 'Продуманное превосходство',
            default => 'Düşünülmüş üstünlük',
        },
        'title' => match($locale) {
            'en' => "BERNESSO — premium\nhome appliances",
            'ru' => "BERNESSO — премиальная\nбытовая техника",
            default => "BERNESSO — premium sinif\n məişət texnikası",
        },
        'cta' => match($locale) {
            'en' => 'Go to catalog',
            'ru' => 'Перейти в каталог',
            default => 'Kataloqa keç',
        },
        'link' => localized_route('products.index'),
        'external' => false,
    ],
    [
        'type' => 'image',
        'src' => 'k810-new.jpg',
        'poster' => null,
        'subtitle' => match($locale) {
            'en' => 'Collection 2026',
            'ru' => 'Коллекция 2026',
            default => 'Kolleksiya 2026',
        },
        'title' => match($locale) {
            'en' => "Discover\nnew products",
            'ru' => "Познакомьтесь с\nновинками",
            default => "Yeni məhsullar\nilə tanış olun",
        },
        'cta' => match($locale) {
            'en' => 'New arrivals',
            'ru' => 'Новинки',
            default => 'Yeni gələnlər',
        },
        'link' => localized_route('products.index'),
        'external' => false,
    ],
    [
        'type' => 'image',
        'src' => '1_1524021.png',
        'poster' => null,
        'subtitle' => match($locale) {
            'en' => 'Kitchen',
            'ru' => 'Кухня',
            default => 'Mətbəx',
        },
        'title' => match($locale) {
            'en' => "Premium kitchen\nappliances",
            'ru' => "Премиальная кухонная\nтехника",
            default => "Premium mətbəx\ntexnikası",
        },
        'cta' => match($locale) {
            'en' => 'Kitchen appliances',
            'ru' => 'Кухонная техника',
            default => 'Mətbəx texnikası',
        },
        'link' => localized_route('categories.show', 'metbex-texnikasi'),
        'external' => false,
    ],
    [
        'type' => 'image',
        'src' => 'v851-new.jpg',
        'poster' => null,
        'subtitle' => match($locale) {
            'en' => 'Comfort',
            'ru' => 'Комфорт',
            default => 'Rahatlıq',
        },
        'title' => match($locale) {
            'en' => "Essential home\nappliances",
            'ru' => "Необходимая техника\nдля дома",
            default => "Ev üçün zəruri\ntexnika",
        },
        'cta' => match($locale) {
            'en' => 'Home appliances',
            'ru' => 'Техника для дома',
            default => 'Ev üçün texnika',
        },
        'link' => localized_route('categories.show', 'ev-ucun-texnika'),
        'external' => false,
    ],
];

if (!isset($slides) || $slides->isEmpty()) {
    $slides = collect();
} else {
    $slides = $slides->map(function ($slide) {
        $hasMediaUrl = !empty($slide->media_url);
        $mediaPath = $hasMediaUrl ? strtolower((string) parse_url($slide->media_url, PHP_URL_PATH)) : '';
        $urlLooksLikeVideo = $hasMediaUrl && (
            str_ends_with($mediaPath, '.m3u8')
            || str_ends_with($mediaPath, '.mp4')
            || str_ends_with($mediaPath, '.webm')
            || str_ends_with($mediaPath, '.ogg')
        );
        $isVideo = $hasMediaUrl
            ? ($slide->media_url_type === 'video' || $urlLooksLikeVideo)
            : ($slide->type === 'video');
        $src = $hasMediaUrl
            ? $slide->media_url
            : ($isVideo ? $slide->desktop_video : $slide->desktop_image);
        $mobileSrc = $hasMediaUrl
            ? null
            : ($isVideo ? $slide->mobile_video : $slide->mobile_image);

        return [
            'type' => $isVideo ? 'video' : 'image',
            'src' => $src,
            'mobile_src' => $mobileSrc,
            'poster' => $slide->poster_image,
            'external' => $hasMediaUrl,
            'subtitle' => $slide->subtitle,
            'title' => $slide->title,
            'cta' => $slide->button_text ?: __('view_more'),
            'link' => $slide->button_link
                ? str_replace('{locale}', current_locale(), $slide->button_link)
                : localized_route('products.index'),
        ];
    });
}

$scrollText = match($locale) {
    'en' => 'Scroll down',
    'ru' => 'Прокрутите вниз',
    default => 'Aşağı sürüşdürün',
};

$youtubeId = function ($url) {
    if (preg_match('/(?:youtube\.com\/(?:[^\/]+\/[^\/]+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/i', $url, $m)) {
        return $m[1];
    }
    return null;
};

$vimeoId = function ($url) {
    if (preg_match('/vimeo\.com\/(?:video\/)?(\d+)/i', $url, $m)) {
        return $m[1];
    }
    return null;
};
@endphp

@if($slides->isNotEmpty())
<section data-hero-stacked class="relative -mt-[112px] h-screen w-full overflow-hidden bg-[#1a1614]">
    @foreach($slides as $index => $slide)
    <div
        data-hero-panel
        class="hero-panel absolute inset-0 h-screen w-full overflow-hidden bg-[#1a1614] will-change-transform"
        style="z-index: {{ $index + 1 }}; isolation: isolate;"
    >
        {{-- Background media --}}
        <div data-hero-media class="absolute inset-0 bg-[#1a1614]">
            @if($slide['type'] === 'video')
                @php
                    $ytId = $slide['external'] ? $youtubeId($slide['src']) : null;
                    $vmId = $slide['external'] && !$ytId ? $vimeoId($slide['src']) : null;
                @endphp
                @if($ytId)
                    <iframe
                        src="https://www.youtube.com/embed/{{ $ytId }}?autoplay=1&mute=1&loop=1&playlist={{ $ytId }}&controls=0&rel=0&playsinline=1"
                        class="absolute inset-0 h-full w-full border-0"
                        allow="autoplay; encrypted-media"
                        allowfullscreen
                    ></iframe>
                @elseif($vmId)
                    <iframe
                        src="https://player.vimeo.com/video/{{ $vmId }}?autoplay=1&muted=1&loop=1&background=1"
                        class="absolute inset-0 h-full w-full border-0"
                        allow="autoplay; fullscreen"
                        allowfullscreen
                    ></iframe>
                @else
                    <video
                        autoplay
                        muted
                        loop
                        playsinline
                        @if(str_ends_with(strtolower((string) parse_url($slide['src'], PHP_URL_PATH)), '.m3u8'))
                            data-hls-src="{{ $slide['src'] }}"
                        @endif
                        @if($slide['poster']) poster="{{ asset('images/' . $slide['poster']) }}" @endif
                        class="h-full w-full object-cover"
                    >
                        @if(!$slide['external'] && !empty($slide['mobile_src']))
                            <source media="(max-width: 767px)" src="{{ asset('videos/' . $slide['mobile_src']) }}">
                        @endif
                        @if(!str_ends_with(strtolower((string) parse_url($slide['src'], PHP_URL_PATH)), '.m3u8'))
                            <source src="{{ $slide['external'] ? $slide['src'] : asset('videos/' . $slide['src']) }}">
                        @endif
                    </video>
                @endif
            @else
                <picture>
                    @if(!$slide['external'] && !empty($slide['mobile_src']))
                        <source media="(max-width: 767px)" srcset="{{ asset('images/' . $slide['mobile_src']) }}">
                    @endif
                    <img
                        src="{{ $slide['external'] ? $slide['src'] : asset('images/' . $slide['src']) }}"
                        alt="{{ $slide['title'] }}"
                        class="h-full w-full object-cover"
                        loading="{{ $index === 0 ? 'eager' : 'lazy' }}"
                    >
                </picture>
            @endif
            <div class="absolute inset-0 bg-gradient-to-b from-black/50 via-black/30 to-black/60"></div>
        </div>

        {{-- Whole-slide link overlay --}}
        @if($slide['link'])
            <a href="{{ $slide['link'] }}" class="absolute inset-0 z-0" aria-label="{{ strip_tags($slide['title']) }}"></a>
        @endif

        {{-- Content --}}
        <div class="relative z-10 flex h-full items-end justify-center px-4 pb-[8vh] text-center pointer-events-none">
            <div data-hero-content class="max-w-4xl pointer-events-auto">
                <h2 class="text-3xl font-light leading-tight text-white md:text-5xl lg:text-[2.65rem]">
                    {!! nl2br(e($slide['title'])) !!}
                </h2>
            </div>
        </div>
    </div>
    @endforeach
</section>
@endif

{{-- GSAP + ScrollTrigger (CDN fallback until npm build is run) --}}
@if ($slides->isNotEmpty() && !file_exists(public_path('build/manifest.json')) && !file_exists(public_path('hot')))
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.7/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.7/ScrollTrigger.min.js"></script>
<script>
(function () {
    if (window.bernessoHeroInitialized) return;

    gsap.registerPlugin(ScrollTrigger);

    function init() {
        const hero = document.querySelector('[data-hero-stacked]');
        if (!hero) return;

        const panels = gsap.utils.toArray('[data-hero-panel]', hero);
        if (panels.length < 2) return;

        window.bernessoHeroInitialized = true;

        panels.forEach((panel, i) => {
            panel.style.zIndex = i + 1;
            panel.style.backgroundColor = '#1a1614';
        });

        const tl = gsap.timeline({
            scrollTrigger: {
                trigger: hero,
                start: 'top top',
                end: '+=' + ((panels.length - 1) * 100) + '%',
                pin: true,
                scrub: 1,
                snap: {
                    snapTo: 1 / (panels.length - 1),
                    duration: { min: 0.15, max: 0.35 },
                    delay: 0,
                    ease: 'power1.inOut'
                },
                anticipatePin: 1,
                invalidateOnRefresh: true
            }
        });

        panels.forEach((panel, i) => {
            if (i === 0) return;

            tl.fromTo(panel, { yPercent: 100 }, { yPercent: 0, duration: 1, ease: 'none' }, i - 1);

            const previousContent = panels[i - 1].querySelector('[data-hero-content]');
            if (previousContent) {
                tl.to(previousContent, { autoAlpha: 0, duration: 0.12, ease: 'none' }, i - 1);
            }

            const content = panel.querySelector('[data-hero-content]');
            if (content) {
                tl.fromTo(
                    content.children,
                    { y: 40, opacity: 0 },
                    { y: 0, opacity: 1, duration: 0.35, stagger: 0.05, ease: 'power2.out' },
                    i - 1 + 0.3
                );
            }

            tl.set(panels[i - 1], { autoAlpha: 0 }, i);
        });

        window.addEventListener('load', function () {
            ScrollTrigger.refresh();
        });
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();
</script>
@endif