<section class="page-banner">
    <div class="container">
        <h1>Gallery</h1>
        <p>Explore our facilities, events, and research activities</p>
        <div class="breadcrumb">
            <a href="/">Home</a> <i class="fas fa-chevron-right"></i> Gallery
        </div>
    </div>
</section>

<section class="section-padding">
    <div class="container">
        <div class="section-header fade-in-up">
            <h2>Photo Gallery</h2>
            <div class="section-divider"></div>
            <p>Browse our collection organized by categories</p>
        </div>
        
        <?php if (!empty($galleryCategories)): ?>
        <div class="gallery-categories-grid fade-in-up">
            <?php foreach ($galleryCategories as $cat): ?>
            <a href="/gallery/<?= htmlspecialchars($cat['slug']) ?>" class="gallery-category-card">
                <div class="gallery-category-image">
                    <img src="<?= htmlspecialchars($cat['cover_image'] ?: 'https://images.unsplash.com/photo-1532187863486-abf9dbad1b69?w=600&h=400&fit=crop') ?>" alt="<?= htmlspecialchars($cat['name']) ?>">
                    <div class="gallery-category-overlay">
                        <span class="gallery-count"><i class="fas fa-images"></i> <?= $cat['image_count'] ?? 0 ?> Photos</span>
                    </div>
                </div>
                <div class="gallery-category-info">
                    <h3><?= htmlspecialchars($cat['name']) ?></h3>
                    <p><?= htmlspecialchars($cat['description'] ?? '') ?></p>
                    <span class="read-more">View Gallery <i class="fas fa-arrow-right"></i></span>
                </div>
            </a>
            <?php endforeach; ?>
        </div>
        <?php endif; ?>
        
        <?php if (!empty($recentImages)): ?>
        <div class="section-header fade-in-up" style="margin-top:60px;">
            <h2>Recent Photos</h2>
            <div class="section-divider"></div>
        </div>
        <div class="gallery-grid fade-in-up">
            <?php foreach ($recentImages as $idx => $img): ?>
            <div class="gallery-item" onclick="openLightbox(<?= $idx ?>)">
                <img src="<?= htmlspecialchars($img['image_url']) ?>" alt="<?= htmlspecialchars($img['title']) ?>" loading="lazy">
                <div class="gallery-item-overlay">
                    <h4><?= htmlspecialchars($img['title']) ?></h4>
                    <span class="gallery-item-category"><?= htmlspecialchars($img['category_name'] ?? '') ?></span>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
        <?php endif; ?>
    </div>
</section>

<div id="lightbox" class="lightbox" onclick="closeLightbox(event)">
    <button class="lightbox-close" onclick="closeLightbox(event)"><i class="fas fa-times"></i></button>
    <button class="lightbox-prev" onclick="lightboxNav(-1, event)"><i class="fas fa-chevron-left"></i></button>
    <button class="lightbox-next" onclick="lightboxNav(1, event)"><i class="fas fa-chevron-right"></i></button>
    <div class="lightbox-content" onclick="event.stopPropagation()">
        <img id="lightbox-img" src="" alt="">
        <div class="lightbox-caption">
            <h3 id="lightbox-title"></h3>
            <p id="lightbox-desc"></p>
        </div>
    </div>
</div>

<script>
var galleryImages = <?= json_encode(array_map(function($img) { return ['url' => $img['image_url'], 'title' => $img['title'], 'desc' => $img['description'] ?? '']; }, $recentImages)) ?>;
var currentLightboxIndex = 0;

function openLightbox(idx) {
    currentLightboxIndex = idx;
    showLightboxImage();
    document.getElementById('lightbox').classList.add('active');
    document.body.style.overflow = 'hidden';
}

function showLightboxImage() {
    var img = galleryImages[currentLightboxIndex];
    document.getElementById('lightbox-img').src = img.url;
    document.getElementById('lightbox-title').textContent = img.title;
    document.getElementById('lightbox-desc').textContent = img.desc;
}

function closeLightbox(e) {
    if (e) e.stopPropagation();
    document.getElementById('lightbox').classList.remove('active');
    document.body.style.overflow = '';
}

function lightboxNav(dir, e) {
    if (e) e.stopPropagation();
    currentLightboxIndex += dir;
    if (currentLightboxIndex < 0) currentLightboxIndex = galleryImages.length - 1;
    if (currentLightboxIndex >= galleryImages.length) currentLightboxIndex = 0;
    showLightboxImage();
}

document.addEventListener('keydown', function(e) {
    var lb = document.getElementById('lightbox');
    if (!lb || !lb.classList.contains('active')) return;
    if (e.key === 'Escape') closeLightbox(e);
    if (e.key === 'ArrowLeft') lightboxNav(-1, e);
    if (e.key === 'ArrowRight') lightboxNav(1, e);
});
</script>
