@extends('layouts.app3')

@section('title', 'Courses')

@section('content')

@php
  // [filter label, title, description, eligibility, duration, icon, link]
  $courses = [
    ['Diploma/C2D', 'Diploma / C2D - Mechanical Engineering', 'Core mechanical engineering training with electives in Automobile Engineering for EV and Powerplant Engineering.', '10th Pass', '6/4 Semesters', 'fa-solid fa-gears', '#'],
    ['Diploma/C2D', 'Diploma / C2D - Information Technology', 'Foundational IT training with electives in Machine Learning and Data Analysis and Visualization.', '10th Pass', '6/4 Semesters', 'fa-solid fa-network-wired', '#'],
    ['Diploma/C2D', 'Diploma / C2D - Computer Engineering', 'Hands-on computer engineering training with electives in Machine Learning and Data Analysis and Visualization.', '10th Pass', '6/4 Semesters', 'fa-solid fa-microchip', '#'],
    ['Diploma', 'Diploma - Electrical Engineering', 'Core electrical engineering diploma with electives in Power System and Power Electronics.', '10th Pass', '6 Semesters', 'fa-solid fa-bolt', '#'],
    ['B.Tech', 'B.Tech - Computer Science Engineering', 'Industry-ready CSE program with specializations in Full Stack Development and Artificial Intelligence and Machine Learning.', '10+2', '8 Semesters', 'fa-solid fa-laptop-code', '#'],
    ['D2D', 'D2D - Computer Science Engineering', 'Fast-track CSE diploma-to-degree path with specializations in Full Stack Development and AI & ML.', '10+2', '6 Semesters', 'fa-solid fa-code', '#'],
    ['D2D', 'D2D - Information Technology', 'Diploma-to-degree IT program with a Data Science specialization.', '10+2', '6 Semesters', 'fa-solid fa-database', '#'],
    ['BCA (Hons.)', 'BCA (Hons.) - Electives', 'Applications-focused BCA with electives in Machine Learning and Blockchain.', '10+2', '8 Semesters', 'fa-solid fa-code-branch', '#'],
    ['BCA (Hons.)', 'BCA (Hons.) - Specialization', 'BCA with specialization tracks in AI & ML and Data Science.', '10+2', '8 Semesters', 'fa-solid fa-cubes', '#'],
    ['MCA', 'MCA', 'Advanced computer applications degree with electives in AI & ML and Cyber Security.', 'Graduation (Maths)', '4 Semesters', 'fa-solid fa-server', '#'],
    ['MCA', 'Integrated MCA', 'Direct-entry integrated MCA with specializations in Data Science and AI & ML.', '10+2', '10 Semesters', 'fa-solid fa-diagram-project', '#'],
    ['B.Sc. (Hons.)', 'B.Sc. (Hons.) - Computer Science', 'Science-first CS degree with specializations in AI & ML, Cyber Security and Cloud Technology, and Data Science.', '10+2 (Science)', '8 Semesters', 'fa-solid fa-flask', '#'],
    ['B.Sc. (Hons.)', 'B.Sc. (Hons.) - Information Technology', 'IT-focused science degree with electives in AI & ML and Cyber Security.', '10+2 (Science)', '8 Semesters', 'fa-solid fa-shield-halved', '#'],
    ['B.Sc. (Hons.)', 'B.Sc. (Hons.) - Chemistry', 'Undergraduate science degree building a strong foundation in Chemistry.', '10+2 (Science)', '8 Semesters', 'fa-solid fa-vial', '#'],
    ['B.Sc. (Hons.)', 'B.Sc. (Hons.) - Microbiology', 'Undergraduate science degree building a strong foundation in Microbiology.', '10+2 (Science)', '8 Semesters', 'fa-solid fa-microscope', '#'],
    ['B.Sc. (Hons.)', 'B.Sc. (Hons.) Agriculture', 'Rigorous program in agricultural and allied sciences with hands-on training and field-based learning.', '10+2 (Science)', '8 Semesters', 'fa-solid fa-leaf', '#'],
    ['B.Sc. (Hons.)', 'B.Sc. (Hons.) Psychology', 'Science-track Psychology degree combining theory, research and practical application.', '10+2 (Science)', '8 Semesters', 'fa-solid fa-brain', '#'],
    ['M.Sc.', 'M.Sc. - Cyber Security and Cloud Technology', 'Postgraduate specialization in cyber security and cloud infrastructure.', 'B.Sc.', '4 Semesters', 'fa-solid fa-cloud', '#'],
    ['M.Sc.', 'M.Sc. - Chemistry', 'Postgraduate Chemistry with specializations in Industrial Chemistry, Organic Chemistry and Analytical Chemistry.', 'B.Sc.', '4 Semesters', 'fa-solid fa-flask-vial', '#'],
    ['M.Sc.', 'M.Sc. - Microbiology', 'Postgraduate, research-oriented study in Microbiology.', 'B.Sc.', '4 Semesters', 'fa-solid fa-bacteria', '#'],
    ['M.Sc.', 'M.Sc. - Pharmaceutical Chemistry', 'Postgraduate, research-oriented study in Pharmaceutical Chemistry.', 'B.Sc.', '4 Semesters', 'fa-solid fa-mortar-pestle', '#'],
    ['BBA (Hons.)', 'BBA (Hons.)', 'Future-ready management degree with specializations in Sales & Digital Marketing, Applied HR, Fintech, AI & Business Analytics, and Entrepreneurship & Innovation.', '10+2', '8 Semesters', 'fa-solid fa-briefcase', '#'],
    ['B.Com (Hons.)', 'B.Com (Hons.) - Accounting & Finance', 'Advanced commerce degree with specializations in Accounting and Finance, and AI and Fintech.', '10+2', '8 Semesters', 'fa-solid fa-file-invoice-dollar', '#'],
    ['MBA', 'Integrated MBA', 'Direct-entry integrated management degree specializing in AI and Business Analytics.', '10+2', '10 Semesters', 'fa-solid fa-chart-pie', '#'],
    ['MBA', 'MBA', 'Postgraduate management degree with specializations in HR, Finance, Marketing, Entrepreneurship & Family Business, and Business Analytics & Fintech.', 'Graduation', '4 Semesters', 'fa-solid fa-user-tie', '#'],
    ['Pharmacy', 'D.Pharm', 'Foundational pharmacy diploma building core pharmaceutical knowledge and practice.', '10+2 (Science)', '2 Years', 'fa-solid fa-pills', '#'],
    ['Pharmacy', 'B.Pharm / D2D', 'Undergraduate pharmacy degree covering drug formulation, pharmacology and pharmaceutical care.', '10+2 (Science)', '8/6 Semesters', 'fa-solid fa-prescription-bottle-medical', '#'],
    ['Pharmacy', 'M.Pharm', 'Postgraduate pharmacy degree specializing in Pharmaceutics and Pharmaceutical Quality Assurance.', 'B.Pharm', '4 Semesters', 'fa-solid fa-capsules', '#'],
    ['Law', 'B.A. LLB', 'Integrated law degree combining arts foundations with comprehensive legal education.', '10+2', '10 Semesters', 'fa-solid fa-scale-balanced', '#'],
    ['Law', 'B.B.A. LLB', 'Integrated law degree combining business foundations with comprehensive legal education.', '10+2', '10 Semesters', 'fa-solid fa-gavel', '#'],
    ['Law', 'LL.B', 'Undergraduate law degree building strong foundations in legal knowledge, advocacy and drafting.', 'Graduation', '6 Semesters', 'fa-solid fa-book', '#'],
    ['Law', 'LL.M', 'Postgraduate law degree with specializations in Constitutional & Administrative Law, Corporate & Commercial Law, and Criminal & Security Law.', 'LL.B', '4 Semesters', 'fa-solid fa-landmark', '#'],
    ['B.Design', 'B.Design - Fashion', 'Studio-based design degree with a specialization in Fashion, blending artistic vision with technical expertise.', '10+2', '8 Semesters', 'fa-solid fa-palette', '#'],
    ['B.A. (Hons.)', 'B.A. (Hons.) Psychology', 'Interdisciplinary liberal-arts degree with a focus on Psychology, ethics and social responsibility.', '10+2', '8 Semesters', 'fa-solid fa-user-doctor', '#'],
    ['Ph.D.', 'Ph.D. - CSE / IT / Computer Application', 'Doctoral research across Computer Science and Engineering, Information Technology, and Computer Application.', 'PG Degree', '3+ Years', 'fa-solid fa-graduation-cap', '#'],
    ['Ph.D.', 'Ph.D. - Management', 'Doctoral research in Management.', 'PG Degree', '3+ Years', 'fa-solid fa-graduation-cap', '#'],
    ['Ph.D.', 'Ph.D. - Pharmaceutical Sciences', 'Doctoral research in Pharmaceutical Sciences.', 'PG Degree', '3+ Years', 'fa-solid fa-graduation-cap', '#'],
    ['Ph.D.', 'Ph.D. - Law', 'Doctoral research in Law.', 'PG Degree', '3+ Years', 'fa-solid fa-graduation-cap', '#'],
  ];
@endphp

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">

<style>
  /* ───────── Hide layout header and announcement bars on this page ───────── */
  header, .th-header, .header-top, .th-menu-wrapper, .header-layout1,
  marquee, .announcement-bar, .top-announcement, .ticker, .news-ticker, .admission-ticker { display: none !important; }
  body { padding-top: 0 !important; }

  /* ───────── Tokens ───────── */
  .ru-page {
    --navy: #16094f; --purple: #6a2fb4; --yellow: #ffc21a; --lav: #f5f3fb;
    --ink: #1a1440; --muted: #625d80; --line: #e6e2f3;
    --shadow: 0 10px 30px rgba(22, 9, 79, .10);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--ink);
  }

  /* ───────── Floating Apply button ───────── */
  .inquiry-btn {
    position: fixed; top: 50%; right: -50px; z-index: 9999;
    transform: translateY(-50%) rotate(-90deg);
    background: #ffc21a; color: #16094f; font-weight: 700; text-transform: uppercase;
    padding: 10px 25px; border-radius: 12px 12px 0 0; text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .3); transition: .3s;
  }
  .inquiry-btn:hover { right: -55px; background: #fff; color: #16094f; }

  /* ───────── Hero ───────── */
  .ru-hero { padding: 14px 14px 0; }
  .ru-hero-box {
    position: relative; overflow: hidden; display: grid; grid-template-columns: 1.05fr .95fr;
    gap: 64px; align-items: center; padding: 64px 72px 72px; border-radius: 32px;
    background:
      radial-gradient(60% 70% at 0% 0%, #3a1fa8 0%, transparent 62%),
      radial-gradient(50% 60% at 100% 100%, rgba(255, 194, 26, .22), transparent 70%),
      var(--navy);
  }
  .ru-hero-text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
  .ru-chip {
    display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border-radius: 999px;
    font-size: 13.5px; font-weight: 700; color: #ffe9a3;
    background: rgba(255, 194, 26, .16); border: 1px solid rgba(255, 194, 26, .5);
  }
  .ru-dot { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; animation: ruPing 1.8s infinite; }
  @keyframes ruPing { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, .6); } 70%, 100% { box-shadow: 0 0 0 9px rgba(61, 220, 132, 0); } }
  .ru-hero h1 {
    margin: 0; color: #fff; font-weight: 800; letter-spacing: -.04em; line-height: 1;
    font-size: clamp(46px, 6vw, 92px);
  }
  .ru-hero h1 small { display: block; margin-bottom: 6px; font-size: .36em; font-weight: 700; letter-spacing: -.02em; }
  .ru-hero h1 span { color: var(--yellow); }
  .ru-sub { margin: 0; color: #fff; font-weight: 700; font-size: clamp(19px, 2vw, 26px); }
  .ru-desc { margin: 0; max-width: 540px; font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, .78); }
  .ru-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
  .ru-btn {
    display: inline-flex; align-items: center; gap: 10px; padding: 16px 32px; border-radius: 999px;
    font-size: 16px; font-weight: 700; text-decoration: none; transition: .25s;
  }
  .ru-btn-a { background: var(--yellow); color: var(--navy); box-shadow: 0 12px 28px -8px rgba(255, 194, 26, .6); }
  .ru-btn-a:hover { background: #fff; color: var(--navy); }
  .ru-btn-b { color: #fff; border: 1.5px solid rgba(255, 255, 255, .45); }
  .ru-btn-b:hover { background: #fff; color: var(--navy); }
  .ru-stats {
    width: 100%; max-width: 600px; display: grid; grid-template-columns: repeat(4, 1fr);
    background: rgba(255, 255, 255, .08); border-radius: 18px; overflow: hidden;
  }
  .ru-stat { padding: 20px 16px; border-left: 1px solid rgba(255, 255, 255, .2); }
  .ru-stat:first-child { border-left: 0; }
  .ru-stat b { display: block; color: var(--yellow); font-size: clamp(22px, 2.2vw, 32px); font-weight: 800; line-height: 1; }
  .ru-stat span { display: block; margin-top: 6px; font-size: 13px; color: rgba(255, 255, 255, .7); }

  .ru-media { position: relative; height: 540px; }
  .ru-slides { position: absolute; inset: 0; overflow: hidden; border-radius: 28px; background: #0a1228; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .65); }
  .ru-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
  .ru-slide.active { opacity: 1; }
  .ru-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ru-dots { position: absolute; right: 26px; bottom: 22px; z-index: 4; display: flex; gap: 8px; }
  .ru-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .7); cursor: pointer; transition: .3s; }
  .ru-dots button.active { width: 28px; background: var(--yellow); }
  .ru-video {
    position: absolute; left: -72px; bottom: -34px; z-index: 5; width: 280px; height: 184px;
    overflow: hidden; border-radius: 24px; border: 3px solid rgba(255, 255, 255, .4);
    box-shadow: 0 24px 50px -12px rgba(0, 0, 0, .65);
    background: linear-gradient(160deg, #8a54d6, #4b22a8 60%, #2a1782);
  }
  .ru-video img { position: absolute; left: 80%; bottom: 0; transform: translateX(-50%); height: 100%; width: auto; max-width: none; }
  .ru-play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
    width: 58px; height: 58px; border-radius: 50%; background: #fff; color: var(--navy);
    display: flex; align-items: center; justify-content: center; font-size: 18px;
    animation: ruRing 2s infinite;
  }
  @keyframes ruRing { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); } 80%, 100% { box-shadow: 0 0 0 18px rgba(255, 255, 255, 0); } }
  .ru-video-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 8px 14px; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(to top, rgba(22, 9, 79, .85), transparent); }

  /* ───────── Courses ───────── */
  .kp-wrap {
    padding: 90px 0;
    background: radial-gradient(900px 420px at 90% -10%, rgba(106, 47, 180, .5), transparent 60%), var(--navy);
  }
  .kp-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
  @media (min-width: 1024px) { .kp-container { padding: 0 56px; } }
  .kp-title { margin: 0 0 24px; text-align: center; color: #fff; font-weight: 800; letter-spacing: -.03em; font-size: clamp(28px, 3.4vw, 42px); }
  .kp-title span { color: var(--yellow); }

  .kp-chips { display: flex; gap: 10px; overflow-x: auto; padding: 4px 4px 14px; margin-bottom: 22px; scrollbar-width: thin; }
  .kp-chips::-webkit-scrollbar { height: 5px; }
  .kp-chips::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .25); border-radius: 10px; }
  .kp-chip {
    flex: 0 0 auto; white-space: nowrap; cursor: pointer; transition: .2s;
    padding: 8px 18px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
    color: #fff; background: rgba(255, 255, 255, .1); border: 1.5px solid rgba(255, 255, 255, .25);
  }
  .kp-chip:hover { border-color: var(--yellow); }
  .kp-chip.active { background: var(--yellow); border-color: var(--yellow); color: var(--navy); }

  .kp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
  .kp-card {
    display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: 22px;
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .5); transition: transform .25s, box-shadow .25s;
  }
  .kp-card:hover { transform: translateY(-5px); box-shadow: 0 26px 50px -18px rgba(0, 0, 0, .6); }
  .kp-card-media {
    position: relative; height: 120px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #1f0f6b, #6a2fb4); color: rgba(255, 255, 255, .9); font-size: 46px;
  }
  .kp-card-badge {
    position: absolute; left: 12px; bottom: 12px; padding: 5px 12px; border-radius: 999px;
    background: var(--yellow); color: var(--navy); font-size: 11px; font-weight: 700;
  }
  .kp-card-body { display: flex; flex-direction: column; flex: 1; padding: 18px 18px 20px; }
  .kp-card-title { margin: 0 0 8px; color: var(--navy); font-size: 15.5px; font-weight: 800; line-height: 1.35; }
  .kp-card-desc { flex: 1; margin: 0 0 14px; color: var(--muted); font-size: 12.5px; line-height: 1.6; }
  .kp-card-meta { margin-bottom: 16px; font-size: 11.5px; color: #7a828d; }
  .kp-card-meta div { margin-bottom: 2px; }
  .kp-card-meta b { color: var(--navy); }
  .kp-btn {
    align-self: center; padding: 9px 22px; border-radius: 999px; text-decoration: none; transition: .2s;
    background: var(--navy); border: 1.5px solid var(--navy); color: #fff; font-size: 12.5px; font-weight: 700;
  }
  .kp-btn:hover { background: var(--yellow); border-color: var(--yellow); color: var(--navy); }
  .kp-empty { display: none; padding: 30px 0; text-align: center; color: rgba(255, 255, 255, .7); }

  /* ───────── Responsive ───────── */
  @media (max-width: 1100px) {
    .ru-hero-box { grid-template-columns: 1fr; gap: 44px; padding: 44px 34px 56px; }
    .ru-media { height: 440px; margin-bottom: 26px; }
    .ru-video { left: 16px; bottom: -26px; width: 230px; height: 150px; }
  }
  @media (max-width: 640px) {
    .ru-hero { padding: 10px 10px 0; }
    .ru-hero-box { padding: 30px 18px 44px; border-radius: 26px; gap: 34px; }
    .ru-ctas { flex-direction: column; width: 100%; }
    .ru-btn { justify-content: center; width: 100%; }
    .ru-stats { grid-template-columns: repeat(2, 1fr); }
    .ru-stat:nth-child(3) { border-left: 0; }
    .ru-stat:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .2); }
    .ru-media { height: 340px; }
    .ru-video { width: 170px; height: 118px; border-radius: 18px; }
    .ru-play { width: 42px; height: 42px; font-size: 14px; }
    .ru-video-cap { display: none; }
    .kp-wrap { padding: 60px 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ru-dot, .ru-play { animation: none; }
    .ru-slide { transition: none; }
  }
</style>

<div class="ru-page">

  <a href="https://www.raiuniversity.edu/Admissions/" class="inquiry-btn">Apply Now</a>

  {{-- ═════════ HERO ═════════ --}}
  <section class="ru-hero" id="home">
    <div class="ru-hero-box">

      <div class="ru-hero-text">
        <span class="ru-chip"><span class="ru-dot"></span> Admissions Open 2026–27</span>
        <h1><small>Welcome to</small><span>Rai University</span></h1>
        <p class="ru-sub">AI-Enabled Techno Campus — Ahmedabad</p>
        <p class="ru-desc">UGC-recognized and NAAC-accredited, Rai University offers industry-aligned programs in Engineering, Management, Pharmacy, Law, Science and Design — with strong placements and hands-on mentoring.</p>
        <div class="ru-ctas">
          <a href="https://www.raiuniversity.edu/Admissions/" class="ru-btn ru-btn-a">Apply Now <i class="fas fa-arrow-right" style="font-size:12px;"></i></a>
          <a href="#courses" class="ru-btn ru-btn-b">View Courses</a>
        </div>
        <div class="ru-stats">
          <div class="ru-stat"><b>12.7k+</b><span>Students</span></div>
          <div class="ru-stat"><b>100+</b><span>Recruiters</span></div>
          <div class="ru-stat"><b>52+</b><span>Labs</span></div>
          <div class="ru-stat"><b>400+</b><span>Research</span></div>
        </div>
      </div>

      <div class="ru-media">
        <div class="ru-slides" id="ruSlides">
          <div class="ru-slide active"><img src="{{ url('/') }}/images/ffrai1.jpg" alt="Rai University"></div>
          <div class="ru-slide"><img src="{{ url('/') }}/document/rai_student.JPG" alt="Rai University students"></div>
          <div class="ru-slide"><img src="{{ url('/') }}/document/home/07.jpg" alt="Rai University campus"></div>
          <div class="ru-slide"><img src="{{ url('/') }}/document/sports_rai_uni.JPG" alt="Rai University sports"></div>
          <div class="ru-slide"><img src="{{ url('/') }}/images/ffrai3.jpg" alt="Rai University innovation"></div>
        </div>
        <div class="ru-dots" id="ruDots"></div>

        <a href="https://www.youtube.com/watch?v=jySdcGARFPQ" target="_blank" rel="noopener" class="ru-video" aria-label="Watch video">
          <img src="https://www.raiuniversity.edu/document/home/slider/hero_student.png" alt="">
          <span class="ru-play"><i class="fa-solid fa-play"></i></span>
          <span class="ru-video-cap">Watch Video</span>
        </a>
      </div>

    </div>
  </section>

  {{-- ═════════ COURSES ═════════ --}}
  <section class="kp-wrap" id="courses">
    <div class="kp-container">
      <h2 class="kp-title"><span>Courses</span> Offered</h2>
      <div class="kp-chips" id="kpChips"></div>
      <div class="kp-grid" id="kpGrid"></div>
      <p class="kp-empty" id="kpEmpty">No courses found in this category yet.</p>
    </div>
  </section>

</div>

<script>
  /* Hero slider */
  (function () {
    var slides = document.querySelectorAll('#ruSlides .ru-slide');
    var dots = document.getElementById('ruDots');
    var current = 0, timer;

    slides.forEach(function (_, i) {
      var b = document.createElement('button');
      b.type = 'button';
      b.setAttribute('aria-label', 'Slide ' + (i + 1));
      if (i === 0) b.className = 'active';
      b.onclick = function () { go(i); };
      dots.appendChild(b);
    });

    function go(n) {
      slides[current].classList.remove('active');
      dots.children[current].classList.remove('active');
      current = (n + slides.length) % slides.length;
      slides[current].classList.add('active');
      dots.children[current].classList.add('active');
      clearInterval(timer);
      timer = setInterval(function () { go(current + 1); }, 4500);
    }
    timer = setInterval(function () { go(current + 1); }, 4500);
  })();

  /* Courses: filter chips + cards */
  (function () {
    var courses = @json($courses);
    var chipsEl = document.getElementById('kpChips');
    var gridEl  = document.getElementById('kpGrid');
    var emptyEl = document.getElementById('kpEmpty');
    var active  = 'All';

    function cardHtml(c) {
      return '<article class="kp-card">' +
        '<div class="kp-card-media"><i class="' + c[5] + '"></i><span class="kp-card-badge">' + c[0] + '</span></div>' +
        '<div class="kp-card-body">' +
          '<h3 class="kp-card-title">' + c[1] + '</h3>' +
          '<p class="kp-card-desc">' + c[2] + '</p>' +
          '<div class="kp-card-meta"><div><b>Eligibility:</b> ' + c[3] + '</div><div><b>Duration:</b> ' + c[4] + '</div></div>' +
          '<a href="' + c[6] + '" class="kp-btn">Explore Course</a>' +
        '</div></article>';
    }

    function render() {
      var labels = ['All'];
      courses.forEach(function (c) { if (labels.indexOf(c[0]) === -1) labels.push(c[0]); });

      chipsEl.innerHTML = labels.map(function (l) {
        return '<button type="button" class="kp-chip' + (l === active ? ' active' : '') + '" data-chip="' + l + '">' + l + '</button>';
      }).join('');

      var list = active === 'All' ? courses : courses.filter(function (c) { return c[0] === active; });
      gridEl.innerHTML = list.map(cardHtml).join('');
      emptyEl.style.display = list.length ? 'none' : 'block';
    }

    chipsEl.addEventListener('click', function (e) {
      var chip = e.target.closest('.kp-chip');
      if (!chip) return;
      active = chip.dataset.chip;
      render();
    });

    render();
  })();

  /* Hide the layout's announcement bars by their text (remove them from the layout for a permanent fix) */
  (function () {
    var TEXTS = ['Admissions Closing Soon', 'Admissions Open for Vacant'];

    function hideBars() {
      document.body.querySelectorAll('*').forEach(function (el) {
        if (el.children.length || el.closest('.ru-page')) return;
        var hit = TEXTS.some(function (t) { return el.textContent.indexOf(t) !== -1; });
        if (!hit) return;
        var target = el;
        while (
          target.parentElement &&
          target.parentElement !== document.body &&
          !target.parentElement.querySelector('.ru-page') &&
          target.parentElement.textContent.trim().length < 300
        ) {
          target = target.parentElement;
        }
        target.style.setProperty('display', 'none', 'important');
      });
    }

    hideBars();
    new MutationObserver(hideBars).observe(document.body, { childList: true, subtree: true });
  })();
</script>

@endsection