<?php
require_once __DIR__ . '/config.php';

// Fetch all parks
try {
    $stmt = $pdo->query("SELECT id, name, slug, location, image_path FROM parks ORDER BY name ASC");
    $parks = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    $parks = [];
}

$extra_head = '<link rel="stylesheet" href="/styles/park.css">';
require_once __DIR__ . '/includes/header.php';
?>

<main class="news-page">
    <section class="hero-news">
        <div class="hero-text">
            <h1 class="title-alt">Parks</h1>
        </div>
    </section>

    <section class="container py-5">

        <div class="row g-4">

            <!-- Static Universal UK card -->
            <div class="col-md-3 col-sm-6">
                <a href="/park/universal-uk" class="text-decoration-none text-dark">
                    <div class="card h-100 shadow-sm">
                        <img src="/assets/universal-uk-logo.jpg"
                             class="card-img-top park-img"
                             alt="Universal UK">
                        <div class="card-body text-center">
                            <h5 class="card-title mb-1" style="color:#000 !important;">
                                Universal UK
                            </h5>
                            <p class="text-muted small mb-0">
                                Bedford, England
                            </p>
                            <span class="badge mt-2" style="background:#262541; color:#fff!important; border-radius:5px; font-weight:600;">
                                In Development
                            </span>
                        </div>
                    </div>
                </a>
            </div>

            <?php if (!empty($parks)): ?>
                <?php foreach ($parks as $park): ?>
                    <div class="col-md-3 col-sm-6">
                        <a href="/park/<?= urlencode($park['slug']) ?>" class="text-decoration-none text-dark">
                            <div class="card h-100 shadow-sm">
                                <img src="/<?= htmlspecialchars($park['image_path'] ?? '/assets/default.jpg') ?>"
                                     class="card-img-top park-img"
                                     alt="<?= htmlspecialchars($park['name']) ?>">
                                <div class="card-body text-center">
                                    <h5 class="card-title mb-1" style="color:#000 !important;">
                                        <?= htmlspecialchars($park['name']) ?>
                                    </h5>

                                    <?php if (!empty($park['location'])): ?>
                                        <p class="text-muted small mb-0">
                                            <?= htmlspecialchars($park['location']) ?>
                                        </p>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </a>
                    </div>
                <?php endforeach; ?>
            <?php endif; ?>

        </div>

        <?php if (empty($parks)): ?>
            <p class="mt-4">No parks found.</p>
        <?php endif; ?>

    </section>
</main>

<?php require_once __DIR__ . '/includes/footer.php'; ?>