<!-- ========== FOOTER ========== -->
<footer
  class="mt-auto w-full bg-ctp-surface0 border border-ctp-surface1 max-w-[85rem] py-10 px-4 sm:px-6 lg:px-8 mx-auto">
  <!-- Grid -->
  <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-6 mb-10">
    <div class="col-span-full hidden lg:col-span-1 lg:block">
      <label class="swap  swap-flip">
        <!-- this hidden checkbox controls the state -->
        <input type="checkbox" />

        <!-- volume on icon -->
        <div class="flex-none text-xl font-semibold text-ctp-pink font-calsans swap-off" aria-label="Brand">
          <%=title%>
        </div>

        <!-- volume off icon -->
        <div class="flex-none text-xl font-semibold text-ctp-pink font-calsans swap-on"
          aria-label="Brand">SchoolTastics</div>
      </label>

      <p class="mt-3 text-xs sm:text-sm text-ctp-subtext0">
        Version 0.0.1 <span class="font-bold">Alpha</span>
      </p>
    </div>
    <!-- End Col -->

    <div>
      <h4 class="text-xs font-semibold text-ctp-text uppercase">Product</h4>

      <div class="mt-3 grid space-y-3 text-sm">
        <p>
          <a class="inline-flex gap-x-2 text-ctp-subtext0 hover:text-ctp-subtext0/65 transition"
            href="https://edu.ambrosia.gg/managed">Managed</a>
        </p>
        <p>
          <a class="inline-flex gap-x-2 text-ctp-subtext0 hover:text-ctp-subtext0/65 transition"
            href="https://edu.ambrosia.gg/changes">Changelog</a>
        </p>
        <p>
          <a class="inline-flex gap-x-2 text-ctp-subtext0 hover:text-ctp-subtext0/65 transition"
            href="https://edu.ambrosia.gg/docs">Docs</a>
        </p>
        <p>
          <a class="inline-flex gap-x-2 text-ctp-subtext0 hover:text-ctp-subtext0/65 transition"
            href="https://github.com/AmbrosiaGG/SchoolTastic">Download</a>
        </p>
      </div>
    </div>
    <!-- End Col -->

    <div>
      <h4 class="text-xs font-semibold text-ctp-text uppercase">Company</h4>

      <div class="mt-3 grid space-y-3 text-sm">
        <p>
          <a class="inline-flex gap-x-2 text-ctp-subtext0 hover:text-ctp-subtext0/65 transition"
            href="https://ambrosia.gg/about">About us</a>
        </p>
        <p>
          <a class="inline-flex gap-x-2 text-ctp-subtext0 hover:text-ctp-subtext0/65 transition"
            href="https://edu.ambrosia.gg/blog">Blog</a>
        </p>
        <p>
          <a class="inline-flex gap-x-2 text-ctp-subtext0 hover:text-ctp-subtext0/65 transition"
            href="https://ambrosia.gg/careers">Careers</a>
          <span class="inline text-ctp-blue">— We're hiring</span>
        </p>
      </div>
    </div>
    <!-- End Col -->

    <div>
      <h4 class="text-xs font-semibold text-ctp-text uppercase">Resources</h4>

      <div class="mt-3 grid space-y-3 text-sm">
        <p>
          <a class="inline-flex gap-x-2 text-ctp-subtext0 hover:text-ctp-subtext0/65 transition"
            href="https://github.com/AmbrosiaGG">Community</a>
        </p>
        <p>
          <a class="inline-flex gap-x-2 text-ctp-subtext0 hover:text-ctp-subtext0/65 transition" href="#">Help &
            Support</a>
        </p>
        <p>
          <a class="inline-flex gap-x-2 text-ctp-subtext0 hover:text-ctp-subtext0/65 transition"
            href="?title=Whats%20New&icon=info&description=theres%20a%20man">What's New</a>
        </p>
        <p>
          <a class="inline-flex gap-x-2 text-ctp-subtext0 hover:text-ctp-subtext0/65 transition"
            href="https://ambrosia.gg/schools/status">Status</a>
        </p>
      </div>
    </div>
    <!-- End Col -->

    <div>
      <h4 class="text-xs font-semibold text-ctp-text uppercase">Developers</h4>

      <div class="mt-3 grid space-y-3 text-sm">
        <p>
          <a class="inline-flex gap-x-2 text-ctp-subtext0 hover:text-ctp-subtext0/65 transition"
            href="https://edu.ambrosia.gg/docs">API</a>
        </p>
        <p>
          <a class="inline-flex gap-x-2 text-ctp-subtext0 hover:text-ctp-subtext0/65 transition"
            href="https://edu.ambrosia.gg/status">Status</a>
        </p>
        <p>
          <a class="inline-flex gap-x-2 text-ctp-subtext0 hover:text-ctp-subtext0/65 transition"
            href="https://github.com/AmbrosiaGG/">GitHub</a>
        </p>
      </div>

      <h4 class="mt-7 text-xs font-semibold text-ctp-text uppercase">
        Industries
      </h4>

      <div class="mt-3 grid space-y-3 text-sm">
        <p>
          <a class="inline-flex gap-x-2 text-ctp-subtext0 hover:text-ctp-subtext0/65 transition"
            href="https://ambrosia.gg/industries/deployment">Deployment</a>
        </p>
        <p>
          <a class="inline-flex gap-x-2 text-ctp-subtext0 hover:text-ctp-subtext0/65 transition truncate"
            href="https://ambrosia.gg/industries/education">Education<span class="inline text-blue-600">— New</span></a>
        </p>
        <p>
          <a class="inline-flex gap-x-2 text-ctp-subtext0 hover:text-ctp-subtext0/65 transition"
            href="https://ambrosia.gg/industries/dev">Development</a>
        </p>
      </div>
    </div>
    <!-- End Col -->
  </div>
  <!-- End Grid -->

  <div class="pt-5 mt-5 border-t border-ctp-surface1">
    <div class="sm:flex sm:justify-between sm:items-center">
      <div class="flex items-center gap-x-3">
        <div class="space-x-4 text-sm ms-4">
          <a class="inline-flex gap-x-2 text-ctp-subtext0 hover:text-ctp-subtext0/65 transition"
            href="https://ambrosia.gg/">Status</a>
        </div>
      </div>

      <div class="flex justify-between items-center">
        <div class="mt-3 sm:hidden">
          <a class="flex-none text-xl font-semibold text-ctp-pink font-calsans" href="#"
            aria-label="Brand">SchoolTastic</a>
          <p class="mt-3 text-xs sm:text-sm text-ctp-subtext0">
            Version 0.0.1 Alpha
          </p>
        </div>

        <!-- Social Brands -->
        <div class="space-x-4">
          <a class="inline-block text-gray-500 hover:text-[#5865F2] hover:scale-150 transition" href="#">
            <i class="fa-brands fa-discord"></i>
          </a>
          <a class="inline-block text-gray-500 hover:text-[#e8eaea] hover:scale-150 transition" href="#">
            <i class="fa-brands fa-github"></i>
          </a>
          <a class="inline-block text-gray-500 hover:text-[#000000] hover:scale-150 transition duration-200" href="#">
            <i class="fa-brands fa-x-twitter"></i>
          </a>
        </div>
        <!-- End Social Brands -->
      </div>
      <!-- End Col -->
    </div>
  </div>
</footer>
<!-- ========== END FOOTER ========== -->
<!-- 
   PopUP 
  -->
<script>
  const urlParams = new URLSearchParams(window.location.search);
  const icon = urlParams.get("icon");
  const description = urlParams.get("description");
  const title = urlParams.get("title");
  console.log({
    icon: icon,
    description: description,
    title: title,
  }); // Debugging
  if (title) {
    Swal.fire({
      icon: icon,
      title: title,
      text: description,
    });
  }
</script>