<?php
require_once 'includes/config.php';
$pageTitle = 'Gallery | 20th Kenya Expo 2026';
$pageDesc  = 'Photo gallery from Kenya Expo — exhibition halls, networking events, conference sessions, and highlights from East Africa\'s premier trade exhibition.';
$images    = readJSON(IMAGES_FILE);
$gallery   = readJSON(GALLERY_FILE);
require_once 'includes/header.php';
?>

<!-- SECTION 1 — HERO -->
<section class="hero-section" style="min-height:50vh;">
  <div class="hero-bg" style="background-image: url('<?php echo htmlspecialchars($images['gallery-bg'] ?? ''); ?>');"></div>
  <div class="hero-pattern"></div>
  <div class="container hero-content text-center">
    <div class="hero-badge reveal">GALLERY</div>
    <h1 class="hero-title reveal reveal-delay-1">Expo <span>Gallery</span></h1>
    <p class="hero-subtitle reveal reveal-delay-2">Highlights from Kenya Expo</p>
  </div>
</section>

<!-- SECTION 2 — FILTER PILLS -->
<!-- <section class="section-padding pb-0">
  <div class="container">
    <div class="filter-pills reveal">
      <button class="filter-pill active" data-filter="all">All</button>
      <button class="filter-pill" data-filter="expo">Expo</button>
      <button class="filter-pill" data-filter="networking">Networking</button>
      <button class="filter-pill" data-filter="conference">Conference</button>
      <button class="filter-pill" data-filter="kenya">Kenya</button>
    </div>
  </div>
</section> -->

<!-- SECTION 3 — MASONRY GALLERY GRID -->
<!-- No overlay text/badges on thumbnails by design. Title/caption still -->
<!-- surface in the lightbox on click via data-title / data-caption below. -->
<section class="section-padding pt-4">
  <div class="container">
    <div class="gallery-grid reveal">
      <?php foreach ($gallery as $img): ?>
      <div class="gallery-item" data-category="<?php echo htmlspecialchars($img['category']); ?>" data-url="<?php echo htmlspecialchars($img['url']); ?>" data-title="<?php echo htmlspecialchars($img['title']); ?>" data-caption="<?php echo htmlspecialchars($img['caption']); ?>">
        <img src="<?php echo htmlspecialchars($img['url']); ?>" alt="<?php echo htmlspecialchars($img['alt']); ?>">
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</section>

<!-- SECTION 4 — LIGHTBOX (initialized by JS) -->

<?php require_once 'includes/footer.php'; ?>