@php
    $q = request("q", "");
    $results = collect();
    if (strlen($q) >= 2) {
        $results = DB::table("content_article AS a")
            ->join("content_article_translation AS t", "a.article_id", "=", "t.article_translation_parent_id")
            ->where("a.article_portal_category", "redd-plus")
            ->where("a.article_status", "ACTIVE")
            ->whereNotIn("a.article_category", ["GLOSSARY", "ARTICLE"])
            ->where(function($w) use ($q) {
                $w->where("t.article_translation_title", "LIKE", "%{$q}%")
                  ->orWhere("t.article_translation_content", "LIKE", "%{$q}%");
            })
            ->select("a.article_id", "a.article_code", "t.article_translation_title", "t.article_translation_content", "t.article_translation_language")
            ->orderBy("a.article_date", "desc")
            ->limit(20)
            ->get();
    foreach ($results as $r) {
        $clean = preg_replace('/<style[^>]*>.*?<\/style>/si', '', $r->article_translation_content);
        $clean = preg_replace('/<script[^>]*>.*?<\/script>/si', '', $clean);
        $clean = preg_replace('/<nav[^>]*>.*?<\/nav>/si', '', $clean);
        $r->clean_excerpt = strip_tags($clean);
    }
    }@endphp
<style>
.search-hero{background:linear-gradient(135deg,var(--green-800),var(--green-900));padding:3rem 0;color:#fff}
.search-hero h1{font-weight:700;font-size:clamp(1.8rem,3.5vw,2.5rem)}
.search-section{padding:2rem 0;background:var(--cream);min-height:50vh}
.result-item{border:1px solid #ece8db;border-radius:.75rem;background:#fff;padding:1.25rem 1.5rem;margin-bottom:1rem;text-decoration:none;color:inherit;display:block;transition:box-shadow .2s}
.result-item:hover{box-shadow:0 4px 16px rgba(46,74,53,.1)}
.result-item h4{color:var(--green-800);font-weight:700;font-size:1rem;margin-bottom:.35rem}
.result-item p{font-size:.88rem;color:var(--ink);margin:0;line-height:1.5}
.result-item .highlight{background:#fff3c4;padding:0 2px;border-radius:2px}
.no-result{text-align:center;padding:4rem 2rem;color:#8a9a8e}
.no-result i{font-size:3.5rem;color:var(--green-200);display:block;margin-bottom:1rem}
.no-result h3{font-weight:600;color:var(--green-700);margin-bottom:.5rem}
.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>

<div style="min-height:calc(100vh - 64px);background:#fff;">
  <header class="search-hero">
    <div class="container">
      <h1><i class="bi bi-search me-2"></i>Search</h1>
      <form method="GET" action="/redd-plus/search" class="mt-3" style="max-width:600px">
        <div class="input-group">
          <input type="text" name="q" class="form-control form-control-lg" placeholder="Search articles..." value="{{ $q }}" style="border-radius:.6rem 0 0 .6rem;font-weight:500">
          <button class="btn btn-light btn-lg" type="submit" style="border-radius:0 .6rem .6rem 0;font-weight:600;background:#fff">
            <i class="bi bi-search"></i>
          </button>
        </div>
      </form>
    </div>
  </header>

  <div class="search-section">
    <div class="container">
      @if(strlen($q) >= 2)
        @if($results->count())
          <p class="mb-3 fw-semibold" style="color:var(--green-700)">{{ $results->count() }} result(s) for "{{ $q }}"</p>
          @foreach($results as $r)
            <a href="/redd-plus/article?id={{ $r->article_code }}" class="result-item">
              <h4>{{ $r->article_translation_title }}</h4>
              <p>{{ Str::limit($r->clean_excerpt, 200) }}</p>
            </a>
          @endforeach
        @else
          <div class="no-result">
            <i class="bi bi-search"></i>
            <h3>No results found</h3>
            <p>No articles match "{{ $q }}". Try a different keyword.</p>
          </div>
        @endif
      @elseif($q !== "")
        <div class="no-result">
          <i class="bi bi-search"></i>
          <h3>Search term too short</h3>
          <p>Please enter at least 2 characters.</p>
        </div>
      @else
        <div class="no-result">
          <i class="bi bi-search"></i>
          <h3>Search REDD+ Articles</h3>
          <p>Enter a keyword above to search for articles, news and publications.</p>
        </div>
      @endif
    </div>
  </div>

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