<?php
$page_title = 'Gallery - SOL Christian Academy';
$page_image = 'assets/images/gallery-1.jpg';
$current_page = 'gallery.php';
require_once 'includes/db.php';
require_once 'includes/functions.php';

$images = [];
if ($pdo) {
    $stmt = $pdo->query("SELECT id, title, image, alt_text FROM gallery ORDER BY sort_order ASC");
    $images = $stmt->fetchAll();
}
require_once 'includes/header.php';
?>

<section class="page-header page-header-image" style="--hero-bg: url('<?php echo $page_image; ?>');">
  <div class="container">
    <div class="breadcrumb-custom mb-2">
      <a href="index.php">Home</a> / Gallery
    </div>
    <h1>Our Gallery</h1>
    <p>A visual journey through life at SOL Christian Academy</p>
  </div>
</section>

<section class="content-section">
  <div class="container">
    <?php if (!empty($images)): ?>
    <div class="row g-3">
      <?php foreach ($images as $img): ?>
      <div class="col-6 col-md-4 col-lg-3">
        <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#galleryModal" data-full="<?php e($img['image']); ?>" data-title="<?php e($img['title']); ?>">
          <img src="<?php e($img['image']); ?>" alt="<?php e($img['alt_text'] ?: $img['title']); ?>" loading="lazy">
          <div class="overlay"><?php e($img['title']); ?></div>
        </div>
      </div>
      <?php endforeach; ?>
    </div>
    <?php else: ?>
    <div class="text-center py-5">
      <p class="text-muted fs-5">Gallery images coming soon.</p>
    </div>
    <?php endif; ?>
  </div>
</section>

<!-- Lightbox Modal -->
<div class="modal fade" id="galleryModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content" style="border-radius:16px;overflow:hidden;">
      <div class="modal-header border-0">
        <h5 class="modal-title"></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-0">
        <img src="" alt="" style="width:100%;display:block;">
      </div>
    </div>
  </div>
</div>

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