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

// === DATA ===
$slug = $_GET['section'] ?? '';
$stmt_sections = $pdo->query("SELECT id_profil, judul, slug, urutan FROM profiles WHERE status='active' ORDER BY urutan ASC");
$sections = $stmt_sections->fetchAll(PDO::FETCH_ASSOC);

if (!$sections) {
  echo '<div class="container py-5 text-center"><h4>Belum ada data profil yang aktif.</h4></div>';
  include __DIR__ . '/includes/footer.php';
  exit;
}

// Jika slug kosong atau tidak valid → pakai pertama
$valid_slugs = array_column($sections, 'slug');
if (empty($slug) || !in_array($slug, $valid_slugs)) {
  $slug = $sections[0]['slug'];
}

// Ambil data profil aktif berdasarkan slug
$stmt = $pdo->prepare("SELECT * FROM profiles WHERE slug = ? AND status='active' LIMIT 1");
$stmt->execute([$slug]);
$profil = $stmt->fetch(PDO::FETCH_ASSOC);

if (!$profil) {
  header("Location: " . base_url('profil.php?section=' . urlencode($sections[0]['slug'])));
  exit;
}
?>

<!-- HEADER SECTION -->
<section class="hero-small d-flex flex-column justify-content-center align-items-center text-center text-white">
  <div class="overlay"></div>
  <div class="z-2">
    <h1 class="fw-bold display-6 mb-2"><?= e($profil['judul']); ?></h1>
    <p class="fw-semibold mb-0 fs-6">Lembaga Penjaminan Mutu Universitas Riyadlul Ulum</p>
  </div>
</section>

<!-- PROFIL CONTENT -->
<section class="py-5 bg-white">
  <div class="container fade-section">
    <div class="row">
      <!-- Sidebar -->
      <div class="col-lg-3 mb-4">
        <div class="card shadow-sm border-0 sidebar-card bg-white">
          <div class="card-header bg-success text-white rounded-top">
            <h6 class="mb-0"><i class="bi bi-list-ul me-2"></i> Menu Profil</h6>
          </div>
          <div class="list-group list-group-flush">
            <?php foreach ($sections as $s): ?>
              <?php
                // Tentukan ikon berdasarkan slug
                $icon = 'bi-file-text';
                if (strpos($s['slug'], 'sambutan') !== false) $icon = 'bi-person-vcard';
                elseif (strpos($s['slug'], 'tentang') !== false) $icon = 'bi-info-circle';
                elseif (strpos($s['slug'], 'visi') !== false || strpos($s['slug'], 'misi') !== false) $icon = 'bi-bullseye';
                elseif (strpos($s['slug'], 'struktur') !== false) $icon = 'bi-diagram-3';
                elseif (strpos($s['slug'], 'kontak') !== false) $icon = 'bi-envelope-paper';
              ?>
              <a href="<?= base_url('profil.php?section=' . urlencode($s['slug'])); ?>"
                 class="list-group-item list-group-item-action d-flex align-items-center <?= $s['slug'] === $slug ? 'active' : ''; ?>">
                <i class="bi <?= $icon; ?> me-2"></i> <?= e($s['judul']); ?>
              </a>
            <?php endforeach; ?>
          </div>
        </div>
      </div>

      <!-- Konten Utama -->
      <div class="col-lg-9">
        <div class="card shadow-sm border-0">
          <div class="card-body p-4 p-md-5">
            <?php if (!empty($profil['gambar'])): ?>
  <div class="text-center mb-4">

    <?php if (strpos($profil['slug'], 'sambutan') !== false): ?>

      <!-- Foto sambutan: bulat -->
      <img src="<?= base_url('uploads/profile/' . e($profil['gambar'])); ?>"
           alt="<?= e($profil['judul']); ?>"
           class="img-fluid rounded-circle shadow-lg"
           style="width:220px; height:220px; object-fit:cover; border:5px solid #CC9933;">

    <?php elseif (strpos($profil['slug'], 'struktur') !== false): ?>

      <!-- Struktur Organisasi: besar -->
      <img src="<?= base_url('uploads/profile/' . e($profil['gambar'])); ?>"
           alt="<?= e($profil['judul']); ?>"
           class="img-fluid rounded shadow-sm mb-4 profil-img-struktur">

    <?php else: ?>

      <!-- Halaman normal: ukuran 350px -->
      <img src="<?= base_url('uploads/profile/' . e($profil['gambar'])); ?>"
           alt="<?= e($profil['judul']); ?>"
           class="img-fluid rounded shadow-sm mb-4 profil-img-normal">

    <?php endif; ?>

  </div>
<?php endif; ?>


            <article class="profil-content">
              <?= $profil['isi']; ?>
            </article>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

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

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

/* HERO SMALL */
.hero-small {
  height:45vh; position:relative;
  background:linear-gradient(120deg,var(--green),var(--gold));
  color:#fff; overflow:hidden;
}
.hero-small .overlay {
  position:absolute; inset:0; background:rgba(0,0,0,0.35);
}

/* SIDEBAR */
.sidebar-card {
  border-radius:10px; overflow:hidden;
}
.sidebar-card .list-group-item {
  border:none;
  background:#fff;
  font-weight:500;
  color:var(--green);
  transition:all .25s ease;
}
.sidebar-card .list-group-item:hover {
  background:rgba(8,77,54,0.05);
  padding-left:1.2rem;
}
.sidebar-card .list-group-item.active {
  background:var(--green);
  color:#fff;
  font-weight:600;
}

/* CARD */
.card {
  border-radius:15px;
  transition:all .3s ease;
}
.card:hover { transform:translateY(-3px); }

.profil-content p {
  line-height:1.8; text-align:justify;
}

.profil-img-normal {
    max-width: 350px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.profil-img-struktur {
    max-width: 850px;  /* ukuran ideal */
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
</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>
