@php
    use App\Models\Backend\ContentPhotoGallery;
    $newsGalleries = ContentPhotoGallery::with(['translations', 'photoLists'])
        ->where('gallery_cat', 'NEWS')
        ->where('gallery_status', 'ACTIVE')
        ->where('gallery_portal', 'redd-plus')
        ->orderBy('gallery_sort')
        ->orderBy('gallery_date', 'desc')
        ->get();

    // Pilih terjemahan album ikut bahasa semasa, fallback ke main / pertama
    $gTrans = function ($g) use ($lang) {
        return $g->translations->firstWhere('gallery_translation_language', $lang)
            ?? $g->translations->firstWhere('gallery_translation_main', 1)
            ?? $g->translations->first();
    };

    // Senarai gambar setiap album (baris utama) + deskripsi ikut bahasa
    $galleryPhotos = $newsGalleries->mapWithKeys(function ($g) use ($lang) {
        $all   = $g->photoLists;
        $mains = $all->where('photo_main', 1)->sortBy('photo_sort');
        return ['g' . $g->gallery_id => $mains->map(function ($p) use ($all, $lang) {
            $tr = $all->first(fn ($x) => (int) $x->photo_parent_id === (int) $p->photo_id
                && $x->photo_language === $lang);
            return [
                'url'   => image_url($p->photo_url),
                'descr' => plain_text($tr->photo_descr ?? $p->photo_descr),
            ];
        })->values()];
    });

    // Deskripsi penuh setiap album (plain text) untuk modal "Read more"
    $galleryDescr = $newsGalleries->mapWithKeys(fn ($g) => [
        'g' . $g->gallery_id => plain_text($gTrans($g)?->gallery_translation_descr, false),
    ]);
@endphp
<style>
.page-hero{
  background-image:linear-gradient(rgb(255 255 255 / 72%),rgba(34,57,42,.72)),url(/assets/redd-plus/resources.png);background-position:center;background-size:cover;background-repeat:no-repeat;min-height: clamp(280px, 28vw, 300px);display: flex;align-items: center;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;} @media (max-width:1199px){ .page-hero{ min-height:260px; } } @media (max-width:767px){ .page-hero{ min-height:220px; } } @media (max-width:575px){ .page-hero{ min-height:180px; } } @media (max-width:374px){ .page-hero{ min-height:150px; } } @media (max-width:767px){ .page-hero .container{ padding-top:1rem; padding-bottom:1rem; } .page-hero h1{ font-size:1.5rem; } .page-hero p{ font-size:.9rem; margin-bottom:.5rem; } } @media (max-width:575px){ .page-hero .container{ padding-top:.75rem; padding-bottom:.75rem; } .page-hero h1{ font-size:1.3rem; } .page-hero p{ font-size:.85rem; } }
.news-section{padding:3rem 0;background:var(--cream);min-height:50vh;flex:1 0 auto;}
.news-card{border:1px solid #ece8db;border-radius:.9rem;overflow:hidden;background:#fff;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:box-shadow .25s ease,transform .25s ease;}
.news-card:hover{box-shadow:0 14px 30px rgba(46,74,53,.14);transform:translateY(-4px);}
.news-card-img{height:160px;background:var(--green-100);display:flex;align-items:center;justify-content:center;font-size:2rem;color:var(--green-200);}
.news-card-body{padding:1rem 1.1rem 1.15rem;display:flex;flex-direction:column;gap:.4rem;}
.news-card h3{font-weight:700;font-size:.95rem;color:var(--green-900);margin:0;line-height:1.4;transition:color .2s;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.news-card:hover h3{color:var(--green-800);}
.news-card-date{display:inline-flex;align-items:center;gap:.35rem;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#8a9a8e;}
.news-card-date .bi{font-size:.78rem;}
.news-card-actions{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding-top:.75rem;border-top:1px solid #f1ede2;}
.news-photo-pill{display:inline-flex;align-items:center;gap:.35rem;background:var(--green-100);color:var(--green-800);font-weight:700;font-size:.78rem;padding:.32rem .65rem;border-radius:50rem;line-height:1;}
.news-photo-pill .bi{font-size:.85rem;}
.news-card p{font-size:1rem;color:var(--ink);line-height:1.6;margin-top:.5rem;}
.card-descr.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-top:.2rem;}
.read-more{display:inline-flex;align-items:center;gap:.25rem;color:var(--green-800);font-weight:700;font-size:.85rem;text-decoration:none;}
.read-more:hover{color:var(--green-700);text-decoration:underline;}
.read-more .bi{font-size:.9rem;transition:transform .2s;}
.read-more:hover .bi{transform:translateX(3px);}
.dm-backdrop{position:fixed;inset:0;z-index:2100;background:rgba(15,25,18,.92);display:none;align-items:center;justify-content:center;padding:2rem;}
.dm-backdrop.on{display:flex;}
.dm-box{position:relative;background:#fff;border-radius:.9rem;max-width:min(720px,92vw);max-height:85vh;overflow:auto;padding:1.5rem 1.6rem;}
.dm-title{font-weight:700;color:var(--green-900);font-size:1.15rem;margin:0 2rem .7rem 0;}
.dm-body{color:var(--ink);font-size:1rem;line-height:1.75;white-space:pre-line;}
.dm-close{position:absolute;top:.5rem;right:.8rem;background:none;border:0;font-size:1.9rem;line-height:1;color:#8a9a8e;cursor:pointer;}
.dm-close:hover{color:var(--green-800);}
.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:1rem;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;}
.news-card-img img{width:100%;height:100%;object-fit:cover;display:block;}
.news-card-img.gallery-open{cursor:pointer;}
/* photo lightbox */
.gl-backdrop{position:fixed;inset:0;z-index:2000;background:rgba(15,25,18,.92);display:none;align-items:center;justify-content:center;padding:2rem;}
.gl-backdrop.on{display:flex;}
.gl-figure{margin:0;max-width:min(1000px,92vw);max-height:88vh;display:flex;flex-direction:column;align-items:center;gap:.75rem;}
.gl-figure img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:.5rem;background:#000;}
.gl-figure figcaption{color:#fff;font-size:.95rem;font-weight:500;text-align:center;max-width:760px;}
.gl-counter{color:rgba(255,255,255,.7);font-size:.85rem;font-weight:600;}
.gl-close{position:absolute;top:1rem;right:1.25rem;background:none;border:0;color:#fff;font-size:2.2rem;line-height:1;cursor:pointer;opacity:.85;}
.gl-close:hover{opacity:1;}
.gl-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.15);border:0;color:#fff;width:46px;height:46px;border-radius:50%;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.gl-nav:hover{background:rgba(255,255,255,.3);}
.gl-prev{left:1.25rem;}
.gl-next{right:1.25rem;}
@media (max-width:575.98px){.gl-nav{width:38px;height:38px;}.gl-backdrop{padding:1rem;}}


.breadcrumb-redd { font-size: 1rem; font-weight: 600; }
.breadcrumb-redd a { color: rgba(255, 255, 255, 1); text-decoration: none; }
.breadcrumb-redd a:hover { color:a9b3a9; }
.breadcrumb-redd .active { color:a9b3a9; }
.breadcrumb-redd .sep { color: #a9b3a9; margin: 0 .4rem; }
</style>

<div style="flex:1 0 auto;display:flex;flex-direction:column;background:#fff;">
  <header class="page-hero">
    <div class="container py-4">
       <nav class="breadcrumb-redd mb-3" aria-label="breadcrumb">
        <a href="/redd-plus">Home</a><span class="sep">›</span>
        <span class="active">News &amp; Updates</span>
      </nav>
      <h1>News &amp; Updates</h1>
      <p>Latest updates, announcements and news from REDD Plus Malaysia.</p>
    </div>
  </header>

  <div class="news-section">
    <div class="container">
      @if($newsGalleries->count())
        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-4 g-3">
          @foreach($newsGalleries as $g)
            @php
              $t = $gTrans($g);
              $photos = $galleryPhotos['g' . $g->gallery_id] ?? collect();
              $cover = $g->gallery_thumbnail ? image_url($g->gallery_thumbnail) : ($photos->first()['url'] ?? null);
              $date = $g->gallery_date ? \Carbon\Carbon::parse($g->gallery_date)->format('d M Y') : '';
            @endphp
            <div class="col">
              <div class="news-card">
                <div class="news-card-img{{ $photos->count() ? ' gallery-open' : '' }}"
                     @if($photos->count()) data-gallery="g{{ $g->gallery_id }}" role="button" tabindex="0" aria-label="{{ $t?->gallery_translation_title ?? 'Gallery' }}" @endif>
                  @if($cover)
                    <img src="{{ $cover }}" alt="{{ $t?->gallery_translation_title ?? 'Gallery' }}">
                  @else
                    <i class="bi bi-images"></i>
                  @endif
                </div>
                <div class="news-card-body">
                  @if($date)<span class="news-card-date"><i class="bi bi-calendar3 me-1"></i>{{ $date }}</span>@endif
                  <h3>{{ $t?->gallery_translation_title ?? 'Untitled' }}</h3>
                  @php $gDescr = plain_text($t?->gallery_translation_descr); @endphp
                  @if($gDescr !== '')<p class="card-descr clamp">{{ $gDescr }}</p>@endif
                  @if($gDescr !== '' || $photos->count())
                  <div class="news-card-actions">
                    @if($gDescr !== '')
                      <a href="#" class="read-more" data-gallery="g{{ $g->gallery_id }}">Read more <i class="bi bi-chevron-right"></i></a>
                    @else
                      <span></span>
                    @endif
                    @if($photos->count())
                      <span class="news-photo-pill" title="{{ $photos->count() }} photos"><i class="bi bi-images"></i> {{ $photos->count() }}</span>
                    @endif
                  </div>
                  @endif
                </div>
              </div>
            </div>
          @endforeach
        </div>
      @else
        <div class="text-center py-5">
          <i class="bi bi-images" style="font-size:3.5rem;color:var(--green-200);"></i>
          <h3 class="mt-3 fw-bold" style="color:var(--green-800);">No Image</h3>
          <p style="color:#8a9a8e;font-size:1.05rem;">There are no images yet.</p>
        </div>
      @endif
    </div>
  </div>

  <div id="galleryLightbox" class="gl-backdrop" aria-hidden="true">
    <button type="button" class="gl-close" aria-label="Close">&times;</button>
    <button type="button" class="gl-nav gl-prev" aria-label="Previous">&#10094;</button>
    <button type="button" class="gl-nav gl-next" aria-label="Next">&#10095;</button>
    <figure class="gl-figure">
      <img id="glImage" src="" alt="">
      <figcaption id="glCaption"></figcaption>
      <span id="glCounter" class="gl-counter"></span>
    </figure>
  </div>

  <script>
  window.GALLERY_DATA = @json($galleryPhotos);
  (function(){
    var data = window.GALLERY_DATA || {};
    var lb = document.getElementById('galleryLightbox');
    if (!lb) return;
    var img = document.getElementById('glImage');
    var cap = document.getElementById('glCaption');
    var counter = document.getElementById('glCounter');
    var current = [], idx = 0;

    function render(){
      var item = current[idx];
      if (!item) return;
      img.src = item.url;
      cap.textContent = item.descr || '';
      counter.textContent = (idx + 1) + ' / ' + current.length;
    }
    function open(key){
      current = data[key] || [];
      if (!current.length) return;
      idx = 0;
      render();
      lb.classList.add('on');
      lb.setAttribute('aria-hidden', 'false');
      document.body.style.overflow = 'hidden';
    }
    function close(){
      lb.classList.remove('on');
      lb.setAttribute('aria-hidden', 'true');
      document.body.style.overflow = '';
    }
    function step(d){
      if (!current.length) return;
      idx = (idx + d + current.length) % current.length;
      render();
    }

    document.querySelectorAll('.gallery-open').forEach(function(card){
      card.addEventListener('click', function(){ open(this.dataset.gallery); });
      card.addEventListener('keydown', function(e){
        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); open(this.dataset.gallery); }
      });
    });
    lb.querySelector('.gl-close').addEventListener('click', close);
    lb.querySelector('.gl-prev').addEventListener('click', function(e){ e.stopPropagation(); step(-1); });
    lb.querySelector('.gl-next').addEventListener('click', function(e){ e.stopPropagation(); step(1); });
    lb.addEventListener('click', function(e){ if (e.target === lb) close(); });
    document.addEventListener('keydown', function(e){
      if (!lb.classList.contains('on')) return;
      if (e.key === 'Escape') close();
      if (e.key === 'ArrowLeft') step(-1);
      if (e.key === 'ArrowRight') step(1);
    });
  })();
  </script>

  <!-- Description modal -->
  <div id="descrModal" class="dm-backdrop" aria-hidden="true">
    <div class="dm-box" role="dialog" aria-modal="true">
      <button type="button" class="dm-close" aria-label="Close">&times;</button>
      <h4 id="dmTitle" class="dm-title"></h4>
      <div id="dmBody" class="dm-body"></div>
    </div>
  </div>
  <script>
  window.GALLERY_DESCR = @json($galleryDescr);
  (function(){
    var data = window.GALLERY_DESCR || {};
    var lb = document.getElementById('descrModal');
    if (!lb) return;
    var titleEl = document.getElementById('dmTitle');
    var bodyEl = document.getElementById('dmBody');
    function open(key, title){
      var txt = data[key] || '';
      if (!txt) return;
      titleEl.textContent = title || '';
      bodyEl.textContent = txt;
      lb.classList.add('on');
      lb.setAttribute('aria-hidden', 'false');
      document.body.style.overflow = 'hidden';
    }
    function close(){
      lb.classList.remove('on');
      lb.setAttribute('aria-hidden', 'true');
      document.body.style.overflow = '';
    }
    document.querySelectorAll('.read-more').forEach(function(a){
      a.addEventListener('click', function(e){
        e.preventDefault();
        e.stopPropagation();
        var card = this.closest('.news-card, .gallery-card');
        var key = this.dataset.gallery || '';
        var title = card ? (card.querySelector('h4, h3') || {}).textContent : '';
        open(key, title);
      });
    });
    lb.querySelector('.dm-close').addEventListener('click', close);
    lb.addEventListener('click', function(e){ if (e.target === lb) close(); });
    document.addEventListener('keydown', function(e){
      if (e.key === 'Escape' && lb.classList.contains('on')) close();
    });
  })();
  </script>

<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: 1rem;
}
.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; }
.footer-redd-article img { max-width: 100%; height: auto; max-height: 46px; }
@media (max-width: 768px) {
  .footer-redd-article { padding: 2.5rem 0 1.5rem; }
  .footer-redd-article img { max-height: 34px; }
}
@media (max-width: 575.98px) {
  .footer-redd-article img { max-height: 30px; }
}
.footer-redd-article{flex-shrink:0;}
</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 Plus Malaysia" height="46">
          <span class="f-divider d-none d-md-inline-block"></span>
          <a href="{{ $contact->website_href }}"><i class="bi bi-globe2"></i>{{ $contact->website_label }}</a>
          <span class="f-divider d-none d-md-inline-block"></span>
          <a href="mailto:{{ $contact->email }}"><i class="bi bi-envelope"></i>{{ $contact->email }}</a>
          <span class="f-divider d-none d-md-inline-block"></span>
          <a href="{{ $contact->phone_tel }}"><i class="bi bi-telephone"></i>{{ $contact->phone }}</a>
        </div>
      </div>
    </footer>
</div>