@props([
    'videos',
    'title' => 'Videos',
    'class' => 'mt-20 scroll-mt-28',
])

@php
    $videoCount = $videos ? count($videos) : 0;
    $rotations = ['rotate-1', '-rotate-[1.5deg]', 'rotate-[1.5deg]', '-rotate-1'];
    $videosData = $videos ? $videos->values()->map(function($v) {
        return [
            'id' => $v->id,
            'caption' => $v->caption,
            'embedUrl' => $v->getEmbedUrl(),
            'autoplayUrl' => $v->getAutoplayEmbedUrl(),
            'thumbnailUrl' => $v->getThumbnailUrl(),
        ];
    }) : collect([]);
@endphp

@if ($videos && $videoCount > 0)
    <div id="videos" class="{{ $class }}" x-data="{
        isOpen: false,
        activeIndex: 0,
        videos: {{ $videosData->toJson() }},
        touchStartX: 0,
        touchStartY: 0,
        touchEndX: 0,
        touchEndY: 0,
        isSwiping: false,
        canScrollLeft: false,
        canScrollRight: true,
        sliderIsDown: false,
        sliderStartX: 0,
        sliderScrollLeft: 0,
        hasDragged: false,
        lastMoveX: 0,
        lastMoveTime: 0,
        dragVelocity: 0,
        pressedCardIndex: null,
        capturedPointerId: null,

        init() {
            this.$watch('isOpen', value => {
                document.body.style.overflow = value ? 'hidden' : '';
            });
            this.$nextTick(() => {
                this.updateSliderArrows();
            });
        },

        updateSliderArrows() {
            const slider = this.$refs.slider;
            if (!slider) return;
            this.canScrollLeft = slider.scrollLeft > 10;
            this.canScrollRight = slider.scrollLeft < (slider.scrollWidth - slider.clientWidth - 15);
        },

        slidePrev() {
            const slider = this.$refs.slider;
            if (!slider) return;
            slider.style.scrollBehavior = 'smooth';
            slider.style.scrollSnapType = 'x mandatory';
            const scrollAmount = slider.clientWidth * 0.75;
            slider.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
            setTimeout(() => this.updateSliderArrows(), 350);
        },

        slideNext() {
            const slider = this.$refs.slider;
            if (!slider) return;
            slider.style.scrollBehavior = 'smooth';
            slider.style.scrollSnapType = 'x mandatory';
            const scrollAmount = slider.clientWidth * 0.75;
            slider.scrollBy({ left: scrollAmount, behavior: 'smooth' });
            setTimeout(() => this.updateSliderArrows(), 350);
        },

        scrollToIndex(index) {
            const slider = this.$refs.slider;
            if (!slider) return;
            if (index === 0) {
                slider.scrollTo({ left: 0, behavior: 'smooth' });
                setTimeout(() => this.updateSliderArrows(), 350);
                return;
            }
            const card = slider.querySelector(`[data-video-index='${index}']`);
            if (card) {
                const paddingLeft = parseFloat(getComputedStyle(slider).paddingLeft) || 0;
                const leftPos = card.offsetLeft - slider.offsetLeft - paddingLeft;
                slider.scrollTo({ left: Math.max(0, leftPos), behavior: 'smooth' });
                setTimeout(() => this.updateSliderArrows(), 350);
            }
        },

        handleSliderPointerDown(e) {
            const slider = this.$refs.slider;
            if (!slider) return;

            const card = e.target.closest('[data-video-index]');
            this.pressedCardIndex = card ? parseInt(card.getAttribute('data-video-index'), 10) : null;

            this.sliderIsDown = true;
            this.hasDragged = false;
            this.sliderStartX = e.clientX;
            this.sliderScrollLeft = slider.scrollLeft;
            this.lastMoveX = e.clientX;
            this.lastMoveTime = performance.now();
            this.dragVelocity = 0;
            this.capturedPointerId = null;

            slider.style.scrollBehavior = 'auto';
            slider.style.scrollSnapType = 'none';
        },

        handleSliderPointerMove(e) {
            if (!this.sliderIsDown) return;
            const slider = this.$refs.slider;
            if (!slider) return;

            const deltaX = e.clientX - this.sliderStartX;
            if (Math.abs(deltaX) > 6) {
                this.hasDragged = true;
                this.pressedCardIndex = null;
                if (!this.capturedPointerId) {
                    try {
                        e.currentTarget.setPointerCapture(e.pointerId);
                        this.capturedPointerId = e.pointerId;
                    } catch (err) {}
                }
            }

            const now = performance.now();
            const dt = now - this.lastMoveTime;
            if (dt > 8) {
                this.dragVelocity = (e.clientX - this.lastMoveX) / dt;
                this.lastMoveX = e.clientX;
                this.lastMoveTime = now;
            }

            slider.scrollLeft = this.sliderScrollLeft - deltaX;
            this.updateSliderArrows();
        },

        handleSliderPointerUp(e) {
            if (!this.sliderIsDown) return;
            this.sliderIsDown = false;

            const slider = this.$refs.slider;
            if (slider) {
                if (this.capturedPointerId !== null) {
                    try {
                        e.currentTarget.releasePointerCapture(this.capturedPointerId);
                    } catch (err) {}
                    this.capturedPointerId = null;
                }

                slider.style.scrollBehavior = 'smooth';
                slider.style.scrollSnapType = 'x mandatory';

                if (Math.abs(this.dragVelocity) > 0.25) {
                    const momentum = -this.dragVelocity * 140;
                    slider.scrollBy({ left: momentum, behavior: 'smooth' });
                }

                setTimeout(() => this.updateSliderArrows(), 350);
            }

            setTimeout(() => {
                this.hasDragged = false;
                this.pressedCardIndex = null;
                this.updateSliderArrows();
            }, 100);
        },

        handleCardClick(index) {
            if (this.hasDragged) {
                return;
            }
            if (!this.isOpen) {
                this.open(index);
            }
        },

        open(index) {
            this.activeIndex = index;
            this.isOpen = true;
        },

        next() {
            if (this.videos.length === 0) return;
            if (this.activeIndex < this.videos.length - 1) {
                this.activeIndex++;
            } else {
                this.activeIndex = 0;
            }
        },

        prev() {
            if (this.videos.length === 0) return;
            if (this.activeIndex > 0) {
                this.activeIndex--;
            } else {
                this.activeIndex = this.videos.length - 1;
            }
        },

        close() {
            this.isOpen = false;
            this.$nextTick(() => {
                this.scrollToIndex(this.activeIndex);
            });
        },

        handleTouchStart(e) {
            if (!e.touches || e.touches.length === 0) return;
            this.touchStartX = e.touches[0].clientX;
            this.touchStartY = e.touches[0].clientY;
            this.touchEndX = e.touches[0].clientX;
            this.touchEndY = e.touches[0].clientY;
            this.isSwiping = true;
        },

        handleTouchMove(e) {
            if (!this.isSwiping || !e.touches || e.touches.length === 0) return;
            this.touchEndX = e.touches[0].clientX;
            this.touchEndY = e.touches[0].clientY;
        },

        handleTouchEnd(e) {
            if (!this.isSwiping) return;
            this.isSwiping = false;

            if (e.changedTouches && e.changedTouches.length > 0) {
                this.touchEndX = e.changedTouches[0].clientX;
                this.touchEndY = e.changedTouches[0].clientY;
            }

            const deltaX = this.touchEndX - this.touchStartX;
            const deltaY = this.touchEndY - this.touchStartY;
            const absX = Math.abs(deltaX);
            const absY = Math.abs(deltaY);

            if (absX > 45 && absX > absY) {
                if (deltaX < 0) {
                    this.next();
                } else if (deltaX > 0) {
                    this.prev();
                }
            } else if (deltaY > 90 && absY > absX * 1.5) {
                this.close();
            }
        },

        handleBackdropClick(e) {
            const deltaX = Math.abs(this.touchEndX - this.touchStartX);
            const deltaY = Math.abs(this.touchEndY - this.touchStartY);
            if (deltaX < 15 && deltaY < 15) {
                this.close();
            }
        }
    }" 
    @keydown.escape.window="if (isOpen) close()"
    @keydown.right.window="if (isOpen) next()" 
    @keydown.left.window="if (isOpen) prev()">

        <!-- Section Header -->
        <div class="flex items-center justify-between gap-4 mb-8">
            <div class="flex items-center gap-3 flex-1">
                <h2 class="text-2xl font-black uppercase text-white tracking-tight">{{ $title }}</h2>
                <span class="inline-flex items-center justify-center min-w-[1.75rem] h-7 px-2 rounded-full bg-pink-600 text-white text-sm font-black leading-none shadow-sm shadow-pink-600/30 -translate-y-[2.5px]">
                    {{ $videoCount }}
                </span>
                <div class="flex-1 h-px bg-white/5"></div>
            </div>

            @if ($videoCount > 1)
                <!-- Navigation Arrows for Slider -->
                <div class="flex items-center gap-2 shrink-0">
                    <button type="button"
                            @click="slidePrev()"
                            :disabled="!canScrollLeft"
                            :class="canScrollLeft ? 'opacity-100 hover:bg-pink-600 hover:border-pink-500 text-white' : 'opacity-25 cursor-not-allowed text-gray-500'"
                            class="w-9 h-9 rounded-full bg-[#1e1e1e] border border-white/20 flex items-center justify-center transition-all duration-200"
                            aria-label="Previous videos">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7"/>
                        </svg>
                    </button>
                    <button type="button"
                            @click="slideNext()"
                            :disabled="!canScrollRight"
                            :class="canScrollRight ? 'opacity-100 hover:bg-pink-600 hover:border-pink-500 text-white' : 'opacity-25 cursor-not-allowed text-gray-500'"
                            class="w-9 h-9 rounded-full bg-[#1e1e1e] border border-white/20 flex items-center justify-center transition-all duration-200"
                            aria-label="Next videos">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"/>
                        </svg>
                    </button>
                </div>
            @endif
        </div>

        <!-- Interactive Swiper Slider: 2 across + peek on desktop, 1 across + peek on mobile -->
        <div class="relative group/slider">
            <style>
                .no-scrollbar::-webkit-scrollbar {
                    display: none !important;
                    width: 0 !important;
                    height: 0 !important;
                }
                .no-scrollbar {
                    -ms-overflow-style: none !important;
                    scrollbar-width: none !important;
                }
            </style>
            <div x-ref="slider"
                 @scroll.passive="updateSliderArrows()"
                 @pointerdown="handleSliderPointerDown($event)"
                 @pointermove="handleSliderPointerMove($event)"
                 @pointerup="handleSliderPointerUp($event)"
                 @pointercancel="handleSliderPointerUp($event)"
                 style="scrollbar-width: none; -ms-overflow-style: none;"
                 class="overflow-x-auto flex snap-x snap-mandatory scroll-pl-2 sm:scroll-pl-3 gap-4 sm:gap-5 md:gap-6 py-4 px-2 sm:px-3 no-scrollbar [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden select-none cursor-grab active:cursor-grabbing touch-pan-x">
                @foreach ($videos as $index => $video)
                    <div @click="handleCardClick({{ $index }})"
                         data-video-index="{{ $index }}"
                         class="video-card shrink-0 w-[82%] sm:w-[65%] md:w-[calc((100%-2*1.5rem)/2.3)] snap-start group flex flex-col p-1.5 sm:p-2">
                        
                        <!-- 16:9 Thumbnail Container in Gallery Style -->
                        <div class="aspect-video relative overflow-hidden bg-[#1e1e1e] border border-white/20 transform {{ $rotations[$index % count($rotations)] }} hover:border-pink-500/60 hover:z-20 transition-all duration-300 cursor-pointer">
                            @if ($video->getThumbnailUrl())
                                <img src="{{ $video->getThumbnailUrl() }}"
                                     loading="lazy"
                                     alt="{{ $video->caption ?: 'Video thumbnail ' . ($index + 1) }}"
                                     class="w-full h-full object-cover group-hover:scale-105 transition duration-700 pointer-events-none select-none" />
                            @else
                                <div class="w-full h-full bg-gradient-to-br from-[#1c1c1e] via-[#242426] to-[#0f0f10] flex flex-col items-center justify-center">
                                    <span class="text-xs uppercase font-black text-gray-500 tracking-wider">Video</span>
                                </div>
                            @endif

                            <!-- Ambient vignette overlay -->
                            <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent pointer-events-none"></div>

                            <!-- Prominent Play Icon Button -->
                            <div class="absolute inset-0 flex items-center justify-center pointer-events-none z-10">
                                <div class="w-14 h-14 sm:w-16 sm:h-16 rounded-full bg-black/60 backdrop-blur-md border border-white/30 flex items-center justify-center text-white group-hover:bg-pink-600 group-hover:border-pink-500 group-hover:scale-110 transition-all duration-300">
                                    <svg class="w-8 h-8 sm:w-9 sm:h-9 fill-current text-white translate-x-0.5" viewBox="0 0 24 24">
                                        <path d="M8 5v14l11-7z"/>
                                    </svg>
                                </div>
                            </div>
                        </div>

                        <!-- Video Caption -->
                        @if ($video->caption)
                            <div class="mt-3 px-1">
                                <p class="text-xs font-bold text-gray-400 uppercase italic tracking-wider group-hover:text-pink-400 transition-colors line-clamp-1">
                                    {{ $video->caption }}
                                </p>
                            </div>
                        @endif
                    </div>
                @endforeach
            </div>

            <!-- Right peek fade overlay when more videos can be scrolled -->
            <div x-show="canScrollRight"
                 x-transition:enter="transition-opacity duration-300"
                 x-transition:enter-start="opacity-0"
                 x-transition:enter-end="opacity-100"
                 x-transition:leave="transition-opacity duration-300"
                 x-transition:leave-start="opacity-100"
                 x-transition:leave-end="opacity-0"
                 class="absolute right-0 top-0 bottom-0 w-16 sm:w-20 md:w-28 bg-gradient-to-l from-[#0a0a0a] via-[#0a0a0a]/60 to-transparent pointer-events-none z-30">
            </div>

            <!-- Left fade overlay when scrolled away from start -->
            <div x-show="canScrollLeft"
                 x-transition:enter="transition-opacity duration-300"
                 x-transition:enter-start="opacity-0"
                 x-transition:enter-end="opacity-100"
                 x-transition:leave="transition-opacity duration-300"
                 x-transition:leave-start="opacity-100"
                 x-transition:leave-end="opacity-0"
                 class="absolute left-0 top-0 bottom-0 w-12 sm:w-16 md:w-20 bg-gradient-to-r from-[#0a0a0a] via-[#0a0a0a]/60 to-transparent pointer-events-none z-30">
            </div>
        </div>

        <!-- Video Lightbox Modal with Autoplay -->
        <template x-teleport="body">
            <div x-show="isOpen"
                x-transition:enter="transition ease-out duration-300"
                x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100"
                x-transition:leave="transition ease-in duration-200"
                x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0"
                class="fixed inset-0 z-[100] flex items-center justify-center bg-black/95 backdrop-blur-xl touch-none select-none overscroll-none"
                @click.self="handleBackdropClick($event)"
                @touchstart.passive="handleTouchStart($event)"
                @touchmove.passive="handleTouchMove($event)"
                @touchend.passive="handleTouchEnd($event)">

                <!-- Close Button -->
                <button type="button"
                    @click="close()"
                    class="absolute top-4 right-4 sm:top-8 sm:right-8 w-11 h-11 sm:w-12 sm:h-12 flex items-center justify-center rounded-full bg-white/10 hover:bg-white/20 sm:bg-transparent text-white/70 hover:text-white backdrop-blur-md sm:backdrop-blur-none transition-all z-[120]"
                    aria-label="Close video lightbox">
                    <svg class="w-6 h-6 sm:w-8 sm:h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>

                <!-- Navigation Chevrons -->
                <template x-if="videos.length > 1">
                    <div>
                        <button type="button"
                            @click.stop="prev()"
                            class="absolute left-2 sm:left-6 md:left-8 top-1/2 -translate-y-1/2 w-11 h-11 sm:w-14 sm:h-14 flex items-center justify-center rounded-full bg-black/40 hover:bg-black/70 sm:bg-white/5 sm:hover:bg-white/10 text-white/80 hover:text-white sm:text-white/40 sm:hover:text-pink-500 backdrop-blur-md border border-white/20 sm:border-transparent transition-all z-[110]"
                            aria-label="Previous video">
                            <svg class="w-6 h-6 sm:w-8 sm:h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7"></path>
                            </svg>
                        </button>

                        <button type="button"
                            @click.stop="next()"
                            class="absolute right-2 sm:right-6 md:right-8 top-1/2 -translate-y-1/2 w-11 h-11 sm:w-14 sm:h-14 flex items-center justify-center rounded-full bg-black/40 hover:bg-black/70 sm:bg-white/5 sm:hover:bg-white/10 text-white/80 hover:text-white sm:text-white/40 sm:hover:text-pink-500 backdrop-blur-md border border-white/20 sm:border-transparent transition-all z-[110]"
                            aria-label="Next video">
                            <svg class="w-6 h-6 sm:w-8 sm:h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"></path>
                            </svg>
                        </button>
                    </div>
                </template>

                <!-- Large YouTube Video Embed with Autoplay -->
                <div class="relative w-full max-w-5xl px-4 sm:px-6 flex flex-col items-center pointer-events-auto -translate-y-4 sm:-translate-y-6">
                    <div class="w-full aspect-video bg-black overflow-hidden border border-white/20 shadow-[0_20px_50px_rgba(0,0,0,0.9)] relative">
                        <template x-if="isOpen">
                            <iframe :src="videos[activeIndex] ? videos[activeIndex].autoplayUrl : ''"
                                class="w-full h-full"
                                frameborder="0"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                allowfullscreen>
                            </iframe>
                        </template>
                    </div>

                    <!-- Video Caption below player -->
                    <template x-if="videos[activeIndex] && videos[activeIndex].caption">
                        <div class="mt-4 text-center max-w-2xl px-4">
                            <p class="text-sm font-bold text-gray-300 italic tracking-wide" x-text="videos[activeIndex].caption"></p>
                        </div>
                    </template>
                </div>

                <!-- Footer Counter & Swipe Hint -->
                <div class="absolute bottom-4 sm:bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-1.5 pointer-events-none z-[110]">
                    <div class="px-3.5 py-1 rounded-full bg-black/50 backdrop-blur-md border border-white/20 text-white/80 font-black uppercase tracking-widest text-[11px] sm:text-xs">
                        <span x-text="activeIndex + 1"></span> / <span x-text="videos.length"></span>
                    </div>
                    <div class="text-[10px] text-white/40 uppercase tracking-widest font-semibold sm:hidden" x-show="videos.length > 1">
                        Swipe to browse
                    </div>
                </div>
            </div>
        </template>
    </div>
@endif