<?php
include "koneksi.php";

// Statistik
$total = mysqli_num_rows(mysqli_query($koneksi, "SELECT * FROM pengaduan"));
$hari_ini = mysqli_num_rows(mysqli_query($koneksi, "SELECT * FROM pengaduan WHERE DATE(tanggal)=CURDATE()"));
$bulan_ini = mysqli_num_rows(mysqli_query($koneksi, "SELECT * FROM pengaduan WHERE MONTH(tanggal)=MONTH(CURDATE())"));
?>

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>BK 57 CARE</title>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">

<!-- AOS -->
<link href="https://unpkg.com/aos@2.3.4/dist/aos.css" rel="stylesheet">

<style>
body {
  font-family: 'Poppins', sans-serif;
  background: #f4f6f9;
  transition: 0.3s;
}

/* DARK MODE */
body.dark {
  background: #0f172a;
  color: #e2e8f0;
}
body.dark .card {
  background: #1e293b;
  color: white;
}
body.dark .navbar {
  background: #1e293b !important;
}
body.dark .hero {
  background: linear-gradient(135deg, #020617, #1e293b);
}

/* NAVBAR */
.navbar {
  position: sticky;
  top: 0;
  z-index: 999;
}

/* HERO */
.hero {
  background: linear-gradient(135deg, #0059ff, #0059ff);
  color: white;
  padding: 100px 20px;
}

/* CARD */
.card {
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  border: none;
  transition: all 0.3s ease;
}
.card:hover {
  transform: translateY(-8px);
}

/* BUTTON */
.btn {
  border-radius: 10px;
  transition: 0.3s;
}
.btn:hover {
  transform: scale(1.05);
}

section {
  margin-top: 60px;
}

/* HERO ANIMATION */
.hero h1 {
  animation: fadeDown 1s ease;
}
@keyframes fadeDown {
  from {opacity:0; transform:translateY(-20px);}
  to {opacity:1; transform:translateY(0);}
}

/* LOADER */
#loader {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #4f46e5;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loader-text {
  color: white;
  font-size: 28px;
  font-weight: bold;
  animation: pulse 1s infinite;
}
@keyframes pulse {
  0% {opacity: 0.5;}
  50% {opacity: 1;}
  100% {opacity: 0.5;}
}
</style>
</head>

<body>

<!-- LOADER -->
<div id="loader">
  <div class="loader-text">BK 57 CARE</div>
</div>

<!-- NAVBAR -->
<nav class="navbar navbar-light bg-white shadow-sm">
  <div class="container d-flex justify-content-between align-items-center">

    <div class="d-flex align-items-center">
      <img src="img/Logo BK.png" width="60" class="mr-2">
      <span class="navbar-brand font-weight-bold mb-0">BK 57 CARE</span>
    </div>

    <div>
      <a href="login.php" class="btn btn-primary">Login Admin</a>
      <button class="btn btn-dark ml-2" onclick="toggleDark()">🌙</button>
    </div>

  </div>
</nav>

<!-- HERO -->
<section class="hero d-flex align-items-center">
  <div class="container">
    <div class="row align-items-center">

      <div class="col-md-6" data-aos="fade-right">
        <h1 class="display-4 font-weight-bold mb-3">BK 57 CARE</h1>
        <p class="lead mb-4">
          Layanan Bimbingan Konseling modern untuk membantu siswa menyampaikan keluhan dengan mudah, aman, dan terpercaya.
        </p>

        <a href="form_pengaduan.php" class="btn btn-light btn-lg mr-2 shadow">
          🚀 Ajukan Layanan
        </a>

        <a href="form_infokarirdanbeasiswa.php" class="btn btn-outline-light btn-lg shadow">
          🎓 Karir & Beasiswa
        </a>

        <a href="form_pengembangandiri.php" class="btn btn-outline-light btn-lg shadow mt-2">
          📚 Pengembangan Diri
        </a>
      </div>

      <div class="col-md-6 text-center" data-aos="zoom-in">
        <img src="img/Logo BK.png" class="img-fluid" style="max-width:300px;">
      </div>

    </div>
  </div>
</section>

<!-- PROFIL -->
<section class="container">
  <div class="row align-items-center">

    <div class="col-md-6" data-aos="fade-up">
      <h3>Tentang BK</h3>
      <p>
        BK hadir untuk membantu siswa menghadapi masalah dengan solusi terbaik.
        Setiap masalah pasti ada jalan keluar, dan kamu tidak sendirian.
      </p>
    </div>

    <div class="col-md-6 text-center" data-aos="fade-left">
      <img src="img/hal_lobby(L).jpg" class="img-fluid rounded shadow" style="max-width:250px;">
    </div>

  </div>
</section>

<!-- STATISTIK -->
<section class="container">
<div class="row text-center">

  <div class="col-md-4" data-aos="zoom-in">
    <div class="card p-4">
      <h2 class="text-primary counter"><?= $total ?></h2>
      <p>Total Pengaduan</p>
    </div>
  </div>

  <div class="col-md-4" data-aos="zoom-in">
    <div class="card p-4">
      <h2 class="text-success counter"><?= $hari_ini ?></h2>
      <p>Hari Ini</p>
    </div>
  </div>

  <div class="col-md-4" data-aos="zoom-in">
    <div class="card p-4">
      <h2 class="text-warning counter"><?= $bulan_ini ?></h2>
      <p>Bulan Ini</p>
    </div>
  </div>

</div>
</section>

<!-- CTA -->
<section class="text-center" data-aos="fade-up">
  <h4>Punya masalah? Ceritakan kepada kami</h4>
  <a href="form_pengaduan.php" class="btn btn-primary mt-3">Laporkan Sekarang</a>
</section>

<!-- FOOTER -->
<footer class="text-center p-4 mt-5 bg-dark text-white">
  <strong>BK 57 CARE</strong><br>
  <small>© 2026</small>
</footer>

<!-- JS -->
<script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>
<script>
AOS.init({ duration: 1000, once: true });
</script>

<!-- COUNTER -->
<script>
const counters = document.querySelectorAll('.counter');
counters.forEach(counter => {
    const target = +counter.innerText;
    counter.innerText = '0';

    const updateCounter = () => {
        const c = +counter.innerText;
        const increment = target / 50;

        if(c < target){
            counter.innerText = Math.ceil(c + increment);
            setTimeout(updateCounter, 20);
        } else {
            counter.innerText = target;
        }
    };

    updateCounter();
});
</script>

<!-- LOADER -->
<script>
window.addEventListener("load", function(){
    const loader = document.getElementById("loader");
    loader.style.opacity = "0";
    setTimeout(() => loader.style.display = "none", 500);
});
</script>

<!-- DARK MODE -->
<script>
function toggleDark(){
    document.body.classList.toggle("dark");

    if(document.body.classList.contains("dark")){
        localStorage.setItem("darkmode","on");
    } else {
        localStorage.setItem("darkmode","off");
    }
}

if(localStorage.getItem("darkmode") === "on"){
    document.body.classList.add("dark");
}
</script>

</body>
</html>