<?php
if (!defined('PUBLIC_SECURE')) {
    define('PUBLIC_SECURE', true);
}
require_once __DIR__ . '/../config/secure_public.php';

// Meta dinamis
$page_title       = $page_title       ?? $site_name;
$page_description = $page_description ?? 'Portal resmi ' . $site_name . ' Tasikmalaya. Menyediakan informasi akreditasi, kegiatan, berita, dan dokumen mutu.';
$page_keywords    = $page_keywords    ?? 'LPM UNIRU, Universitas Riyadlul Ulum, Tasikmalaya, akreditasi, dokumen mutu, penjaminan mutu, universitas, kegiatan kampus, berita kampus';
$page_url         = $page_url         ?? 'https://lpm.uniru.ac.id/';

// Absolute OG image
$og_image = base_url('assets/img/og-lpm.jpg');
?>
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title><?= e($page_title); ?></title>
  <meta name="description" content="<?= e($page_description); ?>">
  <meta name="keywords" content="<?= e($page_keywords); ?>">
  <meta name="author" content="<?= e($site_name); ?>">

  <!-- Canonical -->
  <link rel="canonical" href="<?= e($page_url); ?>">

  <!-- Open Graph -->
  <meta property="og:title" content="<?= e($page_title); ?>">
  <meta property="og:description" content="<?= e($page_description); ?>">
  <meta property="og:type" content="website">
  <meta property="og:url" content="<?= e($page_url); ?>">
  <meta property="og:image" content="<?= e($og_image); ?>">
  <meta property="og:site_name" content="<?= e($site_name); ?>">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="<?= e($page_title); ?>">
  <meta name="twitter:description" content="<?= e($page_description); ?>">
  <meta name="twitter:image" content="<?= e($og_image); ?>">

  <!-- Favicon -->
  <link rel="icon" href="<?= base_url($site_logo); ?>" type="image/png">

  <!-- CSS CDN -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">

  <!-- JSON-LD: WEBPAGE (Profil) -->
  <?php if (!empty($profile)): ?>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebPage",
    "name": "<?= e($profile['judul']); ?>",
    "url": "<?= base_url('profil/' . $profile['slug']); ?>"
  }
  </script>
  <?php endif; ?>

  <!-- JSON-LD: PERSON (Ketua LPM) -->
  <?php if (!empty($profile) && $profile['slug'] === 'ketua-lpm'): ?>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Person",
    "name": "Dr. Dadang Yudhistira, S.H., M.Pd., Adv",
    "jobTitle": "Ketua LPM",
    "affiliation": {
      "@type": "Organization",
      "name": "Lembaga Penjaminan Mutu Universitas Riyadlul Ulum"
    },
    "image": "<?= base_url('uploads/profile/' . $profile['gambar']); ?>",
    "url": "<?= base_url('profil/' . $profile['slug']); ?>"
  }
  </script>
  <?php endif; ?>

  <!-- JSON-LD: EVENT (Kegiatan) -->
  <?php if (!empty($activity)): ?>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Event",
    "name": "<?= e($activity['title']); ?>",
    "startDate": "<?= e($activity['date_start']); ?>",
    "endDate": "<?= e($activity['date_end'] ?? $activity['date_start']); ?>",
    "eventAttendanceMode": "https://schema.org/OfflineEventAttendanceMode",
    "location": {
      "@type": "Place",
      "name": "<?= e($activity['location'] ?? 'Universitas Riyadlul Ulum'); ?>"
    },
    "organizer": {
      "@type": "Organization",
      "name": "<?= e($activity['organizer'] ?? $site_name); ?>"
    }
  }
  </script>
  <?php endif; ?>

  <!-- Custom Styles -->
  <style>
    :root {
      --green: #084D36;
      --brown: #CC9933;
      --cream: #FFFF99;
    }

    body {
      font-family: "Poppins", sans-serif;
      background-color: #f9f9f9;
      scroll-behavior: smooth;
    }

    .navbar-custom {
      background: linear-gradient(90deg, var(--green) 0%, var(--brown) 80%);
      transition: all 0.3s ease-in-out;
      padding: 1rem 2rem;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    .navbar-custom.scrolled {
      padding: 0.6rem 2rem;
      box-shadow: 0 3px 8px rgba(0,0,0,0.15);
    }

    .navbar-brand {
      color: white;
      font-weight: 700;
      font-size: 1.3rem;
      letter-spacing: 0.5px;
    }

    .navbar-brand:hover {
      color: var(--cream);
    }

    .nav-link {
      color: white !important;
      font-weight: 500;
      position: relative;
      margin: 0 0.4rem;
      transition: 0.3s;
    }

    .nav-link::after {
      content: '';
      position: absolute;
      width: 0%;
      height: 2px;
      left: 0;
      bottom: -4px;
      background: var(--cream);
      transition: 0.3s;
    }

    .nav-link:hover::after,
    .nav-link.active::after {
      width: 100%;
    }

    .nav-link:hover {
      color: var(--cream) !important;
    }
  </style>
</head>

<body>

<nav class="navbar navbar-expand-lg navbar-custom fixed-top">
  <div class="container">
    <a class="navbar-brand d-flex align-items-center" href="<?= base_url('index'); ?>">
      <img src="<?= base_url($site_logo); ?>" alt="<?= e($site_name); ?>" width="40" class="me-2">
      <?= e($site_name); ?>
    </a>

    <button class="navbar-toggler text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <i class="fas fa-bars"></i>
    </button>

    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto text-center">

        <li class="nav-item">
          <a class="nav-link <?= current_path()=='index' ? 'active':''; ?>" href="<?= base_url('index'); ?>">
            Beranda
          </a>
        </li>

        <li class="nav-item">
          <a class="nav-link <?= current_path()=='profil' ? 'active':''; ?>" href="<?= base_url('profil'); ?>">
            Profil
          </a>
        </li>

        <li class="nav-item">
          <a class="nav-link <?= current_path()=='kegiatan' ? 'active':''; ?>" href="<?= base_url('kegiatan'); ?>">
            Kegiatan
          </a>
        </li>

        <li class="nav-item">
          <a class="nav-link <?= current_path()=='berita' ? 'active':''; ?>" href="<?= base_url('berita'); ?>">
            Berita
          </a>
        </li>
        
        <li class="nav-item">
          <a class="nav-link <?= current_path()=='pengumuman' ? 'active':''; ?>" href="<?= base_url('pengumuman'); ?>">
            Pengumuman
          </a>
        </li>

        <li class="nav-item">
          <a class="nav-link <?= current_path()=='dokumen' ? 'active':''; ?>" href="<?= base_url('dokumen'); ?>">
            Dokumen
          </a>
        </li>

        <li class="nav-item">
          <a class="nav-link <?= current_path()=='spme' ? 'active':''; ?>" href="<?= base_url('spme'); ?>">
            SPME
          </a>
        </li>

        <li class="nav-item">
          <a class="nav-link <?= current_path()=='kontak' ? 'active':''; ?>" href="<?= base_url('kontak'); ?>">
            Kontak
          </a>
        </li>

      </ul>
    </div>
  </div>
</nav>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
  window.addEventListener('scroll', function() {
    const nav = document.querySelector('.navbar');
    nav.classList.toggle('scrolled', window.scrollY > 50);
  });
</script>
