<style>
/* ---------- Hero Slider ---------- */
.hero-slider{height:100vh;position:relative;overflow:hidden;}
.hero-slider .swiper-slide{height:100vh!important;background-size:cover!important;background-position:center!important;}
.hero-slider .swiper{height:100vh!important;}.hero-slider .swiper,
.hero-slider .swiper-wrapper{height:100vh!important;}
.hero-slider .swiper-slide{background-size:cover!important;background-position:center!important;}
.hero-slider .swiper-pagination{bottom:24px!important;}
.hero-slider .swiper-pagination-bullet{width:10px;height:10px;background:rgba(255,255,255,.5);opacity:1;}
.hero-slider .swiper-pagination-bullet-active{background:#fff;width:12px;height:12px;}
.hero-slider .swiper-button-next,
.hero-slider .swiper-button-prev{color:#fff;background:rgba(255,255,255,.2);width:44px;height:44px;border-radius:50%;backdrop-filter:blur(4px);}
.hero-slider .swiper-button-next::after,
.hero-slider .swiper-button-prev::after{font-size:1.1rem;font-weight:700;}
.hero-slider .swiper-button-next:hover,
.hero-slider .swiper-button-prev:hover{background:rgba(255,255,255,.35);}

.gold-rule{
  width:56px;height:3px;background:var(--gold);
  border:0;opacity:1;margin:1.25rem 0;
}
.btn-forest{
  background:var(--green-800);color:#fff;
  border-radius:50rem;padding:.65rem 1.6rem;font-weight:600;
}
.btn-forest:hover{background:var(--green-900);color:#fff;}
.btn-outline-cream{
  border:1px solid rgba(46,74,53,.55);color:var(--green-900);
  background:rgba(247,245,238,.55);
  border-radius:50rem;padding:.65rem 1.6rem;font-weight:600;
}
.btn-outline-cream:hover{background:var(--cream);color:var(--green-900);}
.glass-card{
  background:rgba(30,45,32,.45);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.18);
  border-radius:1rem;
  color:#fff;
  padding:1rem 1.25rem;
  display:flex;align-items:center;gap:1rem;
  max-width:340px;
  text-decoration:none;
  transition:transform .2s ease, background .2s ease;
}
.glass-card:hover{transform:translateX(4px);background:rgba(30,45,32,.6);color:#fff;}

.hero-writeup{
  background:rgb(22 22 22 / 12%);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.2);
  border-radius:1.25rem;
  padding:2rem 2.25rem;
  color:var(--green-900);
}
.hero-writeup h1{color:#ffffff;}
.hero-writeup p{color:#ffffff;}
.glass-icon{
  width:52px;height:52px;flex:0 0 52px;
  border:1px solid rgba(255,255,255,.5);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.35rem;color:#eaf2e6;
}
.glass-card h6{margin:0;font-weight:700;color:#fff;}
.glass-card small{color:#dfe8da;font-weight:500;}
.glass-card .bi-arrow-right{margin-left:auto;color:#eaf2e6;}

/* ---------- Quick access ---------- */
.section-eyebrow{
  letter-spacing:.25em;
  font-weight:700;color:var(--green-900);
  font-size:.9rem;text-transform:uppercase;
  display:flex;align-items:center;gap:1rem;justify-content:center;
}
.section-eyebrow::before,.section-eyebrow::after{
  content:"";width:60px;height:1px;background:var(--gold);
}
.qa-card{
  background:#fff;border:0;border-radius:.75rem;
  box-shadow:0 8px 24px rgba(46,74,53,.06);
  text-align:center;padding:2rem 1rem 1.5rem;height:100%;
  transition:transform .2s ease, box-shadow .2s ease;
}
.qa-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(46,74,53,.12);}
.qa-icon{
  width:76px;height:76px;margin:0 auto 1rem;
  background:var(--green-100);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.9rem;color:var(--green-800);
}
.qa-card h6{font-weight:700;color:var(--green-900);}
.qa-card::after{
  content:"";display:block;width:42px;height:3px;
  background:var(--gold);margin:1rem auto 0;border-radius:2px;
}

/* ---------- Journey ---------- */
.journey{background:var(--olive-bg);}
.journey h2{color:var(--green-900);font-weight:600;}
.link-learn{
  color:var(--green-900);font-weight:700;text-decoration:none;
}
.link-learn:hover{color:var(--gold);}
.timeline{
  display:flex;align-items:flex-start;justify-content:space-between;
  position:relative;gap:.5rem;
}
.timeline::before{
  content:"";position:absolute;top:38px;left:6%;right:2%;
  border-top:2px dotted var(--gold);
}
.timeline::after{
  content:"\F138";
  font-family:"bootstrap-icons";
  position:absolute;top:26px;right:-6px;color:var(--gold);font-size:1.2rem;
}
.t-step{position:relative;z-index:1;text-align:center;flex:1;min-width:110px;}
.t-icon{
  width:76px;height:76px;margin:0 auto .75rem;
  background:var(--cream);
  border:1px solid var(--green-200);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;color:var(--green-800);
  box-shadow:0 4px 12px rgba(46,74,53,.08);
}
.t-step h6{color:var(--green-800);font-weight:700;font-size:.95rem;}
.t-step small{color:#6c7a6e;font-weight:500;line-height:1.3;display:block;max-width:150px;margin:0 auto;}

@media (max-width: 991.98px){
  .timeline{flex-wrap:wrap;row-gap:1.5rem;}
  .timeline::before,.timeline::after{display:none;}
  .t-step{flex:1 1 45%;}
  .stat-divider{border-left:0;border-top:1px solid rgba(60,80,60,.35);padding-top:1.5rem;}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;}
}
</style>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">

<!-- ===== Hero Slider ===== -->
<div class="hero-slider position-relative overflow-hidden" >
  <div class="swiper h-100 w-100" id="heroSwiper">
    <div class="swiper-wrapper">
      @php
        $sliders = \App\Models\Backend\ContentSlider::with('translations')
            ->where('slider_status', 'ACTIVE')
            ->where('slider_portal', 'redd-plus')
            ->where('slider_type', 'SLIDER_BACKGROUND')
            ->orderBy('slider_sort')
            ->take(3)
            ->get();
      @endphp
      @foreach($sliders as $slide)
        @php
          $t = $slide->translations->firstWhere('slider_translation_main', 1) ?? $slide->translations->first();
          $img = $t?->slider_translation_img;
          $imgUrl = $img ? (\Illuminate\Support\Facades\Storage::url($img)) : '';
        @endphp
        <div class="swiper-slide" style="background:url('{{ $imgUrl }}') center/cover no-repeat;"></div>
      @endforeach
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>

  <div class="hero-overlay" style="position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;z-index:10;pointer-events:none;">
    <div class="container py-5">
      <div class="row align-items-center gy-4">
        <div class="col-lg-6">
          <div class="hero-writeup" style="pointer-events:auto;">
            <h1 class="font-display">Sustainable Forests,<br>Resilient Future.</h1>
            <hr class="gold-rule">
            <p>Malaysia is committed to conserving our natural heritage and advancing climate action through REDD+. Together, we protect our forests for people, biodiversity and future generations.</p>
            <div class="d-flex flex-wrap gap-3 mt-4">
              <a href="/redd-plus/article?id=about-redd-plus" class="btn btn-forest">Explore REDD+ <i class="bi bi-arrow-right ms-1"></i></a>
            </div>
          </div>
        </div>
        <div class="col-lg-6 d-flex flex-column align-items-lg-end gap-3">
          <a href="/redd-plus/article?id=stakeholder-engagement" class="glass-card w-100" style="pointer-events:auto;">
            <span class="glass-icon"><i class="bi bi-people-fill"></i></span>
            <span>
              <h6>Stakeholders</h6>
              <small>Collaborating for sustainable impact.</small>
            </span>
            <i class="bi bi-arrow-right"></i>
          </a>
          <a href="/redd-plus/article?id=related-policies" class="glass-card w-100" style="pointer-events:auto;">
            <span class="glass-icon"><i class="bi bi-flower1"></i></span>
            <span>
              <h6>Initiatives</h6>
              <small>Driving actions for resilient forests.</small>
            </span>
            <i class="bi bi-arrow-right"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- ===== Quick Access ===== -->
<section class="py-5 bg-white">
  <div class="container py-3">
    <p class="section-eyebrow mb-5">Quick Access</p>
    <div class="row g-4">
      <div class="col-6 col-lg-3">
        <a href="/redd-plus/article?id=national-redd-strategy" class="text-decoration-none d-block h-100">
          <div class="qa-card">
            <div class="qa-icon"><i class="bi bi-tree-fill"></i></div>
            <h6>National<br>REDD+ Strategy</h6>
          </div>
        </a>
      </div>
      <div class="col-6 col-lg-3">
        <a href="/redd-plus/article?id=related-policies" class="text-decoration-none d-block h-100">
          <div class="qa-card">
            <div class="qa-icon"><i class="bi bi-cash-coin"></i></div>
            <h6>Malaysia<br>Forest Fund</h6>
          </div>
        </a>
      </div>
      <div class="col-6 col-lg-3">
        <a href="/redd-plus/article?id=mrv-framework" class="text-decoration-none d-block h-100">
          <div class="qa-card">
            <div class="qa-icon"><i class="bi bi-clipboard-data"></i></div>
            <h6>MRV<br>Framework</h6>
          </div>
        </a>
      </div>
      <div class="col-6 col-lg-3">
        <a href="/redd-plus/article?id=governance" class="text-decoration-none d-block h-100">
          <div class="qa-card">
            <div class="qa-icon"><i class="bi bi-shield-check"></i></div>
            <h6>Governance</h6>
          </div>
        </a>
      </div>
    </div>
  </div>
</section>

<!-- ===== REDD+ Journey ===== -->
<section class="journey py-5">
  <div class="container py-3">
    <div class="row align-items-center gy-5">
      <div class="col-lg-4">
        <h2 class="font-display">Malaysia&rsquo;s REDD+ Journey</h2>
        <hr class="gold-rule">
        <p class="fw-medium">From national strategy to results-based actions, Malaysia&rsquo;s REDD+ journey is built on strong policies, robust safeguards, transparent monitoring and meaningful impact for people, forests and climate.</p>
        <a href="/redd-plus/article?id=redd-implementation" class="link-learn">Learn More <i class="bi bi-arrow-right ms-1"></i></a>
      </div>
      <div class="col-lg-8">
        <div class="timeline">
          <div class="t-step">
            <div class="t-icon"><i class="bi bi-flower1"></i></div>
            <h6>Strategy</h6>
            <small>Setting the direction for sustainable forest management</small>
          </div>
          <div class="t-step">
            <div class="t-icon"><i class="bi bi-display"></i></div>
            <h6>Monitoring</h6>
            <small>Measuring and verifying forest carbon with integrity</small>
          </div>
          <div class="t-step">
            <div class="t-icon"><i class="bi bi-people-fill"></i></div>
            <h6>Implementation</h6>
            <small>Driving actions with communities and partners</small>
          </div>
          <div class="t-step">
            <div class="t-icon"><i class="bi bi-award"></i></div>
            <h6>Results</h6>
            <small>Delivering verified impact for climate and people</small>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  new Swiper('#heroSwiper', {
    slidesPerView: 1,
    loop: true,
    autoplay: { delay: 5000, disableOnInteraction: false },
    speed: 800,
    pagination: { el: '.swiper-pagination', clickable: true },
    navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
    effect: 'slide',
  });
});
</script>