<?php ob_start(); ?>

<section class="blog-section">
    <div class="container">
        <h1 class="section-title"><?= e($page_title ?? 'Blog') ?></h1>

        <?php if (!empty($categories)): ?>
        <nav class="blog-categories" aria-label="Categories">
            <a href="/blog" class="blog-category-link<?= empty($active_category ?? '') ? ' active' : '' ?>">All</a>
            <?php foreach ($categories as $cat): ?>
                <?php if ((int)($cat['post_count'] ?? 0) > 0): ?>
                <a href="/blog/category/<?= e($cat['slug']) ?>"
                   class="blog-category-link<?= ($active_category ?? '') === $cat['slug'] ? ' active' : '' ?>">
                    <?= e($cat['name']) ?>
                    <span class="blog-category-count"><?= (int) $cat['post_count'] ?></span>
                </a>
                <?php endif; ?>
            <?php endforeach; ?>
        </nav>
        <?php endif; ?>

        <?php if (empty($posts)): ?>
        <p class="text-muted">No posts found.</p>
        <?php else: ?>
        <div class="blog-grid">
            <?php foreach ($posts as $post): ?>
            <article class="blog-card">
                <a href="/blog/<?= e($post['slug']) ?>" class="blog-card-image-link">
                    <?php if (!empty($post['featured_image'])): ?>
                    <?= picture_tag($post['featured_image'], $post['title'], 'blog-card-image', true) ?>
                    <?php else: ?>
                    <div class="blog-card-placeholder">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg>
                    </div>
                    <?php endif; ?>
                </a>
                <div class="blog-card-body">
                    <?php if (!empty($post['category_name'])): ?>
                    <span class="blog-category"><?= e($post['category_name']) ?></span>
                    <?php endif; ?>
                    <h2><a href="/blog/<?= e($post['slug']) ?>"><?= e($post['title']) ?></a></h2>
                    <p><?= e(str_truncate($post['excerpt'] ?? strip_tags($post['content'] ?? ''), 150)) ?></p>
                    <div class="blog-meta">
                        <span><?= e($post['author_name'] ?? '') ?></span>
                        <span><?= format_date($post['published_at'] ?? $post['created_at']) ?></span>
                    </div>
                </div>
            </article>
            <?php endforeach; ?>
        </div>

        <?php if (!empty($pagination) && $pagination['total_pages'] > 1): ?>
        <nav class="blog-pagination" aria-label="Blog page navigation">
            <?php
                $p    = $pagination;
                $base = $p['base_url'];
                $sep  = str_contains($base, '?') ? '&' : '?';
            ?>
            <?php if ($p['current_page'] > 1): ?>
            <a href="<?= e($base . $sep . 'page=' . ($p['current_page'] - 1)) ?>" class="pagination-link" rel="prev">&larr; Newer</a>
            <?php else: ?>
            <span class="pagination-link disabled">&larr; Newer</span>
            <?php endif; ?>

            <span class="pagination-info">Page <?= $p['current_page'] ?> of <?= $p['total_pages'] ?></span>

            <?php if ($p['current_page'] < $p['total_pages']): ?>
            <a href="<?= e($base . $sep . 'page=' . ($p['current_page'] + 1)) ?>" class="pagination-link" rel="next">Older &rarr;</a>
            <?php else: ?>
            <span class="pagination-link disabled">Older &rarr;</span>
            <?php endif; ?>
        </nav>
        <?php endif; ?>

        <?php endif; ?>
    </div>
</section>

<?php $content = ob_get_clean(); include __DIR__ . '/layout.php'; ?>
