📄 blog.php

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

$currentPage = 'blog';
$categories = db()->query('SELECT * FROM blog_categories ORDER BY name')->fetchAll();
$posts = db()->query("SELECT b.*, c.name AS category_name FROM blogs b JOIN blog_categories c ON c.id = b.category_id WHERE b.status = 'published' ORDER BY b.published_at DESC")->fetchAll();

$pageSeoTitle = 'Blog';
$pageSeoDescription = 'Study abroad tips, visa news, scholarship updates, and test preparation guidance.';
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">Blog</span>
    <h1 class="text-white font-heading font-extrabold text-3xl md:text-5xl leading-tight mb-4">Insights for Your Study Abroad Journey</h1>
    <p class="text-gray-300 max-w-2xl mx-auto">Study abroad tips, visa news, scholarships, and test preparation guidance.</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-red text-white border-brand-red' : '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-red text-white border-brand-red' : '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 md:grid-cols-3 gap-6">
      <?php foreach ($posts as $i => $p): ?>
      <a href="blog-<?= e($p['slug']) ?>.php" x-show="activeCat === 'All' || activeCat === '<?= e($p['category_name']) ?>'" x-transition class="card-hover block bg-white dark:bg-gray-800 rounded-2xl overflow-hidden shadow-sm" data-aos="fade-up" data-aos-delay="<?= $i * 80 ?>">
        <div class="relative h-48"><img src="<?= e(resolve_image($p['featured_image'])) ?>" class="w-full h-full object-cover"><span class="absolute top-3 left-3 bg-brand-green text-white text-xs font-bold px-3 py-1 rounded-full"><?= e($p['category_name']) ?></span></div>
        <div class="p-6">
          <p class="text-xs text-gray-400 mb-2"><i class="fa-regular fa-calendar mr-1"></i> <?= e(date('F Y', strtotime($p['published_at']))) ?></p>
          <h3 class="font-heading font-bold text-lg mb-2"><?= e($p['title']) ?></h3>
          <span class="text-brand-red text-sm font-semibold">Read More <i class="fa-solid fa-arrow-right ml-1"></i></span>
        </div>
      </a>
      <?php endforeach; ?>
    </div>
    <?php if (!$posts): ?><p class="text-center text-gray-400">No blog posts yet.</p><?php endif; ?>
  </div>
</section>

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