<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
      rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <title>UPN SEHAT</title>
    <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

    .font-inter {
      font-family: 'Inter', sans-serif;
    }

    .hero-section {
      background-image: url("/img/background.png");
      background-size: cover;
      background-position: center;
    }

    .spinner {
      border-top-color: transparent;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      border: 4px solid;
      border-color: white;
      border-top-color: transparent;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }
  </style>
  </head>

  <body class="bg-gray-100 w-full font-inter">
    <!-- NAVBAR -->
    <header
      class="bg-white fixed top-0 left-0 w-full flex items-center z-50 border-b-2 border-gray-100">
      <div class="container mx-auto">
        <div class="flex items-center justify-between relative">
          <div class="px-4">
            <a href="/">
              <img src="/img/logo.png" alt="upn-sehat" class="block py-8" />
            </a>
          </div>

          <!-- Hamburger -->
          <div class="flex items-center px-4">
            <button id="hamburger" name="hamburger" type="button"
              class="block absolute right-4 lg:hidden">
              <span class="w-[30px] h-[2px] my-2 block bg-gray-900"></span>
              <span class="w-[30px] h-[2px] my-2 block bg-gray-900"></span>
              <span class="w-[30px] h-[2px] my-2 block bg-gray-900"></span>
            </button>
          </div>

          <!-- List -->
          <nav id="nav-menu"
            class="hidden absolute py-2 bg-white shadow-lg rounded-lg max-w-[250px] w-full right-4 top-full lg:block lg:static lg:bg-transparent lg:max-w-full lg:shadow-none lg:rounded-none">
            <ul class="block lg:flex">
              <li class="group content-center">
                <a href="/"
                  class="text-gray-900 mx-6 py-2 flex group-hover:text-blue-600">Beranda</a>
              </li>
              <li class="group content-center">
                <a href="/to-article"
                  class="text-gray-900 mx-6 py-2 flex group-hover:text-blue-600">Artikel</a>
              </li>
              <li class="group content-center">
                <a href="/to-video"
                  class="text-gray-900 mx-6 py-2 flex group-hover:text-blue-600">Video</a>
              </li>
              <li class="group content-center">
                <a href="/to-aboutus"
                  class="text-gray-900 mx-6 py-2 flex group-hover:text-blue-600">About
                  Us</a>
              </li>
              <li
                class="group lg:ml-auto mx-6 space-x-2 py-2 flex content-center">
                <button id="logoutButton"
                  class="text-gray-800 px-4 py-2 rounded-md hover:bg-gray-400 focus:outline-none focus:ring focus:ring-gray-400 focus:ring-opacity-50 border-2 border-gray-200 w-full">
                  LogOut
                </button>
                <button onclick="window.location.href='/to-profile'"
                  class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-600 focus:ring-opacity-50 w-full">
                  Profile
                </a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </header>

    <!-- HERO SECTION -->
    <div class="hero-section py-52">
      <div class="container mx-auto p-8">
        <h1 class="text-6xl text-gray-900 font-bold mb-4">
          Menuju Kesehatan Optimal
        </h1>
        <p class="text-gray-600">
          Temukan Dunia Kesehatan yang Luas: Mulai Perjalanan Kesehatan Anda
          dengan UPN Sehat!
        </p>
      </div>
    </div>

    <!-- ABOUT US SECTION -->
    <div
      class="container-about-us flex flex-col lg:flex-row lg:gap-80 m-[72px]">
      <div class="container-about-us-content w-full lg:w-1/3 p-[28px]">
        <div class="container-deskripsi">
          <h1 class="font-bold text-[36px]">Tentang Kami</h1>
          <p class="text-[20px] text-[#6B7280] mt-[24px]">UPN Sehat adalah
            sebuah platform yang bertujuan untuk
            memberikan informasi dan layanan kesehatan yang luas kepada
            masyarakat. Kami menyediakan berbagai artikel,
            video, dan informasi terkait obat-obatan serta jadwal kesehatan,
            sehingga Anda dapat mengelola perawatan
            kesehatan Anda dengan lebih mudah dan efisien.</p>
        </div>
      </div>
      <div
        class="container-list-obat py-[28px] lg:w-2/3 flex flex-col gap-[16px]">
        <!-- Data Obat -->
        <div class="flex gap-8 items-center">
          <img src="/img/foto-arif.png" alt="Foto Arif Hidayat"
            class="h-24 w-24 rounded-full">
          <div>
            <p class="font-semibold text-lg">Arif Hidayat</p>
            <p class="text-sm text-gray-500">NIM 2110511157</p>
          </div>
        </div>
        <div class="flex gap-8 items-center">
          <img src="/img/foto-aan.jpg" alt="Foto Rahmat Andhityo"
            class="h-24 w-24 rounded-full">
          <div>
            <p class="font-semibold text-lg">Rahmat Andhityo</p>
            <p class="text-sm text-gray-500">NIM 211051164</p>
          </div>
        </div>
        <div class="flex gap-8 items-center">
          <img src="/img/foto-patur.jpg" alt="Foto Fathur Hidayat"
            class="h-24 w-24 rounded-full">
          <div>
            <p class="font-semibold text-lg">Fathur Hidayat</p>
            <p class="text-sm text-gray-500">NIM 211051153</p>
          </div>
        </div>
        <div class="flex gap-8 items-center">
          <img src="/img/foto-ican.jpg" alt="Foto Ican"
            class="h-24 w-24 rounded-full">
          <div>
            <p class="font-semibold text-lg">Ichsan Maldini Hamid</p>
            <p class="text-sm text-gray-500">NIM 2110511076 </p>
          </div>
        </div>
      </div>

    </div>
    <!-- FOOTER SECTION -->
    <footer class="bg-white text-white p-4">
      <div class="container mx-auto flex items-center justify-between">
        <!-- Logo -->
        <div class="logo flex space-x-3">
          <img src="/img/upnsehat-kecil.png" alt="Logo" class="h-8" />
          <img src="/img/upn-kecil.png" alt="Logo" class="h-8" />
        </div>
        <!-- Hak Cipta -->
        <p class="text-sm text-gray-900">
          &copy; 2024, Studi Informatika, Fakultas Ilmu Komputer. Hak Cipta
          Dilindungi
        </p>
      </div>
    </footer>
    <!-- Hamburger Logic -->
    <script>
    const hamburger = document.querySelector("#hamburger");
    const navMenu = document.querySelector("#nav-menu");

    hamburger.addEventListener("click", function () {
      hamburger.classList.toggle("hamburger-active");
      navMenu.classList.toggle("hidden");
    });
  </script>
    <!-- Jika Belum Login maka akan ke Login.ejs -->
    <script>
    // Fungsi untuk mendapatkan nilai cookie berdasarkan nama
    function getCookie(name) {
      let cookieArr = document.cookie.split(";");

      for (let i = 0; i < cookieArr.length; i++) {
        let cookiePair = cookieArr[i].split("=");

        /* Menghapus spasi di awal nama cookie dan membandingkannya dengan string "name" */
        if (name == cookiePair[0].trim()) {
          // Mengembalikan nilai dari cookie
          return decodeURIComponent(cookiePair[1]);
        }
      }

      // Mengembalikan null jika tidak ada cookie yang ditemukan
      return null;
    }

    // Memeriksa apakah cookie "email" ada
    let emailCookie = getCookie("uid");

    if (emailCookie === null) {
      // Mengarahkan ke halaman login jika cookie tidak ditemukan
      window.location.href = "/to-login";
    }
  </script>
    <!-- logout -->
    <script>
    document.addEventListener("DOMContentLoaded", function () {
      const logoutButton = document.querySelector('#logoutButton');

      logoutButton.addEventListener('click', function () {
        // Hapus cookie 'uid'
        document.cookie = "uid=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

        // Arahkan ke halaman login
        window.location.href = '/to-login';
      });
    });
  </script>
  </body>

</html>