@props([
    'images',
    'title' => 'Gallery',
    'columns' => 'grid-cols-2 md:grid-cols-4',
    'class' => 'mt-20',
    'itemName' => null,
])

@php
    $imageCount = $images ? count($images) : 0;
    $rotations = ['-rotate-1', 'rotate-[1.5deg]', '-rotate-[1.5deg]', 'rotate-1'];
    $galleryJsonData = $images ? $images->values()->map(function($img, $idx) use ($itemName, $title) {
        $url = $img->file ? \Illuminate\Support\Facades\Storage::url($img->file) : $img->thumbnail(1200, 800);
        $name = $itemName ?: $title;
        $alt = $img->altText($name, $idx + 1);
        return [
            'src' => $url,
            'alt' => $alt,
        ];
    }) : collect();
@endphp

@if ($images && $imageCount > 0)
    <div class="{{ $class }}" x-data="{
        isOpen: false,
        activeIndex: 0,
        images: {{ $galleryJsonData->toJson() }},
        touchStartX: 0,
        touchStartY: 0,
        touchEndX: 0,
        touchEndY: 0,
        currentDeltaX: 0,
        isSwiping: false,
        noTransition: 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);
        },
        handleSliderPointerDown(e) {
            if (e.pointerType === 'mouse' && e.button !== 0) return;
            const slider = this.$refs.slider;
            if (!slider) return;

            const card = e.target.closest('[data-card-index]');
            this.pressedCardIndex = card ? parseInt(card.getAttribute('data-card-index')) : 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;
                }

                // Re-enable smooth snap scrolling
                slider.style.scrollBehavior = 'smooth';
                slider.style.scrollSnapType = 'x mandatory';

                // Add momentum flick if dragged with speed
                if (this.hasDragged && Math.abs(this.dragVelocity) > 0.25) {
                    const momentum = -this.dragVelocity * 320;
                    slider.scrollBy({ left: momentum, behavior: 'smooth' });
                }

                this.updateSliderArrows();
            }

            if (!this.hasDragged && this.pressedCardIndex !== null) {
                const targetIdx = this.pressedCardIndex;
                this.pressedCardIndex = null;
                this.open(targetIdx);
            }

            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.currentDeltaX = 0;
            this.noTransition = true;
            this.isOpen = true;
            setTimeout(() => {
                this.noTransition = false;
            }, 60);
        },
        next() {
            if (this.images.length === 0) return;
            if (this.activeIndex < this.images.length - 1) {
                this.activeIndex++;
            } else {
                this.activeIndex = 0;
            }
        },
        prev() {
            if (this.images.length === 0) return;
            if (this.activeIndex > 0) {
                this.activeIndex--;
            } else {
                this.activeIndex = this.images.length - 1;
            }
        },
        close() {
            this.isOpen = false;
        },
        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.currentDeltaX = 0;
            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;

            const rawDeltaX = this.touchEndX - this.touchStartX;
            const rawDeltaY = this.touchEndY - this.touchStartY;

            if (Math.abs(rawDeltaX) > Math.abs(rawDeltaY)) {
                if ((this.activeIndex === 0 && rawDeltaX > 0) || 
                    (this.activeIndex === this.images.length - 1 && rawDeltaX < 0)) {
                    this.currentDeltaX = rawDeltaX * 0.25;
                } else {
                    this.currentDeltaX = rawDeltaX;
                }
            }
        },
        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.currentDeltaX;
            const rawDeltaY = this.touchEndY - this.touchStartY;
            const absX = Math.abs(deltaX);
            const absY = Math.abs(rawDeltaY);

            this.currentDeltaX = 0;

            if (absX > 45 && absX > absY) {
                if (deltaX < 0 && this.activeIndex < this.images.length - 1) {
                    this.activeIndex++;
                } else if (deltaX > 0 && this.activeIndex > 0) {
                    this.activeIndex--;
                }
            } else if (rawDeltaY > 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="close()"
    @keydown.right.window="next()" 
    @keydown.left.window="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]">
                    {{ $imageCount }}
                </span>
                <div class="flex-1 h-px bg-white/5"></div>
            </div>

            @if ($imageCount > 4)
                <!-- 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 photos">
                        <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 photos">
                        <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>

        @if ($imageCount <= 4)
            <!-- Static Grid: 4 across on desktop, 2 rows of 2 on mobile -->
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 sm:gap-6 py-2">
                @foreach ($images as $index => $image)
                    @php
                        $cardAlt = $image->altText($itemName ?: $title, $index + 1);
                    @endphp
                    <div @click="open({{ $index }})"
                         class="aspect-square relative overflow-hidden bg-[#1e1e1e] border border-white/20 shadow-[0_10px_30px_rgba(0,0,0,0.6)] transform {{ $rotations[$index % count($rotations)] }} hover:border-pink-500/40 hover:shadow-[0_15px_35px_rgba(0,0,0,0.8)] hover:z-20 transition-all duration-300 cursor-pointer group">
                        <img src="{{ $image->thumbnail(600, 600) }}"
                             loading="lazy"
                             alt="{{ $cardAlt }}"
                             class="w-full h-full object-cover group-hover:scale-110 transition duration-700 pointer-events-none select-none" />
                    </div>
                @endforeach
            </div>
        @else
            <!-- Interactive Swiper Slider: 4 across + peek on desktop, 2 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 gap-3 sm:gap-4 md:gap-5 py-4 px-1 -my-2 no-scrollbar [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden select-none cursor-grab active:cursor-grabbing touch-pan-x">
                    @foreach ($images as $index => $image)
                        @php
                            $cardAlt = $image->altText($itemName ?: $title, $index + 1);
                        @endphp
                        <div @click="handleCardClick({{ $index }})"
                             data-card-index="{{ $index }}"
                             class="gallery-card aspect-square relative overflow-hidden bg-[#1e1e1e] border border-white/20 shadow-[0_10px_30px_rgba(0,0,0,0.6)] transform {{ $rotations[$index % count($rotations)] }} hover:border-pink-500/40 hover:shadow-[0_15px_35px_rgba(0,0,0,0.8)] hover:z-20 transition-all duration-300 cursor-pointer group shrink-0 w-[calc(43.5%-6px)] sm:w-[calc(30%-8px)] md:w-[calc((100%-3*1.25rem)/4.35)] snap-start">
                            <img src="{{ $image->thumbnail(600, 600) }}"
                                 loading="lazy"
                                 alt="{{ $cardAlt }}"
                                 class="w-full h-full object-cover group-hover:scale-110 transition duration-700 pointer-events-none select-none" />
                        </div>
                    @endforeach
                </div>

                <!-- Right peek fade overlay when more images 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-12 sm:w-16 md:w-20 bg-gradient-to-l from-[#0a0a0a] via-[#0a0a0a]/50 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]/50 to-transparent pointer-events-none z-30">
                </div>
            </div>
        @endif

        <!-- Lightbox Modal -->
        <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 gallery">
                    <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 -->
                <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 image">
                    <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 image">
                    <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>

                <!-- Hardware-Accelerated Smooth Horizontal Slide Track -->
                <div class="relative w-full max-w-6xl h-[76vh] sm:h-[84vh] overflow-hidden flex items-center pointer-events-none">
                    <div class="flex h-full w-full pointer-events-auto"
                         :style="`transform: translate3d(calc(-${activeIndex * 100}% + ${currentDeltaX}px), 0, 0); transition: ${isSwiping || noTransition ? 'none' : 'transform 450ms cubic-bezier(0.2, 0.9, 0.3, 1)'}; will-change: transform;`">
                        <template x-for="(img, idx) in images" :key="idx">
                            <div class="w-full h-full flex-shrink-0 flex items-center justify-center px-2 sm:px-6 select-none">
                                <img :src="img.src"
                                    :alt="img.alt"
                                    alt="Fibbers Gallery Photo"
                                    loading="lazy"
                                    draggable="false"
                                    class="max-h-full max-w-full w-auto h-auto object-contain shadow-2xl border border-white/20 select-none pointer-events-none" />
                            </div>
                        </template>
                    </div>
                </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="images.length"></span>
                    </div>
                    <div class="text-[10px] text-white/40 uppercase tracking-widest font-semibold sm:hidden">
                        Swipe to browse
                    </div>
                </div>
            </div>
        </template>
    </div>
@endif