@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>
.vs-hero{
  background:linear-gradient(rgba(34,57,42,.72),rgba(34,57,42,.72)),url('/assets/redd-plus/hero_bg.png') center/cover no-repeat;
  padding:3rem 0;
  color:#fff;
}
.vs-hero h1{font-weight:700;font-size:clamp(2rem,4vw,2.8rem);}
.vs-hero p{font-size:1rem;font-weight:500;max-width:520px;opacity:.9;}

.vs-section{
  padding:4rem 0 5rem;
  background:linear-gradient(180deg,var(--cream) 0%,#efeee3 100%);
}
.vs-header{
  text-align:center;
  margin-bottom:2.5rem;
}
.vs-header h2{
  font-family:'Quicksand',sans-serif;
  color:var(--green-900);
  font-size:clamp(1.5rem,2.5vw,2rem);
  font-weight:700;
  margin-bottom:.4rem;
}
.vs-header p{
  color:#7a8a7e;
  font-size:.95rem;
  margin:0;
}

.vs-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1.25rem;
  max-width:1100px;
  margin:0 auto;
}

.vs-card{
  position:relative;
  background:#fff;
  border-radius:16px;
  padding:1.75rem 1.5rem 1.5rem;
  text-align:center;
  border:1px solid #e8e4d8;
  box-shadow:0 4px 20px rgba(46,74,53,.06);
  transition:transform .25s ease, box-shadow .25s ease;
  overflow:hidden;
}
.vs-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:4px;
  background:linear-gradient(90deg,var(--green-800),var(--gold));
}
.vs-card:hover{
  transform:translateY(-5px);
  box-shadow:0 12px 32px rgba(46,74,53,.12);
}
.vs-icon{
  width:52px;height:52px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--green-100),#dce8d8);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--green-800);
  font-size:1.4rem;
  margin-bottom:1rem;
}
.vs-label{
  display:block;
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.8px;
  color:#8a9a8e;
  margin-bottom:.5rem;
}
.vs-value{
  display:block;
  font-family:'Quicksand',sans-serif;
  color:var(--green-800);
  font-weight:700;
  font-size:2.4rem;
  line-height:1;
}

.vs-card--total{
  background:linear-gradient(135deg,var(--green-800),var(--green-900));
  border:none;
}
.vs-card--total::before{
  background:linear-gradient(90deg,var(--gold),#e8d5a8);
}
.vs-card--total .vs-icon{
  background:rgba(255,255,255,.12);
  color:#fff;
}
.vs-card--total .vs-label{
  color:rgba(255,255,255,.75);
}
.vs-card--total .vs-value{
  color:#fff;
}

.vs-footer{
  text-align:center;
  margin-top:2rem;
  font-size:.8rem;
  color:#8a9a8e;
}
.vs-footer i{margin-right:.35rem;}

@media (max-width:575.98px){
  .vs-grid{grid-template-columns:1fr 1fr;}
  .vs-card{padding:1.25rem 1rem;}
  .vs-value{font-size:1.9rem;}
}
</style>

<header class="vs-hero">
  <div class="container">
    <h1><i class="bi bi-bar-chart-line me-2"></i>Visitor Statistic</h1>
    <p class="mb-0">Website traffic and visitor statistics for the REDD+ Malaysia portal.</p>
  </div>
</header>

<section class="vs-section">
  <div class="container">
    <div class="vs-header">
      <h2>Visitor Counter</h2>
      <p>Real-time statistics of portal visits</p>
    </div>

    <div class="vs-grid">
      <div class="vs-card">
        <span class="vs-icon"><i class="bi bi-calendar-day"></i></span>
        <span class="vs-label">Today</span>
        <span class="vs-value">{{ number_format($todayVisits) }}</span>
      </div>

      <div class="vs-card">
        <span class="vs-icon"><i class="bi bi-calendar-week"></i></span>
        <span class="vs-label">This Week</span>
        <span class="vs-value">{{ number_format($thisWeek) }}</span>
      </div>

      <div class="vs-card">
        <span class="vs-icon"><i class="bi bi-calendar2-month"></i></span>
        <span class="vs-label">This Month</span>
        <span class="vs-value">{{ number_format($thisMonth) }}</span>
      </div>

      <div class="vs-card">
        <span class="vs-icon"><i class="bi bi-calendar-check"></i></span>
        <span class="vs-label">This Year</span>
        <span class="vs-value">{{ number_format($thisYear) }}</span>
      </div>

      <div class="vs-card vs-card--total">
        <span class="vs-icon"><i class="bi bi-graph-up-arrow"></i></span>
        <span class="vs-label">Total Visitors</span>
        <span class="vs-value">{{ number_format($totalVisits) }}</span>
      </div>
    </div>

    <p class="vs-footer"><i class="bi bi-clock-history"></i>Statistics updated automatically on each visit</p>
  </div>
</section>