<%- include('partials/header') %>

<!-- HERO BANNER -->
<section style="background: linear-gradient(135deg, var(--primary-navy-dark) 0%, var(--primary-navy) 100%); color: #FFFFFF; padding: 4rem 0 3rem 0;">
  <div class="container text-center">
    <span class="section-tag" style="background: rgba(255,255,255,0.1); color: var(--accent-gold);"><i class="fa-solid fa-bullhorn"></i> <%= t.berita_page.tag %></span>
    <h1 style="font-size: 2.75rem; color: #FFFFFF; margin-top: 0.5rem;"><%= t.berita_page.title %></h1>
    <p style="font-size: 1.1rem; color: rgba(255,255,255,0.8); max-width: 700px; margin: 0.75rem auto 0 auto;">
      <%= t.berita_page.desc %>
    </p>
  </div>
</section>

<!-- FILTER & SEARCH BAR -->
<section class="section-padding">
  <div class="container">
    <div class="filter-bar">
      <div class="search-box">
        <i class="fa-solid fa-magnifying-glass"></i>
        <input type="text" id="newsSearchInput" placeholder="<%= t.berita_page.search_placeholder %>" value="<%= searchQuery %>">
      </div>

      <div class="category-filter">
        <button class="cat-btn <%= activeCategory === 'semua' ? 'active' : '' %>" data-category="semua"><%= t.berita_page.filter_all %></button>
        <button class="cat-btn <%= activeCategory === 'akademik' ? 'active' : '' %>" data-category="akademik"><%= t.berita_page.filter_akademik %></button>
        <button class="cat-btn <%= activeCategory === 'prestasi' ? 'active' : '' %>" data-category="prestasi"><%= t.berita_page.filter_prestasi %></button>
        <button class="cat-btn <%= activeCategory === 'ekstrakurikuler' ? 'active' : '' %>" data-category="ekstrakurikuler"><%= t.berita_page.filter_ekskul %></button>
        <button class="cat-btn <%= activeCategory === 'kegiatan' ? 'active' : '' %>" data-category="kegiatan"><%= t.berita_page.filter_kegiatan %></button>
      </div>
    </div>

    <!-- NEWS GRID LISTING -->
    <div class="news-grid" id="newsGridContainer">
      <% if (newsList.length === 0) { %>
        <div style="grid-column: 1 / -1; text-align: center; padding: 4rem 1rem;">
          <i class="fa-solid fa-folder-open text-muted" style="font-size: 3.5rem; margin-bottom: 1rem;"></i>
          <h3><%= t.berita_page.no_news_title %></h3>
          <p style="color: var(--text-muted);"><%= t.berita_page.no_news_desc %></p>
        </div>
      <% } else { %>
        <% newsList.forEach(item => { %>
          <div class="news-card news-card-item" data-category="<%= item.category %>">
            <div class="news-img">
              <img src="<%= item.image %>" alt="<%= item.title %>">
              <span class="news-category-badge"><%= item.category %></span>
            </div>
            <div class="news-body">
              <div class="news-meta">
                <span><i class="fa-solid fa-calendar text-gold"></i> <%= item.date %></span>
                <span><i class="fa-solid fa-user text-gold"></i> <%= item.author %></span>
              </div>
              <h3 class="news-title"><%= currentLang === 'en' && item.title_en ? item.title_en : item.title %></h3>
              <p class="news-summary"><%= currentLang === 'en' && item.summary_en ? item.summary_en : item.summary %></p>
              <a href="/berita/<%= item.id %>" class="news-link"><%= t.menu.berita_btn_more || 'Baca Selengkapnya' %> <i class="fa-solid fa-arrow-right"></i></a>
            </div>
          </div>
        <% }); %>
      <% } %>
    </div>
  </div>
</section>

<script src="/js/search-filter.js"></script>

<%- include('partials/footer') %>
