<%- include("websitepartials/header") %>
<main class="main">
  <style>
    @media (max-width: 576px) {
      .event-ticker {
        position: static !important;
      }
    }
  </style>
  <!-- Hero Section -->
  <section id="hero" class="hero section dark-background">
    <div class="hero-container">
      <video
        autoplay=""
        muted=""
        loop=""
        playsinline=""
        class="video-background"
      >
        <source src="website-assets/img/education/large.mp4" type="video/mp4" />
      </video>
      <div class="overlay"></div>
      <div class="container">
        <div class="row align-items-center">
          <div class="col-lg-7" data-aos="zoom-out" data-aos-delay="100">
            <div class="hero-content">
              <!-- <h1>Empowering Futures Through Education</h1> -->
              <h1>
                Welcome to University of Innovation, Science and Technology,
                Omuma
              </h1>
              <p>
                Explore a world of knowledge and innovation at your fingertips.
                Fed Poly Nekede fosters academic excellence, research
                breakthroughs, and personal growth. Engage with experienced
                faculty and diverse programs designed to inspire success.
              </p>
              <div class="cta-buttons">
                <a
                  href="javascript:void(0)"
                  class="btn-primary show-apply-modal"
                  >Start Your Journey</a
                >
                <a href="#featured-programs" class="btn-secondary"
                  >Discover Our Programs</a
                >
                <a
                  href="/key-institutional-data"
                  class="btn-primary show-apply-modal"
                  >Key Institutional Data</a
                >
              </div>
            </div>
          </div>
          <div class="col-lg-5" data-aos="zoom-out" data-aos-delay="200">
            <div class="stats-card">
              <div class="stats-header">
                <h3>Why Choose Us</h3>
                <div class="decoration-line"></div>
              </div>
              <div class="stats-grid">
                <div class="stat-item">
                  <div class="stat-icon">
                    <i class="bi bi-trophy-fill"></i>
                  </div>
                  <div class="stat-content">
                    <h4>85%</h4>
                    <p>Graduate Employment</p>
                  </div>
                </div>
                <div class="stat-item">
                  <div class="stat-icon">
                    <i class="bi bi-globe"></i>
                  </div>
                  <div class="stat-content">
                    <h4>45+</h4>
                    <p>International Partners</p>
                  </div>
                </div>
                <div class="stat-item">
                  <div class="stat-icon">
                    <i class="bi bi-mortarboard"></i>
                  </div>
                  <div class="stat-content">
                    <h4>1:1k+</h4>
                    <p>Faculty-Student Ratio</p>
                  </div>
                </div>
                <div class="stat-item">
                  <div class="stat-icon">
                    <i class="bi bi-building"></i>
                  </div>
                  <div class="stat-content">
                    <h4>50+</h4>
                    <p>Degree Programs</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div
      class="event-ticker"
      style="position: fixed; bottom: 0; width: 100%; z-index: 1400"
    >
      <div class="container">
        <div class="row gy-4">
          <div class="col-md-6 col-xl-4 col-12 ticker-item">
            <a
              href="https://erp.UISTO.edu.ng/index.php?login"
              class="btn-register me-3"
              target="_blank"
              >ND Login</a
            >
            <span class="title">Student Portal</span>
            <a
              href="https://hndportal.UISTO.edu.ng"
              class="btn-register"
              target="_blank"
              >HND Login</a
            >
          </div>
          <div class="col-md-6 col-12 col-xl-4 ticker-item">
            <a
              href="https://ndapplication.UISTO.edu.ng/Applicant/Admission/CheckStatus"
              class="btn-register me-3"
              target="_blank"
              >ND</a
            >
            <span class="title">Admission Status Checker</span>
            <a
              href="https://hndportal.UISTO.edu.ng/students/getapplicationrrr"
              class="btn-register"
              target="_blank"
              >HND</a
            >
          </div>
          <div class="col-md-6 col-12 col-xl-4 ticker-item">
            <span class="date">UPDATES</span>
            <span class="title">Latest News & Notices</span>
            <a href="/news" class="btn-register">Read</a>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- /Hero Section -->

  <!-- About Section -->
  <section id="about" class="about section">
    <div class="container" data-aos="fade-up" data-aos-delay="100">
      <div class="row mb-5">
        <div
          class="col-lg-6 pe-lg-5"
          data-aos="fade-right"
          data-aos-delay="200"
        >
          <h2 class="display-6 fw-bold mb-4">
            Empowering Minds, <span>Shaping Futures</span>
          </h2>
          <p class="lead mb-4">
            At University of Innovation, Science and Technology, Omuma, we are
            committed to nurturing innovation, excellence, and practical skills
            that prepare our students to thrive in a dynamic world. Join us in
            building a brighter future for Nigeria and beyond.
          </p>
          <div class="d-flex flex-wrap gap-4 mb-4">
            <div class="stat-box">
              <span class="stat-number"
                ><span
                  data-purecounter-start="0"
                  data-purecounter-end="45"
                  data-purecounter-duration="1"
                  class="purecounter"
                ></span
                >+</span
              >
              <span class="stat-label">Years</span>
            </div>
            <div class="stat-box">
              <span class="stat-number"
                ><span
                  data-purecounter-start="0"
                  data-purecounter-end="15200"
                  data-purecounter-duration="1"
                  class="purecounter"
                ></span
                >+</span
              >
              <span class="stat-label">Students</span>
            </div>
            <div class="stat-box">
              <span class="stat-number"
                ><span
                  data-purecounter-start="0"
                  data-purecounter-end="7"
                  data-purecounter-duration="1"
                  class="purecounter"
                ></span
                >+</span
              >
              <span class="stat-label">Faculty</span>
            </div>
          </div>
          <div class="d-flex align-items-center mt-4 signature-block">
            <img
              src="website-assets/img/misc/signature.png"
              alt="rector signature"
              width="120"
            />
            <div class="ms-3">
              <p class="mb-0 fw-bold">Dr. Mrs. Basilia Igbokwe.</p>
              <p class="mb-0 text-muted">Rector</p>
            </div>
          </div>
        </div>
        <div class="col-lg-6" data-aos="fade-left" data-aos-delay="300">
          <div class="image-stack">
            <div
              class="image-stack-item image-stack-item-top w-100"
              data-aos="zoom-in"
              data-aos-delay="400"
            >
              <img
                src="website-assets/img/school-images/9th-Rectorr.jpg"
                alt="Campus Life"
                class="img-fluid rounded-4 shadow-lg w-100"
              />
            </div>
            <div
              class="image-stack-item image-stack-item-bottom d-none d-md-block"
              data-aos="zoom-in"
              data-aos-delay="500"
            >
              <img
                src="website-assets/img/school-images/SEDTT.jpg"
                alt="Students"
                class="img-fluid rounded-4 shadow-lg"
              />
            </div>
          </div>
        </div>
      </div>

      <div class="row mission-vision-row g-4">
        <div class="col-md-4" data-aos="fade-up" data-aos-delay="100">
          <div class="value-card h-100">
            <div class="card-icon">
              <i class="bi bi-rocket-takeoff"></i>
            </div>
            <h3>Our Mission</h3>
            <p>
              To provide high-quality technical and vocational education that
              empowers students with the skills and knowledge needed to drive
              innovation and national development.
            </p>
          </div>
        </div>
        <div class="col-md-4" data-aos="fade-up" data-aos-delay="200">
          <div class="value-card h-100">
            <div class="card-icon">
              <i class="bi bi-eye"></i>
            </div>
            <h3>Our Vision</h3>
            <p>
              To be a leading institution of excellence in technology and
              applied sciences, producing graduates equipped for global impact
              and lifelong success.
            </p>
          </div>
        </div>
        <div class="col-md-4" data-aos="fade-up" data-aos-delay="300">
          <div class="value-card h-100">
            <div class="card-icon">
              <i class="bi bi-star"></i>
            </div>
            <h3>Our Values</h3>
            <p>
              Integrity, innovation, inclusiveness, excellence, and a strong
              commitment to skill-driven, hands-on education and community
              advancement.
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- /About Section -->

  <!-- Featured Programs Section -->
  <section id="featured-programs" class="featured-programs section">
    <!-- Section Title -->
    <div class="container section-title" data-aos="fade-up">
      <h2>Featured Programs</h2>
      <p>
        Discover diverse academic opportunities crafted to inspire excellence.
        <br />
        Engage in programs designed to empower critical thinking and innovation.
        <br />
        Gain practical knowledge through immersive learning experiences that
        foster growth.
      </p>
    </div>
    <!-- End Section Title -->

    <div class="container" data-aos="fade-up" data-aos-delay="100">
      <div
        class="isotope-layout"
        data-default-filter="*"
        data-layout="masonry"
        data-sort="original-order"
      >
        <div class="programs-section">
          <div class="row g-4" id="programsContainer">
            <!-- Program items will be inserted here -->
          </div>
        </div>

        <div class="text-center mt-5">
          <a href="/faculty-staff" class="btn-view-all"
            >View Schools <i class="bi bi-arrow-right"></i> Departments
            <i class="bi bi-arrow-right"></i> Programs</a
          >
        </div>
      </div>
    </div>
  </section>
  <!-- /Featured Programs Section -->

  <!-- Students Life Block Section -->
  <section id="students-life-block" class="students-life-block section">
    <!-- Section Title -->
    <div class="container section-title" data-aos="fade-up">
      <h2>Student Life at UISTO</h2>
      <p>
        Explore the vibrant campus life at University of Innovation, Science and
        Technology, Omuma — where learning meets fun, culture, and innovation.
      </p>
    </div>
    <!-- End Section Title -->

    <div class="container" data-aos="fade-up" data-aos-delay="100">
      <div class="row align-items-center gy-4">
        <!-- Image Block -->
        <div class="col-lg-6" data-aos="fade-right" data-aos-delay="200">
          <div class="students-life-img position-relative">
            <img
              src="website-assets/img/education/education-square-11.png"
              class="img-fluid rounded-4 shadow-sm"
              alt="Students Life"
            />
            <div class="img-overlay">
              <h3>Discover Campus Life</h3>
              <a href="/students-life" class="explore-btn"
                >Explore More <i class="bi bi-arrow-right"></i
              ></a>
            </div>
          </div>
        </div>

        <!-- Content Block -->
        <div class="col-lg-6" data-aos="fade-left" data-aos-delay="300">
          <div class="students-life-content">
            <div class="row g-4 mb-4">
              <div class="col-md-6" data-aos="zoom-in" data-aos-delay="200">
                <div class="student-activity-item">
                  <div class="icon-box">
                    <i class="bi bi-people"></i>
                  </div>
                  <h4>Student Associations</h4>
                  <p>
                    Join departmental associations, religious groups, and
                    leadership bodies that foster growth and unity.
                  </p>
                </div>
              </div>

              <div class="col-md-6" data-aos="zoom-in" data-aos-delay="300">
                <div class="student-activity-item">
                  <div class="icon-box">
                    <i class="bi bi-trophy"></i>
                  </div>
                  <h4>Sporting Activities</h4>
                  <p>
                    Participate in football, athletics, and other
                    inter-departmental competitions held annually.
                  </p>
                </div>
              </div>

              <div class="col-md-6" data-aos="zoom-in" data-aos-delay="400">
                <div class="student-activity-item">
                  <div class="icon-box">
                    <i class="bi bi-music-note-beamed"></i>
                  </div>
                  <h4>Campus Entertainment</h4>
                  <p>
                    Enjoy talent shows, cultural days, music nights, and other
                    lively campus events organized by students.
                  </p>
                </div>
              </div>

              <div class="col-md-6" data-aos="zoom-in" data-aos-delay="500">
                <div class="student-activity-item">
                  <div class="icon-box">
                    <i class="bi bi-globe-americas"></i>
                  </div>
                  <h4>Community & Outreach</h4>
                  <p>
                    Engage in volunteer work, environmental cleanups, and
                    student-led social impact programs.
                  </p>
                </div>
              </div>
            </div>

            <div
              class="students-life-cta"
              data-aos="fade-up"
              data-aos-delay="600"
            >
              <a href="/students-life" class="btn btn-primary"
                >View All Student Activities</a
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- /Students Life Block Section -->

  <!-- Testimonials Section -->
  <section id="testimonials" class="testimonials section">
    <!-- Section Title -->
    <div class="container section-title" data-aos="fade-up">
      <h2>Testimonials</h2>
      <p>
        What students and staff are saying about University of Innovation,
        Science and Technology, Omuma
      </p>
    </div>
    <!-- End Section Title -->

    <div class="container">
      <div class="testimonial-masonry">
        <div class="testimonial-item" data-aos="fade-up">
          <div class="testimonial-content">
            <div class="quote-pattern">
              <i class="bi bi-quote"></i>
            </div>
            <p>
              Studying at UISTO transformed my academic journey. The lecturers
              are supportive, and the learning environment is truly inspiring.
            </p>
            <div class="client-info">
              <div class="client-image">
                <img
                  src="https://plus.unsplash.com/premium_photo-1723489443299-e9507d33a5f9?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTd8fGJsYWNrJTIwcGVyc29uJTIwcG9ydHJhaXR8ZW58MHx8MHx8fDA%3D"
                  alt="Client"
                />
              </div>
              <div class="client-details">
                <h3>Chioma Nwankwo</h3>
                <span class="position">ND Graduate, Mass Communication</span>
              </div>
            </div>
          </div>
        </div>

        <div
          class="testimonial-item highlight"
          data-aos="fade-up"
          data-aos-delay="100"
        >
          <div class="testimonial-content">
            <div class="quote-pattern">
              <i class="bi bi-quote"></i>
            </div>
            <p>
              University of Innovation, Science and Technology, Omuma equipped
              me with practical skills and real-world knowledge. It’s the best
              decision I ever made.
            </p>
            <div class="client-info">
              <div class="client-image">
                <img
                  src="website-assets/img/person/person-m-11.webp"
                  alt="Client"
                />
              </div>
              <div class="client-details">
                <h3>Emeka Okoro</h3>
                <span class="position">HND Graduate, Computer Science</span>
              </div>
            </div>
          </div>
        </div>

        <div class="testimonial-item" data-aos="fade-up" data-aos-delay="200">
          <div class="testimonial-content">
            <div class="quote-pattern">
              <i class="bi bi-quote"></i>
            </div>
            <p>
              With modern labs and dedicated staff, UISTO fosters innovation and
              encourages students to aim higher every day.
            </p>
            <div class="client-info">
              <div class="client-image">
                <img
                  src="https://media.istockphoto.com/id/2186242250/photo/portrait-of-a-beautiful-woman-smiling-outdoors.jpg?s=1024x1024&w=is&k=20&c=Xvbb6fCLMhCLnbZYnFuC9tBsyRCRy6Z3heejbKWsazM="
                  alt="Client"
                />
              </div>
              <div class="client-details">
                <h3>Angela Udeh</h3>
                <span class="position">Lecturer, SLT Department</span>
              </div>
            </div>
          </div>
        </div>

        <div class="testimonial-item" data-aos="fade-up" data-aos-delay="300">
          <div class="testimonial-content">
            <div class="quote-pattern">
              <i class="bi bi-quote"></i>
            </div>
            <p>
              As a staff member, I’m proud to contribute to a system that values
              academic excellence and student growth.
            </p>
            <div class="client-info">
              <div class="client-image">
                <img
                  src="https://media.istockphoto.com/id/2099407167/photo/confident-young-businesswoman-standing-in-front-of-a-white-office-wall.webp?a=1&b=1&s=612x612&w=0&k=20&c=_F-aShYupB3SYonI7cjNii34Z-WJjUZhVsSzm27tiX4="
                  alt="Client"
                />
              </div>
              <div class="client-details">
                <h3>Engr. Kingsley Umeh</h3>
                <span class="position">Coordinator, Civil Engineering</span>
              </div>
            </div>
          </div>
        </div>

        <div
          class="testimonial-item highlight"
          data-aos="fade-up"
          data-aos-delay="400"
        >
          <div class="testimonial-content">
            <div class="quote-pattern">
              <i class="bi bi-quote"></i>
            </div>
            <p>
              The polytechnic’s strong industry links helped me land a top
              internship and gain valuable field experience.
            </p>
            <div class="client-info">
              <div class="client-image">
                <img
                  src="https://media.istockphoto.com/id/2186780921/photo/young-woman-programmer-focused-on-her-work-coding-on-dual-monitors-in-a-modern-office.webp?a=1&b=1&s=612x612&w=0&k=20&c=SAF-y0Rjzil_3FQi2KmAyXOAKYHaHRRbNxjQXnMsObk="
                  alt="Client"
                />
              </div>
              <div class="client-details">
                <h3>Faith Ibekwe</h3>
                <span class="position"
                  >ND Student, Business Administration</span
                >
              </div>
            </div>
          </div>
        </div>

        <div class="testimonial-item" data-aos="fade-up" data-aos-delay="500">
          <div class="testimonial-content">
            <div class="quote-pattern">
              <i class="bi bi-quote"></i>
            </div>
            <p>
              From quality lectures to engaging projects, UISTO has shaped me
              into a confident, career-ready graduate.
            </p>
            <div class="client-info">
              <div class="client-image">
                <img
                  src="https://images.unsplash.com/photo-1684422296576-481b2e9810ed?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8YmxhY2slMjBwZXJzb24lMjBwb3J0cmFpdHxlbnwwfHwwfHx8MA%3D%3D"
                  alt="Client"
                />
              </div>
              <div class="client-details">
                <h3>Chidiebere Nnaji</h3>
                <span class="position"
                  >HND Graduate, Electrical Engineering</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- /Testimonials Section -->

  <!-- Stats Section -->
  <section id="stats" class="stats section">
    <div class="container" data-aos="fade-up" data-aos-delay="100">
      <div class="row">
        <div class="col-lg-6">
          <div
            class="stats-overview"
            data-aos="fade-right"
            data-aos-delay="200"
          >
            <h2 class="stats-title">
              Empowering Technical Excellence for Over 45 Years
            </h2>
            <p class="stats-description">
              University of Innovation, Science and Technology, Omuma is a hub
              of innovation, academic excellence, and technical empowerment. We
              produce highly skilled graduates equipped to contribute
              meaningfully in diverse fields across Nigeria and beyond.
            </p>
            <div class="stats-cta">
              <a href="/history" class="btn btn-primary">Explore Our History</a>
              <a href="javascript:void(0)" class="btn btn-outline"
                >Take a Virtual Tour</a
              >
            </div>
          </div>
        </div>

        <div class="col-lg-6">
          <div class="row g-4">
            <div class="col-md-6">
              <div class="stats-card" data-aos="zoom-in" data-aos-delay="300">
                <div class="stats-icon">
                  <i class="bi bi-mortarboard"></i>
                </div>
                <div class="stats-number">
                  <span
                    data-purecounter-start="0"
                    data-purecounter-end="85"
                    data-purecounter-duration="1"
                    class="purecounter"
                  ></span
                  >%
                </div>
                <div class="stats-label">Graduate Employment Rate</div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="stats-card" data-aos="zoom-in" data-aos-delay="400">
                <div class="stats-icon">
                  <i class="bi bi-person-check"></i>
                </div>
                <div class="stats-number">
                  <span
                    data-purecounter-start="0"
                    data-purecounter-end="18"
                    data-purecounter-duration="1"
                    class="purecounter"
                  ></span
                  >:1
                </div>
                <div class="stats-label">Student-Lecturer Ratio</div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="stats-card" data-aos="zoom-in" data-aos-delay="500">
                <div class="stats-icon">
                  <i class="bi bi-journal-check"></i>
                </div>
                <div class="stats-number">
                  <span
                    data-purecounter-start="0"
                    data-purecounter-end="60"
                    data-purecounter-duration="1"
                    class="purecounter"
                  ></span
                  >+
                </div>
                <div class="stats-label">Approved ND/HND Programs</div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="stats-card" data-aos="zoom-in" data-aos-delay="600">
                <div class="stats-icon">
                  <i class="bi bi-building"></i>
                </div>
                <div class="stats-number">
                  ₦<span
                    data-purecounter-start="0"
                    data-purecounter-end="30"
                    data-purecounter-duration="1"
                    class="purecounter"
                  ></span
                  >M
                </div>
                <div class="stats-label">Annual Capital Projects</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="row mt-5">
        <div class="col-lg-12">
          <div
            class="achievements-gallery"
            data-aos="fade-up"
            data-aos-delay="700"
          >
            <div class="row g-4">
              <div class="col-md-4">
                <div class="achievement-item">
                  <img
                    src="website-assets/img/school-images/SEDTT.jpg"
                    alt="Top Programs"
                    class="img-fluid"
                  />
                  <div class="achievement-content">
                    <h4>Nationally Recognized Programs</h4>
                    <p>
                      Our ND and HND programs are highly rated by industry and
                      academia for technical depth and relevance.
                    </p>
                  </div>
                </div>
              </div>
              <div class="col-md-4">
                <div class="achievement-item">
                  <img
                    src="website-assets/img/school-images/labs.png"
                    alt="Facilities"
                    class="img-fluid"
                  />
                  <div class="achievement-content">
                    <h4>Modern Labs & Workshops</h4>
                    <p>
                      State-of-the-art facilities across engineering, ICT,
                      science, and creative arts for hands-on learning.
                    </p>
                  </div>
                </div>
              </div>
              <div class="col-md-4">
                <div class="achievement-item">
                  <img
                    src="website-assets/img/school-images/9th-Rectorr.jpg"
                    alt="Alumni"
                    class="img-fluid"
                  />
                  <div class="achievement-content">
                    <h4>Strong Alumni Network</h4>
                    <p>
                      Graduates making impact as technologists, entrepreneurs,
                      educators, and innovators across Nigeria and abroad.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- /Stats Section -->

  <!-- Recent News Section -->
  <section id="recent-news" class="recent-news section">
    <!-- Section Title -->
    <div class="container section-title" data-aos="fade-up">
      <h2>Recent News</h2>
      <p>Stay updated with the latest happenings and announcements.</p>
    </div>
    <!-- End Section Title -->

    <div class="container">
      <!-- Dynamic News Posts Will Be Injected Here -->
      <div class="row gy-4"></div>

      <!-- View All Button -->
      <div class="text-center mt-5">
        <a href="/news" class="btn-view-all">View All News</a>
      </div>
    </div>
  </section>
  <!-- /Recent News Section -->

  <!-- Events Section -->
  <section id="events" class="events section">
    <!-- Section Title -->
    <div class="container section-title pb-3" data-aos="fade-up">
      <h2>Events</h2>
      <p>
        Explore key dates, seminars, and campus happenings that shape our
        institution.
      </p>
    </div>
    <!-- End Section Title -->

    <div class="container" data-aos="fade-up" data-aos-delay="100">
      <!-- <div class="event-filters mb-4">
          <div class="row justify-content-center g-3">
            <div class="col-md-4">
              <select class="form-select">
                <option selected="">All Months</option>
                <option>January</option>
                <option>February</option>
                <option>March</option>
                <option>April</option>
                <option>May</option>
                <option>June</option>
              </select>
            </div>
            <div class="col-md-4">
              <select class="form-select">
                <option selected="">All Categories</option>
                <option>Academic</option>
                <option>Arts</option>
                <option>Sports</option>
                <option>Community</option>
              </select>
            </div>
          </div>
        </div> -->

      <div class="row g-4" id="event-list">
        <!-- Events will be injected here -->
      </div>

      <div class="text-center mt-5">
        <a href="/events" class="btn-view-all">View All Events</a>
      </div>
    </div>
  </section>
  <!-- /Events Section -->
</main>

<script>
  async function fetchPrograms() {
    try {
      const res = await fetch("/api/programs?limit=6");
      const data = await res.json();

      if (!data.success) throw new Error("Failed to fetch programs");

      const container = document.getElementById("programsContainer");
      container.innerHTML = "";

      data.programs.forEach((program, index) => {
        const levelBadge = Array.isArray(program.level)
          ? program.level.filter((l) => l).join(" | ")
          : "";

        const duration = program.duration || " ";
        const credit = program.requiredCredit || " ";
        const types =
          program.programType?.map((pt) => pt.programTypeName).join(" | ") ||
          " ";
        const desc = program.description || "";
        const description =
          desc.length > 170 ? desc.slice(0, 170) + "..." : desc;

        const title = program.name || "";
        const image =
          program.programImage?.url ||
          "website-assets/img/education/placeholder.jpg";

        const html = `
          <div class="col-lg-6" data-aos="zoom-in" data-aos-delay="${
            100 + index * 100
          }">
            <div class="program-item">
              <div class="program-badge">${levelBadge}</div>
              <div class="row g-0">
                <div class="col-md-4">
                  <div class="program-image-wrapper">
                    <img src="${image}" class="img-fluid" alt="${title}">
                  </div>
                </div>
                <div class="col-md-8">
                  <div class="program-content">
                    <h3>${title}</h3>
                    <div class="program-highlights">
                      <span><i class="bi bi-clock"></i> ${duration}</span>
                      <span><i class="bi bi-check-lg"></i> ${credit} Credits</span>
                      <span><i class="bi bi-calendar3"></i> ${types}</span>
                    </div>
                    <p>${description}</p>
                    <a href="/faculty-staff" class="program-btn"><span>Learn More</span> <i class="bi bi-arrow-right"></i></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        `;
        container.insertAdjacentHTML("beforeend", html);
      });
    } catch (err) {
      console.error("Error loading programs:", err);
    }
  }

  document.addEventListener("DOMContentLoaded", fetchPrograms);
</script>

<!-- //POPULATING NEW SECTION -->

<script>
  document.addEventListener("DOMContentLoaded", async () => {
    try {
      const response = await fetch("/api/news"); // Adjust the API path if needed
      const data = await response.json();

      const newsList = data.news.slice(0, 3); // Take first 3 items only
      const row = document.querySelector("#recent-news .row.gy-4");

      newsList.forEach((newsItem, index) => {
        const col = document.createElement("div");
        col.className = "col-xl-4 col-md-6";
        col.setAttribute("data-aos", "fade-up");
        col.setAttribute("data-aos-delay", `${100 * (index + 1)}`);

        const imageUrl =
          newsItem.images && newsItem.images.length > 0
            ? newsItem.images[0].url
            : "website-assets/img/blog/default.png"; // fallback image

        const article = `
          <article>
            <div class="post-img">
              <img src="${imageUrl}" alt="${newsItem.title}" class="img-fluid">
            </div>
            <p class="post-category">${newsItem.newsTag || "General"}</p>
            <h2 class="title">
              <a href="/news?id=${newsItem._id}">${newsItem.title}</a>
            </h2>
            <p class="post-date text-end">
              <time datetime="${newsItem.createdAt}">${new Date(
          newsItem.createdAt
        ).toLocaleDateString("en-US", {
          year: "numeric",
          month: "long",
          day: "numeric",
        })}</time>
            </p>
          </article>
        `;

        col.innerHTML = article;
        row.appendChild(col);
      });
    } catch (error) {
      console.error("Error loading news:", error);
    }
  });
</script>

<!-- POPULATING EVENTS SECTION -->
<script>
  document.addEventListener("DOMContentLoaded", async () => {
    try {
      const res = await fetch("/events-brief?page=1&limit=4");
      const data = await res.json();
      const events = data.events;
      const container = document.getElementById("event-list");

      const monthNames = [
        "JAN",
        "FEB",
        "MAR",
        "APR",
        "MAY",
        "JUN",
        "JUL",
        "AUG",
        "SEPT",
        "OCT",
        "NOV",
        "DEC",
      ];

      events.forEach((event) => {
        const date = new Date(event.date);
        const startTime = convertTo12Hour(event.startTime);
        const endTime = convertTo12Hour(event.endTime);
        const rawStart = formatForCalendar(date, event.startTime);
        const rawEnd = formatForCalendar(date, event.endTime);

        const col = document.createElement("div");
        col.className = "col-lg-6";

        const calendarUrl = `https://calendar.google.com/calendar/render?action=TEMPLATE&text=${encodeURIComponent(
          event.title
        )}&dates=${rawStart}/${rawEnd}&details=${encodeURIComponent(
          event.description
        )}&location=${encodeURIComponent(event.location || "Campus Venue")}`;

        col.innerHTML = `
          <div class="event-card">
            <div class="event-date">
              <span class="month">${monthNames[date.getMonth()]}</span>
              <span class="day">${date.getDate()}</span>
              <span class="year">${date.getFullYear()}</span>
            </div>
            <div class="event-content">
              <div class="event-tag general">General</div>
              <h3>${event.title}</h3>
              <p>${event.description}</p>
              <div class="event-meta">
                <div class="meta-item">
                  <i class="bi bi-clock"></i>
                  <span>${startTime} - ${endTime}</span>
                </div>
                <div class="meta-item">
                  <i class="bi bi-geo-alt"></i>
                  <span>${event.location || "Campus Venue"}</span>
                </div>
              </div>
              <div class="event-actions">
                <a href="/events" class="btn-learn-more">See More Events</a>
                <a href="${calendarUrl}" target="_blank" class="btn-calendar">
                  <i class="bi bi-calendar-plus"></i> Add to Calendar
                </a>
              </div>
            </div>
          </div>
        `;

        container.appendChild(col);
      });

      // Convert "15:04" => "03:04 PM"
      function convertTo12Hour(time24) {
        const [h, m] = time24.split(":").map(Number);
        const ampm = h >= 12 ? "PM" : "AM";
        const hour = h % 12 || 12;
        return `${hour.toString().padStart(2, "0")}:${m
          .toString()
          .padStart(2, "0")} ${ampm}`;
      }

      // Format for Google Calendar link
      function formatForCalendar(dateObj, time24) {
        const [h, m] = time24.split(":").map(Number);
        const iso = new Date(dateObj);
        iso.setHours(h, m, 0);
        return iso.toISOString().replace(/[-:]/g, "").split(".")[0] + "Z";
      }
    } catch (err) {
      console.error("Error loading events:", err);
    }
  });
</script>

<%- include("websitepartials/footer") %>
