@php
    use App\Models\Backend\ContentArticle;

    $faqs = ContentArticle::where('article_category', 'FAQ')
        ->where('article_status', 'ACTIVE')
        ->with('translations')
        ->orderBy('article_sorting')
        ->get();

    $categories = $faqs->pluck('article_subcategory')->unique()->values()->toArray();

    $catLabels = [
        'GENERAL'       => 'General',
        'IMPLEMENTATION'=> 'Implementation',
        'SIS'           => 'SIS & Safeguards',
        'FINANCE'       => 'Finance',
        'REPORTS'       => 'Reports',
    ];
@endphp

<style>
/* ---------- Hero ---------- */
.hero-faq{
  background:url('/assets/redd-plus/faq_hero_bg.png') center/cover no-repeat;
  padding:4rem 0 4.5rem;
}
.hero-faq h1{
  color:var(--green-800);font-weight:700;
  font-size:clamp(2.3rem,4.5vw,3.2rem);line-height:1.15;
}
.hero-faq p{font-size:1.1rem;font-weight:500;max-width:360px;}
.faq-search{
  background:#fff;border:1px solid #e2ddd0;border-radius:.75rem;
  display:flex;align-items:center;
  max-width:380px;padding:.35rem .5rem .35rem 1rem;
  box-shadow:0 6px 18px rgba(46,74,53,.06);
}
.faq-search input{
  border:0;outline:0;flex:1;font-size:.95rem;font-weight:500;
  color:var(--ink);background:transparent;padding:.5rem 0;
}
.faq-search input::placeholder{color:#9aa59c;}
.faq-search .bi{color:var(--green-800);font-size:1.2rem;padding:.4rem .6rem;}

/* ---------- Category 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;
}
.cat-pill:hover{border-color:var(--green-800);color:var(--green-900);}
.cat-pill.active{
  background:var(--green-800);border-color:var(--green-800);color:#fff;
  box-shadow:0 6px 14px rgba(46,74,53,.25);
}

/* ---------- Accordion ---------- */
.accordion-faq .accordion-item{
  border:0;border-radius:.75rem!important;margin-bottom:1rem;
  box-shadow:0 4px 14px rgba(46,74,53,.05);
  overflow:hidden;
}
.accordion-faq .accordion-button{
  font-family:'Quicksand',sans-serif;
  font-weight:700;color:var(--green-900);font-size:1rem;
  background:#fff;padding:1.25rem 1.5rem;
  box-shadow:none;
}
.accordion-faq .accordion-button:not(.collapsed){
  background:var(--green-100);color:var(--green-900);
}
.accordion-faq .accordion-button:focus{box-shadow:0 0 0 .2rem rgba(46,74,53,.15);}
.accordion-faq .accordion-body{
  background:#fff;font-weight:500;font-size:.95rem;line-height:1.7;
  padding:1.25rem 1.5rem;
}

/* ---------- Footer ---------- */
.footer-faq{
  background:url('/assets/redd-plus/faq_footer_bg.png') center bottom/cover no-repeat;
  padding:6rem 0 3rem;
  margin-top:2rem;
}
.footer-faq a{
  color:var(--ink);text-decoration:none;font-weight:600;font-size:.9rem;
  display:inline-flex;align-items:center;gap:.55rem;
}
.footer-faq a:hover{color:var(--green-800);}
.footer-faq .bi{color:var(--green-900);font-size:1.1rem;}
</style>

<!-- ===== Hero ===== -->
<header class="hero-faq">
  <div class="container">
    <div class="row">
      <div class="col-lg-6">
        <h1>Frequently Asked<br>Questions</h1>
        <p class="mt-3 mb-4">Find answers to common questions about REDD+ Malaysia.</p>
        <div class="faq-search">
          <input type="search" id="faqSearch" placeholder="Search questions..." aria-label="Search questions">
          <i class="bi bi-search"></i>
        </div>
      </div>
    </div>
  </div>
</header>

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

  <!-- Category pills -->
  <div class="d-flex flex-wrap gap-2 mb-4" role="tablist" aria-label="FAQ categories">
    @foreach($categories as $cat)
      <button class="cat-pill{{ $loop->first ? ' active' : '' }}" data-cat="{{ $cat }}">
        {!! $catLabels[$cat] ?? ucfirst($cat) !!}
      </button>
    @endforeach
  </div>

  <div class="accordion accordion-faq" id="faqAccordion">
    @foreach($faqs as $faq)
      @php
        $title = $faq->translations->first()?->article_translation_title ?? 'Untitled';
        $body  = $faq->translations->first()?->article_translation_content ?? '';
        $isFirstCat = ($faq->article_subcategory === $categories[0]);
      @endphp
      <div class="accordion-item{{ $isFirstCat ? '' : ' d-none' }}" data-cat="{{ $faq->article_subcategory }}">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq{{ $faq->article_id }}">
            {{ $title }}
          </button>
        </h2>
        <div id="faq{{ $faq->article_id }}" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
          <div class="accordion-body">{!! $body !!}</div>
        </div>
      </div>
    @endforeach
  </div>

  <p id="noResults" class="text-center fw-semibold mt-4 d-none">No questions match your search. Try a different keyword or category.</p>
</main>

<!-- ===== Footer ===== -->

<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>
</footer>

<script>
const pills = document.querySelectorAll('.cat-pill');
const items = document.querySelectorAll('#faqAccordion .accordion-item');
const searchBox = document.getElementById('faqSearch');
const noResults = document.getElementById('noResults');
let activeCat = '{{ $categories[0] ?? "general" }}';

function applyFilter(){
  const term = searchBox.value.trim().toLowerCase();
  let visible = 0;
  items.forEach(item => {
    const inCat = item.dataset.cat === activeCat;
    const text = item.textContent.toLowerCase();
    const match = term === '' ? inCat : text.includes(term);
    item.classList.toggle('d-none', !match);
    if (match) visible++;
  });
  noResults.classList.toggle('d-none', visible > 0);
}

pills.forEach(p => p.addEventListener('click', () => {
  pills.forEach(x => x.classList.remove('active'));
  p.classList.add('active');
  activeCat = p.dataset.cat;
  searchBox.value = '';
  applyFilter();
}));

searchBox.addEventListener('input', applyFilter);
</script>