@php
    use App\Models\Backend\ContentArticle;
    $news = ContentArticle::with('translations')
        ->where('article_portal_category', 'redd-plus')
        ->where('article_category', 'NEWS')
        ->where('article_status', 'ACTIVE')
        ->orderBy('article_date', 'desc')
        ->orderBy('article_sorting')
        ->get();
@endphp
<style>
.page-hero{background:linear-gradient(135deg,var(--green-800),var(--green-900));padding:3rem 0;color:#fff;margin-bottom:0;}
.page-hero h1{font-weight:700;font-size:clamp(2rem,4vw,2.8rem);}
.page-hero p{font-size:1rem;font-weight:500;max-width:400px;opacity:.9;}
.news-section{padding:3rem 0;background:var(--cream);min-height:50vh;}
.news-card{border:1px solid #ece8db;border-radius:.75rem;overflow:hidden;background:#fff;height:100%;text-decoration:none;color:inherit;display:block;transition:box-shadow .2s,transform .2s;}
.news-card:hover{box-shadow:0 8px 24px rgba(46,74,53,.1);transform:translateY(-3px);}
.news-card-img{height:200px;background:var(--green-100);display:flex;align-items:center;justify-content:center;font-size:3rem;color:var(--green-200);}
.news-card-body{padding:1.25rem 1.5rem 1.5rem;}
.news-card-cat{display:inline-block;background:var(--green-100);color:var(--green-800);padding:.25rem .75rem;border-radius:50rem;font-size:.75rem;font-weight:600;margin-bottom:.75rem;}
.news-card h3{font-weight:700;font-size:1.05rem;color:var(--green-900);margin-bottom:.5rem;line-height:1.4;}
.news-card-date{font-size:.82rem;color:#8a9a8e;font-weight:500;}
.news-card p{font-size:.88rem;color:var(--ink);line-height:1.6;margin-top:.5rem;}
.footer-pages{padding:2rem 0 1.5rem;border-top:1px solid #ece8db;background:#fff;}
.footer-pages a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.85rem;display:inline-flex;align-items:center;gap:.5rem;}
.footer-pages a:hover{color:var(--green-800);}
.footer-pages .bi{color:var(--green-800);}
.f-divider{width:1px;height:26px;background:#cfc9b8;}
</style>

<div style="min-height:calc(100vh - 64px);background:#fff;">
  <header class="page-hero">
    <div class="container">
      <h1>News &amp; Updates</h1>
      <p>Latest updates, announcements and news from REDD+ Malaysia.</p>
    </div>
  </header>

  <div class="news-section">
    <div class="container">
      @if($news->count())
        <div class="row g-4">
          @foreach($news as $item)
            @php
              $t = $item->translations->first();
              $title = $t?->article_translation_title ?? 'Untitled';
              $excerpt = strip_tags($t?->article_translation_content ?? '');
              $excerpt = \Illuminate\Support\Str::limit($excerpt, 150);
              $catLabel = \App\Models\Backend\Ref::where('cat','ARTICLE_CAT')->where('code',$item->article_category)->value('descr') ?? $item->article_category;
              $date = $item->article_date ? \Carbon\Carbon::parse($item->article_date)->format('d M Y') : '';
            @endphp
            <div class="col-md-6 col-lg-4">
              <a href="/{{ request()->segment(1) }}/article?id={{ $item->article_code }}" class="news-card">
                <div class="news-card-img"><i class="bi bi-newspaper"></i></div>
                <div class="news-card-body">
                  <span class="news-card-cat">{{ $catLabel }}</span>
                  <h3>{{ $title }}</h3>
                  @if($date)<span class="news-card-date"><i class="bi bi-calendar3 me-1"></i>{{ $date }}</span>@endif
                  @if($excerpt)<p>{{ $excerpt }}</p>@endif
                </div>
              </a>
            </div>
          @endforeach
        </div>
      @else
        <div class="text-center py-5">
          <i class="bi bi-newspaper" style="font-size:3.5rem;color:var(--green-200);"></i>
          <h3 class="mt-3 fw-bold" style="color:var(--green-800);">Coming Soon</h3>
          <p style="color:#8a9a8e;font-size:1.05rem;">No news yet. Please check back later for updates.</p>
        </div>
      @endif
    </div>
  </div>

  

<style>
.footer-redd-article {
  background: url('/assets/redd-plus/faq_footer_bg.png') center bottom/cover no-repeat;
  padding: 4rem 0 2.5rem;
}
.footer-redd-article a {
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: .85rem;
}
.footer-redd-article a:hover { color: var(--green-800); }
.footer-redd-article .bi { color: var(--green-800); font-size: 1.1rem; }
.footer-redd-article .f-divider { width: 1px; height: 26px; background: #cfc9b8; }
</style>
    <footer class="footer-redd-article">
      <div class="container">
        <div class="d-flex flex-wrap align-items-center justify-content-center gap-4">
          <img src="/assets/redd-plus/logo.png" alt="REDD+ Malaysia" height="46">
          <span class="f-divider d-none d-md-inline-block"></span>
          <a href="https://redd.nres.gov.my"><i class="bi bi-globe2"></i> redd.nres.gov.my</a>
          <span class="f-divider d-none d-md-inline-block"></span>
          <a href="mailto:redd@nres.gov.my"><i class="bi bi-envelope"></i> redd@nres.gov.my</a>
          <span class="f-divider d-none d-md-inline-block"></span>
          <a href="tel:+60380008000"><i class="bi bi-telephone"></i> +603 8000 8000</a>
        </div>
      </div>
    </footer>
</div>