<?php
$l = $lang ?? 'fr';
$newsBase = ($l === 'fr') ? '/fr/actualites' : '/en/news';
?>

<section class="page-hero">
  <div class="container">
    <span class="section-label">QUAADRAA Group</span>
    <h1 class="page-hero-title"><?= $t('nav.news') ?></h1>
    <p class="page-hero-sub"><?= $t('meta.news_desc') ?></p>
  </div>
</section>

<section class="section news-list-section">
  <div class="container">

    <?php if (empty($news)): ?>
    <div class="empty-state">
      <span class="empty-icon" aria-hidden="true">◈</span>
      <p><?= ($l === 'fr') ? 'Aucune actualité pour le moment.' : 'No news yet.' ?></p>
    </div>
    <?php else: ?>

    <div class="news-list-grid">
      <?php foreach ($news as $i => $article): ?>
      <article class="news-list-card <?= ($i === 0) ? 'news-list-card--featured' : '' ?>" data-scroll-reveal>
        
        <div class="nlc-media">
          <?php if (!empty($article['cover_image'])): ?>
            <img src="<?= htmlspecialchars($article['cover_image']) ?>" 
                 alt="<?= htmlspecialchars($article['title']) ?>"
                 loading="lazy">
          <?php else: ?>
            <div class="nlc-placeholder"><span>◈</span></div>
          <?php endif; ?>
        </div>

        <div class="nlc-body">
          <div class="nlc-meta">
            <?php if (!empty($article['subsidiary_name'])): ?>
              <span class="nlc-tag"><?= htmlspecialchars($article['subsidiary_name']) ?></span>
            <?php endif; ?>
            <time class="nlc-date" datetime="<?= $article['published_at'] ?? '' ?>">
              <?php 
                $dateObj = strtotime($article['published_at'] ?? $article['created_at']);
                echo date(($l === 'fr') ? 'd/m/Y' : 'M d, Y', $dateObj);
              ?>
            </time>
          </div>

          <h2 class="nlc-title">
            <a href="<?= $newsBase ?>/<?= htmlspecialchars($article['slug']) ?>">
              <?= htmlspecialchars($article['title']) ?>
            </a>
          </h2>

          <p class="nlc-excerpt"><?= htmlspecialchars($article['excerpt']) ?></p>

          <a href="<?= $newsBase ?>/<?= htmlspecialchars($article['slug']) ?>" class="nlc-cta">
            <?= $t('read_more') ?>
            <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
              <path d="M5 12h14M12 5l7 7-7 7"/>
            </svg>
          </a>
        </div>
      </article>
      <?php endforeach; ?>
    </div>

    <?php if ($totalPages > 1): ?>
    <nav class="pagination" aria-label="Pagination">
      <?php if ($currentPage > 1): ?>
      <a href="?p=<?= $currentPage - 1 ?>" class="page-btn" aria-label="Page précédente">
        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
      </a>
      <?php endif; ?>

      <?php for ($i = 1; $i <= $totalPages; $i++): ?>
      <a href="?p=<?= $i ?>" class="page-btn <?= ($i === $currentPage) ? 'active' : '' ?>" aria-current="<?= ($i === $currentPage) ? 'page' : 'false' ?>">
        <?= $i ?>
      </a>
      <?php endfor; ?>

      <?php if ($currentPage < $totalPages): ?>
      <a href="?p=<?= $currentPage + 1 ?>" class="page-btn" aria-label="Page suivante">
        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
      </a>
      <?php endif; ?>
    </nav>
    <?php endif; ?>

    <?php endif; ?>
  </div>
</section>

<style>
.news-list-section { background: var(--c-black); }
.news-list-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.news-list-card--featured {
  grid-column: span 2;
  display: grid !important; 
  grid-template-columns: 1.2fr 1fr;
}
.news-list-card {
  background: var(--c-dark-2); 
  border: 1px solid var(--c-dark-3);
  display: flex; flex-direction: column;
  transition: border-color .3s var(--ease-out), transform .3s var(--ease-out);
  overflow: hidden;
}
.news-list-card:hover { 
  border-color: rgba(255, 206, 0, 0.3);
  transform: translateY(-4px); 
}
.nlc-media {
  height: 240px; overflow: hidden; background: var(--c-dark-3);
  flex-shrink: 0; position: relative;
}
.news-list-card--featured .nlc-media { height: 100% !important; min-height: 300px; }
.nlc-media img { 
  width: 100%; height: 100%; object-fit: cover; object-position: center; 
  transition: transform .6s var(--ease-out); 
}
.news-list-card:hover .nlc-media img { transform: scale(1.06); }
.nlc-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem; color: var(--c-gold); opacity: .3;
}
.nlc-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.nlc-meta { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.nlc-tag {
  font-family: var(--font-cond); font-size: .65rem; font-weight: 700; 
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--c-gold); border: 1px solid rgba(255, 206, 0, 0.3); padding: .15rem .5rem;
}
.nlc-date { font-size: .75rem; color: var(--c-grey-2); margin-left: auto; }
.nlc-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; line-height: 1.2; margin-bottom: .75rem; }
.news-list-card--featured .nlc-title { font-size: 1.8rem; }
.nlc-title a { color: var(--c-white); transition: color .2s; }
.nlc-title a:hover { color: var(--c-gold); }
.nlc-excerpt {
  font-size: .88rem; color: var(--c-grey-3); line-height: 1.6; margin-bottom: 1.5rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.nlc-cta {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-cond); font-size: .75rem; font-weight: 700; 
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-gold); transition: gap .2s; margin-top: auto;
}
.nlc-cta:hover { gap: .7rem; }
.pagination { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 4rem; }
.page-btn {
  min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-dark-3); color: var(--c-grey-3); font-weight: 600; transition: all .2s;
}
.page-btn:hover { border-color: var(--c-gold); color: var(--c-gold); }
.page-btn.active { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-black); }
.empty-state { text-align: center; padding: 6rem 2rem; color: var(--c-grey-2); }
.empty-icon { display: block; font-size: 3rem; color: var(--c-gold); opacity: .2; margin-bottom: 1rem; }

@media(max-width:900px){
  .news-list-grid { grid-template-columns: 1fr 1fr; }
  .news-list-card--featured { grid-column: span 2; grid-template-columns: 1fr; }
}
@media(max-width:600px){
  .news-list-grid { grid-template-columns: 1fr; }
  .news-list-card--featured { grid-column: span 1; }
}
</style>