<?php
require_once __DIR__ . '/includes/functions.php';
$currentPage = 'blog';
$slug = $_GET['slug'] ?? '';
$stmt = db()->prepare("SELECT b.*, c.name AS category_name FROM blogs b JOIN blog_categories c ON c.id = b.category_id WHERE b.slug = ? AND b.status = 'published' LIMIT 1");
$stmt->execute([$slug]);
$post = $stmt->fetch();
if (!$post) {
http_response_code(404);
$pageSeoTitle = 'Page Not Found';
require __DIR__ . '/partials/header.php';
echo '<section class="py-32 text-center"><h1 class="font-heading font-extrabold text-3xl mb-4">Article Not Found</h1><a href="blog.php" class="text-brand-red font-semibold">Back to Blog</a></section>';
require __DIR__ . '/partials/footer.php';
exit;
}
$otherPosts = db()->prepare("SELECT title, slug, featured_image FROM blogs WHERE status = 'published' AND id != ? ORDER BY published_at DESC LIMIT 3");
$otherPosts->execute([$post['id']]);
$related = $otherPosts->fetchAll();
$tags = array_filter(array_map('trim', explode(',', $post['tags'] ?? '')));
$pageSeoTitle = $post['seo_title'] ?: $post['title'];
$pageSeoDescription = $post['seo_description'] ?: $post['excerpt'];
$pageSeoImage = $post['featured_image'];
require __DIR__ . '/partials/header.php';
?>
<section class="page-banner relative py-20 md:py-28 overflow-hidden">
<div class="max-w-4xl mx-auto px-6 relative z-10" 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"><?= e($post['category_name']) ?></span>
<h1 class="text-white font-heading font-extrabold text-2xl md:text-4xl leading-tight mb-5"><?= e($post['title']) ?></h1>
<div class="flex flex-wrap items-center gap-4 text-gray-300 text-sm">
<span><i class="fa-regular fa-calendar mr-1 text-brand-gold"></i> <?= e(date('d F Y', strtotime($post['published_at']))) ?></span>
<span><i class="fa-regular fa-user mr-1 text-brand-gold"></i> <?= e($post['author']) ?></span>
</div>
</div>
</section>
<section class="py-16">
<div class="max-w-7xl mx-auto px-6 grid lg:grid-cols-3 gap-12">
<article class="lg:col-span-2" data-aos="fade-right">
<?php if ($post['featured_image']): ?>
<img src="<?= e(resolve_image($post['featured_image'])) ?>" class="w-full h-72 md:h-96 object-cover rounded-2xl shadow-lg mb-8" alt="<?= e($post['title']) ?>">
<?php endif; ?>
<div class="blog-body"><?= $post['body'] ?></div>
<?php if ($tags): ?>
<div class="flex flex-wrap items-center gap-2 mt-8 pt-6 border-t dark:border-gray-700">
<span class="text-sm font-semibold text-gray-500 dark:text-gray-400 mr-2">Tags:</span>
<?php foreach ($tags as $tag): ?>
<span class="text-xs px-3 py-1 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400"><?= e($tag) ?></span>
<?php endforeach; ?>
</div>
<?php endif; ?>
<div class="flex items-center gap-3 mt-6">
<span class="text-sm font-semibold text-gray-500 dark:text-gray-400">Share:</span>
<a href="#" class="w-9 h-9 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center hover:bg-brand-red hover:text-white transition"><i class="fa-brands fa-facebook-f text-sm"></i></a>
<a href="#" class="w-9 h-9 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center hover:bg-brand-green hover:text-white transition"><i class="fa-brands fa-whatsapp text-sm"></i></a>
<a href="#" class="w-9 h-9 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center hover:bg-brand-gold hover:text-white transition"><i class="fa-brands fa-linkedin-in text-sm"></i></a>
</div>
</article>
<aside data-aos="fade-left" class="space-y-8">
<div class="glass-light dark:glass rounded-2xl p-6 border-t-4 border-brand-gold shadow-lg">
<h3 class="font-heading font-bold text-lg mb-4">Book a Free Counselling</h3>
<form method="post" action="lead_submit.php" class="space-y-3">
<?= csrf_field() ?>
<input type="hidden" name="source_page" value="blog-<?= e($post['slug']) ?>">
<input type="text" name="hp_field" class="hidden" tabindex="-1" autocomplete="off">
<input type="text" name="name" placeholder="Full Name" required class="w-full rounded-xl border border-gray-300 dark:border-gray-600 px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-brand-green">
<input type="tel" name="phone" placeholder="Phone Number" required class="w-full rounded-xl border border-gray-300 dark:border-gray-600 px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-brand-green">
<button type="submit" class="w-full gradient-btn text-white font-semibold py-3 rounded-xl text-sm">Get Free Advice <i class="fa-solid fa-arrow-right ml-1"></i></button>
</form>
</div>
<?php if ($related): ?>
<div class="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-sm">
<h3 class="font-heading font-bold text-lg mb-4">Related Articles</h3>
<div class="space-y-4">
<?php foreach ($related as $r): ?>
<a href="blog-<?= e($r['slug']) ?>.php" class="flex items-center gap-3 group">
<img src="<?= e(resolve_image($r['featured_image'])) ?>" class="w-16 h-16 rounded-xl object-cover shrink-0">
<span class="text-sm font-medium group-hover:text-brand-red transition"><?= e($r['title']) ?></span>
</a>
<?php endforeach; ?>
</div>
</div>
<?php endif; ?>
<div class="bg-brand-black rounded-2xl p-6 text-center">
<i class="fa-brands fa-whatsapp text-4xl text-[#25D366] mb-3"></i>
<p class="text-white text-sm mb-4">Have questions? Chat with our counsellors directly.</p>
<a href="https://wa.me/<?= e(preg_replace('/\D/', '', $s['whatsapp_number'] ?? '')) ?>" target="_blank" class="inline-flex items-center gap-2 bg-[#25D366] text-white text-sm font-semibold px-5 py-2.5 rounded-full">
<i class="fa-brands fa-whatsapp"></i> Chat Now
</a>
</div>
</aside>
</div>
</section>
<?php require __DIR__ . '/partials/footer.php'; ?>