<?php
/**
 * Single project details
 */
include_once 'header.php';

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

if (!$project || empty($project['is_active'])) {
    echo '<section class="py-24 text-center"><p class="text-gray-500">Project not found.</p><a href="projects.php" class="text-secondary font-bold">← All Projects</a></section>';
    include_once 'footer.php';
    exit;
}

$images = $project['images'] ?? [];
$videos = $project['videos'] ?? [];
$cover  = project_cover($project);
?>

<section class="relative bg-gradient-to-r from-slate-950 to-blue-900 text-white py-12 md:py-16">
    <div class="max-w-7xl mx-auto px-4">
        <nav class="text-xs text-sky-400 font-bold uppercase mb-3">
            <a href="index.php" class="hover:text-white">Home</a>
            <span class="mx-2">/</span>
            <a href="projects.php" class="hover:text-white">Projects</a>
            <span class="mx-2">/</span>
            <?php echo htmlspecialchars($project['company_name']); ?>
        </nav>
        <h1 class="text-2xl md:text-4xl font-black uppercase"><?php echo htmlspecialchars($project['company_name']); ?></h1>
        <?php if (!empty($project['category_name'])): ?>
        <p class="mt-2 text-sky-200 text-sm">
            <i class="fa-solid <?php echo htmlspecialchars($project['category_icon'] ?? 'fa-box'); ?> mr-1"></i>
            <?php echo htmlspecialchars($project['category_name']); ?>
        </p>
        <?php endif; ?>
    </div>
</section>

<section class="py-12 md:py-16 bg-white">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 space-y-10">

        <?php if (!empty($images)): ?>
        <div class="grid grid-cols-2 md:grid-cols-3 gap-3 md:gap-4">
            <?php foreach ($images as $img): ?>
            <div class="rounded-xl overflow-hidden bg-gray-100 aspect-[4/3]">
                <img src="<?php echo htmlspecialchars($img); ?>" class="w-full h-full object-cover" alt="">
            </div>
            <?php endforeach; ?>
        </div>
        <?php else: ?>
        <div class="rounded-2xl overflow-hidden aspect-video bg-gray-100">
            <img src="<?php echo htmlspecialchars($cover); ?>" class="w-full h-full object-cover" alt="">
        </div>
        <?php endif; ?>

        <?php if (!empty($videos)): ?>
        <div class="space-y-4">
            <h2 class="text-lg font-black text-primary uppercase">Videos</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <?php foreach ($videos as $vurl): ?>
                <div class="aspect-video rounded-xl overflow-hidden bg-black">
                    <iframe class="w-full h-full" src="<?php echo htmlspecialchars(youtube_embed_url($vurl)); ?>"
                        frameborder="0" allowfullscreen loading="lazy"></iframe>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
        <?php endif; ?>

        <?php if (!empty($project['description'])): ?>
        <div class="prose max-w-none">
            <h2 class="text-lg font-black text-primary uppercase mb-3">Project Details</h2>
            <div class="text-gray-600 leading-relaxed whitespace-pre-line"><?php echo htmlspecialchars($project['description']); ?></div>
        </div>
        <?php endif; ?>

        <a href="projects.php" class="inline-flex items-center text-secondary font-bold text-sm hover:text-primary">
            <i class="fa-solid fa-arrow-left mr-2"></i> All Projects
        </a>
    </div>
</section>

<?php include_once 'footer.php'; ?>
