<?php
require_once 'config/database.php';
require_once 'config/functions.php';

$pengaturan = getPengaturan();
$active_page = 'home';
$page_title = 'Beranda';

// Get artikel terbaru
$query_artikel = mysqli_query($conn, "
    SELECT * FROM artikel 
    WHERE status = 'published' 
    ORDER BY created_at DESC 
    LIMIT 6
");

// Get 3 artikel untuk blog section
$query_blog = mysqli_query($conn, "
    SELECT * FROM artikel 
    WHERE status = 'published' 
    ORDER BY created_at DESC 
    LIMIT 3
");

include 'includes/header.php';
?>

<style>
/* ============================================================
   INDEX PAGE - FATAHILLAH REFERENCE LAYOUT
   ============================================================ */

/* ---------- HERO SLIDER ---------- */
.fth-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 550px;
  max-height: 780px;
  overflow: hidden;
  background: #0d4f25;
}
.fth-hero .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
  background-size: cover;
  background-position: center;
}
.fth-hero .slide.active { opacity: 1; }
.fth-hero .slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(13,79,37,0.78) 0%, rgba(26,122,58,0.55) 50%, rgba(0,0,0,0.35) 100%);
}
.fth-hero .slide-content {
  position: absolute;
  bottom: 110px;
  left: 80px;
  z-index: 5;
  max-width: 600px;
}
@media(max-width:768px){.fth-hero .slide-content{left:24px;right:24px;bottom:80px;}}
.fth-hero .slide-content .tagline {
  color: #f0a500;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: block;
}
.fth-hero .slide-content h1 {
  color: #fff;
  font-family: 'Poppins',sans-serif;
  font-size: clamp(28px,4vw,52px);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 16px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.fth-hero .slide-content h1 span { color: #f0a500; }
.fth-hero .slide-content p {
  color: rgba(255,255,255,0.88);
  font-size: clamp(14px,1.5vw,17px);
  line-height: 1.7;
  margin-bottom: 0;
  max-width: 480px;
}
.fth-hero .slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(255,255,255,0.18);
  border: 2px solid rgba(255,255,255,0.45);
  color: #fff;
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s;
}
.fth-hero .slider-btn:hover { background: #f0a500; border-color: #f0a500; }
.fth-hero .slider-btn.prev { left: 28px; }
.fth-hero .slider-btn.next { right: 28px; }
.fth-hero .slider-dots {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 10px;
}
.fth-hero .slider-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  border: 2px solid rgba(255,255,255,0.7);
  cursor: pointer;
  transition: all 0.3s;
}
.fth-hero .slider-dot.active { background: #f0a500; border-color: #f0a500; transform: scale(1.2); }

/* ---------- WELCOME ---------- */
.fth-welcome { padding: 80px 0 70px; background: #fff; }
.fth-welcome .kepala-card { position: relative; display: inline-block; width: 100%; max-width: 300px; }
.fth-welcome .left-border-accent { position: absolute; top: 0; left: -14px; width: 5px; height: 100%; background: #f0a500; border-radius: 3px; z-index:1; }
.fth-welcome .kepala-img-wrap { background: #1a7a3a; border-radius: 12px 12px 0 0; overflow: hidden; }
.fth-welcome .kepala-placeholder { width: 100%; height: 300px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#1a7a3a,#0d4f25); }
.fth-welcome .kepala-placeholder i { font-size: 80px; color: rgba(255,255,255,0.35); }
.fth-welcome .kepala-label { background: #1a7a3a; color: #fff; text-align: center; padding: 16px 20px; }
.fth-welcome .kepala-label h5 { font-family:'Poppins',sans-serif; font-weight:700; font-size:18px; color:#fff; margin-bottom:4px; }
.fth-welcome .kepala-label p { font-size:13px; color:rgba(255,255,255,0.8); margin:0; }
.fth-welcome .kepala-accent { position:absolute; bottom:-10px; right:-10px; width:70%; height:60px; background:#f0a500; border-radius:0 0 8px 0; z-index:-1; }
.fth-welcome .welcome-text h2 { font-family:'Poppins',sans-serif; font-size:clamp(22px,2.5vw,32px); font-weight:700; color:#0d4f25; margin-bottom:18px; }
.fth-welcome .welcome-text p { color:#555; line-height:1.8; font-size:15px; margin-bottom:14px; }
.fth-welcome .visi-misi h4 { font-family:'Poppins',sans-serif; font-weight:700; color:#0d4f25; font-size:17px; margin-bottom:6px; margin-top:20px; }
.fth-welcome .visi-misi p { color:#555; font-size:15px; line-height:1.7; }

/* ---------- STATS ---------- */
.fth-stats { background: linear-gradient(135deg,#1a7a3a 0%,#0d4f25 100%); padding: 70px 0; position:relative; overflow:hidden; }
.fth-stats .stats-left h2 { font-family:'Poppins',sans-serif; font-size:clamp(22px,2.5vw,30px); font-weight:700; color:#fff; margin-bottom:16px; }
.fth-stats .stats-left p { color:rgba(255,255,255,0.78); font-size:15px; line-height:1.7; max-width:380px; }
.fth-stats .stats-card { background:#f0a500; border-radius:16px; padding:36px 28px; display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.fth-stats .stat-item { text-align:center; padding:12px 8px; }
.fth-stats .stat-item i { font-size:32px; color:#0d4f25; display:block; margin-bottom:10px; }
.fth-stats .stat-item .stat-num { font-family:'Poppins',sans-serif; font-size:clamp(24px,3vw,38px); font-weight:800; color:#0d4f25; display:block; line-height:1; }
.fth-stats .stat-item .stat-label { font-size:13px; color:#0d4f25; font-weight:600; margin-top:6px; display:block; }

/* ---------- SECTION TITLE ---------- */
.fth-section-title { text-align:center; margin-bottom:50px; }
.fth-section-title h2 { font-family:'Poppins',sans-serif; font-size:clamp(24px,3vw,36px); font-weight:700; color:#0d4f25; margin-bottom:12px; }
.fth-section-title h2::after { content:''; display:block; width:60px; height:4px; background:#f0a500; margin:12px auto 0; border-radius:2px; }
.fth-section-title p { color:#777; font-size:15px; max-width:520px; margin:14px auto 0; line-height:1.7; }

/* ---------- BLOG ---------- */
.fth-blog { padding: 80px 0; background: #fff; }
.fth-blog-card { background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 4px 20px rgba(0,0,0,0.08); transition:all 0.3s; height:100%; display:flex; flex-direction:column; }
.fth-blog-card:hover { box-shadow:0 8px 32px rgba(26,122,58,0.18); transform:translateY(-5px); }
.fth-blog-card .card-img { width:100%; height:210px; object-fit:cover; display:block; }
.fth-blog-card .card-img-placeholder { width:100%; height:210px; background:linear-gradient(135deg,#1a7a3a,#0d4f25); display:flex; align-items:center; justify-content:center; }
.fth-blog-card .card-img-placeholder i { font-size:48px; color:rgba(255,255,255,0.4); }
.fth-blog-card .card-body { padding:20px 22px 24px; flex:1; display:flex; flex-direction:column; }
.fth-blog-card .date-badge { display:flex; align-items:center; margin-bottom:14px; }
.fth-blog-card .date-badge .day { background:#f0a500; color:#fff; font-family:'Poppins',sans-serif; font-weight:800; font-size:22px; width:52px; height:52px; display:flex; align-items:center; justify-content:center; border-radius:8px 0 0 8px; flex-shrink:0; }
.fth-blog-card .date-badge .month-year { background:#0d4f25; color:#fff; font-size:11px; font-weight:700; text-align:center; padding:0 10px; height:52px; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.2; border-radius:0 8px 8px 0; flex-shrink:0; }
.fth-blog-card .card-body h4 { font-family:'Poppins',sans-serif; font-size:17px; font-weight:700; color:#0d4f25; line-height:1.4; margin-bottom:10px; flex:1; }
.fth-blog-card .card-body h4 a { color:inherit; text-decoration:none; transition:color 0.3s; }
.fth-blog-card .card-body h4 a:hover { color:#1a7a3a; }
.fth-blog-card .card-body p { color:#666; font-size:14px; line-height:1.7; margin-bottom:16px; }
.fth-blog-card .read-more { color:#1a7a3a; font-weight:700; font-size:14px; text-decoration:none; display:inline-flex; align-items:center; gap:6px; transition:gap 0.3s; margin-top:auto; }
.fth-blog-card .read-more:hover { gap:10px; color:#0d4f25; }

/* ---------- ACHIEVEMENTS ---------- */
.fth-achievements { padding: 80px 0; background: #f8fcf9; }
.fth-achievements .achievement-list { display:flex; flex-direction:column; gap:10px; }
.fth-achievements .achievement-item { display:flex; align-items:flex-start; gap:16px; background:#fff; border-radius:10px; padding:16px 20px; box-shadow:0 2px 12px rgba(0,0,0,0.06); transition:all 0.3s; }
.fth-achievements .achievement-item:hover { box-shadow:0 6px 24px rgba(26,122,58,0.12); transform:translateX(4px); }
.fth-achievements .achievement-num { font-family:'Poppins',sans-serif; font-size:20px; font-weight:800; color:#c8c8c8; width:36px; flex-shrink:0; line-height:1; padding-top:2px; }
.fth-achievements .achievement-info h5 { font-family:'Poppins',sans-serif; font-size:15px; font-weight:600; color:#0d4f25; margin-bottom:3px; }
.fth-achievements .achievement-info small { color:#999; font-size:13px; }
.fth-achievements .right-col { position:relative; display:flex; justify-content:center; align-items:center; min-height:340px; }
.fth-achievements .student-circle { width:300px; height:300px; border-radius:50%; background:#f0a500; overflow:hidden; flex-shrink:0; position:relative; z-index:2; }
.fth-achievements .student-circle img { width:100%; height:100%; object-fit:cover; object-position:top; }
.fth-achievements .student-circle .circle-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.fth-achievements .student-circle .circle-placeholder i { font-size:80px; color:rgba(255,255,255,0.5); }
.fth-achievements .dashed-ring { position:absolute; width:350px; height:350px; border-radius:50%; border:3px dashed rgba(240,165,0,0.45); top:50%; left:50%; transform:translate(-50%,-50%); animation:spin-slow 18s linear infinite; z-index:1; }
@keyframes spin-slow { from{transform:translate(-50%,-50%) rotate(0deg);} to{transform:translate(-50%,-50%) rotate(360deg);} }

/* ---------- CTA ---------- */
.fth-cta { padding: 80px 0; background: linear-gradient(135deg,#0d4f25 0%,#1a7a3a 100%); position:relative; overflow:hidden; }
.fth-cta h2 { font-family:'Poppins',sans-serif; font-size:clamp(24px,3vw,38px); font-weight:700; color:#fff; margin-bottom:16px; }
.fth-cta h2 span { color:#f0a500; }
.fth-cta > .container > .row > div > p { color:rgba(255,255,255,0.82); font-size:16px; line-height:1.7; max-width:500px; margin-bottom:32px; }
.fth-cta .cta-btns { display:flex; flex-wrap:wrap; gap:14px; }
.fth-cta .btn-cta-primary { background:#f0a500; color:#0d4f25; font-weight:700; font-size:15px; padding:14px 32px; border-radius:8px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:all 0.3s; border:2px solid #f0a500; }
.fth-cta .btn-cta-primary:hover { background:#d4890a; border-color:#d4890a; transform:translateY(-2px); box-shadow:0 6px 20px rgba(240,165,0,0.35); }
.fth-cta .btn-cta-outline { color:#fff; font-weight:700; font-size:15px; padding:14px 32px; border-radius:8px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:all 0.3s; border:2px solid rgba(255,255,255,0.6); }
.fth-cta .btn-cta-outline:hover { background:rgba(255,255,255,0.12); border-color:#fff; transform:translateY(-2px); }
.fth-cta .cta-features { margin-top:40px; display:flex; flex-wrap:wrap; gap:20px; }
.fth-cta .cta-feature-item { display:flex; align-items:center; gap:10px; color:rgba(255,255,255,0.85); font-size:14px; }
.fth-cta .cta-feature-item i { color:#f0a500; font-size:18px; }
.fth-cta .cta-right-card { background:rgba(255,255,255,0.1); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.2); border-radius:16px; padding:32px 28px; text-align:center; }
.fth-cta .cta-right-card .main-icon { font-size:54px; color:#f0a500; margin-bottom:16px; display:block; }
.fth-cta .cta-right-card h4 { color:#fff; font-family:'Poppins',sans-serif; font-weight:700; font-size:20px; margin-bottom:8px; }
.fth-cta .cta-right-card p { color:rgba(255,255,255,0.75); font-size:14px; margin-bottom:20px; }
.fth-cta .status-pill { display:inline-block; background:#f0a500; color:#0d4f25; font-weight:700; font-size:13px; padding:6px 20px; border-radius:20px; margin-bottom:20px; }
.fth-cta .status-pill.closed { background:#dc3545; color:#fff; }
.fth-cta .wa-link { display:inline-flex; align-items:center; gap:8px; background:#25d366; color:#fff; font-weight:700; padding:12px 24px; border-radius:8px; text-decoration:none; font-size:14px; transition:all 0.3s; }
.fth-cta .wa-link:hover { background:#1ea952; transform:translateY(-2px); }
</style>

<!-- HERO SLIDER -->
<section class="fth-hero" id="hero">
  <div class="slide active" style="background-image:url('<?= SITE_URL ?>/assets/img/hero/hero3.webp'); background-color:#1a7a3a;">
    <div class="slide-content">
      <span class="tagline">Selamat Datang</span>
      <h1><span>Registrasi</span> PPDB Siswa<br>Siswi Baru</h1>
      <p>Penerimaan peserta didik <?= htmlspecialchars($pengaturan['nama_sekolah']) ?> telah dibuka. Segera isi formulir online untuk mendapatkan kuota terbaik tahun ajaran baru.</p>
    </div>
  </div>
  <div class="slide" style="background-image:url('<?= SITE_URL ?>/assets/img/hero/hero1.webp'); background-color:#0d4f25;">
    <div class="slide-content">
      <span class="tagline">Fasilitas Unggulan</span>
      <h1>Tempat Belajar yang<br><span>Modern & Nyaman</span></h1>
      <p>Didukung fasilitas lengkap dan lingkungan kondusif untuk membentuk generasi cerdas, berakhlak, dan berprestasi.</p>
    </div>
  </div>
  <div class="slide" style="background-image:url('<?= SITE_URL ?>/assets/img/hero2.webp'); background-color:#1a4f25;">
    <div class="slide-content">
      <span class="tagline">Where Knowledge Meets Islamic Values</span>
      <h1><?= htmlspecialchars($pengaturan['nama_sekolah']) ?><br><span>Educating the Nation</span></h1>
      <p>Mendidik generasi penerus bangsa dengan nilai-nilai Islami yang kuat dan kurikulum pendidikan berkualitas tinggi.</p>
    </div>
  </div>
  <button class="slider-btn prev" onclick="heroSlider(-1)"><i class="bi bi-chevron-left"></i></button>
  <button class="slider-btn next" onclick="heroSlider(1)"><i class="bi bi-chevron-right"></i></button>
  <div class="slider-dots">
    <span class="slider-dot active" onclick="heroGoto(0)"></span>
    <span class="slider-dot" onclick="heroGoto(1)"></span>
    <span class="slider-dot" onclick="heroGoto(2)"></span>
  </div>
</section>

<!-- WELCOME / KEPALA SEKOLAH -->
<section class="fth-welcome">
  <div class="container">
    <div class="row align-items-center g-5">
      <div class="col-lg-4 col-md-6 text-center" data-aos="fade-right">
        <div class="kepala-card position-relative mx-auto">
          <div class="left-border-accent"></div>
          <div class="kepala-img-wrap">
            <div class="kepala-placeholder">
              <i class="bi bi-person-fill"></i>
            </div>
          </div>
          <div class="kepala-label">
            <h5>Kepala Sekolah</h5>
            <p><?= htmlspecialchars($pengaturan['nama_sekolah']) ?></p>
          </div>
          <div class="kepala-accent"></div>
        </div>
      </div>
      <div class="col-lg-8 col-md-6" data-aos="fade-left">
        <div class="welcome-text">
          <h2>Selamat Datang di <?= htmlspecialchars($pengaturan['nama_sekolah']) ?></h2>
          <p>Selamat datang di website resmi kami. Saya menyampaikan kepada seluruh unsur pemimpin, guru, karyawan, dan masyarakat siswa untuk dapat mengakses segala informasi tentang profil, kegiatan, serta fasilitas sekolah kami.</p>
          <div class="visi-misi">
            <h4><i class="bi bi-eye me-2" style="color:#f0a500;"></i>Visi</h4>
            <p>Mendidik Pemimpin untuk Tuhan, Negara, dan Masyarakat — membentuk generasi yang beriman, berilmu, dan berprestasi tinggi.</p>
            <h4><i class="bi bi-bullseye me-2" style="color:#f0a500;"></i>Misi</h4>
            <p>Kami berupaya memberikan pendidikan holistik dalam lingkungan yang mengeluarkan potensi terbaik setiap siswa; mengembangkan karakter moral yang kuat, dijiwai dengan nilai-nilai Islami, dan mempersiapkan siswa menjadi pemimpin untuk kebaikan yang lebih besar.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- STATISTICS -->
<section class="fth-stats">
  <div class="container">
    <div class="row align-items-center g-4">
      <div class="col-lg-5" data-aos="fade-right">
        <div class="stats-left">
          <h2>Data Sekolah<br><?= htmlspecialchars($pengaturan['nama_sekolah']) ?></h2>
          <p>Dengan pengalaman lebih dari dua dekade, kami terus berkembang memberikan pendidikan terbaik dan mencetak generasi berprestasi yang berakhlak mulia.</p>
        </div>
      </div>
      <div class="col-lg-7" data-aos="fade-left">
        <div class="stats-card">
          <div class="stat-item">
            <i class="bi bi-mortarboard-fill"></i>
            <span class="stat-num"><span data-purecounter-start="0" data-purecounter-end="5000" data-purecounter-duration="2" class="purecounter">5000</span>+</span>
            <span class="stat-label">Alumni</span>
          </div>
          <div class="stat-item">
            <i class="bi bi-person-video3"></i>
            <span class="stat-num"><span data-purecounter-start="0" data-purecounter-end="50" data-purecounter-duration="2" class="purecounter">50</span>+</span>
            <span class="stat-label">Tenaga Pengajar</span>
          </div>
          <div class="stat-item">
            <i class="bi bi-people-fill"></i>
            <span class="stat-num"><span data-purecounter-start="0" data-purecounter-end="1500" data-purecounter-duration="2" class="purecounter">1500</span>+</span>
            <span class="stat-label">Siswa Aktif</span>
          </div>
          <div class="stat-item">
            <i class="bi bi-trophy-fill"></i>
            <span class="stat-num"><span data-purecounter-start="0" data-purecounter-end="30" data-purecounter-duration="2" class="purecounter">30</span>+</span>
            <span class="stat-label">Ekstrakurikuler</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- BLOG / ARTIKEL -->
<section class="fth-blog">
  <div class="container">
    <div class="fth-section-title" data-aos="fade-up">
      <h2>Artikel &amp; Berita Terbaru</h2>
      <p>Ikuti perkembangan dan informasi terkini seputar kegiatan sekolah kami</p>
    </div>
    <?php if (mysqli_num_rows($query_blog) > 0): ?>
    <div class="row g-4">
      <?php while ($art = mysqli_fetch_assoc($query_blog)):
        $tgl = new DateTime($art['created_at']);
        $day = $tgl->format('d');
        $mon = strtoupper($tgl->format('M'));
        $yr  = $tgl->format('Y');
        $has_thumb = !empty($art['thumbnail']) && $art['thumbnail'] !== 'default-thumbnail.jpg';
      ?>
      <div class="col-lg-4 col-md-6" data-aos="fade-up">
        <div class="fth-blog-card">
          <?php if ($has_thumb): ?>
          <img src="<?= SITE_URL ?>/uploads/artikel/<?= htmlspecialchars($art['thumbnail']) ?>" alt="<?= htmlspecialchars($art['judul']) ?>" class="card-img">
          <?php else: ?>
          <div class="card-img-placeholder"><i class="bi bi-newspaper"></i></div>
          <?php endif; ?>
          <div class="card-body">
            <div class="date-badge">
              <span class="day"><?= $day ?></span>
              <span class="month-year"><?= $mon ?><br><?= $yr ?></span>
            </div>
            <h4><a href="<?= SITE_URL ?>/artikel-detail.php?slug=<?= htmlspecialchars($art['slug']) ?>"><?= htmlspecialchars($art['judul']) ?></a></h4>
            <p><?= htmlspecialchars(getPlainText($art['konten'], 100)) ?></p>
            <a href="<?= SITE_URL ?>/artikel-detail.php?slug=<?= htmlspecialchars($art['slug']) ?>" class="read-more">Baca Selengkapnya <i class="bi bi-arrow-right"></i></a>
          </div>
        </div>
      </div>
      <?php endwhile; ?>
    </div>
    <div class="text-center mt-5" data-aos="fade-up">
      <a href="<?= SITE_URL ?>/artikel.php" class="btn btn-primary btn-lg px-5">Lihat Semua Artikel <i class="bi bi-arrow-right ms-2"></i></a>
    </div>
    <?php else: ?>
    <div class="alert alert-info text-center"><i class="bi bi-info-circle me-2"></i>Belum ada artikel.</div>
    <?php endif; ?>
  </div>
</section>

<!-- ACHIEVEMENTS / PRESTASI -->
<section class="fth-achievements">
  <div class="container">
    <div class="fth-section-title" data-aos="fade-up">
      <h2>Prestasi Sekolah</h2>
      <p>Bangga dengan pencapaian luar biasa siswa-siswi kami di berbagai bidang</p>
    </div>
    <div class="row align-items-center g-5">
      <div class="col-lg-7" data-aos="fade-right">
        <div class="achievement-list">
          <?php
          $q_ach = mysqli_query($conn, "SELECT * FROM artikel WHERE status='published' AND kategori='Prestasi' ORDER BY created_at DESC LIMIT 6");
          $num_ach = mysqli_num_rows($q_ach);
          if ($num_ach > 0):
            $no = 1;
            while ($ach = mysqli_fetch_assoc($q_ach)):
          ?>
          <div class="achievement-item">
            <span class="achievement-num"><?= $no++ ?></span>
            <div class="achievement-info">
              <h5><?= htmlspecialchars($ach['judul']) ?></h5>
              <small><?= formatTanggal($ach['created_at'], 'long') ?></small>
            </div>
          </div>
          <?php endwhile; else:
            $ph = ['Juara 2 Sejabodetabek Tari Saman Ratoe jaroe Depok Town Square ','Juara 2 Lomba Paskibra Jakarta SMK Negeri 8 Jakarta','Juara 1 Lomba Debat Bahasa Inggris Tingkat Provinsi','Medali Emas Olimpiade Sains Nasional (OSN) Fisika','Juara 3 Pramuka Nasional Jambore Nasional 2025','Juara 1 Lomba Cipta Puisi Tingkat DKI Jakarta'];
            $dt = ['Februari 2026','Oktober 2025','Agustus 2025','Juli 2025','Juni 2025','Maret 2025'];
            foreach ($ph as $i => $p):
          ?>
          <div class="achievement-item">
            <span class="achievement-num"><?= $i+1 ?></span>
            <div class="achievement-info">
              <h5><?= $p ?></h5>
              <small><?= $dt[$i] ?></small>
            </div>
          </div>
          <?php endforeach; endif; ?>
        </div>
      </div>
      <div class="col-lg-5" data-aos="fade-left">
        <div class="right-col">
          <div class="dashed-ring"></div>
          <div class="student-circle">
            <div class="circle-placeholder">
              <i class="bi bi-star-fill"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- CTA / PPDB -->
<section class="fth-cta">
  <div class="container">
    <div class="row align-items-center g-5">
      <div class="col-lg-7" data-aos="fade-right">
        <h2>Bergabunglah Bersama<br><span>Keluarga <?= htmlspecialchars($pengaturan['nama_sekolah']) ?></span></h2>
        <p>PPDB Tahun Ajaran <?= htmlspecialchars($pengaturan['tahun_ajaran']) ?> telah <?= ($pengaturan['status_ppdb'] == 'buka') ? '<strong style="color:#f0a500;">dibuka</strong>' : 'ditutup' ?>! Raih kesempatan terbaik untuk mendapatkan pendidikan berkualitas dengan nilai-nilai Islami yang kuat.</p>
        <div class="cta-btns">
          <?php if ($pengaturan['status_ppdb'] == 'buka'): ?>
          <a href="<?= SITE_URL ?>/ppdb.php" class="btn-cta-primary"><i class="bi bi-pencil-square"></i>Daftar PPDB Online</a>
          <?php endif; ?>
          <a href="<?= SITE_URL ?>/program.php" class="btn-cta-outline"><i class="bi bi-book"></i>Lihat Program Studi</a>
        </div>
        <div class="cta-features">
          <div class="cta-feature-item"><i class="bi bi-check-circle-fill"></i>Terakreditasi A</div>
          <div class="cta-feature-item"><i class="bi bi-check-circle-fill"></i>Kurikulum Merdeka</div>
          <div class="cta-feature-item"><i class="bi bi-check-circle-fill"></i>Berbasis Islami</div>
          <div class="cta-feature-item"><i class="bi bi-check-circle-fill"></i>Fasilitas Modern</div>
        </div>
      </div>
      <div class="col-lg-5" data-aos="fade-left">
        <div class="cta-right-card">
          <i class="bi bi-mortarboard-fill main-icon"></i>
          <h4>PPDB <?= htmlspecialchars($pengaturan['tahun_ajaran']) ?></h4>
          <p>Pendaftaran Peserta Didik Baru</p>
          <div class="status-pill <?= ($pengaturan['status_ppdb'] != 'buka') ? 'closed' : '' ?>">
            Status: <?= ($pengaturan['status_ppdb'] == 'buka') ? '🟢 Dibuka' : '🔴 Ditutup' ?>
          </div><br>
          <a href="https://wa.me/<?= str_replace(['+', ' ', '-'], '', $pengaturan['whatsapp'] ?? $pengaturan['telp']) ?>" class="wa-link" target="_blank">
            <i class="bi bi-whatsapp"></i>Tanya via WhatsApp
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

<script>
(function(){
  var slides=document.querySelectorAll('.fth-hero .slide');
  var dots=document.querySelectorAll('.fth-hero .slider-dot');
  var current=0,timer;
  function goTo(n){
    slides[current].classList.remove('active');
    dots[current].classList.remove('active');
    current=(n+slides.length)%slides.length;
    slides[current].classList.add('active');
    dots[current].classList.add('active');
  }
  function autoplay(){timer=setInterval(function(){goTo(current+1);},5000);}
  window.heroSlider=function(d){clearInterval(timer);goTo(current+d);autoplay();};
  window.heroGoto=function(n){clearInterval(timer);goTo(n);autoplay();};
  autoplay();
})();
</script>

<?php include 'includes/footer.php'; ?>