📄 gallery.php

<?php
require_once __DIR__ . '/includes/functions.php';

$currentPage = 'gallery';
$categories = db()->query('SELECT * FROM gallery_categories ORDER BY sort_order')->fetchAll();
$items = db()->query("SELECT g.*, c.slug AS cat_slug, c.name AS cat_name FROM gallery_items g JOIN gallery_categories c ON c.id = g.category_id WHERE g.status = 'active' ORDER BY g.sort_order")->fetchAll();

$pageSeoTitle = 'Gallery';
$pageSeoDescription = 'Browse photos and videos from our office, classes, events, and student success stories - filter by category.';
require __DIR__ . '/partials/header.php';
?>

<section class="page-banner relative py-24 md:py-32 overflow-hidden">
  <div class="max-w-7xl mx-auto px-6 relative z-10 text-center" data-aos="fade-up">
    <span class="inline-block px-4 py-1.5 rounded-full bg-brand-gold/20 border border-brand-gold text-brand-gold text-xs font-semibold mb-5">Gallery</span>
    <h1 class="text-white font-heading font-extrabold text-3xl md:text-5xl leading-tight mb-4">Moments Worth Sharing</h1>
    <p class="text-gray-300 max-w-2xl mx-auto">Explore our office, classes, events, and student success moments.</p>
  </div>
</section>

<section class="py-16" x-data="{ activeCat: 'All' }">
  <div class="max-w-7xl mx-auto px-6">
    <div class="flex flex-wrap justify-center gap-3 mb-12" data-aos="fade-up">
      <button @click="activeCat = 'All'" :class="activeCat === 'All' ? 'bg-brand-green text-white border-brand-green' : 'border-gray-300 dark:border-gray-600'" class="px-5 py-2 rounded-full border text-sm font-medium transition">All</button>
      <?php foreach ($categories as $cat): ?>
        <button @click="activeCat = '<?= e($cat['name']) ?>'" :class="activeCat === '<?= e($cat['name']) ?>' ? 'bg-brand-green text-white border-brand-green' : 'border-gray-300 dark:border-gray-600'" class="px-5 py-2 rounded-full border text-sm font-medium transition"><?= e($cat['name']) ?></button>
      <?php endforeach; ?>
    </div>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
      <?php foreach ($items as $i => $item): ?>
      <div x-show="activeCat === 'All' || activeCat === '<?= e($item['cat_name']) ?>'" x-transition class="relative group" data-aos="zoom-in" data-aos-delay="<?= $i * 60 ?>">
        <img src="<?= e(resolve_image($item['image'])) ?>" class="card-hover rounded-2xl h-52 w-full object-cover">
        <span class="absolute bottom-3 left-3 bg-brand-black/70 text-white text-[11px] font-medium px-3 py-1 rounded-full"><?= e($item['cat_name']) ?></span>
        <?php if ($item['type'] === 'video'): ?>
          <span class="absolute inset-0 flex items-center justify-center"><i class="fa-solid fa-circle-play text-white text-4xl drop-shadow-lg"></i></span>
        <?php endif; ?>
      </div>
      <?php endforeach; ?>
    </div>
    <?php if (!$items): ?><p class="text-center text-gray-400">No gallery items yet.</p><?php endif; ?>
  </div>
</section>

<?php require __DIR__ . '/partials/footer.php'; ?>