<?php
error_reporting(1);
ini_set('display_errors', '1');
// public/index.php — Home page
require_once __DIR__ . '/includes/api.php';

// Fetch all we need in minimal queries
$hero     = api_news(['limit' => 1]);                           // featured hero
$side     = api_news(['limit' => 3, 'page' => 1]);             // side cards (will overlap hero, we offset below)
$small    = api_news(['limit' => 4]);                          // small column
$latest   = api_news(['limit' => 6]);                          // latest section
$sports   = api_news(['limit' => 4, 'category' => 'sport']);   // sports strip
// Also try 'sports' in case category stored differently
if (empty($sports)) $sports = api_news(['limit' => 4, 'category' => 'sports']);

// Slice one big fetch to avoid overlapping articles on the hero grid
$all  = api_news(['limit' => 18]);
$hero  = array_slice($all, 0, 1);
$side  = array_slice($all, 1, 3);
$small = array_slice($all, 4, 4);
$latest = array_slice($all, 8, 6);

$heroArt = $hero[0] ?? null;

$pageTitle  = 'NewsForge — Breaking News & Magazine';
$activePage = 'home';
require_once __DIR__ . '/includes/header.php';

?>

<main>

<!-- ═══ HERO SECTION ═══════════════════════════════════════════════════════ -->
<section class="hero-section">
  <div class="container">
    <div class="hero-grid">

      <!-- Main featured article -->
      <?php if ($heroArt): ?>
      <div class="hero-main"
           onclick="location.href='/public/article.php?id=<?= $heroArt['id'] ?>'"
           style="cursor:pointer">
        <div class="hero-img-wrap">
          <img src="<?= h(thumb($heroArt, 800, 500)) ?>"
               alt="<?= h($heroArt['title']) ?>" class="hero-img"
               onerror="this.src='https://picsum.photos/seed/<?= $heroArt['id'] ?>/800/500'">
          <div class="hero-overlay">
            <span class="cat-badge <?= cat_color($heroArt['category']) ?>">
              <?= strtoupper(h($heroArt['category'] ?? 'NEWS')) ?>
            </span>
            <h1 class="hero-title"><?= h($heroArt['title']) ?></h1>
            <div class="hero-meta">
              <span><?= h($heroArt['source_name'] ?? 'NewsForge') ?></span>
              <span class="meta-dot">•</span>
              <span><?= rel_time($heroArt['published_at'] ?? $heroArt['created_at']) ?></span>
            </div>
          </div>
        </div>
      </div>
      <?php endif; ?>

      <!-- Side articles -->
      <div class="hero-side">
        <?php foreach ($side as $art): ?>
        <article class="hero-side-card"
                 onclick="location.href='/public/article.php?id=<?= $art['id'] ?>'"
                 style="cursor:pointer">
          <img src="<?= h(thumb($art, 300, 200)) ?>"
               alt="<?= h($art['title']) ?>"
               onerror="this.src='https://picsum.photos/seed/<?= $art['id'] ?>/300/200'">
          <div>
            <span class="cat-badge <?= cat_color($art['category']) ?>">
              <?= strtoupper(h($art['category'] ?? 'NEWS')) ?>
            </span>
            <h3><?= h($art['title']) ?></h3>
            <div class="mini-meta">
              <span><?= rel_time($art['published_at'] ?? $art['created_at']) ?></span>
              <span> • <?= h($art['source_name'] ?? '') ?></span>
            </div>
          </div>
        </article>
        <?php endforeach; ?>

        <?php if (empty($side)): ?>
        <div style="padding:40px;text-align:center;color:var(--text-muted)">
          <p>No articles yet.</p>
          <a href="/admin/sources.php" style="color:var(--primary)">
            → Add a news source in the admin panel
          </a>
        </div>
        <?php endif; ?>
      </div>

      <!-- Small cards column -->
      <div class="hero-small">
        <?php foreach ($small as $art): ?>
        <article class="hero-small-card"
                 onclick="location.href='/public/article.php?id=<?= $art['id'] ?>'"
                 style="cursor:pointer">
          <span class="cat-badge <?= cat_color($art['category']) ?>">
            <?= strtoupper(h($art['category'] ?? 'NEWS')) ?>
          </span>
          <h4><?= h($art['title']) ?></h4>
          <span class="small-time"><?= rel_time($art['published_at'] ?? $art['created_at']) ?></span>
        </article>
        <?php endforeach; ?>
      </div>

    </div><!-- /.hero-grid -->
  </div>
</section>

<!-- ═══ LATEST NEWS + SIDEBAR ══════════════════════════════════════════════ -->
<section class="content-section">
  <div class="container">
    <div class="content-with-sidebar">
      <div class="main-content">

        <!-- Latest News -->
        <div class="section-header">
          <h2 class="section-title"><span>Latest News</span></h2>
          <a href="/public/category.php" class="see-all">See All →</a>
        </div>

        <div class="latest-grid">
          <?php foreach ($latest as $art): ?>
          <article class="latest-card"
                   onclick="location.href='/public/article.php?id=<?= $art['id'] ?>'"
                   style="cursor:pointer">
            <img src="<?= h(thumb($art, 400, 260)) ?>"
                 alt="<?= h($art['title']) ?>"
                 onerror="this.src='https://picsum.photos/seed/<?= $art['id'] ?>/400/260'">
            <div class="latest-body">
              <span class="cat-badge <?= cat_color($art['category']) ?>">
                <?= strtoupper(h($art['category'] ?? 'NEWS')) ?>
              </span>
              <h3><?= h($art['title']) ?></h3>
              <p><?= h(truncate($art['description'] ?? $art['content'] ?? '', 155)) ?></p>
              <div class="card-meta">
                <span><?= h($art['source_name'] ?? 'Staff') ?></span>
                <span class="meta-dot">•</span>
                <span><?= rel_time($art['published_at'] ?? $art['created_at']) ?></span>
                <span class="read-time">
                  <?= read_time($art['content'] ?? $art['description'] ?? '') ?> min read
                </span>
              </div>
            </div>
          </article>
          <?php endforeach; ?>

          <?php if (empty($latest)): ?>
          <div style="grid-column:1/-1;padding:60px 20px;text-align:center;color:var(--text-muted)">
            <div style="font-size:48px;margin-bottom:16px">📰</div>
            <h3>No articles yet</h3>
            <p style="margin-top:8px">
              <a href="/admin/sources.php" style="color:var(--primary)">
                Add sources in the admin panel
              </a>
              to start crawling news.
            </p>
          </div>
          <?php endif; ?>
        </div>

        <!-- Sports strip -->
        <?php if (!empty($sports)): ?>
        <div class="section-header" style="margin-top:40px">
          <h2 class="section-title"><span>⚽ Sports Highlights</span></h2>
          <a href="/public/category.php?cat=sport" class="see-all">See All →</a>
        </div>
        <div class="sports-strip">
          <?php foreach ($sports as $art): ?>
          <article class="strip-card"
                   onclick="location.href='/public/article.php?id=<?= $art['id'] ?>'"
                   style="cursor:pointer">
            <img src="<?= h(thumb($art, 280, 180)) ?>"
                 alt="<?= h($art['title']) ?>"
                 onerror="this.src='https://picsum.photos/seed/<?= $art['id'] ?>/280/180'">
            <span class="cat-badge orange">SPORT</span>
            <h4><?= h($art['title']) ?></h4>
            <span class="small-time"><?= rel_time($art['published_at'] ?? $art['created_at']) ?></span>
          </article>
          <?php endforeach; ?>
        </div>
        <?php endif; ?>

      </div><!-- /.main-content -->

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

    </div><!-- /.content-with-sidebar -->
  </div>
</section>

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