@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>
.page-hero{
  background-image:linear-gradient(rgb(255 255 255 / 72%),rgba(34,57,42,.72)),url(/assets/redd-plus/hero_bg.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:520px;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; } }
.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; }

.vs-section{flex:1 0 auto;
  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>

<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">&rsaquo;</span>
        <span class="active">Visitor Statistic</span>
      </nav>
      <h1>Visitor Statistic</h1>
      <p>Website traffic and visitor statistics for the REDD Plus 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>

<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>