<?php
session_start();
include 'config.php';

$id = isset($_GET['id']) ? intval($_GET['id']) : 0;

$stmt = $conn->prepare("SELECT c.*, cat.title as category_title, cat.id as cat_id, u.org_name 
                        FROM content c 
                        JOIN categories cat ON c.category_id = cat.id 
                        LEFT JOIN users u ON c.user_id = u.id 
                        WHERE c.id = ?");
$stmt->bind_param("i", $id);
$stmt->execute();
$article = $stmt->get_result()->fetch_assoc();

if (!$article) {
    header("Location: index.php");
    exit;
}
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        <?php echo htmlspecialchars($article['title']); ?> | SaniBook
    </title> <!-- Favicon -->
    <link rel="icon" href="images/saniBook logo.png" type="image/png">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
    <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        brand: {
                            dark: '#001F3F',
                            teal: '#008080',
                            gold: '#D4AF37',
                            red: '#dc2626'
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                        display: ['Space Grotesk', 'sans-serif']
                    }
                }
            }
        }
                }
            }
        }
    </script>
    <style>
        /* Force standard fonts and clean up pasted Word content */
        .prose * {
            font-family: 'Inter', sans-serif !important;
            color: inherit;
            /* Optional: prevents pasted text from being odd colors, unless you want that */
        }

        .prose h1,
        .prose h2,
        .prose h3,
        .prose h4,
        .prose h5,
        .prose h6 {
            font-family: 'Space Grotesk', sans-serif !important;
        }
    </style>
</head>

<body class="bg-slate-50 text-slate-900 font-sans">

    <!-- Navbar -->
    <?php include 'navbar.php'; ?>

    <div class="max-w-4xl mx-auto px-4 py-12">
        <a href="category.php?id=<?php echo $article['cat_id']; ?>"
            class="inline-flex items-center text-brand-teal font-bold mb-6 hover:underline transition-all">
            <i class="fa-solid fa-arrow-left mr-2"></i> Back to
            <?php echo htmlspecialchars($article['category_title']); ?>
        </a>

        <div class="bg-white rounded-2xl p-8 md:p-12 shadow-lg border border-slate-200">
            <span
                class="inline-block px-3 py-1 bg-slate-100 text-slate-600 text-xs font-bold rounded-full mb-4 uppercase tracking-wider">
                <?php echo ucfirst($article['type']); ?>
            </span>

            <h1 class="text-3xl md:text-4xl font-display font-bold text-slate-900 mb-6 leading-tight">
                <?php echo htmlspecialchars($article['title']); ?>
            </h1>

            <div class="flex items-center gap-6 text-sm text-slate-500 mb-8 pb-8 border-b border-slate-100">
                <span class="flex items-center">
                    <i class="fa-solid fa-calendar-day mr-2 text-brand-gold"></i>
                    <?php echo date("F j, Y", strtotime($article['created_at'])); ?>
                </span>
                <?php if ($article['org_name']): ?>
                    <span class="flex items-center">
                        <i class="fa-solid fa-user mr-2 text-brand-gold"></i>
                        <?php echo htmlspecialchars($article['org_name']); ?>
                    </span>
                <?php endif; ?>
            </div>

            <div
                class="prose prose-slate max-w-none prose-lg prose-headings:font-display prose-headings:font-bold prose-a:text-brand-teal">
                <?php echo $article['body']; ?>
            </div>
        </div>
    </div>

    <footer class="bg-brand-dark text-white py-12 border-t border-white/10 mt-12">
        <div class="max-w-7xl mx-auto px-4 text-center">
            <!-- Social media links removed until official accounts are active -->
            <p class="text-slate-400 text-sm">&copy;
                <?php echo date('Y'); ?> SaniBook Kenya Volume 01. All rights
                reserved.
            </p>
        </div>
    </footer>

</body>

</html>