<?php include "config/koneksi.php"; ?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>MTCNA - SMK Yadika Natar</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
<link href="https://unpkg.com/aos@2.3.4/dist/aos.css" rel="stylesheet">

<style>
body { font-family: 'Segoe UI', sans-serif; }

/* ===== NAVBAR MODERN ===== */
.navbar {
    background: linear-gradient(90deg,#0d6efd,#00c6ff,#6f42c1);
    backdrop-filter: blur(10px);
}
.navbar a {
    transition: 0.3s;
}
.navbar a:hover {
    transform: translateY(-2px);
}

/* ===== HERO ===== */
.hero {
    position: relative;
    background: url('assets/lab.jpeg') center/cover no-repeat;
    height: 95vh;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
}
.hero-overlay {
    position:absolute;
    width:100%; height:100%;
    background: rgba(0,0,0,0.6);
}
.hero-content { position:relative; z-index:2; }

/* ===== CARD ===== */
.card-hover {
    border-radius:15px;
    transition:0.3s;
}
.card-hover:hover {
    transform: translateY(-8px);
}

/* ICON EFFECT */
.card-hover i {
    transition:0.3s;
}
.card-hover:hover i {
    transform: scale(1.2);
    color:#ff4b2b;
}

/* ===== STATS ===== */
.stats {
    background: linear-gradient(135deg,#0d6efd,#00c6ff);
    color:white;
}

/* ===== TESTI ===== */
.testi {
    background:#f8f9fa;
}

/* ===== FOOTER ===== */
.footer {
    background:#111;
    color:white;
}

/* ===== PRELOADER ===== */
#preloader {
    position:fixed;
    width:100%;
    height:100%;
    background: linear-gradient(135deg,#0d6efd,#00c6ff);
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    z-index:9999;
    color:white;
}
.loader {
    width:50px;
    height:50px;
    border:5px solid rgba(255,255,255,0.3);
    border-top:5px solid white;
    border-radius:50%;
    animation:spin 1s linear infinite;
}
@keyframes spin {
    100% { transform: rotate(360deg); }
}
.fade-out {
    opacity:0;
    transition:0.5s;
}
</style>
</head>

<body>

<!-- PRELOADER -->
<div id="preloader">
    <div class="loader"></div>
    <h5 class="mt-3">Loading MTCNA...</h5>
</div>

<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-dark sticky-top shadow">
<div class="container">
    <img src="assets/logo.png" width="45">
    <a class="navbar-brand ms-2 fw-bold">SMK Yadika Natar</a>

    <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#menu">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="menu">
        <div class="ms-auto">
            <a href="#" class="btn btn-light btn-sm me-1">Home</a>
            <a href="jadwal.php" class="btn btn-light btn-sm me-1">Jadwal</a>
            <a href="galeri.php" class="btn btn-light btn-sm me-1">Galeri</a>
            <a href="modul.php" class="btn btn-light btn-sm me-1">Modul</a>
            <a href="daftar.php" class="btn btn-warning btn-sm">Daftar</a>
        </div>
    </div>
</div>
</nav>

<!-- HERO -->
<section class="hero text-center">
<div class="hero-overlay"></div>
<div class="hero-content" data-aos="fade-down">
    <h1 class="fw-bold display-4">Mikrotik Academy</h1>
    <h4>SMK Yadika Natar</h4>
    <p>Pelatihan jaringan profesional & sertifikasi resmi</p>
    <a href="daftar.php" class="btn btn-warning btn-lg">Daftar Sekarang</a>
</div>
</section>

<!-- FASILITAS -->
<section style="background: linear-gradient(135deg,#ff416c,#ff4b2b);" class="text-white py-5">
<div class="container">
<div class="row">

<div class="col-md-4" data-aos="fade-right">
    <h2 class="fw-bold">Kenapa Harus Kami?</h2>
    <p>Berbagai fasilitas tambahan kami sediakan spesial untuk peserta training MTCNA</p>
</div>

<div class="col-md-8">
<div class="row g-4">

<?php
$fasilitas = [
["bi-arrow-repeat","Free Mengulang","Bisa ulang training 2x"],
["bi-pc-display","Lab Komplit","Disediakan perangkat lab satu orang satu"],
["bi-patch-check","Vue Authorized Partner","Penyelenggara resmi ujian sertifikasi international"],
["bi-book","Materi Resmi","Standar Mikrotik"],
["bi-person-check","Trainer Profesional","Instruktur bersertifikat"],
["bi-box-seam","Fasilitas Lengkap","Modul, Sertifikat, T-shirt, Konsumsi, dll"]
];

foreach($fasilitas as $f){
?>

<div class="col-md-6" data-aos="fade-up">
<div class="bg-white text-dark p-4 rounded shadow h-100 card-hover text-center">
    <i class="bi <?= $f[0] ?>" style="font-size:40px; color:#0d6efd;"></i>
    <h5 class="mt-3"><?= $f[1] ?></h5>
    <p><?= $f[2] ?></p>
</div>
</div>

<?php } ?>

</div>
</div>

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

<!-- STATS -->
<section class="stats text-center py-5">
<div class="container">
<div class="row">

<div class="col-md-4">
    <h1>500+</h1>
    <p>Alumni</p>
</div>

<div class="col-md-4">
    <h1>50+</h1>
    <p>Batch Training</p>
</div>

<div class="col-md-4">
    <h1>95%</h1>
    <p>Lulus Sertifikasi</p>
</div>

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

<!-- JADWAL -->
<section class="container mt-5">
<h2 class="text-center fw-bold">Jadwal Terdekat</h2>
<div class="row mt-4">

<?php
$data = mysqli_query($conn,"SELECT * FROM jadwal LIMIT 3");
while($d=mysqli_fetch_array($data)){
?>

<div class="col-md-4" data-aos="zoom-in">
<div class="card shadow card-hover mb-4">
<div class="card-body">
<h5><?= $d['nama_kelas'] ?></h5>
<p><?= $d['tanggal'] ?></p>
<span class="badge bg-success"><?= $d['status'] ?></span>
</div>
</div>
</div>

<?php } ?>

</div>
</section>

<!-- TESTIMONI -->
<section class="testi py-5 mt-5">
<div class="container text-center">
<h2 class="fw-bold">Testimoni Alumni</h2>

<div class="row mt-4">

<div class="col-md-4" data-aos="fade-up">
<div class="card p-3 shadow">
<p>"Training sangat membantu!"</p>
<b>- Siswa TJKT</b>
</div>
</div>

<div class="col-md-4" data-aos="fade-up" data-aos-delay="100">
<div class="card p-3 shadow">
<p>"Langsung kerja setelah training"</p>
<b>- Alumni</b>
</div>
</div>

<div class="col-md-4" data-aos="fade-up" data-aos-delay="200">
<div class="card p-3 shadow">
<p>"Materi jelas dan praktik nyata"</p>
<b>- Peserta</b>
</div>
</div>

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

<!-- CTA -->
<section class="text-center py-5" style="background:#0d6efd;color:white;">
<h2>Siap Jadi Network Engineer?</h2>
<a href="daftar.php" class="btn btn-warning btn-lg mt-3">Daftar Sekarang</a>
</section>

<!-- FOOTER -->
<footer class="footer text-center p-4">
<p>© 2026 SMK Yadika Natar | Mikrotik Academy</p>
</footer>

<!-- WHATSAPP FLOAT -->
<a href="https://wa.me/6282178585770" target="_blank"
style="position:fixed;bottom:20px;right:20px;background:#25D366;color:white;padding:15px;border-radius:50%;font-size:20px;">
💬
</a>

<!-- SCRIPT -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>

<script>
AOS.init({duration:1000, once:true});

// PRELOADER
window.addEventListener("load", function(){
    const loader = document.getElementById("preloader");
    setTimeout(()=>{
        loader.classList.add("fade-out");
        setTimeout(()=>{ loader.style.display="none"; },500);
    },800);
});
</script>

</body>
</html>