---
import { galleryItems } from '../../data/about/gallery';
const totalImages = galleryItems.length;
---
<!-- Full-screen Lightbox Modal (Hidden by default, pure CSS transition toggle) -->
<div id="lightbox-modal" class="fixed inset-0 z-[100] bg-black/95 backdrop-blur-md flex flex-col items-center justify-center hidden opacity-0 transition-opacity duration-300 select-none">
    <!-- Close Button -->
    <button onclick="closeLightbox()" class="absolute top-6 right-6 text-white text-3xl font-light hover:text-terracotta cursor-pointer select-none outline-none focus:outline-none" aria-label="Close Lightbox">
        &times;
    </button>
    
    <!-- Prev Button -->
    <button onclick="prevLightboxImage()" class="absolute left-4 sm:left-6 text-white text-3xl font-light hover:text-terracotta cursor-pointer select-none outline-none focus:outline-none" aria-label="Previous Image">
        &#8249;
    </button>
    
    <!-- Main Image Container -->
    <div class="max-w-[90%] max-h-[80%] flex items-center justify-center">
        <img id="lightbox-image" src="" alt="Lightbox View" class="max-w-full max-h-full object-contain rounded-lg shadow-2xl transition-transform duration-300 scale-95" />
    </div>
    
    <!-- Next Button -->
    <button onclick="nextLightboxImage()" class="absolute right-4 sm:right-6 text-white text-3xl font-light hover:text-terracotta cursor-pointer select-none outline-none focus:outline-none" aria-label="Next Image">
        &#8250;
    </button>

    <!-- Counter -->
    <div class="mt-4 text-xs tracking-widest text-white/60">
        <span id="lightbox-current-idx">1</span> / {totalImages}
    </div>
</div>