<?php
// Include header
include __DIR__ . '/layout/header.php';
?>

<div class="container mx-auto px-4 py-8">
    <!-- Breadcrumbs -->
    <nav class="flex mb-6" aria-label="Breadcrumb">
        <ol class="inline-flex items-center space-x-1 md:space-x-3">
            <li class="inline-flex items-center">
                <a href="/" class="text-gray-400 hover:text-white transition-colors">
                    <i class="fas fa-home mr-2"></i>Home
                </a>
            </li>
            <li aria-current="page" class="breadcrumb-item">
                <div class="flex items-center">
                    <i class="fas fa-chevron-right text-gray-400 mx-2 text-xs"></i>
                    <span class="text-white font-medium breadcrumb-text-last"><?= htmlspecialchars($page['title']) ?></span>
                </div>
            </li>
        </ol>
    </nav>

    <div class="max-w-4xl mx-auto">
        <?php if (!empty($page['featured_image'])): ?>
        <div class="mb-8 rounded-lg overflow-hidden shadow-lg">
            <img src="<?= htmlspecialchars($page['featured_image']) ?>" alt="<?= htmlspecialchars($page['title']) ?>" class="w-full h-auto" loading="lazy">
        </div>
        <?php endif; ?>

        <h1 class="text-3xl md:text-4xl font-bold mb-6"><?= htmlspecialchars($page['title']) ?></h1>

        <div class="prose prose-invert prose-lg max-w-none">
            <?= $page['content'] ?>
        </div>
    </div>
</div>

<?php
// Include footer
include __DIR__ . '/layout/footer.php';
?>