@php
    use App\Models\Backend\ContentArticle;
    use App\Models\Backend\Ref;

    $code = request()->query('id');
    $detailArticle = $code ? ContentArticle::with('translations')
        ->where('article_code', $code)
        ->where('article_status', 'ACTIVE')
        ->first() : null;
@endphp

@if($detailArticle)
    @php
        $t = $detailArticle->translations->first();
        $title = $t?->article_translation_title ?? 'Untitled';
        $content = $t?->article_translation_content ?? '';
        $catDescr = Ref::where('cat', 'ARTICLE_CAT')->where('code', $detailArticle->article_category)->value('descr') ?? $detailArticle->article_category;
        $date = $detailArticle->article_date ? \Carbon\Carbon::parse($detailArticle->article_date)->format('d M Y') : '';
        $isFullWidth = true;
    @endphp

    
<style>
.hero-article {
  background: url("/assets/redd-plus/about_hero_bg.png") center/cover no-repeat;
  min-height: 280px;
  display: flex;
  align-items: center;
}
.breadcrumb-redd { font-size: .8rem; font-weight: 600; }
.breadcrumb-redd a { color: #6c7a6e; text-decoration: none; }
.breadcrumb-redd a:hover { color: var(--green-800); }
.breadcrumb-redd .active { color: var(--green-800); }
.breadcrumb-redd .sep { color: #a9b3a9; margin: 0 .4rem; }
.hero-article h1 {
  color: var(--green-900); font-weight: 600;
  font-size: clamp(2rem, 4vw, 2.9rem);
}
.hero-article p { max-width: 480px; font-weight: 500; font-size: 1.05rem; }

.row-block { padding: 2.5rem 0; }
.row-block + .row-block { border-top: 1px solid #e8e4d8; }
.block-heading { color: var(--green-800); font-weight: 700; font-size: 1.35rem; }
.lead-icon {
  width: 84px; height: 84px; background: var(--green-100);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem; color: var(--green-800);
}
.lead-icon.gold { background: var(--gold-100); color: var(--gold); }
.lead-icon.small { width: 56px; height: 56px; font-size: 1.4rem; }
.link-learn {
  color: var(--green-900); font-weight: 700; text-decoration: none;
  border-bottom: 2px solid var(--gold); padding-bottom: .15rem;
}
.link-learn:hover { color: var(--gold); }
.info-card {
  background: var(--card-bg); border: 1px solid #ece8db;
  border-radius: .75rem; text-align: center;
  padding: 1.25rem .9rem; height: 100%;
  transition: transform .2s ease, box-shadow .2s ease;
}
.info-card:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(46,74,53,.10); }
.info-icon {
  width: 72px; height: 72px; margin: 0 auto .9rem;
  background: #fff; border: 1px solid var(--green-200); border-radius: 1rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; color: var(--green-700);
}
.info-card p { margin: 0; font-weight: 600; color: var(--ink); font-size: .85rem; line-height: 1.35; }
</style>
    @if($isFullWidth)
        {!! \Illuminate\Support\Facades\Blade::render($content, ['siteSlug' => $siteSlug ?? 'redd-plus']) !!}
    @else
    <style>
    .article-detail { padding: 60px 0 80px; background: var(--cream); min-height: 60vh; }
    .article-breadcrumb { font-size: .82rem; color: #8a9a8e; margin-bottom: 30px; display: flex; align-items: center; gap: 8px; }
    .article-breadcrumb a { color: var(--green-800); text-decoration: none; }
    .article-breadcrumb a:hover { color: var(--gold); }
    .article-breadcrumb .sep { color: #cfc9b8; }
    .article-detail-content { max-width: 800px; margin: 0 auto; }
    .article-meta { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
    .article-meta .cat { background: var(--green-100); color: var(--green-800); padding: 6px 14px; border-radius: 50rem; font-size: .75rem; font-weight: 600; }
    .article-meta .date { color: #8a9a8e; font-size: .8rem; }
    .article-detail-title { font-size: 2rem; font-weight: 700; color: var(--green-900); line-height: 1.3; margin: 0 0 30px; }
    .article-body { color: var(--ink); font-size: 1.05rem; line-height: 1.9; }
    .article-body p { margin-bottom: 1.2rem; }
    .btn-back { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: var(--green-800); color: #fff; border-radius: 10px; font-size: .85rem; font-weight: 500; text-decoration: none; transition: all .25s; margin-top: 40px; }
    .btn-back:hover { background: var(--green-900); color: #fff; transform: translateX(-3px); }
    </style>

    <section class="article-detail">
        <div class="container">
            <div class="article-breadcrumb">
                <a href="/{{ $siteSlug }}">Home</a>
                <span class="sep">/</span>
                <a href="/{{ $siteSlug }}/article">Articles</a>
                <span class="sep">/</span>
                <span>{{ $title }}</span>
            </div>

            <div class="article-detail-content">
                <div class="article-meta">
                    <span class="cat">{{ $catDescr }}</span>
                    @if($date)
                        <span class="date"><i class="bi bi-calendar3 me-1"></i>{{ $date }}</span>
                    @endif
                </div>

                <h1 class="article-detail-title">{{ $title }}</h1>

                <div class="article-body">{!! $content !!}</div>

                <a href="/{{ $siteSlug }}/article" class="btn-back"><i class="bi bi-arrow-left"></i> Back to Articles</a>
            </div>
        </div>
    </section>
    @endif

    <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 mt-4">
      <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>

@else
@php
    $articles = ContentArticle::with('translations')
        ->where('article_portal_category', 'redd-plus')
        ->where('article_status', 'ACTIVE')
        ->orderBy('article_sorting')
        ->orderBy('article_date', 'desc')
        ->get();

    $categories = $articles->pluck('article_category')->unique()->values()->toArray();

    $catLabels = Ref::where('cat', 'ARTICLE_CAT')
        ->whereIn('code', $categories)
        ->pluck('descr', 'code')
        ->toArray();
@endphp

<style>
.article-hero {
  background: linear-gradient(135deg, var(--green-800) 0%, var(--green-900) 100%);
  padding: 4rem 0 4.5rem;
  color: #fff;
}
.article-hero h1 {
  font-weight: 700;
  font-size: clamp(2.3rem, 4.5vw, 3.2rem);
  line-height: 1.15;
}
.article-hero p {
  font-size: 1.1rem;
  font-weight: 500;
  max-width: 400px;
  opacity: .85;
}

.article-card {
  background: #fff;
  border: 1px solid #e8e4d8;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(46,74,53,.05);
  transition: all .2s ease;
  text-decoration: none;
  color: inherit;
  display: block;
}
.article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(46,74,53,.12);
  border-color: var(--green-200);
}
.article-card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.article-card-body {
  padding: 1.25rem 1.5rem 1.5rem;
}
.article-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;
}
.article-card-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--green-900);
  margin-bottom: .5rem;
  line-height: 1.4;
}
.article-card-date {
  font-size: .82rem;
  color: #8a9a8e;
  font-weight: 500;
}
.article-card-excerpt {
  font-size: .9rem;
  color: var(--ink);
  line-height: 1.6;
  margin-top: .5rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-cat-pills .cat-pill {
  border: 1px solid #e2ddd0;
  background: #fff;
  color: var(--green-800);
  border-radius: .6rem;
  padding: .55rem 1.4rem;
  font-weight: 600;
  font-size: .92rem;
  transition: all .15s ease;
  cursor: pointer;
}
.article-cat-pills .cat-pill:hover {
  border-color: var(--green-800);
  color: var(--green-900);
}
.article-cat-pills .cat-pill.active {
  background: var(--green-800);
  border-color: var(--green-800);
  color: #fff;
  box-shadow: 0 6px 14px rgba(46,74,53,.25);
}

.no-articles {
  text-align: center;
  padding: 4rem 2rem;
  color: #8a9a8e;
}
.no-articles i {
  font-size: 3rem;
  margin-bottom: 1rem;
  display: block;
  color: var(--green-200);
}
</style>

<header class="article-hero">
  <div class="container">
    <h1>Articles &amp; News</h1>
    <p class="mt-3">Latest updates, publications and news from REDD+ Malaysia.</p>
  </div>
</header>

<main class="container py-5" style="max-width:1100px;">

  <div class="d-flex flex-wrap gap-2 mb-4 article-cat-pills" role="tablist">
    <button class="cat-pill active" data-cat="all">All</button>
    @foreach($categories as $cat)
      <button class="cat-pill" data-cat="{{ $cat }}">
        {{ $catLabels[$cat] ?? $cat }}
      </button>
    @endforeach
  </div>

  @if($articles->count())
  <div class="row g-4" id="articleGrid">
    @foreach($articles as $item)
      @php
        $t = $item->translations->first();
        $itemTitle = $t?->article_translation_title ?? 'Untitled';
        $excerpt = strip_tags($t?->article_translation_content ?? '');
        $excerpt = \Illuminate\Support\Str::limit($excerpt, 150);
        $itemCatLabel = $catLabels[$item->article_category] ?? $item->article_category;
        $itemDate = $item->article_date ? \Carbon\Carbon::parse($item->article_date)->format('d M Y') : '';
      @endphp
      <div class="col-md-6 col-lg-4 article-item" data-cat="{{ $item->article_category }}">
        <a href="/{{ $siteSlug }}/article?id={{ $item->article_code }}" class="article-card">
          @if($item->article_image)
            <img src="{{ image_url($item->article_image) }}" alt="{{ $itemTitle }}" class="article-card-img">
          @else
            <div class="article-card-img" style="background:var(--green-100);display:flex;align-items:center;justify-content:center;">
              <i class="bi bi-file-earmark-text" style="font-size:2.5rem;color:var(--green-200);"></i>
            </div>
          @endif
          <div class="article-card-body">
            <span class="article-card-cat">{{ $itemCatLabel }}</span>
            <h3 class="article-card-title">{{ $itemTitle }}</h3>
            <span class="article-card-date"><i class="bi bi-calendar3 me-1"></i>{{ $itemDate }}</span>
            @if($excerpt)
              <p class="article-card-excerpt">{{ $excerpt }}</p>
            @endif
          </div>
        </a>
      </div>
    @endforeach
  </div>
  @else
    <div class="no-articles">
      <i class="bi bi-journal-text"></i>
      <h4>No articles found</h4>
      <p>Check back later for updates.</p>
    </div>
  @endif
</main>

<script>
const pills = document.querySelectorAll('.article-cat-pills .cat-pill');
const items = document.querySelectorAll('.article-item');

pills.forEach(p => p.addEventListener('click', () => {
  pills.forEach(x => x.classList.remove('active'));
  p.classList.add('active');
  const cat = p.dataset.cat;
  items.forEach(item => {
    item.classList.toggle('d-none', cat !== 'all' && item.dataset.cat !== cat);
  });
}));
</script>
@endif