<?php
require_once __DIR__ . '/config/secure_public.php';
include __DIR__ . '/includes/header.php';

// === DATA ===
$stmt_news = $pdo->query("SELECT id,title,slug,excerpt,featured_image,published_at FROM news WHERE status='published' ORDER BY published_at DESC LIMIT 3");
$news = $stmt_news->fetchAll(PDO::FETCH_ASSOC);

$stmt_activities = $pdo->query("
  SELECT id, title, description, date_start, location, organizer, image, document 
  FROM activities 
  ORDER BY date_start DESC 
  LIMIT 3
");
$activities = $stmt_activities->fetchAll(PDO::FETCH_ASSOC);

$stmt_accred = $pdo->query("SELECT id,type,institution_name,program_studi,rating,valid_until,accreditation_body FROM accreditation ORDER BY valid_until DESC LIMIT 3");
$accreditations = $stmt_accred->fetchAll(PDO::FETCH_ASSOC);
?>

<!-- HERO -->
<section class="hero d-flex flex-column justify-content-center align-items-center text-center text-white">
  <div class="overlay"></div>
  <div class="z-2">
    <img src="<?= base_url('assets/img/logo.png'); ?>" alt="Logo UNIRU" class="hero-logo mb-4">
    <h1 class="fw-bold display-5 mb-2">Lembaga Penjaminan Mutu</h1>
    <h2 class="fw-semibold mb-4 fs-4">Universitas Riyadlul Ulum Tasikmalaya</h2>
  </div>
</section>

<!-- SAMBUTAN KETUA LPM -->
<section class="py-5 section-white">
  <div class="container fade-section">
    <?php
    $stmt_sambutan = $pdo->prepare("SELECT * FROM profiles WHERE slug LIKE '%sambutan%' AND status='active' LIMIT 1");
    $stmt_sambutan->execute();
    $sambutan = $stmt_sambutan->fetch(PDO::FETCH_ASSOC);
    ?>

    <?php if ($sambutan): ?>
    <div class="row align-items-center">
      <div class="col-lg-4 text-center mb-4 mb-lg-0">
        <div class="position-relative d-inline-block">
          <div class="profile-frame rounded-circle position-relative mx-auto" 
               style="width: 260px; height: 260px; border: 6px solid var(--gold); overflow:hidden;">
            <img src="<?= base_url('uploads/profile/' . e($sambutan['gambar'] ?? '')); ?>" 
                 alt="Ketua LPM" 
                 class="img-fluid rounded-circle"
                 style="width:100%; height:100%; object-fit:cover;">
          </div>
          <div class="text-center mt-3">
            <h6 class="fw-bold text-success mb-1">Ketua LPM Universitas Riyadlul Ulum</h6>
            <p class="fw-semibold mb-0" style="color: var(--green);"><?= e($sambutan['judul']); ?></p>
          </div>
        </div>
      </div>

      <div class="col-lg-8">
        <h2 class="fw-bold mb-3 text-success"><?= e($sambutan['judul']); ?></h2>
        <p class="text-secondary mb-4" style="line-height:1.8;">
          <?= mb_strimwidth(strip_tags($sambutan['isi']), 0, 400, '...'); ?>

        </p>
        <a href="<?= base_url('/profil.php?section=' . urlencode($sambutan['slug'])); ?>" 
           class="btn-link">
          Baca Selengkapnya <i class="bi bi-arrow-right"></i>
        </a>
      </div>
    </div>
    <?php else: ?>
      <div class="text-center text-muted">Data sambutan ketua belum tersedia.</div>
    <?php endif; ?>
  </div>
</section>

<!-- BERITA -->
<section id="berita" class="section-gray py-5">
  <div class="container fade-section">
    <div class="text-center mb-5">
      <h2 class="fw-bold text-success">Berita Terbaru</h2>
      <div class="divider mx-auto mb-3"></div>
      <p class="text-muted small">Ikuti perkembangan terbaru kegiatan mutu di lingkungan UNIRU.</p>
    </div>

    <div class="row g-4">
      <?php if ($news): foreach ($news as $n): ?>
      <div class="col-lg-4">
        <div class="card news-card h-100 border-0 shadow-sm">
          <?php if ($n['featured_image']): ?>
          <img src="<?= base_url('uploads/berita/' . e($n['featured_image'])); ?>" class="card-img-top" alt="">
          <?php endif; ?>
          <div class="card-body">
            <p class="text-muted small mb-1"><i class="bi bi-calendar3 me-1"></i><?= indoDate($n['published_at']); ?></p>
            <h5 class="fw-semibold mb-2"><?= e($n['title']); ?></h5>
            <p class="text-secondary small"><?= e(mb_strimwidth(strip_tags($n['excerpt']),0,120,'...')); ?></p>
            <a href="<?= base_url('berita_detail.php?slug=' . urlencode($n['slug'])); ?>" class="btn-link">Baca Selengkapnya <i class="bi bi-arrow-right"></i></a>
          </div>
        </div>
      </div>
      <?php endforeach; else: ?>
      <p class="text-center text-muted">Belum ada berita terbaru.</p>
      <?php endif; ?>
    </div>
  </div>
</section>

<!-- KEGIATAN -->
<section class="section-white py-5">
  <div class="container fade-section">
    <div class="text-center mb-5">
      <h2 class="fw-bold text-success">Kegiatan Terbaru</h2>
      <div class="divider mx-auto mb-3"></div>
      <p class="text-muted small">Dokumentasi kegiatan peningkatan mutu LPM Universitas Riyadlul Ulum.</p>
    </div>

    <div class="row g-4">
      <?php if ($activities): foreach ($activities as $a): ?>
      <div class="col-lg-4">
        <div class="card activity-card h-100 border-0 shadow-sm">

          <!-- GAMBAR -->
          <?php if (!empty($a['image'])): ?>
            <img src="<?= base_url('uploads/kegiatan/images/' . e($a['image'])); ?>" 
                 class="card-img-top"
                 alt="<?= e($a['title']); ?>">
          <?php endif; ?>

          <div class="card-body">
            <p class="text-muted small mb-1">
              <i class="bi bi-calendar3 me-1"></i><?= indoDate($a['date_start']); ?>
            </p>

            <h5 class="fw-semibold mb-2"><?= e($a['title']); ?></h5>

            <p class="text-secondary small">
              <?= e(mb_strimwidth(strip_tags($a['description']),0,120,'...')); ?>
            </p>

            <a href="<?= base_url('kegiatan_detail.php?id=' . $a['id']); ?>" class="btn-link">
              Baca Selengkapnya <i class="bi bi-arrow-right"></i>
            </a>
          </div>

        </div>
      </div>
      <?php endforeach; else: ?>
      <p class="text-center text-muted">Belum ada kegiatan terbaru.</p>
      <?php endif; ?>
    </div>

  </div>
</section>

<!-- AKREDITASI -->
<section class="section-gray py-5">
  <div class="container fade-section">
    <div class="text-center mb-5">
      <h2 class="fw-bold text-success">Status Akreditasi</h2>
      <div class="divider mx-auto mb-3"></div>
      <p class="text-muted small">Informasi status akreditasi universitas dan program studi.</p>
    </div>

    <div class="row g-4 justify-content-center">
      <?php if ($accreditations): foreach ($accreditations as $a): ?>
      <div class="col-lg-4">
        <div class="card accred-card border-0 shadow-sm h-100 text-center p-3">
          <div class="rating-badge mx-auto mb-3"><?= e($a['rating']); ?></div>
          <h6 class="text-muted mb-1"><?= e(ucfirst($a['type'])); ?></h6>
          <h5 class="fw-semibold"><?= e($a['program_studi'] ?? $a['institution_name']); ?></h5>
          <p class="text-secondary small mb-1"><i class="bi bi-building me-1"></i><?= e($a['accreditation_body']); ?></p>
          <p class="text-muted small"><i class="bi bi-calendar-check me-1"></i>Berlaku hingga <?= indoDate($a['valid_until']); ?></p>
        </div>
      </div>
      <?php endforeach; else: ?>
      <p class="text-center text-muted">Data akreditasi belum tersedia.</p>
      <?php endif; ?>
    </div>
  </div>
</section>

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

<style>
:root {
  --green:#084D36; --gold:#CC9933; --gray:#6c757d;
  --gray-bg:#f9f9f9;
}
body { background:#fff; font-family:'Poppins',sans-serif; }

/* HERO */
.hero {
  height:100vh;
  background:linear-gradient(120deg,var(--green),var(--gold));
  position:relative;
  color:#fff;
  overflow:hidden;
}
.hero .overlay {
  position:absolute; inset:0; background:rgba(0,0,0,0.35);
}
.hero-logo {
  width:110px; animation:float 4s ease-in-out infinite;
  filter:drop-shadow(0 0 8px rgba(255,255,255,0.4));
}
@keyframes float { 0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);} }

/* SECTION COLOR */
.section-white { background:#fff; }
.section-gray { background:var(--gray-bg); }

/* DIVIDER */
.divider {
  width:60px; height:4px; background:var(--gold);
  border-radius:5px;
}

/* CARD STYLE */
.card {
  border-radius:15px; transition:all .3s ease;
  background:#fff;
}
.card:hover { transform:translateY(-6px); box-shadow:0 10px 25px rgba(0,0,0,0.15); }
.card img {
  height:220px; object-fit:cover; border-top-left-radius:15px; border-top-right-radius:15px;
}

/* BUTTON LINK */
.btn-link {
  display:inline-block; margin-top:.5rem; color:var(--green);
  border:1px solid var(--green); border-radius:30px; padding:.4rem 1rem;
  font-size:.9rem; text-decoration:none; transition:.3s;
}
.btn-link:hover {
  background:var(--green); color:#fff; transform:translateX(3px);
}

/* ACCREDITATION */
.rating-badge {
  width:70px; height:70px; border-radius:50%;
  background:var(--green); color:#fff; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

/* FADE ANIMATION */
.fade-section {
  opacity:0; transform:translateY(40px);
  transition:opacity .8s ease, transform .8s ease;
}
.fade-section.visible { opacity:1; transform:translateY(0); }
</style>

<script>
document.addEventListener("DOMContentLoaded",()=>{
  const sections=document.querySelectorAll(".fade-section");
  const observer=new IntersectionObserver(entries=>{
    entries.forEach(e=>{if(e.isIntersecting)e.target.classList.add("visible");});
  },{threshold:0.2});
  sections.forEach(s=>observer.observe(s));
});
</script>
