<?php
require_once 'includes/config.php';

require_once 'includes/header.php';
renderHeader('Campus Explorer', 'campus');
?>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,600;0,700;1,400;1,600&family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
/* ── Animations ── */
@keyframes ch-rise { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }

/* ── Back ── */
.bm-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 26px;
  transition: color .18s;
}
.bm-back:hover { color: var(--text-primary); }

/* ══════════════════════════════════════════
   CAMPUS EXPLORER — Editorial Motivational
══════════════════════════════════════════ */
* { box-sizing: border-box; }
.cp { font-family: 'Outfit', sans-serif; }

/* ── Cinematic Hero ── */
.cp-hero {
  position: relative; border-radius: 24px; overflow: hidden;
  height: clamp(280px, 42vw, 420px); margin-bottom: 36px;
  background: #0a0a14;
}
.cp-hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.55;
  animation: heroZoom 18s ease-in-out infinite alternate;
}
@keyframes heroZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
.cp-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    160deg,
    rgba(6,6,20,0.3) 0%,
    rgba(6,6,20,0.1) 40%,
    rgba(6,6,20,0.75) 100%
  );
}
.cp-hero-content {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: clamp(20px,4vw,44px) clamp(20px,5vw,52px);
}
.cp-hero-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 3px;
  color: rgba(255,255,255,0.65); text-transform: uppercase;
  margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.cp-hero-eyebrow::before {
  content: ''; display: inline-block; width: 24px; height: 1.5px;
  background: rgba(255,255,255,0.5);
}
.cp-hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 6vw, 58px); font-weight: 700;
  color: #fff; line-height: 1.08; letter-spacing: -0.5px;
  margin-bottom: 10px;
  text-shadow: 0 2px 32px rgba(0,0,0,0.4);
}
.cp-hero-title em { font-style: italic; color: #c7d2fe; }
.cp-hero-sub {
  font-size: clamp(13px, 2vw, 15px); color: rgba(255,255,255,0.72);
  font-weight: 300; max-width: 500px; line-height: 1.6;
}
.cp-hero-pulse {
  position: absolute; top: 28px; right: 28px;
  display: flex; align-items: center; gap: 7px;
  background: rgba(0,0,0,0.45); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.15); border-radius: 30px;
  padding: 6px 14px; font-size: 12px; color: rgba(255,255,255,0.8); font-weight: 500;
}
.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #4ade80;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.3); }
}

/* ── Motivational Stats Bar ── */
.cp-stats-bar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-bottom: 28px;
}
.cp-stat {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 16px; padding: 16px 18px;
  text-align: center; position: relative; overflow: hidden;
  transition: transform 0.2s, border-color 0.2s;
}
.cp-stat:hover { transform: translateY(-2px); border-color: rgba(99,102,241,0.4); }
.cp-stat::before {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px; border-radius: 0 0 16px 16px;
}
.cp-stat:nth-child(1)::before { background: linear-gradient(90deg, #6366f1, #a855f7); }
.cp-stat:nth-child(2)::before { background: linear-gradient(90deg, #06b6d4, #6366f1); }
.cp-stat:nth-child(3)::before { background: linear-gradient(90deg, #f59e0b, #ef4444); }
.cp-stat:nth-child(4)::before { background: linear-gradient(90deg, #10b981, #06b6d4); }
.cp-stat-val {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px; font-weight: 700; color: var(--text-primary);
  line-height: 1; margin-bottom: 4px;
}
.cp-stat-lbl { font-size: 11px; color: var(--text-muted); font-weight: 500; letter-spacing: 0.3px; }

/* ── Quote Banner ── */
.cp-quote {
  background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(168,85,247,0.08));
  border: 1px solid rgba(99,102,241,0.2); border-radius: 18px;
  padding: 24px 28px; margin-bottom: 28px;
  display: flex; align-items: center; gap: 18px;
  position: relative; overflow: hidden;
}
.cp-quote::before {
  content: '"'; font-family: 'Cormorant Garamond', serif;
  font-size: 120px; color: rgba(99,102,241,0.12); position: absolute;
  top: -20px; left: 12px; line-height: 1; pointer-events: none;
}
.cp-quote-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(15px, 2.5vw, 19px); font-style: italic;
  color: var(--text-primary); line-height: 1.55; flex: 1;
  position: relative;
}
.cp-quote-author {
  font-size: 12px; color: var(--text-muted); font-style: normal;
  font-family: 'Outfit', sans-serif; margin-top: 8px; font-weight: 500;
}
.cp-quote-icon {
  font-size: 36px; flex-shrink: 0;
  animation: float 4s ease-in-out infinite;
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ── Filter Strip ── */
.cp-filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 24px; align-items: center;
}
.cp-chip {
  padding: 8px 18px; border-radius: 30px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  border: 1.5px solid var(--border);
  background: var(--bg-secondary); color: var(--text-muted);
  transition: all 0.18s; white-space: nowrap; user-select: none;
  font-family: 'Outfit', sans-serif;
}
.cp-chip:hover { border-color: var(--accent); color: var(--accent); background: rgba(99,102,241,0.07); }
.cp-chip.on {
  background: var(--accent); color: #fff; border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(99,102,241,0.38);
}
.cp-search-wrap { position: relative; margin-left: auto; }
.cp-search {
  padding: 8px 14px 8px 38px; border-radius: 30px;
  border: 1.5px solid var(--border); background: var(--bg-secondary);
  color: var(--text-primary); font-size: 13px; outline: none;
  transition: border-color 0.18s; width: 220px; font-family: 'Outfit', sans-serif;
}
.cp-search:focus { border-color: var(--accent); }
.cp-search-wrap svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  pointer-events: none; opacity: 0.45;
}

/* ── Campus Grid ── */
.cp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 22px; margin-bottom: 40px;
}

/* ── Campus Card ── */
.cp-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 20px; overflow: hidden; cursor: pointer;
  transition: transform 0.25s cubic-bezier(.34,1.3,.64,1), box-shadow 0.25s, border-color 0.2s;
  position: relative;
}
.cp-card:hover {
  transform: translateY(-6px) scale(1.005);
  box-shadow: 0 20px 50px rgba(0,0,0,0.28);
  border-color: rgba(99,102,241,0.35);
}
.cp-card-imgwrap { position: relative; height: 195px; overflow: hidden; }
.cp-card-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.5s cubic-bezier(.25,.46,.45,.94);
  background: var(--bg-secondary);
}
.cp-card:hover .cp-card-img { transform: scale(1.08); }
.cp-card-imgwrap::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 70px;
  background: linear-gradient(to top, rgba(10,10,20,0.7) 0%, transparent 100%);
  pointer-events: none;
}
.cp-card-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  padding: 4px 10px; border-radius: 20px; font-size: 10px;
  font-weight: 700; letter-spacing: 0.5px; backdrop-filter: blur(10px);
  text-transform: uppercase;
}
.cp-card-rank {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.cp-card-location-overlay {
  position: absolute; bottom: 10px; left: 14px; z-index: 2;
  font-size: 11px; color: rgba(255,255,255,0.85); font-weight: 500;
  display: flex; align-items: center; gap: 4px;
}
.cp-card-body { padding: 16px 18px 20px; }
.cp-card-short {
  font-size: 10px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; margin-bottom: 5px; color: var(--accent);
}
.cp-card-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px; font-weight: 700;
  color: var(--text-primary); margin-bottom: 8px; line-height: 1.25;
}
.cp-card-tagrow { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.cp-card-tag {
  padding: 3px 9px; border-radius: 10px; font-size: 11px; font-weight: 500;
  background: var(--bg-secondary); color: var(--text-muted);
  border: 1px solid var(--border);
}
.cp-card-divider { height: 1px; background: var(--border); margin-bottom: 12px; }
.cp-card-meta {
  display: flex; justify-content: space-between; align-items: center;
}
.cp-card-meta-item { text-align: center; }
.cp-card-meta-val {
  font-size: 14px; font-weight: 700; color: var(--text-primary);
  font-family: 'Cormorant Garamond', serif;
}
.cp-card-meta-lbl { font-size: 10px; color: var(--text-muted); font-weight: 500; margin-top: 1px; }
.cp-card-cta {
  margin-top: 14px; width: 100%; padding: 10px;
  border-radius: 12px; border: none; cursor: pointer;
  font-size: 12px; font-weight: 700; letter-spacing: 0.3px;
  font-family: 'Outfit', sans-serif;
  background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(168,85,247,0.08));
  border: 1px solid rgba(99,102,241,0.2); color: var(--accent);
  transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 7px;
}
.cp-card-cta:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.cp-card-cta svg { transition: transform 0.2s; }
.cp-card-cta:hover svg { transform: translateX(3px); }

/* ── Motivational Banner ── */
.cp-motto {
  position: relative; border-radius: 20px; overflow: hidden;
  margin-bottom: 28px; height: 130px;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.cp-motto-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.25;
}
.cp-motto::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(99,102,241,0.6), rgba(168,85,247,0.5));
}
.cp-motto-text {
  position: relative; z-index: 1;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(18px,4vw,28px); font-weight: 700;
  color: #fff; line-height: 1.3;
  text-shadow: 0 2px 16px rgba(0,0,0,0.3);
}
.cp-motto-text em { font-style: italic; color: #c7d2fe; }

/* ── Detail Modal ── */
.cp-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.82); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.cp-overlay.open { opacity: 1; pointer-events: all; }
.cp-modal {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 24px; max-width: 700px; width: 100%;
  max-height: 92vh; overflow-y: auto; scrollbar-width: thin;
  transform: translateY(30px) scale(0.96);
  transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1);
}
.cp-overlay.open .cp-modal { transform: translateY(0) scale(1); }

.cp-modal-hero { position: relative; height: 260px; overflow: hidden; border-radius: 22px 22px 0 0; }
.cp-modal-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-modal-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,6,20,0.88) 0%, transparent 55%);
}
.cp-modal-hero-overlay {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 24px 28px; z-index: 1;
}
.cp-modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.15); color: #fff;
  font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.18s; font-family: monospace;
}
.cp-modal-close:hover { background: rgba(239,68,68,0.75); }
.cp-modal-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(18px,4vw,26px); font-weight: 700; color: #fff;
  line-height: 1.2; text-shadow: 0 2px 16px rgba(0,0,0,0.5);
}
.cp-modal-loc { font-size: 12px; color: rgba(255,255,255,0.7); margin-top: 4px; font-weight: 400; }
.cp-modal-body { padding: 24px 26px 30px; }

.cp-modal-desc {
  font-size: 14px; color: var(--text-secondary);
  line-height: 1.75; margin-bottom: 20px; font-weight: 300;
}

.cp-modal-photo-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-bottom: 20px;
}
.cp-modal-photo {
  border-radius: 12px; height: 90px; object-fit: cover;
  width: 100%; display: block; transition: transform 0.2s;
  cursor: zoom-in; background: var(--bg-secondary);
}
.cp-modal-photo:hover { transform: scale(1.03); border-radius: 10px; }

.cp-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.cp-info-box {
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 14px;
}
.cp-info-lbl { font-size: 10px; color: var(--text-muted); font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; margin-bottom: 3px; }
.cp-info-val { font-size: 13px; font-weight: 600; color: var(--text-primary); }

.cp-section-title { font-size: 12px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 10px; }
.cp-fac-wrap { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.cp-fac-tag {
  padding: 5px 12px; border-radius: 12px; font-size: 12px; font-weight: 500;
  background: var(--bg-secondary); color: var(--text-secondary);
  border: 1px solid var(--border);
}
.cp-al-tag {
  padding: 5px 12px; border-radius: 12px; font-size: 12px; font-weight: 600;
  background: rgba(99,102,241,0.1); color: var(--accent);
  border: 1px solid rgba(99,102,241,0.25);
}

/* ── Motivational card inside modal ── */
.cp-modal-motto {
  background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(168,85,247,0.07));
  border: 1px solid rgba(99,102,241,0.2); border-radius: 14px;
  padding: 18px 20px; margin-bottom: 18px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 16px; color: var(--text-primary);
  line-height: 1.55; text-align: center;
}
.cp-modal-motto span { font-size: 12px; color: var(--text-muted); font-style: normal; font-family: 'Outfit', sans-serif; display: block; margin-top: 6px; }

/* ── Animations ── */
.cp-card { animation: fadeUp 0.5s both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── No results ── */
.cp-empty { text-align: center; padding: 70px 20px; }
.cp-empty-icon { font-size: 52px; margin-bottom: 14px; }

/* ── Responsive ── */
@media (max-width: 640px) {
  .cp-stats-bar { grid-template-columns: repeat(2, 1fr); }
  .cp-modal-photo-strip { grid-template-columns: repeat(2, 1fr); }
  .cp-info-grid { grid-template-columns: 1fr; }
}
</style>

<div class="cp">
      <!-- Back -->
  <a href="javascript:history.back()" class="bm-back">
    <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
      <path d="M19 12H5M12 5l-7 7 7 7"/>
    </svg>
    Back
  </a>


<!-- ══ CINEMATIC HERO ══ -->
<div class="cp-hero">
  <img class="cp-hero-bg"
    src="https://images.unsplash.com/photo-1541339907198-e08756dedf3f?w=1400&q=85&auto=format&fit=crop"
    alt="Sri Lanka University">
  <div class="cp-hero-overlay"></div>
  <div class="cp-hero-pulse">
    <span class="pulse-dot"></span> 17 Universities · <?= date('Y') ?>
  </div>
  <div class="cp-hero-content">
    <div class="cp-hero-eyebrow">Sri Lanka Higher Education</div>
    <div class="cp-hero-title">Your Future<br><em>Starts Here.</em></div>
    <div class="cp-hero-sub">Explore Sri Lanka's universities — their campuses, faculties and the journey that awaits you after A/Ls.</div>
  </div>
</div>

<!-- ══ STATS BAR ══ -->
<div class="cp-stats-bar">
  <div class="cp-stat">
    <div class="cp-stat-val">17</div>
    <div class="cp-stat-lbl">State Universities</div>
  </div>
  <div class="cp-stat">
    <div class="cp-stat-val">200+</div>
    <div class="cp-stat-lbl">Degree Programmes</div>
  </div>
  <div class="cp-stat">
    <div class="cp-stat-val">130K+</div>
    <div class="cp-stat-lbl">Undergraduates</div>
  </div>
  <div class="cp-stat">
    <div class="cp-stat-val">∞</div>
    <div class="cp-stat-lbl">Possibilities for You</div>
  </div>
</div>

<!-- ══ MOTIVATIONAL QUOTE ══ -->
<div class="cp-quote" id="quoteBox">
  <div style="flex:1;position:relative">
    <div class="cp-quote-text" id="quoteText">
      "The beautiful thing about learning is that no one can take it away from you."
      <div class="cp-quote-author">— B.B. King &nbsp;·&nbsp; <span style="color:var(--accent)">refresh for more ↻</span></div>
    </div>
  </div>
  <div class="cp-quote-icon" id="quoteIcon">🎓</div>
</div>

<!-- ══ MOTIVATIONAL STRIP ══ -->
<div class="cp-motto" style="margin-bottom:28px">
  <img class="cp-motto-bg"
    src="https://images.unsplash.com/photo-1523050854058-8df90110c9f1?w=1200&q=80&auto=format&fit=crop"
    alt="">
  <div class="cp-motto-text">
    Every great graduate was once<br><em>an A/L student with a dream.</em>
  </div>
</div>

<!-- ══ FILTERS ══ -->
<div class="cp-filters">
  <button class="cp-chip on" data-f="all">🏛️ All Campuses</button>
  <button class="cp-chip" data-f="national">🎓 National</button>
  <button class="cp-chip" data-f="tech">💻 Tech & Engineering</button>
  <button class="cp-chip" data-f="medicine">🩺 Medicine</button>
  <button class="cp-chip" data-f="arts">📖 Arts & Mgmt</button>
  <div class="cp-search-wrap">
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
    <input type="text" class="cp-search" id="cpSearch" placeholder="Search campus…">
  </div>
</div>

<!-- ══ CAMPUS GRID ══ -->
<div class="cp-grid" id="cpGrid"></div>
<div class="cp-empty" id="cpEmpty" style="display:none">
  <div class="cp-empty-icon">🔭</div>
  <div style="font-size:16px;font-weight:700;color:var(--text-primary);margin-bottom:6px">Nothing found</div>
  <div style="color:var(--text-muted)">Try a different search or filter</div>
</div>

</div><!-- /cp -->

<!-- ══ DETAIL MODAL ══ -->
<div class="cp-overlay" id="cpOverlay">
  <div class="cp-modal" id="cpModal">
    <div class="cp-modal-hero">
      <img id="mHeroImg" class="cp-modal-hero-img" src="" alt="">
      <button class="cp-modal-close" onclick="closeModal()">✕</button>
      <div class="cp-modal-hero-overlay">
        <div id="mBadge" style="display:inline-block;padding:3px 10px;border-radius:20px;font-size:10px;font-weight:700;letter-spacing:0.5px;margin-bottom:8px;text-transform:uppercase"></div>
        <div class="cp-modal-name" id="mName"></div>
        <div class="cp-modal-loc" id="mLoc">📍 <span id="mLocTxt"></span></div>
      </div>
    </div>
    <div class="cp-modal-body">
      <div class="cp-modal-motto" id="mMotto"></div>
      <p class="cp-modal-desc" id="mDesc"></p>

      <!-- Photo strip -->
      <div class="cp-section-title">📸 Campus Life</div>
      <div class="cp-modal-photo-strip" id="mPhotos"></div>

      <div class="cp-info-grid" id="mInfoGrid"></div>

      <div class="cp-section-title">🏫 Faculties</div>
      <div class="cp-fac-wrap" id="mFacs"></div>

      <div class="cp-section-title">📚 Relevant A/L Subjects</div>
      <div class="cp-fac-wrap" id="mAL"></div>
    </div>
  </div>
</div>

<?php require_once 'includes/footer.php'; renderFooter(); ?>
<script>
// ══ DATA ══
const campuses = [
  {
    id:1, name:"University of Colombo", short:"UOC", type:"national",
    typeName:"National University", typeColor:"#6366f1",
    location:"Colombo 03, Western Province",
    founded:"1921", students:"~12,000", ranking:"#1 in SL", zscore:"~1.7+ (varies)",
    emoji:"🏛️",
    motto:"\"The city's heartbeat, the nation's intellectual capital.\"",
    desc:"Sri Lanka's oldest and most prestigious university, established in 1921 in the heart of Colombo. Walking through its iconic gates means joining a legacy of great scholars, lawyers, doctors and leaders who shaped this nation. The campus blends colonial architecture with modern facilities, surrounded by the energy of Sri Lanka's commercial capital.",
    img:"https://images.unsplash.com/photo-1607237138185-eedd9c632b0b?w=800&q=85&auto=format&fit=crop",
    photos:[
      "https://images.unsplash.com/photo-1607237138185-eedd9c632b0b?w=400&q=80&auto=format&fit=crop",
      "https://images.unsplash.com/photo-1562774053-701939374585?w=400&q=80&auto=format&fit=crop",
      "https://images.unsplash.com/photo-1580582932707-520aed937b7b?w=400&q=80&auto=format&fit=crop",
    ],
    tags:["Science","Arts","Law","Medicine"],
    faculties:["Faculty of Arts","Faculty of Science","Faculty of Management & Finance","Faculty of Law","Faculty of Medicine","Faculty of Education"],
    alSubjects:["Biology","Chemistry","Physics","Combined Maths","Economics","Business Studies","Accounting","ICT"],
    website:"https://www.cmb.ac.lk",
  },
  {
    id:2, name:"University of Moratuwa", short:"UOM", type:"tech",
    typeName:"Tech / Engineering", typeColor:"#06b6d4",
    location:"Moratuwa, Western Province",
    founded:"1972", students:"~9,500", ranking:"#1 Engineering SL", zscore:"~1.9–2.1+",
    emoji:"⚙️",
    motto:"\"Where equations become bridges and code becomes reality.\"",
    desc:"Sri Lanka's top engineering and technology university — UOM graduates are found at Google, Amazon, Boeing and across the world. The campus in Moratuwa has some of the most competitive entry cutoffs in the country. If you love Maths and Physics, this is the place where your passion becomes your profession.",
    img:"https://images.unsplash.com/photo-1541339907198-e08756dedf3f?w=800&q=85&auto=format&fit=crop",
    photos:[
      "https://images.unsplash.com/photo-1498243691581-b145c3f54a5a?w=400&q=80",
      "https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=400&q=80",
      "https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=400&q=80",
    ],
    tags:["Engineering","IT","Architecture","Design"],
    faculties:["Faculty of Engineering","Faculty of Information Technology","Faculty of Architecture","Faculty of Business"],
    alSubjects:["Combined Maths","Physics","Chemistry","ICT"],
    website:"https://www.mrt.ac.lk",
  },
  {
    id:3, name:"University of Peradeniya", short:"PERA", type:"national",
    typeName:"National University", typeColor:"#6366f1",
    location:"Peradeniya, Kandy, Central Province",
    founded:"1942", students:"~13,000", ranking:"#2 in SL", zscore:"~1.7–2.0+",
    emoji:"🌿",
    motto:"\"600 acres of dreams, nestled between mountains and rivers.\"",
    desc:"Often called the most beautiful campus in South Asia, the University of Peradeniya sprawls across 600+ acres of breathtaking scenery near the Royal Botanical Gardens of Kandy. Imagine studying under shade trees, with misty mountains as your backdrop. Peradeniya is historic, prestigious, and utterly unforgettable.",
    img:"https://images.unsplash.com/photo-1472396961693-142e6e269027?w=800&q=85&auto=format&fit=crop",
    photos:[
      "https://images.unsplash.com/photo-1472396961693-142e6e269027?w=400&q=80",
      "https://images.unsplash.com/photo-1523050854058-8df90110c9f1?w=400&q=80",
      "https://images.unsplash.com/photo-1509062522246-3755977927d7?w=400&q=80",
    ],
    tags:["Medicine","Engineering","Science","Agriculture"],
    faculties:["Faculty of Medicine","Faculty of Engineering","Faculty of Science","Faculty of Agriculture","Faculty of Arts","Faculty of Dental Sciences","Faculty of Veterinary Medicine"],
    alSubjects:["Biology","Chemistry","Physics","Combined Maths","Agriculture"],
    website:"https://www.pdn.ac.lk",
  },
  {
    id:4, name:"University of Sri Jayewardenepura", short:"USJ", type:"national",
    typeName:"National University", typeColor:"#6366f1",
    location:"Nugegoda, Western Province",
    founded:"1958", students:"~15,000", ranking:"Top 5 in SL", zscore:"~1.4–1.9+",
    emoji:"📊",
    motto:"\"Where commerce meets compassion, and business meets brilliance.\"",
    desc:"One of Sri Lanka's largest universities, USJ is renowned for its Management & Commerce and Medical faculties. Located close to Colombo in Nugegoda, the campus buzzes with entrepreneurial energy. USJ graduates lead Sri Lanka's banking, finance and healthcare sectors — this is where future CEOs and doctors begin.",
    img:"https://images.unsplash.com/photo-1580582932707-520aed937b7b?w=800&q=85&auto=format&fit=crop",
    photos:[
      "https://images.unsplash.com/photo-1580582932707-520aed937b7b?w=400&q=80",
      "https://images.unsplash.com/photo-1607237138185-eedd9c632b0b?w=400&q=80",
      "https://images.unsplash.com/photo-1554995207-c18c203602cb?w=400&q=80",
    ],
    tags:["Management","Medicine","Science","Applied Science"],
    faculties:["Faculty of Management Studies & Commerce","Faculty of Medical Sciences","Faculty of Applied Sciences","Faculty of Humanities & Social Sciences","Faculty of Technology"],
    alSubjects:["Economics","Business Studies","Accounting","Biology","Chemistry","Physics","Combined Maths","ICT"],
    website:"https://www.sjp.ac.lk",
  },
  {
    id:5, name:"University of Kelaniya", short:"UOK", type:"national",
    typeName:"National University", typeColor:"#6366f1",
    location:"Dalugama, Kelaniya, Western Province",
    founded:"1959", students:"~14,000", ranking:"Top 6 in SL", zscore:"~1.3–1.9+",
    emoji:"🌊",
    motto:"\"On the banks of Kelani, where knowledge flows freely.\"",
    desc:"Set on the scenic banks of the Kelani River, the University of Kelaniya has a warm, community-driven campus culture. Known for its humanities, social sciences, commerce and computing programmes, UOK is also home to one of the finest collections of Buddhist art and manuscripts in the country. A place of both academic rigour and cultural richness.",
    img:"https://images.unsplash.com/photo-1498243691581-b145c3f54a5a?w=800&q=85&auto=format&fit=crop",
    photos:[
      "https://images.unsplash.com/photo-1498243691581-b145c3f54a5a?w=400&q=80",
      "https://images.unsplash.com/photo-1509062522246-3755977927d7?w=400&q=80",
      "https://images.unsplash.com/photo-1562774053-701939374585?w=400&q=80",
    ],
    tags:["Humanities","Commerce","Science","Medicine"],
    faculties:["Faculty of Commerce & Management Studies","Faculty of Computing & Technology","Faculty of Humanities","Faculty of Medicine","Faculty of Science","Faculty of Social Sciences"],
    alSubjects:["Economics","Business Studies","Accounting","Combined Maths","Biology","Chemistry","Physics","ICT"],
    website:"https://www.kln.ac.lk",
  },
  {
    id:6, name:"University of Jaffna", short:"UOJ", type:"national",
    typeName:"National University", typeColor:"#6366f1",
    location:"Thirunelvely, Jaffna, Northern Province",
    founded:"1974", students:"~8,000", ranking:"Established Uni", zscore:"~1.3–1.8+",
    emoji:"🌺",
    motto:"\"Resilience is our foundation. Excellence is our tradition.\"",
    desc:"The University of Jaffna stands as a symbol of resilience, rebuilt and thriving in Sri Lanka's north. Its graduates in medicine and engineering are celebrated across the island and abroad. The campus carries a strong sense of purpose — students here know the value of what they have earned, and they make the most of it.",
    img:"https://images.unsplash.com/photo-1523050854058-8df90110c9f1?w=800&q=85&auto=format&fit=crop",
    photos:[
      "https://images.unsplash.com/photo-1523050854058-8df90110c9f1?w=400&q=80",
      "https://images.unsplash.com/photo-1472396961693-142e6e269027?w=400&q=80",
      "https://images.unsplash.com/photo-1580582932707-520aed937b7b?w=400&q=80",
    ],
    tags:["Medicine","Science","Arts","Engineering"],
    faculties:["Faculty of Agriculture","Faculty of Arts","Faculty of Engineering","Faculty of Management Studies","Faculty of Medicine","Faculty of Science"],
    alSubjects:["Biology","Chemistry","Physics","Combined Maths","Agriculture"],
    website:"https://www.jfn.ac.lk",
  },
  {
    id:7, name:"SLIIT", short:"SLIIT", type:"tech",
    typeName:"Private · Tech Institute", typeColor:"#06b6d4",
    location:"Malabe, Western Province",
    founded:"1999", students:"~20,000", ranking:"#1 Private IT", zscore:"No Z-Score",
    emoji:"💡",
    motto:"\"Build the future. Code your destiny.\"",
    desc:"Sri Lanka's largest private higher education institution and undisputed leader in tech education. SLIIT's Malabe campus is modern, vibrant and connected directly to industry. With 20,000+ students and partnerships with global companies, SLIIT is where Sri Lanka's tech generation is being built — one project, one hackathon, one startup at a time.",
    img:"https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=800&q=85&auto=format&fit=crop",
    photos:[
      "https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=400&q=80",
      "https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=400&q=80",
      "https://images.unsplash.com/photo-1509062522246-3755977927d7?w=400&q=80",
    ],
    tags:["IT","Engineering","Business","Architecture"],
    faculties:["Faculty of Computing","Faculty of Engineering","Faculty of Business","Faculty of Architecture"],
    alSubjects:["Combined Maths","Physics","ICT","Chemistry","Business Studies"],
    website:"https://www.sliit.lk",
  },
  {
    id:8, name:"NSBM Green University", short:"NSBM", type:"tech",
    typeName:"Private University", typeColor:"#10b981",
    location:"Pitipana, Homagama, Western Province",
    founded:"2006", students:"~10,000", ranking:"Top Private SL", zscore:"No Z-Score",
    emoji:"🌱",
    motto:"\"Sri Lanka's first green university — where sustainability meets ambition.\"",
    desc:"Set on a stunning 26-acre eco-campus, NSBM is Sri Lanka's first green university and one of its most visually striking. Offering internationally affiliated degrees in partnership with Plymouth University (UK), NSBM combines global standards with local roots. The campus is a model of modern design, surrounded by nature — a truly inspiring place to study.",
    img:"https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=800&q=85&auto=format&fit=crop",
    photos:[
      "https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=400&q=80",
      "https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=400&q=80",
      "https://images.unsplash.com/photo-1472396961693-142e6e269027?w=400&q=80",
    ],
    tags:["IT","Business","Engineering","Design"],
    faculties:["School of Computing","School of Engineering","School of Business","School of Design"],
    alSubjects:["Combined Maths","ICT","Physics","Economics","Business Studies"],
    website:"https://www.nsbm.ac.lk",
  },
  {
    id:9, name:"University of Ruhuna", short:"UOR", type:"national",
    typeName:"National University", typeColor:"#6366f1",
    location:"Matara, Southern Province",
    founded:"1978", students:"~9,000", ranking:"Established Uni", zscore:"~1.3–1.7+",
    emoji:"🌊",
    motto:"\"Where the ocean breeze meets academic excellence.\"",
    desc:"Located in the beautiful coastal city of Matara, the University of Ruhuna has a uniquely relaxed yet academically rigorous atmosphere. Famous for its one-of-a-kind Faculty of Fisheries & Ocean Sciences, it also offers strong engineering, medicine and management programmes. Life here means white beaches on weekends and passionate studies during the week.",
    img:"https://images.unsplash.com/photo-1554995207-c18c203602cb?w=800&q=85&auto=format&fit=crop",
    photos:[
      "https://images.unsplash.com/photo-1554995207-c18c203602cb?w=400&q=80",
      "https://images.unsplash.com/photo-1472396961693-142e6e269027?w=400&q=80",
      "https://images.unsplash.com/photo-1523050854058-8df90110c9f1?w=400&q=80",
    ],
    tags:["Fisheries","Agriculture","Engineering","Medicine"],
    faculties:["Faculty of Agriculture","Faculty of Engineering","Faculty of Fisheries & Ocean Sciences","Faculty of Management & Finance","Faculty of Medicine","Faculty of Science","Faculty of Technology"],
    alSubjects:["Biology","Chemistry","Physics","Combined Maths","Agriculture"],
    website:"https://www.ruh.ac.lk",
  },
  {
    id:10, name:"Sabaragamuwa University", short:"SUSL", type:"arts",
    typeName:"National University", typeColor:"#f59e0b",
    location:"Belihuloya, Sabaragamuwa Province",
    founded:"1995", students:"~6,000", ranking:"Established Uni", zscore:"~1.0–1.3+",
    emoji:"🏔️",
    motto:"\"Nestled in the mountains, reaching for the sky.\"",
    desc:"Perhaps the most scenically located university in Sri Lanka — Sabaragamuwa University sits in the misty highlands of Belihuloya, surrounded by waterfalls, tea estates and mountains. Its Tourism & Hospitality Management faculty is one of the best in the country. Studying here isn't just an education — it's an experience you'll carry for life.",
    img:"https://images.unsplash.com/photo-1472396961693-142e6e269027?w=800&q=85&auto=format&fit=crop",
    photos:[
      "https://images.unsplash.com/photo-1472396961693-142e6e269027?w=400&q=80",
      "https://images.unsplash.com/photo-1554995207-c18c203602cb?w=400&q=80",
      "https://images.unsplash.com/photo-1509062522246-3755977927d7?w=400&q=80",
    ],
    tags:["Tourism","Social Sciences","Geomatics","Management"],
    faculties:["Faculty of Agricultural Sciences","Faculty of Geomatics","Faculty of Management Studies","Faculty of Natural Sciences","Faculty of Social Sciences & Languages","Faculty of Technology"],
    alSubjects:["Business Studies","Economics","Geography","Biology","Chemistry","Combined Maths"],
    website:"https://www.sab.ac.lk",
  },
  {
    id:11, name:"Kotelawala Defence University", short:"KDU", type:"medicine",
    typeName:"Defence University", typeColor:"#ef4444",
    location:"Ratmalana, Western Province",
    founded:"1981", students:"~4,500", ranking:"Specialized Uni", zscore:"~1.7–2.0+",
    emoji:"🎖️",
    motto:"\"Discipline. Knowledge. Service. Leadership.\"",
    desc:"General Sir John Kotelawala Defence University is one of Sri Lanka's most unique and respected institutions, combining rigorous academic training with military discipline. Its Medical and Engineering faculties are highly sought-after. KDU graduates carry themselves with exceptional professionalism and are ready for both national and international careers.",
    img:"https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?w=800&q=85&auto=format&fit=crop",
    photos:[
      "https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?w=400&q=80",
      "https://images.unsplash.com/photo-1562774053-701939374585?w=400&q=80",
      "https://images.unsplash.com/photo-1607237138185-eedd9c632b0b?w=400&q=80",
    ],
    tags:["Medicine","Engineering","Law","Defence Studies"],
    faculties:["Faculty of Medicine","Faculty of Engineering","Faculty of Law","Faculty of Management","Faculty of Graduate Studies"],
    alSubjects:["Biology","Chemistry","Physics","Combined Maths"],
    website:"https://www.kdu.ac.lk",
  },
  {
    id:12, name:"Wayamba University of Sri Lanka", short:"WUSL", type:"national",
    typeName:"National University", typeColor:"#6366f1",
    location:"Kuliyapitiya & Makandura, North Western Province",
    founded:"1999", students:"~5,500", ranking:"Established Uni", zscore:"~1.1–1.4+",
    emoji:"🌾",
    motto:"\"Rooted in agriculture, growing toward the future.\"",
    desc:"Wayamba University serves Sri Lanka's agricultural heartland across two campuses — Kuliyapitiya and Makandura. It is particularly celebrated for its Agriculture & Plantation Management and Livestock & Nutrition programmes. If you're passionate about feeding the nation, solving food security challenges, or leading agri-business, Wayamba is your launchpad.",
    img:"https://images.unsplash.com/photo-1509062522246-3755977927d7?w=800&q=85&auto=format&fit=crop",
    photos:[
      "https://images.unsplash.com/photo-1509062522246-3755977927d7?w=400&q=80",
      "https://images.unsplash.com/photo-1472396961693-142e6e269027?w=400&q=80",
      "https://images.unsplash.com/photo-1580582932707-520aed937b7b?w=400&q=80",
    ],
    tags:["Agriculture","Livestock","Applied Science","Business"],
    faculties:["Faculty of Agriculture & Plantation Management","Faculty of Applied Sciences","Faculty of Business Studies & Finance","Faculty of Livestock, Fisheries & Nutrition"],
    alSubjects:["Biology","Chemistry","Agriculture","Physics","Business Studies"],
    website:"https://www.wyb.ac.lk",
  },
];

const quotes = [
  { text:"The beautiful thing about learning is that no one can take it away from you.", author:"B.B. King", icon:"🎓" },
  { text:"Education is the most powerful weapon which you can use to change the world.", author:"Nelson Mandela", icon:"🌍" },
  { text:"The future belongs to those who believe in the beauty of their dreams.", author:"Eleanor Roosevelt", icon:"✨" },
  { text:"Success is not the key to happiness. Happiness is the key to success. If you love what you are doing, you will be successful.", author:"Albert Schweitzer", icon:"🔑" },
  { text:"Your education is a dress rehearsal for a life that is yours to lead.", author:"Nora Ephron", icon:"🎭" },
  { text:"Don't let what you cannot do interfere with what you can do.", author:"John Wooden", icon:"💪" },
  { text:"The secret of getting ahead is getting started.", author:"Mark Twain", icon:"🚀" },
  { text:"It always seems impossible until it's done.", author:"Nelson Mandela", icon:"⭐" },
];

// Rotate quote
let qIdx = 0;
function nextQuote() {
  qIdx = (qIdx + 1) % quotes.length;
  const q = quotes[qIdx];
  document.getElementById('quoteText').innerHTML = `"${q.text}" <div class="cp-quote-author">— ${q.author} &nbsp;·&nbsp; <span style="color:var(--accent);cursor:pointer" onclick="nextQuote()">refresh ↻</span></div>`;
  document.getElementById('quoteIcon').textContent = q.icon;
}
document.getElementById('quoteBox').addEventListener('click', nextQuote);
document.getElementById('quoteBox').style.cursor = 'pointer';
document.getElementById('quoteBox').title = 'Click for next quote';

// Auto-rotate quotes every 8s
setInterval(nextQuote, 8000);

// Render cards
function renderCards(list) {
  const grid = document.getElementById('cpGrid');
  const empty = document.getElementById('cpEmpty');
  grid.innerHTML = '';
  if (!list.length) { empty.style.display='block'; return; }
  empty.style.display = 'none';
  list.forEach((c, i) => {
    const d = document.createElement('div');
    d.className = 'cp-card';
    d.style.animationDelay = (i * 0.07) + 's';
    d.innerHTML = `
      <div class="cp-card-imgwrap">
        <img class="cp-card-img" src="${c.img}" alt="${c.name}" loading="lazy"
             onerror="this.src='https://images.unsplash.com/photo-1541339907198-e08756dedf3f?w=800&q=80'">
        <div class="cp-card-badge" style="background:${c.typeColor}28;color:${c.typeColor};border:1px solid ${c.typeColor}55">${c.typeName}</div>
        <div class="cp-card-rank">${c.emoji}</div>
        <div class="cp-card-location-overlay">📍 ${c.location.split(',')[0]}</div>
      </div>
      <div class="cp-card-body">
        <div class="cp-card-short">${c.short} &nbsp;·&nbsp; Est. ${c.founded}</div>
        <div class="cp-card-name">${c.name}</div>
        <div class="cp-card-tagrow">${c.tags.map(t=>`<span class="cp-card-tag">${t}</span>`).join('')}</div>
        <div class="cp-card-divider"></div>
        <div class="cp-card-meta">
          <div class="cp-card-meta-item"><div class="cp-card-meta-val">${c.students}</div><div class="cp-card-meta-lbl">Students</div></div>
          <div class="cp-card-meta-item"><div class="cp-card-meta-val" style="font-size:12px;font-family:'Outfit',sans-serif">${c.zscore}</div><div class="cp-card-meta-lbl">Z-Score Guide</div></div>
          <div class="cp-card-meta-item"><div class="cp-card-meta-val" style="font-size:13px">${c.ranking}</div><div class="cp-card-meta-lbl">Ranking</div></div>
        </div>
        <button class="cp-card-cta" onclick="openModal(${c.id})">
          Explore Campus
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
        </button>
      </div>`;
    grid.appendChild(d);
  });
}

// Modal
function openModal(id) {
  const c = campuses.find(x => x.id === id);
  if (!c) return;
  document.getElementById('mHeroImg').src = c.img;
  document.getElementById('mHeroImg').onerror = function(){ this.src='https://images.unsplash.com/photo-1541339907198-e08756dedf3f?w=800&q=80'; };
  document.getElementById('mBadge').textContent = c.typeName;
  document.getElementById('mBadge').style.cssText = `display:inline-block;padding:3px 10px;border-radius:20px;font-size:10px;font-weight:700;letter-spacing:0.5px;margin-bottom:8px;text-transform:uppercase;background:${c.typeColor}30;color:${c.typeColor};border:1px solid ${c.typeColor}60`;
  document.getElementById('mName').textContent = c.name;
  document.getElementById('mLocTxt').textContent = c.location;
  document.getElementById('mMotto').innerHTML = `${c.motto}<span>— ${c.name}</span>`;
  document.getElementById('mDesc').textContent = c.desc;
  document.getElementById('mPhotos').innerHTML = c.photos.map(p=>`<img class="cp-modal-photo" src="${p}" loading="lazy" onerror="this.src='https://images.unsplash.com/photo-1562774053-701939374585?w=400&q=80'">`).join('');
  document.getElementById('mInfoGrid').innerHTML = `
    <div class="cp-info-box"><div class="cp-info-lbl">📅 Founded</div><div class="cp-info-val">${c.founded}</div></div>
    <div class="cp-info-box"><div class="cp-info-lbl">👥 Students</div><div class="cp-info-val">${c.students}</div></div>
    <div class="cp-info-box"><div class="cp-info-lbl">📊 Z-Score Guide</div><div class="cp-info-val">${c.zscore}</div></div>
    <div class="cp-info-box"><div class="cp-info-lbl">🏆 Ranking</div><div class="cp-info-val">${c.ranking}</div></div>`;
  document.getElementById('mFacs').innerHTML = c.faculties.map(f=>`<span class="cp-fac-tag">${f}</span>`).join('');
  document.getElementById('mAL').innerHTML = c.alSubjects.map(s=>`<span class="cp-al-tag">${s}</span>`).join('');
  document.getElementById('cpOverlay').classList.add('open');
  document.body.style.overflow = 'hidden';
}
function closeModal() {
  document.getElementById('cpOverlay').classList.remove('open');
  document.body.style.overflow = '';
}
document.getElementById('cpOverlay').addEventListener('click', e => { if (e.target===document.getElementById('cpOverlay')) closeModal(); });
document.addEventListener('keydown', e => { if (e.key==='Escape') closeModal(); });

// Filters
let activeF = 'all';
document.querySelectorAll('.cp-chip').forEach(btn => {
  btn.addEventListener('click', function() {
    document.querySelectorAll('.cp-chip').forEach(b=>b.classList.remove('on'));
    this.classList.add('on');
    activeF = this.dataset.f;
    applyFilters();
  });
});
document.getElementById('cpSearch').addEventListener('input', applyFilters);

function applyFilters() {
  const q = document.getElementById('cpSearch').value.toLowerCase();
  const filtered = campuses.filter(c => {
    const ft = activeF==='all' || c.type===activeF;
    const fs = !q || c.name.toLowerCase().includes(q) || c.short.toLowerCase().includes(q) || c.location.toLowerCase().includes(q) || c.tags.some(t=>t.toLowerCase().includes(q));
    return ft && fs;
  });
  renderCards(filtered);
}

renderCards(campuses);
</script>
