<?php
require_once __DIR__ . '/config/config.php';
require_once __DIR__ . '/includes/functions.php';
$slug = trim($_GET['slug'] ?? '');
if (!$slug) { header('Location: /blog.php'); exit; }
$post = Database::fetchOne("SELECT * FROM blog_posts WHERE slug=? AND is_published=1", [$slug]);
if (!$post) { header('Location: /blog.php'); exit; }
// Increment views
Database::execute("UPDATE blog_posts SET views=views+1 WHERE id=?", [$post['id']]);
// Related posts
$related = Database::fetchAll("SELECT * FROM blog_posts WHERE is_published=1 AND category=? AND id!=? ORDER BY published_at DESC LIMIT 3", [$post['category'], $post['id']]);
$pageTitle = $post['title'];
$currentPage = 'blog';
include __DIR__ . '/includes/header.php';
?>

<section class="pt-28 pb-16 bg-navy-900">
  <div class="max-w-4xl mx-auto px-4">
    <!-- Breadcrumb -->
    <nav class="text-xs text-gray-500 mb-6 flex items-center gap-2">
      <a href="/blog.php" class="hover:text-orange-400">Blog</a>
      <span>›</span>
      <span class="text-orange-400"><?= e($post['category']) ?></span>
    </nav>

    <!-- Header -->
    <div class="mb-8">
      <div class="flex items-center gap-2 mb-4">
        <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 F Y', strtotime($post['published_at'])) ?></span>
        <?php endif; ?>
        <span class="text-xs text-gray-500">• <?= number_format($post['views']) ?> views</span>
      </div>
      <h1 class="text-3xl md:text-4xl font-black font-display leading-tight mb-4"><?= e($post['title']) ?></h1>
      <?php if ($post['excerpt']): ?>
      <p class="text-lg text-gray-400 leading-relaxed"><?= e($post['excerpt']) ?></p>
      <?php endif; ?>
      <div class="flex items-center gap-2 mt-4 pt-4 border-t border-navy-500 text-sm text-gray-500">
        <span>By <strong class="text-gray-300"><?= e($post['author']) ?></strong></span>
      </div>
    </div>

    <!-- Feature Image -->
    <?php if ($post['image']): ?>
    <div class="rounded-xl overflow-hidden mb-8 h-72">
      <img src="/uploads/<?= e($post['image']) ?>" alt="<?= e($post['title']) ?>" class="w-full h-full object-cover">
    </div>
    <?php endif; ?>

    <!-- Body -->
    <div class="prose-industrial mb-12">
      <?= $post['body'] ?>
    </div>

    <!-- Tags -->
    <?php if ($post['tags']): ?>
    <div class="flex flex-wrap gap-2 mb-8 pt-6 border-t border-navy-500">
      <?php foreach (explode(',', $post['tags']) as $tag): ?>
      <span class="text-xs bg-navy-700 text-gray-400 px-3 py-1.5 rounded-full"><?= e(trim($tag)) ?></span>
      <?php endforeach; ?>
    </div>
    <?php endif; ?>

    <!-- Share / CTA -->
    <div class="card-dark p-6 text-center mb-10">
      <h3 class="font-bold mb-2">Need a Quote for the Products Mentioned?</h3>
      <p class="text-sm text-gray-400 mb-4">Contact our technical team — we'll source the exact specification you need with full certification.</p>
      <a href="/contact.php" class="btn-primary px-6 py-2.5">Get a Quote</a>
    </div>

    <!-- Related posts -->
    <?php if ($related): ?>
    <div>
      <h3 class="font-bold text-lg mb-5">Related Articles</h3>
      <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <?php foreach ($related as $r): ?>
        <a href="/blog-post.php?slug=<?= e($r['slug']) ?>" class="card-dark p-4 hover:border-orange-600/50 transition-all block group">
          <div class="text-xs text-orange-400 mb-1"><?= e($r['category']) ?></div>
          <h4 class="text-sm font-semibold text-white group-hover:text-orange-400 leading-snug"><?= e($r['title']) ?></h4>
          <?php if ($r['published_at']): ?>
          <div class="text-xs text-gray-500 mt-2"><?= date('d M Y', strtotime($r['published_at'])) ?></div>
          <?php endif; ?>
        </a>
        <?php endforeach; ?>
      </div>
    </div>
    <?php endif; ?>
  </div>
</section>

<style>
.prose-industrial { color: #d1d5db; line-height: 1.8; }
.prose-industrial h2 { font-size:1.5rem; font-weight:800; color:#fff; margin:2rem 0 1rem; border-left:4px solid #ff6b00; padding-left:0.75rem; }
.prose-industrial h3 { font-size:1.2rem; font-weight:700; color:#e5e7eb; margin:1.5rem 0 0.75rem; }
.prose-industrial p { margin-bottom:1rem; }
.prose-industrial ul, .prose-industrial ol { padding-left:1.5rem; margin-bottom:1rem; }
.prose-industrial li { margin-bottom:0.4rem; }
.prose-industrial strong { color:#fff; font-weight:600; }
.prose-industrial a { color:#ff6b00; text-decoration:underline; }
.prose-industrial table { width:100%; border-collapse:collapse; margin-bottom:1.5rem; }
.prose-industrial th { background:#1e2534; color:#ff6b00; padding:0.6rem 1rem; text-align:left; font-size:0.8rem; text-transform:uppercase; }
.prose-industrial td { padding:0.6rem 1rem; border-bottom:1px solid #2a3147; font-size:0.9rem; }
.prose-industrial blockquote { border-left:4px solid #ff6b00; padding:1rem 1.5rem; background:#111827; border-radius:0 8px 8px 0; margin:1.5rem 0; font-style:italic; color:#9ca3af; }
.prose-industrial pre { background:#111827; padding:1.2rem; border-radius:8px; overflow-x:auto; margin-bottom:1rem; font-size:0.85rem; }
</style>

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