<!-- Get Header -->
<?php get_header(); ?>

<!-- 404 Page Template -->

<!-- Padder -->
<div id="padder" class="lg:flex h-24 w-full z-20 lg:h-36">
</div>

<!-- 404 Content -->
<section>
  <div class="mx-auto w-full max-w-7xl px-6 pb-16 pt-10 sm:pb-24 lg:px-8">
    <img class="mx-auto h-10 w-auto sm:h-12" src="<?php echo get_template_directory_uri(); ?>/assets/images/logos/mphs_logo.jpg" alt="MPHS Logo">

    <div class="mx-auto mt-20 max-w-2xl text-center sm:mt-24">
      <p class="text-base font-semibold leading-8 text-blue-500">404</p>
      <h1 class="mt-4 text-3xl font-bold tracking-tight text-gray-900 sm:text-5xl">This page does not exist...</h1>
      <p class="mt-4 text-base leading-7 text-gray-600 sm:mt-6 sm:text-lg sm:leading-8">We couldn’t find the page you’re looking for.</p>
    </div>

    <div class="mx-auto mt-16 flow-root max-w-lg sm:mt-20">

      <h2 class="sr-only">Popular pages</h2>

      <ul role="list" class="-mt-6 divide-y divide-gray-900/5 border-b border-gray-900/5">

        <li class="relative flex gap-x-6 py-6">

          <div class="flex h-10 w-10 flex-none items-center justify-center rounded-lg shadow-sm ring-1 ring-gray-900/10">
            <i class="bi-hammer text-blue-500" aria-hidden="true"></i>
          </div>

          <div class="flex-auto">
            <h3 class="text-sm font-semibold leading-6 text-gray-900">
              <a href="<?= esc_url(site_url('/services')) ?>">
                <span class="absolute inset-0" aria-hidden="true"></span>
                Services
              </a>
            </h3>

          </div>

          <div class="flex-none self-center">
            <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
            </svg>
          </div>

        </li>

        <li class="relative flex gap-x-6 py-6">

          <div class="flex h-10 w-10 flex-none items-center justify-center rounded-lg shadow-sm ring-1 ring-gray-900/10">
            <i class="bi-person-lines-fill text-blue-500" aria-hidden="true"></i>
          </div>

          <div class="flex-auto">
            <h3 class="text-sm font-semibold leading-6 text-gray-900">
              <a href="<?= esc_url(site_url('/resources')) ?>">
                <span class="absolute inset-0" aria-hidden="true"></span>
                Resources
              </a>
            </h3>

          </div>

          <div class="flex-none self-center">
            <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
            </svg>
          </div>

        </li>

        <li class="relative flex gap-x-6 py-6">

          <div class="flex h-10 w-10 flex-none items-center justify-center rounded-lg shadow-sm ring-1 ring-gray-900/10">
            <i class="bi-envelope-check-fill text-blue-500" aria-hidden="true"></i>
          </div>

          <div class="flex-auto">
            <h3 class="text-sm font-semibold leading-6 text-gray-900">
              <a href="<?= esc_url(site_url('/contact')); ?>">
                <span class="absolute inset-0" aria-hidden="true"></span>
                Contact
              </a>
            </h3>

          </div>

          <div class="flex-none self-center">
            <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
            </svg>
          </div>

        </li>

      </ul>

      <div class="mt-10 flex justify-center">
        <a href="<?php echo esc_url(home_url()); ?>" class="text-sm font-semibold leading-6 text-blue-500">
          <span aria-hidden="true">&larr;</span>
          Back to home
        </a>
      </div>

    </div>
  </div>
</section>

<!-- Get Footer -->
<?php get_footer(); ?>