<?php
require_once __DIR__ . '/includes/functions.php';
$settings = getSettings();
$gallery = getData('gallery');

// Build years array and flat images list
$years = array_keys($gallery);
rsort($years);
$allImages = [];
foreach ($gallery as $year => $imgs) {
    foreach ($imgs as $img) {
        $allImages[] = ['year' => $year, 'img' => $img];
    }
}

$pageTitle = $settings['seo_gallery_title'];
$pageDesc = $settings['seo_gallery_desc'];

include __DIR__ . '/includes/header.php';
?>

<section class="page-hero">
    <div class="container">
        <span class="section-label">Memories</span>
        <h1 class="section-title">Photo Gallery</h1>
        <nav class="breadcrumb-nav mt-2">
            <a href="<?php echo BASE_URL; ?>/index.php">Home</a>
            <span>/</span>
            Gallery
        </nav>
    </div>
</section>

<section class="section">
    <div class="container">
        <?php if (!empty($allImages)): ?>
        <div data-filter-container>
            <!-- Filter Tabs -->
            <div class="filter-tabs reveal">
                <button class="filter-tab active" data-filter-btn="all">All</button>
                <?php foreach ($years as $year): ?>
                <button class="filter-tab" data-filter-btn="<?php echo e($year); ?>"><?php echo e($year); ?></button>
                <?php endforeach; ?>
            </div>

            <!-- Gallery Grid -->
            <div class="row g-3 reveal">
                <?php foreach ($allImages as $gi):
                    $imgPath = UPLOADS_URL . '/gallery/' . $gi['year'] . '/' . $gi['img'];
                ?>
                <div class="col-lg-4 col-md-6" data-filter-item="<?php echo e($gi['year']); ?>">
                    <div class="gallery-item" data-lightbox>
                        <img src="<?php echo $imgPath; ?>" alt="Ethiopia Food Expo <?php echo e($gi['year']); ?>">
                        <div class="overlay">🔍</div>
                        <div class="year-label"><?php echo e($gi['year']); ?></div>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
        <?php else: ?>
        <div class="empty-state reveal">
            <span class="empty-state-icon">📸</span>
            <h3 style="font-family:var(--font-heading);font-size:1.1rem;text-transform:uppercase;color:var(--text-dark);margin-bottom:0.5rem;">Gallery Coming Soon</h3>
            <p style="max-width:400px;margin:0 auto 1.5rem;">Photos from past editions will be added here. Check back soon!</p>
            <a href="<?php echo BASE_URL; ?>/contact.php" class="btn-green">Get in Touch</a>
        </div>
        <?php endif; ?>
    </div>
</section>

<?php include __DIR__ . '/includes/footer.php'; ?>
