@php
$todayVisits = \App\Models\Backend\Visit::todayVisits();
$thisWeek = \App\Models\Backend\Visit::thisWeekVisits();
$thisMonth = \App\Models\Backend\Visit::thisMonthVisits();
$thisYear = \App\Models\Backend\Visit::thisYearVisits();
$totalVisits = \App\Models\Backend\Visit::totalVisits();
@endphp

<style>
.footer-scenery-option2 {
  background-image: url('/assets/redd-plus/footer-forest.png');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  min-height: 320px;
}
.big-stat {
  font-family:'Playfair Display',serif;
  color:var(--green-800);
  font-weight:700;
  font-size:clamp(4.5rem,9vw,7.5rem);
  line-height:1;
}
.big-stat .pct { font-size:.4em; font-weight:600; }
.stat-divider { border-left:1px solid rgba(60,80,60,.35); }
.donut { width:150px; height:150px; }

.footer-contact a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
}
.footer-contact a:hover { color: var(--green-800); }
.footer-contact .bi {
  width: 38px; height: 38px;
  border: 1px solid rgba(60,80,60,.35); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: .6rem; color: var(--green-800);
}
.footer-bottom { font-size: .85rem; color: #5b6a5e; }
.footer-bottom a { color: #5b6a5e; text-decoration: none; font-weight: 600; }
.footer-bottom a:hover { color: var(--green-800); }
@media (max-width: 991.98px) {
  .stat-divider { border-left:0; border-top:1px solid rgba(60,80,60,.35); padding-top:1.5rem; }
}
.visitor-stats {
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 16px 20px 14px;
  margin-top: 20px;
  margin-bottom: 20px;
  border: 1px solid rgba(60,80,60,.25);
}
.visitor-stats h5 {
  color: var(--green-900);
  font-size: .7rem;
  font-weight: 700;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  text-align: center;
}
.visitor-stats .v-row {
  display: flex;
  justify-content: space-around;
  gap: 0;
}
.visitor-stats .v-item {
  flex: 1;
  text-align: center;
  padding: 4px 8px;
  border-right: 1px solid var(--green-900);
}
.visitor-stats .v-item:last-child { border-right: none; }
.visitor-stats .v-item .v-label {
  display: block;
  font-size: .6rem;
  margin-bottom: 3px;
  color: var(--green-900);
}
.visitor-stats .v-item .v-value {
  color: var(--green-800);
  font-weight: 700;
  font-size: .9rem;
}

@media (max-width: 768px) {
  .footer-scenery-option2 {
    background-image: url('/assets/redd-plus/footer-forest.png');
    min-height: 280px;
    background-position: center bottom;
  }
}
</style>

<div class="footer-scenery-option2 pt-5">
  <section class="container pt-4 pb-5">
    <div class="row align-items-center gy-4">
        <div class="col-lg-4 text-center text-lg-end pe-lg-5">
            <span class="big-stat">54.4<span class="pct">%</span></span>
        </div>

        <div class="col-lg-5 stat-divider ps-lg-5">
            <h3 class="font-display" style="color:var(--green-900);">
                Malaysia&rsquo;s Forest Cover
            </h3>

            <p class="fw-medium mb-2">
                More than half of Malaysia remains under forest cover, supporting biodiversity,
                climate resilience and sustainable development.
            </p>

            <p class="mb-0" style="font-size:.75rem; color:#5b6a5e;">
                <strong>Source:</strong> Malaysian Forest Data 2024, Ministry of Natural Resources
                and Environment Sustainability (NRES)
            </p>
        </div>

        <div class="col-lg-3 text-center">
            <svg class="donut" viewBox="0 0 120 120" role="img" aria-label="54.4 percent forest cover">
                <defs>
                    <linearGradient id="ringGrad" x1="0%" y1="0%" x2="100%" y2="100%">
                        <stop offset="0%" stop-color="#8a9a5b"></stop>
                        <stop offset="100%" stop-color="#2e4a35"></stop>
                    </linearGradient>
                </defs>

                <!-- Background ring -->
                <circle
                    cx="60"
                    cy="60"
                    r="48"
                    fill="none"
                    stroke="#e6e4d6"
                    stroke-width="14">
                </circle>

                <!-- 54.4% -->
                <circle
                    cx="60"
                    cy="60"
                    r="48"
                    fill="none"
                    stroke="url(#ringGrad)"
                    stroke-width="14"
                    stroke-linecap="round"
                    stroke-dasharray="164.06 137.53"
                    transform="rotate(-60 60 60)">
                </circle>
            </svg>
        </div>
    </div>
  </section>

  <footer class="container pb-4">
    <div class="mb-4">
      <img src="/assets/redd-plus/logo.png" alt="REDD+ Malaysia" height="52">
    </div>
    <div class="footer-contact d-flex flex-wrap gap-4 mb-4">
      <a href="https://redd.nres.gov.my"><i class="bi bi-globe2"></i>https://redd.nres.gov.my</a>
      <a href="mailto:redd@nres.gov.my"><i class="bi bi-envelope"></i>redd@nres.gov.my</a>
      <a href="tel:+60380008000"><i class="bi bi-telephone"></i>+603 8091 7000</a>
    </div>
    <div class="visitor-stats">
      <h5>Visitor counter</h5>
      <div class="v-row">
        <div class="v-item"><span class="v-label">Today</span><span class="v-value">{{ number_format($todayVisits) }}</span></div>
        <div class="v-item"><span class="v-label">This Week</span><span class="v-value">{{ number_format($thisWeek) }}</span></div>
        <div class="v-item"><span class="v-label">This Month</span><span class="v-value">{{ number_format($thisMonth) }}</span></div>
        <div class="v-item"><span class="v-label">This Year</span><span class="v-value">{{ number_format($thisYear) }}</span></div>
        <div class="v-item"><span class="v-label">Total Visitors</span><span class="v-value">{{ number_format($totalVisits) }}</span></div>
      </div>
    </div>
    <hr style="border-color:rgba(60,80,60,.3);">
    <div class="footer-bottom d-flex flex-column flex-md-row justify-content-center gap-2 gap-md-4 text-center pb-2">
      <span>&copy; 2026 REDD+ Malaysia. All rights reserved.</span>
      <span class="d-none d-md-inline">|</span>
      <a href="/redd-plus/article?id=security-policy">Security Policy</a>
      <span class="d-none d-md-inline">|</span>
      <a href="/redd-plus/article?id=privacy-policy">Privacy Policy</a>
      <span class="d-none d-md-inline">|</span>
      <a href="/redd-plus/article?id=web-policy">Web Policy</a>
      <span class="d-none d-md-inline">|</span>
      <a href="/redd-plus/article?id=disclaimer">Disclaimer</a>
    </div>
  </footer>
</div>