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

<div class="container mx-auto px-4 py-4 sm:py-8">
    <!-- Breadcrumbs -->
    <nav class="flex mb-4" 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 class="breadcrumb-item">
                <div class="flex items-center">
                    <i class="fas fa-chevron-right text-gray-400 mx-2 text-xs"></i>
                    <a href="/blog" class="text-gray-400 hover:text-white transition-colors">
                        <span class="breadcrumb-text">Blog</span>
                    </a>
                </div>
            </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($post['title']) ?></span>
                </div>
            </li>
        </ol>
    </nav>

    <div class="flex flex-col lg:flex-row gap-6 lg:gap-8">
        <!-- Main Content -->
        <main class="w-full lg:w-2/3">
            <!-- Blog Post Ad - Top -->
            <?php if (isset($settings['enable_ads']) && $settings['enable_ads'] == '1' && isset($settings['blog_post_ad']) && !empty($settings['blog_post_ad'])): ?>
            <div class="ad-container blog-post-ad mb-6">
                <?= $settings['blog_post_ad'] ?>
            </div>
            <?php endif; ?>

            <article class="bg-card-bg rounded-xl overflow-hidden border border-gray-800/50">
                <?php if (!empty($post['featured_image'])): ?>
                <div class="aspect-video">
                    <img src="<?= htmlspecialchars($post['featured_image']) ?>" alt="<?= htmlspecialchars($post['title']) ?>"
                         class="w-full h-full object-cover" loading="lazy">
                </div>
                <?php endif; ?>

                <div class="p-4 sm:p-6 md:p-8">
                    <header class="mb-6">
                        <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold mb-4 leading-tight"><?= htmlspecialchars($post['title']) ?></h1>

                        <div class="flex flex-col sm:flex-row sm:items-center text-gray-400 text-sm gap-3 sm:gap-4">
                            <span class="flex items-center">
                                <i class="far fa-calendar-alt mr-2"></i>
                                <?= date('F j, Y', strtotime($post['created_at'])) ?>
                            </span>

                            <?php if (!empty($post['tags'])): ?>
                            <div class="flex flex-wrap gap-2">
                                <?php foreach (explode(',', $post['tags']) as $tag): ?>
                                <a href="/blog/tag/<?= urlencode(trim($tag)) ?>"
                                   class="inline-flex items-center bg-sidebar-bg px-3 py-1 rounded-full text-xs hover:bg-primary/20 transition-colors">
                                    <i class="fas fa-tag mr-1"></i><?= htmlspecialchars(trim($tag)) ?>
                                </a>
                                <?php endforeach; ?>
                            </div>
                            <?php endif; ?>
                        </div>
                    </header>

                    <div class="prose prose-invert prose-lg max-w-none
                               prose-headings:leading-tight
                               prose-h2:text-xl sm:prose-h2:text-2xl
                               prose-h3:text-lg sm:prose-h3:text-xl
                               prose-p:text-base sm:prose-p:text-lg
                               prose-img:rounded-xl prose-img:mx-auto">
                        <?= $post['content'] ?>
                    </div>
                </div>
            </article>

            <!-- Blog Post Ad - Bottom -->
            <?php if (isset($settings['enable_ads']) && $settings['enable_ads'] == '1' && isset($settings['blog_post_ad']) && !empty($settings['blog_post_ad'])): ?>
            <div class="ad-container blog-post-ad my-6">
                <?= $settings['blog_post_ad'] ?>
            </div>
            <?php endif; ?>

            <!-- Share Links -->
            <div class="bg-card-bg rounded-xl p-4 sm:p-6 border border-gray-800/50">
                <h3 class="text-base sm:text-lg font-semibold mb-4">Share This Post</h3>
                <div class="flex gap-3 sm:gap-4">
                    <a href="https://www.facebook.com/sharer/sharer.php?u=<?= urlencode('https://' . $_SERVER['HTTP_HOST'] . '/blog/' . $post['slug']) ?>"
                       target="_blank" rel="noopener"
                       class="w-10 h-10 bg-sidebar-bg rounded-full flex items-center justify-center hover:bg-primary/20 transition-colors">
                        <i class="fab fa-facebook-f"></i>
                    </a>
                    <a href="https://twitter.com/intent/tweet?url=<?= urlencode('https://' . $_SERVER['HTTP_HOST'] . '/blog/' . $post['slug']) ?>&text=<?= urlencode($post['title']) ?>"
                       target="_blank" rel="noopener"
                       class="w-10 h-10 bg-sidebar-bg rounded-full flex items-center justify-center hover:bg-primary/20 transition-colors">
                        <i class="fab fa-twitter"></i>
                    </a>
                    <a href="https://www.linkedin.com/shareArticle?mini=true&url=<?= urlencode('https://' . $_SERVER['HTTP_HOST'] . '/blog/' . $post['slug']) ?>&title=<?= urlencode($post['title']) ?>"
                       target="_blank" rel="noopener"
                       class="w-10 h-10 bg-sidebar-bg rounded-full flex items-center justify-center hover:bg-primary/20 transition-colors">
                        <i class="fab fa-linkedin-in"></i>
                    </a>
                    <a href="mailto:?subject=<?= urlencode($post['title']) ?>&body=<?= urlencode('Check out this article: https://' . $_SERVER['HTTP_HOST'] . '/blog/' . $post['slug']) ?>"
                       class="w-10 h-10 bg-sidebar-bg rounded-full flex items-center justify-center hover:bg-primary/20 transition-colors">
                        <i class="fas fa-envelope"></i>
                    </a>
                </div>
            </div>
        </main>

        <!-- Sidebar -->
        <aside class="w-full lg:w-1/3 space-y-6">
            <!-- Recent Posts -->
            <div class="bg-card-bg rounded-xl p-4 sm:p-6 border border-gray-800/50">
                <h3 class="text-base sm:text-lg font-semibold mb-4">Recent Posts</h3>
                <div class="space-y-4">
                    <?php foreach ($recentPosts as $recentPost): ?>
                    <?php if ($recentPost['id'] != $post['id']): ?>
                    <a href="/blog/<?= $recentPost['slug'] ?>" class="flex items-start hover:bg-card-hover p-3 rounded-lg transition-colors group">
                        <?php if (!empty($recentPost['featured_image'])): ?>
                        <div class="w-20 h-16 rounded overflow-hidden flex-shrink-0 mr-3">
                            <img src="<?= htmlspecialchars($recentPost['featured_image']) ?>"
                                 alt="<?= htmlspecialchars($recentPost['title']) ?>"
                                 class="w-full h-full object-cover" loading="lazy">
                        </div>
                        <?php endif; ?>
                        <div class="flex-1 min-w-0">
                            <h4 class="font-medium line-clamp-2 text-sm group-hover:text-primary transition-colors"><?= htmlspecialchars($recentPost['title']) ?></h4>
                            <span class="text-xs text-gray-400 mt-1 block"><?= date('M j, Y', strtotime($recentPost['created_at'])) ?></span>
                        </div>
                    </a>
                    <?php endif; ?>
                    <?php endforeach; ?>
                </div>
            </div>

            <!-- Tags -->
            <?php if (!empty($post['tags'])): ?>
            <div class="bg-card-bg rounded-xl p-4 sm:p-6 border border-gray-800/50">
                <h3 class="text-base sm:text-lg font-semibold mb-4">Tags</h3>
                <div class="flex flex-wrap gap-2">
                    <?php foreach (explode(',', $post['tags']) as $tag): ?>
                    <a href="/blog/tag/<?= urlencode(trim($tag)) ?>"
                       class="inline-flex items-center bg-sidebar-bg px-3 py-1 rounded-full text-xs hover:bg-primary/20 transition-colors">
                        <i class="fas fa-tag mr-1"></i><?= htmlspecialchars(trim($tag)) ?>
                    </a>
                    <?php endforeach; ?>
                </div>
            </div>
            <?php endif; ?>
        </aside>
    </div>
</div>

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