<?php
require_once __DIR__ . '/config/config.php';
require_once __DIR__ . '/includes/functions.php';
$pageTitle = 'Technical Blog & News';
$currentPage = 'blog';
$cat = trim($_GET['cat'] ?? '');
if ($cat) {
  $posts = Database::fetchAll("SELECT * FROM blog_posts WHERE is_published=1 AND category=? ORDER BY published_at DESC", [$cat]);
} else {
  $posts = Database::fetchAll("SELECT * FROM blog_posts WHERE is_published=1 ORDER BY published_at DESC");
}
$cats = Database::fetchAll("SELECT DISTINCT category FROM blog_posts WHERE is_published=1 ORDER BY category");
include __DIR__ . '/includes/header.php';
?>

<section class="pt-28 pb-16 bg-navy-900">
  <div class="max-w-7xl mx-auto px-4">
    <div class="text-center mb-12">
      <div class="inline-flex items-center gap-2 bg-orange-600/10 border border-orange-600/30 rounded-full px-4 py-1.5 text-xs font-medium text-orange-400 uppercase tracking-wider mb-4">
        Knowledge Centre
      </div>
      <h1 class="text-4xl md:text-5xl font-black font-display mb-4">Technical <span class="text-orange-500">Blog & News</span></h1>
      <p class="text-gray-400 max-w-2xl mx-auto">API standards explained, industry updates, product guides, and technical articles from our engineering team.</p>
    </div>

    <!-- Category Filter -->
    <?php if ($cats): ?>
    <div class="flex flex-wrap gap-2 justify-center mb-10">
      <a href="/blog.php" class="px-4 py-2 rounded-lg text-sm font-medium transition-colors <?= !$cat ? 'bg-orange-600 text-white' : 'bg-navy-700 text-gray-400 hover:bg-navy-600' ?>">All Articles</a>
      <?php foreach ($cats as $c): ?>
      <a href="/blog.php?cat=<?= urlencode($c['category']) ?>" class="px-4 py-2 rounded-lg text-sm font-medium transition-colors <?= $cat === $c['category'] ? 'bg-orange-600 text-white' : 'bg-navy-700 text-gray-400 hover:bg-navy-600' ?>"><?= e($c['category']) ?></a>
      <?php endforeach; ?>
    </div>
    <?php endif; ?>

    <?php if ($posts): ?>
    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
      <?php foreach ($posts as $post): ?>
      <a href="/blog-post.php?slug=<?= e($post['slug']) ?>" class="card-dark overflow-hidden hover:border-orange-600/50 transition-all hover:-translate-y-0.5 group block">
        <?php if ($post['image']): ?>
        <div class="h-48 overflow-hidden bg-navy-700">
          <img src="/uploads/<?= e($post['image']) ?>" alt="<?= e($post['title']) ?>"
            class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
            onerror="this.onerror=null;this.style.display='none';this.nextElementSibling.style.display='flex'">
          <div class="hidden h-48 bg-navy-700 items-center justify-center text-4xl text-gray-600">📰</div>
        </div>
        <?php else: ?>
        <div class="h-24 bg-gradient-to-br from-navy-700 to-navy-600 flex items-center justify-center text-3xl">📰</div>
        <?php endif; ?>
        <div class="p-5">
          <div class="flex items-center gap-2 mb-3">
            <span class="text-xs bg-orange-600/10 text-orange-400 px-2.5 py-1 rounded-full font-medium"><?= e($post['category']) ?></span>
            <?php if ($post['published_at']): ?>
            <span class="text-xs text-gray-500"><?= date('d M Y', strtotime($post['published_at'])) ?></span>
            <?php endif; ?>
          </div>
          <h3 class="font-bold text-white leading-snug mb-2 group-hover:text-orange-400 transition-colors"><?= e($post['title']) ?></h3>
          <?php if ($post['excerpt']): ?>
          <p class="text-sm text-gray-400 leading-relaxed line-clamp-3"><?= e($post['excerpt']) ?></p>
          <?php endif; ?>
          <div class="mt-4 flex items-center justify-between">
            <span class="text-xs text-gray-500"><?= e($post['author']) ?></span>
            <span class="text-xs text-orange-500 font-medium">Read more →</span>
          </div>
        </div>
      </a>
      <?php endforeach; ?>
    </div>
    <?php else: ?>
    <!-- Placeholder articles to show the intention -->
    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 mb-12">
      <?php foreach ([
        ['API Standards', 'What is API 6A? A Plain-Language Guide for Procurement Engineers', 'API 6A is the American Petroleum Institute standard governing wellhead and Christmas tree equipment. Understanding its PSL levels, design verification requirements, and material classes is essential for any oilfield procurement team.'],
        ['Technical', 'RTJ vs Spiral Wound Gaskets — Which Do You Need?', 'Ring Type Joint (RTJ) and spiral wound gaskets serve different pressure and temperature ranges. Here is how to specify the correct gasket for your application.'],
        ['API Standards', 'API 6D vs API 6A Valves — Understanding the Difference', 'Both standards cover oil and gas valves, but for very different applications. API 6A is wellhead equipment; API 6D is pipeline service. Getting this wrong is a costly mistake.'],
        ['Sourcing', 'Why NACE MR0175 Matters in H₂S Environments', 'Hydrogen sulphide (H₂S) environments cause sulfide stress cracking in many carbon steel materials. NACE MR0175/ISO 15156 specifies exactly which materials are safe to use.'],
        ['Technical', 'ASME Flange Pressure Classes Explained — 150 to 2500', 'ANSI/ASME B16.5 defines 7 pressure classes for pipe flanges. Understanding how temperature affects your maximum allowable pressure is critical for safe system design.'],
        ['Sourcing', 'Sourcing Industrial Equipment from Pakistan: What Buyers Need to Know', 'Pakistan has a growing industrial equipment distribution sector. Here is what international and domestic buyers should know when sourcing valves, flanges, and spares in Pakistan.'],
      ] as [$c, $t, $e]): ?>
      <div class="card-dark overflow-hidden">
        <div class="h-24 bg-gradient-to-br from-navy-700 to-navy-600 flex items-center justify-center text-3xl">📰</div>
        <div class="p-5">
          <div class="flex items-center gap-2 mb-3">
            <span class="text-xs bg-orange-600/10 text-orange-400 px-2.5 py-1 rounded-full font-medium"><?= $c ?></span>
            <span class="text-xs text-gray-500">Coming Soon</span>
          </div>
          <h3 class="font-bold text-white leading-snug mb-2"><?= $t ?></h3>
          <p class="text-sm text-gray-400 leading-relaxed"><?= $e ?></p>
        </div>
      </div>
      <?php endforeach; ?>
    </div>
    <div class="text-center py-4">
      <p class="text-gray-400">Articles are being published. Subscribe to be notified.</p>
    </div>
    <?php endif; ?>
  </div>
</section>

<?php include __DIR__ . '/includes/footer.php'; ?>
