<?php
$activePage = 'destinasi';
require_once 'config.php';
include 'includes/header.php';

// Fetch all destinations
try {
    $stmt = $pdo->query("SELECT * FROM countries");
    $destinations = $stmt->fetchAll();
} catch (Exception $e) {
    $destinations = [];
}
?>


  <!-- ============================================================
     DESTINATIONS HERO
============================================================ -->
  <section class="page-hero">
    <div class="page-hero-bg">
      <img src="https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?q=80&w=2070&auto=format&fit=crop"
        alt="Destinations Background" class="page-hero-img" />
      <div class="page-hero-overlay"></div>
    </div>
    <div class="page-hero-content">
      <h1 class="page-hero-title">Explore Our Destinations</h1>
    </div>
  </section>

  <!-- ============================================================
     DESTINATIONS GRID
============================================================ -->
  <section class="section" style="padding-top: 40px;">
    <div class="main-container">
      <div class="dest-page-grid">

        <?php foreach ($destinations as $dest): ?>
        <div class="dest-card" id="dc-<?= htmlspecialchars($dest['slug']) ?>">
          <div class="dc-img-wrap">
            <img src="<?= htmlspecialchars($dest['heroImg']) ?>" alt="<?= htmlspecialchars($dest['name']) ?>" class="dc-img" loading="lazy" />
          </div>
            <div class="dc-footer">
              <div class="dc-identity">
                <span class="dc-flag"><?= render_flag($dest['flag']) ?></span>
                <span class="dc-name"><?= htmlspecialchars($dest['name']) ?></span>
              </div>
              <a href="negara?country=<?= htmlspecialchars($dest['slug']) ?>" class="dc-btn" id="btn-trip-<?= htmlspecialchars($dest['slug']) ?>">Lihat Trip</a>
            </div>
        </div>
        <?php endforeach; ?>

</div>
    </div>
  </section>


  <?php include 'includes/footer.php'; ?>