<?php
require_once __DIR__ . '/config.php';
include 'includes/header.php';

// Fetch posts (ordered newest first)
try {
    $stmtNews = $pdo->prepare("SELECT * FROM posts WHERE post_location = :loc AND posts.status = 'published' ORDER BY created_at DESC");
    $stmtNews->execute(['loc' => 'guide']);
    $newsPosts = $stmtNews->fetchAll(PDO::FETCH_ASSOC) ?: [];
} catch (PDOException $e) {
    // Optionally log $e->getMessage() somewhere instead of echoing on production
    $newsPosts = [];
}

function formatDate($dateStr) {
    if (empty($dateStr)) return '';
    $ts = strtotime($dateStr);
    if ($ts === false) return htmlspecialchars($dateStr);
    return date('M j, Y', $ts);
}

function imageUrlForPath(?string $path) : string {
    // return a normalized URL for images; adjust default path to your actual default image
    $default = '/assets/images/default.jpg';
    $path = trim((string)$path);
    if ($path === '') return $default;
    // If stored path is already absolute (starts with / or http) respect it
    if (preg_match('#^(https?://|/)#i', $path)) {
        return $path;
    }
    // otherwise prefix with a slash
    return '/' . ltrim($path, '/');
}

// Prepare slices (non-destructive)
$lead = $newsPosts[0] ?? null;
$sideStories = array_slice($newsPosts, 1, 4);
$otherPosts = array_slice($newsPosts, 5);
?>

<main class="news-page">
  <!-- News Hero (page-scoped class .hero-news used so global .hero is untouched) -->
  <section class="hero-news">
    <div class="hero-text">
      <h1 class="title-alt">Guides</h1>
    </div>
  </section>

  <!-- Featured Layout -->
  <section class="section py-5">
    <div class="container">
      <div class="section-heading mb-4">
        <h2 class="gradient-highlight"><span>Latest</span></h2>
      </div>

      <?php if (empty($newsPosts)): ?>
        <p>No news posts available.</p>
      <?php else: ?>
        <div class="row g-4">
          <!-- Lead story -->
          <?php if ($lead): ?>
            <div class="col-lg-8">
              <guide class="featured-card lead-story card bg-dark border-0">
                <a href="/guide/<?= rawurlencode($lead['slug'] ?? '') ?>" class="text-decoration-none">
                  <div class="card-img-top">
                    <img src="<?= htmlspecialchars(imageUrlForPath($lead['image_path'] ?? '')) ?>"
                         alt="<?= htmlspecialchars($lead['title'] ?? '') ?>"
                         class="lead-img w-100">
                  </div>
                  <div class="card-body">
                    <h2 class="card-title news-title"><?= htmlspecialchars($lead['title'] ?? '') ?></h2>
                  </div>
                </a>
              </guide>
            </div>
          <?php endif; ?>

          <!-- Side smaller featured -->
          <div class="col-lg-4 d-flex flex-column gap-3">
            <?php if (!empty($sideStories)): ?>
              <?php foreach ($sideStories as $post): ?>
                <guide class="featured-card side-story card bg-dark border-0">
                  <a href="/guide/<?= rawurlencode($post['slug'] ?? '') ?>" class="text-decoration-none d-flex align-items-start gap-3">
                    <div class="side-thumb">
                      <img src="<?= htmlspecialchars(imageUrlForPath($post['image_path'] ?? '')) ?>"
                           alt="<?= htmlspecialchars($post['title'] ?? '') ?>"
                           class="side-img w-100">
                    </div>
                    <div class="card-body p-2">
                      <p class="text-date small mb-1"><?= formatDate($post['created_at'] ?? '') ?></p>
                      <h5 class="card-title news-title mb-1"><?= htmlspecialchars($post['title'] ?? '') ?></h5>
                    </div>
                  </a>
                </guide>
              <?php endforeach; ?>
            <?php else: ?>
              <!-- Optional: show nothing or a small placeholder if no side stories exist -->
            <?php endif; ?>
          </div>
        </div>
      <?php endif; ?>
    </div>
  </section>

  <!-- Latest backed heading -->
  <section class="section py-4">
    <div class="container">
      <div class="section-heading mb-4">
        <h2 class="gradient-highlight-red"><span>All Guides</span></h2>
      </div>

      <!-- Simple News List (remaining posts after lead + side) -->
      <div class="row g-4">
        <?php if (empty($otherPosts)): ?>
          <div class="col-12"><p>No other posts yet.</p></div>
        <?php else: ?>
          <?php foreach ($otherPosts as $post): ?>
            <div class="col-md-6 d-flex news-list-item">
                <a href="/guide/<?= rawurlencode($post['slug'] ?? '') ?>" class="d-flex text-decoration-none w-100 align-items-center gap-3" style='background:#e4e4e4'>
                  <img src="<?= htmlspecialchars(imageUrlForPath($post['image_path'] ?? '')) ?>" class="list-thumb" alt="<?= htmlspecialchars($post['title'] ?? '') ?>"
                  class="side-img w-100 h-100">
                  <div>
                    <h6 class="mb-1"><span class="text-black"><?= htmlspecialchars($post['title'] ?? '') ?></span></h6>
                    <p class="small text-muted mb-1"><?= formatDate($post['created_at'] ?? '') ?></p>
                  </div>
                </a>
            </div>
          <?php endforeach; ?>
        <?php endif; ?>
      </div>
    </div>
  </section>
</main>

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

