<?php
$page_title = "Blog";
$page_description = "Stay updated with the latest tips, trends, and insights on social media marketing and digital growth strategies.";
include('include/header.php');

try {
    $stmt = $pdo->prepare("SELECT id, title, slug, category, author, excerpt, thumbnail, read_time, created_at FROM blog_posts WHERE status = 'published' ORDER BY created_at DESC");
    $stmt->execute();
    $posts = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    $posts = [];
}
?>

<!-- Hero -->
<section class="pt-16 pb-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto text-center">
  <div class="inline-flex items-center gap-2 bg-primary/10 border border-primary/20 rounded-full px-4 py-1.5 mb-6">
    <span class="flex h-2 w-2 relative">
      <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-accent opacity-75"></span>
      <span class="relative inline-flex rounded-full h-2 w-2 bg-accent"></span>
    </span>
    <span class="text-xs font-semibold text-slate-800 tracking-wide uppercase">Our Blog</span>
  </div>
  <h1 class="text-4xl sm:text-5xl font-extrabold text-slate-900 mb-4">Tips, News & <span class="text-accent italic">Insights</span></h1>
  <p class="text-slate-600 max-w-lg mx-auto">Stay updated with the latest social media growth strategies and platform updates from <?php echo htmlspecialchars($site_data['web_name']); ?>.</p>
</section>

<!-- Blog Grid -->
<section class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto pb-20">
  <?php if (empty($posts)): ?>
    <div class="text-center py-16">
      <div class="w-20 h-20 rounded-full bg-slate-100 flex items-center justify-center mx-auto mb-6">
        <i class="fa-solid fa-pen-nib text-3xl text-slate-300"></i>
      </div>
      <h3 class="text-lg font-bold text-slate-900 mb-2">No blog posts yet</h3>
      <p class="text-slate-600 text-sm">We're working on some great content. Check back soon for tips, tutorials, and news.</p>
    </div>
  <?php else: ?>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <?php foreach ($posts as $post):
        $link = 'blog-details.php?slug=' . urlencode($post['slug']);
        $date = date('M d, Y', strtotime($post['created_at']));
        $initials = strtoupper(substr($post['author'] ?? 'A', 0, 2));
        $excerpt = mb_strimwidth(htmlspecialchars($post['excerpt'] ?? ''), 0, 140, '...');
      ?>
      <a href="<?php echo $link; ?>" class="glassmorphism rounded-2xl overflow-hidden shadow-sm hover:shadow-premium hover:-translate-y-2 transition-all block group">
        <!-- Thumbnail -->
        <?php if (!empty($post['thumbnail'])): ?>
          <div class="overflow-hidden h-48">
            <img src="<?php echo htmlspecialchars($post['thumbnail']); ?>" alt="<?php echo htmlspecialchars($post['title']); ?>" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" loading="lazy">
          </div>
        <?php else: ?>
          <div class="h-48 bg-gradient-to-br from-slate-100 to-slate-50 flex items-center justify-center">
            <i class="fa-solid fa-newspaper text-4xl text-slate-200"></i>
          </div>
        <?php endif; ?>

        <div class="p-5">
          <?php if (!empty($post['category'])): ?>
            <span class="inline-block text-[10px] font-bold uppercase tracking-wider bg-accent/10 text-accent px-2.5 py-1 rounded-md mb-3"><?php echo htmlspecialchars($post['category']); ?></span>
          <?php endif; ?>

          <h3 class="text-base font-bold text-slate-900 mb-2 group-hover:text-accent transition-colors leading-snug"><?php echo htmlspecialchars($post['title']); ?></h3>
          <p class="text-slate-600 text-xs leading-relaxed mb-4"><?php echo $excerpt; ?></p>

          <div class="flex items-center justify-between pt-3 border-t border-slate-100">
            <div class="flex items-center gap-2">
              <div class="w-7 h-7 rounded-full bg-primary flex items-center justify-center text-white text-[10px] font-bold"><?php echo $initials; ?></div>
              <span class="text-xs text-slate-400"><?php echo $date; ?></span>
            </div>
            <span class="text-xs font-bold text-accent">Read →</span>
          </div>
        </div>
      </a>
      <?php endforeach; ?>
    </div>
  <?php endif; ?>
</section>

<?php include('include/footer.php'); ?>
