@php
     use App\Models\Backend\ContentArticle;
    $aboutArticle = ContentArticle::with('translations')->where('article_code', 'about-redd-plus')->where('article_status', 'ACTIVE')->first();
    $heroBg = $aboutArticle = $aboutArticle->article_image ? image_url($aboutArticle->article_image) : '/assets/redd-plus/about_hero_bg.png';
@endphp

<style>
.hero-about {
  background: url('{{ $heroBg }}') center/cover no-repeat;
  min-height: 320px;
}
.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-about h1 {
  color: var(--green-900); font-weight: 600;
  font-size: clamp(2rem, 4vw, 2.9rem);
}
.hero-about p { max-width: 380px; 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,#fff); border:1.5px solid var(--green-200,#b9c9b8)!important;
  border-radius: .75rem; text-align: center;
  padding: 1.25rem .9rem; height: 100%;
  box-shadow: 0 2px 8px rgba(46,74,53,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.info-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(46,74,53,.12); }
.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; }

.footer-links a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .85rem; }
.footer-links a:hover { color: var(--green-800); }
.footer-links .sep { color: #a9b3a9; margin: 0 .75rem; }
.footer-copy { font-size: .82rem; color: #5b6a5e; font-weight: 500; }
.footer-url { color: var(--green-800); font-weight: 700; text-decoration: none; }
.footer-url:hover { color: var(--gold); }

/* Alternating section highlights */
.section-tint-a {
  background: var(--green-100);
  border-radius: 1rem;
  padding: 2rem 1.5rem;
  margin: 0 -1.5rem;
}
.section-tint-b {
  background: var(--bs-light);
  border-radius: 1rem;
  padding: 2rem 1.5rem;
  margin: 0 -1.5rem;
}

</style>


<header class="hero-about d-flex align-items-center">
  <div class="container py-5">
    <nav class="breadcrumb-redd mb-3" aria-label="breadcrumb">
      <a href="/{{ $siteSlug }}">Home</a><span class="sep">›</span>
      <span class="active">About</span>
    </nav>
    <h1 class="font-display mb-3">About REDD+ Malaysia</h1>
    <p>Understand Malaysia's approach to reducing forest-related emissions and enhancing forest carbon stocks for a sustainable future.</p>
  </div>
</header>

<main class="container">
  <section class="row-block">
    <div class="row align-items-center gy-4">
      <div class="col-auto"><div class="lead-icon"><i class="bi bi-globe-americas"></i></div></div>
      <div class="col-lg-7">
        <h2 class="block-heading font-display">What is REDD+?</h2>
        <p class="mb-0 fw-medium" style="font-size:.92rem;">REDD+ is a global framework under the United Nations Framework Convention on Climate Change (UNFCCC) that enables countries to take action to reduce forest-related emissions and enhance forest carbon stocks while delivering sustainable development benefits.</p>
      </div>
      <div class="col-lg text-lg-end"><a href="/redd-plus/article?id=national-redd-strategy" class="link-learn">Learn More <i class="bi bi-arrow-right ms-1"></i></a></div>
    </div>
  </section>

  <section class="row-block">
    <div class="row gy-4 section-tint-a">
      <div class="col-lg-3">
        <div class="lead-icon gold small mb-3"><i class="bi bi-bullseye"></i></div>
        <h2 class="block-heading font-display">Objectives of REDD+</h2>
        <p class="fw-medium" style="font-size:.9rem;">REDD+ aims to deliver climate, environmental, and socio-economic co-benefits through balanced and inclusive approaches to forest conservation and management.</p>
      </div>
      <div class="col-lg-9">
        <div class="row row-cols-2 row-cols-lg-4 g-3 h-100">
          <div class="col"><div class="info-card"><div class="info-icon"><i class="bi bi-graph-down-arrow"></i></div><p>Reduce emissions from deforestation and forest degradation</p></div></div>
          <div class="col"><div class="info-card"><div class="info-icon"><i class="bi bi-tree-fill"></i></div><p>Conserve forest carbon stocks.</p></div></div>
          <div class="col"><div class="info-card"><div class="info-icon"><i class="bi bi-recycle"></i></div><p>Sustainable management of forests.</p></div></div>
          <div class="col"><div class="info-card"><div class="info-icon"><i class="bi bi-cloud-plus"></i></div><p>Enhance forest carbon stocks.</p></div></div>
        </div>
      </div>
    </div>
  </section>

  <section class="row-block">
    <div class="row gy-4 section-tint-b">
      <div class="col-lg-3">
        <div class="lead-icon small mb-3"><i class="bi bi-flower1"></i></div>
        <h2 class="block-heading font-display">REDD+ Actions / Activities</h2>
        <p class="fw-medium" style="font-size:.9rem;">Malaysia undertakes a range of coordinated actions and activities to implement REDD+ effectively and transparently.</p>
        <!-- <a href="/redd-plus/article?id=national-redd-strategy" class="link-learn">Learn More <i class="bi bi-arrow-right ms-1"></i></a> -->
      </div>
      <div class="col-lg-9">
        <div class="row row-cols-2 row-cols-md-3 row-cols-lg-5 g-3 h-100">
          <div class="col"><div class="info-card"><div class="info-icon"><i class="bi bi-file-earmark-text"></i></div><p>Policy and Strategy Development</p></div></div>
          <div class="col"><div class="info-card"><div class="info-icon"><i class="bi bi-tree"></i></div><p>Sustainable Forest Management</p></div></div>
          <div class="col"><div class="info-card"><div class="info-icon"><i class="bi bi-clipboard-check"></i></div><p>Monitoring, Reporting and Verification (MRV)</p></div></div>
          <div class="col"><div class="info-card"><div class="info-icon"><i class="bi bi-database-check"></i></div><p>Safeguards Information System (SIS)</p></div></div>
          <div class="col"><div class="info-card"><div class="info-icon"><i class="bi bi-people-fill"></i></div><p>Stakeholder Engagement and Participation</p></div></div>
        </div>
      </div>
    </div>
  </section>
</main>