<?php ob_start(); ?>

<section class="events-section">
    <div class="container">
        <div class="events-header">
            <?php if ($system_page['show_title'] ?? 1): ?>
            <h1 class="section-title"><?= e($system_page['title'] ?? $page_title ?? 'Events') ?></h1>
            <?php endif; ?>
            <?php if (!empty($system_page['content'])): ?><div class="page-content module-intro"><?= $system_page['content'] ?></div><?php endif; ?>

            <?php if (!empty($categories)): ?>
            <nav class="events-category-filter">
                <a href="/events" class="<?= ($current_category ?? '') === '' ? 'active' : '' ?>">All</a>
                <?php foreach ($categories as $cat): ?>
                <a href="/events/category/<?= e($cat['slug']) ?>"
                   class="<?= ($current_category ?? '') === $cat['slug'] ? 'active' : '' ?>">
                    <?= e($cat['name']) ?>
                </a>
                <?php endforeach; ?>
            </nav>
            <?php endif; ?>
        </div>

        <?php
        // Show featured banner only on the root listing (no category filter, first page)
        $showFeatured = ($current_category ?? '') === '' && ($page ?? 1) === 1 && !empty($featured);
        ?>

        <?php if ($showFeatured): ?>
        <div class="events-featured">
            <h2 class="events-featured-title">Featured Events</h2>
            <div class="events-featured-grid">
                <?php foreach ($featured as $feat): ?>
                <?php
                    $imgUrl = !empty($feat['media_path']) ? thumb_url($feat['media_path']) : null;
                    $statusClass = $feat['event_status'] !== 'scheduled' ? ' event-card--' . $feat['event_status'] : '';
                ?>
                <article class="event-card event-card--featured<?= $statusClass ?>">
                    <?php if ($imgUrl): ?>
                    <?= picture_tag($feat['media_path'], $feat['media_alt'] ?? $feat['title'], 'event-card-image') ?>
                    <?php endif; ?>
                    <div class="event-card-body">
                        <div class="event-card-meta">
                            <span class="event-date"><span class="meta-icon"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="4" width="14" height="14" rx="2"/><path d="M7 2v4M13 2v4M3 8h14"/></svg></span> <?= e(format_date($feat['start_date'])) ?></span>
                            <?php if (!empty($feat['start_time'])): ?>
                            <span class="event-time"><span class="meta-icon"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="10" cy="10" r="7.5"/><path d="M10 6v4l3 2"/></svg></span> <?= e(substr($feat['start_time'], 0, 5)) ?></span>
                            <?php endif; ?>
                            <?php if (!empty($feat['location'])): ?>
                            <span class="event-location"><span class="meta-icon"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M10 17s-5.5-4.5-5.5-8a5.5 5.5 0 0111 0c0 3.5-5.5 8-5.5 8z"/><circle cx="10" cy="9" r="1.5"/></svg></span> <?= e($feat['location']) ?></span>
                            <?php endif; ?>
                        </div>
                        <h3><a href="/events/<?= e($feat['slug']) ?>"><?= e($feat['title']) ?></a></h3>
                        <?php if (!empty($feat['excerpt'])): ?>
                        <p><?= e(str_truncate($feat['excerpt'], 120)) ?></p>
                        <?php endif; ?>
                        <?php if ($feat['event_status'] !== 'scheduled'): ?>
                        <span class="event-status-badge event-status-badge--<?= e($feat['event_status']) ?>">
                            <?= $feat['event_status'] === 'postponed' ? 'Postponed' : 'Cancelled' ?>
                        </span>
                        <?php endif; ?>
                        <a href="/events/<?= e($feat['slug']) ?>" class="event-card-link">Details →</a>
                    </div>
                </article>
                <?php endforeach; ?>
            </div>
        </div>
        <?php endif; ?>

        <?php if (empty($events)): ?>
        <p class="text-muted">No upcoming events<?= ($current_category ?? '') !== '' ? ' in this category' : '' ?>.</p>
        <?php else: ?>

        <?php if ($showFeatured): ?>
        <h2 class="events-all-title">All Upcoming Events</h2>
        <?php endif; ?>

        <div class="events-grid">
            <?php foreach ($events as $event): ?>
            <?php
                $imgUrl = !empty($event['media_path']) ? thumb_url($event['media_path']) : null;
                $statusClass = $event['event_status'] !== 'scheduled' ? ' event-card--' . $event['event_status'] : '';
            ?>
            <article class="event-card<?= $statusClass ?>">
                <?php if ($imgUrl): ?>
                <?= picture_tag($event['media_path'], $event['media_alt'] ?? $event['title'], 'event-card-image') ?>
                <?php endif; ?>
                <div class="event-card-body">
                    <?php if (!empty($event['category_name'])): ?>
                    <span class="event-category">
                        <a href="/events/category/<?= e($event['category_slug']) ?>"><?= e($event['category_name']) ?></a>
                    </span>
                    <?php endif; ?>
                    <h3><a href="/events/<?= e($event['slug']) ?>"><?= e($event['title']) ?></a></h3>
                    <div class="event-card-meta">
                        <span class="event-date"><span class="meta-icon"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="4" width="14" height="14" rx="2"/><path d="M7 2v4M13 2v4M3 8h14"/></svg></span> <?= e(format_date($event['start_date'])) ?></span>
                        <?php if (!empty($event['start_time'])): ?>
                        <span class="event-time"><span class="meta-icon"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="10" cy="10" r="7.5"/><path d="M10 6v4l3 2"/></svg></span> <?= e(substr($event['start_time'], 0, 5)) ?></span>
                        <?php endif; ?>
                        <?php if (!empty($event['location'])): ?>
                        <span class="event-location"><span class="meta-icon"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M10 17s-5.5-4.5-5.5-8a5.5 5.5 0 0111 0c0 3.5-5.5 8-5.5 8z"/><circle cx="10" cy="9" r="1.5"/></svg></span> <?= e($event['location']) ?></span>
                        <?php endif; ?>
                    </div>
                    <?php if (!empty($event['excerpt'])): ?>
                    <p><?= e(str_truncate($event['excerpt'], 110)) ?></p>
                    <?php endif; ?>
                    <?php if ($event['event_status'] !== 'scheduled'): ?>
                    <span class="event-status-badge event-status-badge--<?= e($event['event_status']) ?>">
                        <?= $event['event_status'] === 'postponed' ? 'Postponed' : 'Cancelled' ?>
                    </span>
                    <?php endif; ?>
                </div>
            </article>
            <?php endforeach; ?>
        </div>

        <?php if (($pages ?? 1) > 1): ?>
        <div class="pagination">
            <?php for ($p = 1; $p <= $pages; $p++): ?>
            <?php
                $catPart = ($current_category ?? '') !== '' ? '/category/' . $current_category : '';
                $pUrl = '/events' . $catPart . ($p > 1 ? '?page=' . $p : '');
            ?>
            <a href="<?= e($pUrl) ?>" class="pagination-btn <?= $p === ($page ?? 1) ? 'active' : '' ?>"><?= $p ?></a>
            <?php endfor; ?>
        </div>
        <?php endif; ?>

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

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