---
import { galleryItems } from '../../data/about/gallery';
---
<!-- EVENT GALLERY SECTION (Moments That Shape Perspective) -->
<section id="gallery" class="mb-24 md:mb-32 scroll-mt-28">
    <!-- Header Grid: Title Left, Description Right -->
    <div class="grid grid-cols-1 md:grid-cols-12 gap-8 mb-12 items-end px-6 max-w-7xl mx-auto">
        <div class="md:col-span-8 space-y-3">
            <span class="text-xs font-bold uppercase tracking-[0.25em] text-ink-secondary" data-i18n="gallery-eyebrow">[Gallery]</span>
            <h2 class="font-serif text-3xl sm:text-4xl lg:text-5xl text-ink font-bold leading-tight" data-i18n="gallery-title">
                Moments That Shape Perspective<span class="text-terracotta italic">.</span>
            </h2>
        </div>
        <div class="md:col-span-4">
            <p class="text-sm sm:text-base text-ink-secondary leading-relaxed font-light" data-i18n="gallery-desc">
                A visual journey of moments, connections, and events that shape my professional path and perspective.
            </p>
        </div>
    </div>

    <!-- Carousel Wrapper (Controls fade in on hover, aligned to page grid) -->
    <div class="relative w-full group overflow-hidden max-w-7xl mx-auto px-6">
        <!-- Left Arrow Button (Vertically centered on the card frame height) -->
        <button onclick="scrollGallery('left')" class="absolute left-10 top-[calc(50%-14px)] -translate-y-1/2 z-20 w-12 h-12 rounded-full border border-ink/10 bg-paper/90 hover:bg-paper text-ink flex items-center justify-center cursor-pointer transition-all duration-300 hover:scale-105 select-none focus:outline-none shadow-md opacity-0 group-hover:opacity-100" aria-label="Scroll Left">
            <span class="text-lg font-bold">←</span>
        </button>
        
        <!-- Snap-Scroll Carousel Track -->
        <div id="gallery-carousel" class="w-full flex space-x-6 overflow-x-auto scrollbar-none snap-x snap-mandatory pb-8" style="-ms-overflow-style: none; scrollbar-width: none;">
            {[...galleryItems.slice(-5), ...galleryItems, ...galleryItems.slice(0, 5)].map((item) => {
                const portrait = [2, 4, 5, 10, 12, 13, 16, 21].includes(item.id);
                return (
                    <div class={`flex flex-col shrink-0 snap-start ${portrait ? 'w-[45vw] sm:w-[225px] md:w-[255px]' : 'w-[80vw] sm:w-[380px] md:w-[440px]'}`}>
                        <!-- Card Frame -->
                        <div onclick={`openLightbox(${item.id - 1})`} class={`group/card relative w-full rounded-2xl overflow-hidden cursor-pointer border border-border-light shadow-sm transition-all duration-500 bg-paper-alt ${portrait ? 'aspect-[3/4] sm:h-[300px] md:h-[340px] sm:aspect-auto' : 'aspect-[4/3] sm:h-[300px] md:h-[340px] sm:aspect-auto'}`}>
                            <!-- Bright, clear photo (No desaturation or opacity masks) -->
                            <img src={`/images/gallery/gallery-${item.id}.webp`} alt={`Gallery Photo ${item.id}`} class="w-full h-full object-cover transition-transform duration-700 ease-out group-hover/card:scale-[1.03]" loading="lazy" />
                            
                            <!-- Hover Description Overlay -->
                            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent pt-24 pb-6 px-6 flex flex-col justify-end translate-y-4 opacity-0 group-hover/card:translate-y-0 group-hover/card:opacity-100 transition-all duration-300 ease-out z-10">
                                <p class="text-xs sm:text-sm text-white/90 font-light leading-relaxed max-w-[90%]" data-i18n={`gallery-memory-${item.id}`}>
                                    {item.memoryEN}
                                </p>
                            </div>
                        </div>
                        
                        <!-- Location and Year below card -->
                        <div class="mt-3 flex justify-between items-start text-xs tracking-wide px-1">
                            <span class="font-semibold text-ink/80 block max-w-[75%] uppercase font-sans tracking-widest text-[11px] lg:text-xs line-clamp-2" data-i18n={`gallery-loc-${item.id}`}>{item.locEN}</span>
                            <span class="text-ink/40 font-serif font-semibold ml-4 shrink-0 text-[11px] lg:text-xs" data-i18n={`gallery-year-${item.id}`}>{item.year}</span>
                        </div>
                    </div>
                );
            })}
        </div>
        
        <!-- Right Arrow Button (Vertically centered on the card frame height) -->
        <button onclick="scrollGallery('right')" class="absolute right-10 top-[calc(50%-14px)] -translate-y-1/2 z-20 w-12 h-12 rounded-full border border-ink/10 bg-paper/90 hover:bg-paper text-ink flex items-center justify-center cursor-pointer transition-all duration-300 hover:scale-105 select-none focus:outline-none shadow-md opacity-0 group-hover:opacity-100" aria-label="Scroll Right">
            <span class="text-lg font-bold">→</span>
        </button>
    </div>
</section>