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

// ----------------------
// TAG COLOURS FROM DB
// ----------------------
$tagsStmt = $pdo->query("SELECT name, color FROM tags");
$tagsRaw = $tagsStmt->fetchAll(PDO::FETCH_ASSOC);

$tagColors = [];
foreach ($tagsRaw as $tag) {
    $tagColors[strtolower(trim($tag['name']))] = $tag['color'];
}

// ----------------------
// MAIN FEATURED (1)
// ----------------------
$featuredStmt = $pdo->query("
    SELECT * FROM posts 
    WHERE featured = 1
    AND post_location != 5
    AND status = 'published'
    ORDER BY created_at DESC 
    LIMIT 1
");
$featuredPost = $featuredStmt->fetch(PDO::FETCH_ASSOC);

// ----------------------
// SIDE POSTS (LATEST)
// ----------------------
$sideStmt = $pdo->query("
    SELECT * FROM posts 
    WHERE featured = 0
    AND post_location != 'tickets'
    AND posts.status = 'published'
    ORDER BY created_at DESC 
    LIMIT 4
");
$sidePosts = $sideStmt->fetchAll(PDO::FETCH_ASSOC);

// ----------------------
// LATEST POSTS (skip first 4)
// ----------------------
$latestStmt = $pdo->query("
    SELECT * FROM posts 
    WHERE featured = 0
    AND post_location != 'tickets'
    AND posts.status = 'published'
    ORDER BY created_at DESC 
    LIMIT 6 OFFSET 4
");
$latestPosts = $latestStmt->fetchAll(PDO::FETCH_ASSOC);

// ----------------------
// GUIDES
// ----------------------
$guidesStmt = $pdo->query("
    SELECT * FROM posts 
    WHERE post_location = 'guide'
    AND posts.status = 'published'
    ORDER BY created_at DESC 
    LIMIT 4
");
$guidesPosts = $guidesStmt->fetchAll(PDO::FETCH_ASSOC);

include __DIR__ . '/includes/header.php';
?>

<main>

<!-- HERO -->
<section class="hero carousel slide carousel-fade" id="heroCarousel" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
<img 
  src="/assets/hero.jpg" 
  class="d-block w-100 hero-bg"
  fetchpriority="high"
  loading="eager"
  decoding="async"
  width="1600"
  height="900"
  alt="ThrillSense hero image">
      <div class="gradient-overlay"></div>
      <div class="carousel-caption hero-content">
        <h1>Your Ultimate Adventure Starts Here</h1>
      </div>
    </div>
  </div>
</section>

<!-- FEATURED -->
<section class="featured py-5">
  <div class="container">
    <h1 class="mb-4 gradient-highlight"><span>Latest</span></h1>
    <div class="row gx-4">

      <!-- MAIN FEATURE -->
      <?php if (!empty($featuredPost)): ?>
      <div class="col-lg-6 mb-4">
<a href="/<?php echo htmlspecialchars($featuredPost['post_location']); ?>/<?php echo $featuredPost['slug']; ?>" class="featured-main overflow-hidden d-block position-relative text-white text-decoration-none" style="border-radius: 12px;">
          
          <img src="/<?php echo $featuredPost['image_path']; ?>" class="card-img-top" style="width:100%; object-fit:cover; filter:brightness(65%);">

          <span class="badge bg-danger position-absolute" style="top:15px; left:15px; color: #FFF !important;">FEATURED</span>

          <div class="position-absolute p-4" style="bottom:0; width:100%;">
            <h3 class="card-title mb-2"><?php echo htmlspecialchars($featuredPost['title']); ?></h3>
            <p class="date mb-1"><?php echo date('M j, Y', strtotime($featuredPost['created_at'])); ?></p>
            <p class="card-text hidden-mobile"><?php echo htmlspecialchars($featuredPost['tagline'] ?? ''); ?></p>
          </div>
        </a>
      </div>
      <?php endif; ?>

<!-- SIDE POSTS -->
<div class="col-lg-6">
  <div class="row row-cols-1 row-cols-md-2 g-4">
    <?php foreach ($sidePosts as $post): ?>

      <?php
        $locationRaw = strtolower(trim($post['post_location']));

        $locationMap = [
          'guide' => 'guides',
          'news'  => 'news',
          'review' => 'reviews'
        ];

        $tagKey = $locationMap[$locationRaw] ?? $locationRaw;

        $locationText = ucfirst($locationRaw);
        $locationColor = $tagColors[$tagKey] ?? '#6c757d';
      ?>

      <div class="col">
        <div class="card sm-card text-white overflow-hidden">
          
          <img src="/<?php echo $post['image_path']; ?>" class="card-img">

          <div class="card-img-overlay d-flex flex-column justify-content-between p-2 overlay-gradient">
            
            <!-- TOP: LOCATION PILL -->
            <div>
              <span 
                class="badge rounded-pill text-white text-uppercase" 
                style="background-color:<?php echo $locationColor; ?>; font-size:0.7rem;">
                <?php echo htmlspecialchars($locationText); ?>
              </span>
            </div>

            <!-- BOTTOM -->
            <div>
              <h5 class="card-title mb-1">
                <?php echo htmlspecialchars($post['title']); ?>
              </h5>
              <p class="date mb-0 color-white">
                <?php echo date('M j, Y', strtotime($post['created_at'])); ?>
              </p>
            </div>

          </div>

          <a href="/<?php echo htmlspecialchars($post['post_location']); ?>/<?php echo $post['slug']; ?>" class="stretched-link"></a>

        </div>
      </div>

    <?php endforeach; ?>
  </div>
</div>
</div>

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

<div class="section-spacer"></div>

<!-- LATEST -->
<section class="featured py-5">
  <div class="container">
    <h1 class="mb-4 gradient-highlight-blue"><span>Explore</span></h1>

    <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-4">
      <?php foreach ($latestPosts as $post): ?>
        <div class="col">
          <a href="/news/<?php echo $post['slug']; ?>" class="text-decoration-none text-dark">
            <div class="card h-100 shadow-sm">
              <img src="/<?php echo $post['image_path']; ?>" class="card-img-top" style="object-fit:cover; height:200px;">
              <div class="card-body d-flex flex-column position-relative">
                
                <p class="text-muted text-date fs-6 mb-2">
                  <?php echo date('M j, Y', strtotime($post['created_at'])); ?>
                </p>

                <h5 class="card-title title-alt">
                  <?php echo htmlspecialchars($post['title']); ?>
                </h5>

                <p class="card-text text-alt">
                  <?php echo htmlspecialchars($post['tagline'] ?? ''); ?>
                </p>

                <!-- TAGS -->
                <?php if (!empty($post['tags'])): ?>
                <div class="mt-2 d-flex flex-wrap gap-1">
                  <?php foreach (explode(',', $post['tags']) as $tag): 
                      $tagName = trim($tag);
                      $tagKey = strtolower($tagName);
                      $color = $tagColors[$tagKey] ?? '#0d6efd';
                  ?>
                    <span class="badge rounded-pill text-white" style="background-color:<?php echo $color; ?>;">
                      <?php echo $tagName; ?>
                    </span>
                  <?php endforeach; ?>
                </div>
                <?php endif; ?>

                <span class="stretched-link"></span>

              </div>
            </div>
          </a>
        </div>
      <?php endforeach; ?>
    </div>

  </div>
</section>

<div class="section-spacer"></div>

<!-- GUIDES -->
<section class="featured py-5">
  <div class="container">
    <h1 class="mb-4 gradient-highlight-red"><span>Guides</span></h1>

    <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-4">
      <?php foreach ($guidesPosts as $post): ?>
        <div class="col">
          <a href="/guide/<?php echo $post['slug']; ?>" class="text-decoration-none text-dark">
            <div class="card h-100 shadow-sm">
              
              <img src="/<?php echo $post['image_path']; ?>" class="card-img-top" style="object-fit:cover; height:200px;">

              <div class="card-body d-flex flex-column position-relative">

                <h5 class="card-title title-alt">
                  <?php echo htmlspecialchars($post['title']); ?>
                </h5>

                <p class="card-text text-alt mb-2">
                  <?php echo htmlspecialchars($post['tagline'] ?? ''); ?>
                </p>

                <!-- TAGS -->
                <?php if (!empty($post['tags'])): ?>
                <div class="mt-2 d-flex flex-wrap gap-1">
                  <?php foreach (explode(',', $post['tags']) as $tag): 
                      $tagName = trim($tag);
                      $tagKey = strtolower($tagName);
                      $color = $tagColors[$tagKey] ?? '#ff5f6d';
                  ?>
                    <span class="badge rounded-pill text-white" style="background-color:<?php echo $color; ?>;">
                      <?php echo $tagName; ?>
                    </span>
                  <?php endforeach; ?>
                </div>
                <?php endif; ?>

                <span class="stretched-link"></span>

              </div>
            </div>
          </a>
        </div>
      <?php endforeach; ?>
    </div>

  </div>
</section>

</main>

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