<!-- Get Header -->
<?php get_header();
require_once(get_theme_file_path('/includes/back-end/helper_functions.php'));
?>

<section class="h-full overflow-scroll no-scrollbar pt-16 pb-24">

  <div class="relative h-20 flex items-center">

    <h1 class="w-full px-4 font-medium underline relative z-20 text-white text-xl md:text-2xl lg:text-center">Home</h1>
    <img class="absolute top-0 h-full w-full object-cover" src="<?php echo get_template_directory_uri(); ?>/assets/images/bgs/backsplash.png" alt="Header Banner">

  </div>

  <!-- Top Level Pages Section -->
  <div class="px-2 py-4 bg-cadet-200">
    <ul class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-2 max-w-7xl mx-auto">

      <!-- Home Top Level Pages Loop -->
      <?php $pages = get_pages_as_array();

      foreach ($pages as $page) {

        $pageID = $page['page']->ID;
        $pageTitle = $page['page']->post_title;
        $pageSlug = $page['page']->post_name;
        $pageBG = $page['page']->post_name . '.png';
        $pageBootstrapIcon = get_field('bootstrap_icon', $page['page']->ID);

      ?>

        <li class="category-cards h-16 flex rounded-md shadow-md relative overflow-hidden w-full" style="background-image: url('<?php echo get_template_directory_uri(); ?>/assets/images/bgs/<?php echo $pageBG ?>');">

          <a class="relative w-full text-center py-4 space-y-2 flex items-center flex-col justify-center" href="<?php echo $pageSlug ?>">

            <div class="absolute inset-0 flex items-center justify-center h-full bg-blue-500 bg-opacity-50 rounded-md py-2 px-2">
              <!-- <i class="<?php echo $pageBootstrapIcon ?> text-2xl" aria-hidden="true"></i> -->
              <h2 class="text-sm font-medium text-white"><?php echo $pageTitle ?></h2>
              <!-- <p class="font-medium lg:text-center"><?php echo get_field('description', $pageID); ?></p> -->
            </div>

          </a>

        </li>

      <?php } ?>

    </ul>
  </div>

  <!-- Introduction Quote -->
  <div>
    <div class="py-8 bg-red-500 text-cadet-900 space-y-4">
      <div class="max-w-7xl mx-auto lg:flex flex-col items-center">

        <div class="text-white px-4 pb-4">

          <p class="font-bold text-xl mb-2">A message from Deputy Grand Chief Derek Fox </p>
          <i class="bi-quote"></i>
          <p class="inline mb-2">On behalf of Nishnawbe Aski Nation (NAN), we are proud of your decision to pursue a post-secondary education and become a role model for your community. As a law-school graduate, I understand the hard work and dedication needed to be successful in post-secondary education. My family is one of my biggest motivators, they keep me grounded to continue NAN’s work for our communities. As you pursue your studies, I encourage you to bring your knowledge back to your families and communities.”</p>

        </div>

        <div class="px-4">
          <div class="flex items-center py-8 px-4 lg:px-8 rounded-md bg-cadet-200 space-x-4">

            <img class="w-24 lg:w-64" src="<?= get_template_directory_uri() ?>/assets/images/people/deputy-grand-chief-derek-fox.png" alt="Deputy Grand Chief">
            <div>
              <p class="mb-2 font-medium">Derek Fox</p>
              <p>Deputy Grand Chief</p>
            </div>

          </div>
        </div>

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

  <!-- Congratulations Quote -->
  <div>
    <div class="italic bg-white text-cadet-900 space-y-4">
      <div class="max-w-7xl mx-auto lg:flex flex-col items-center">
        <ul class="space-y-2 px-8 py-2 my-4">
          <li class="font-bold text-cadet-400 inline text-xl mb-2">Congratulations! </li>
          <li>You have decided to continue your education after Grade 12.</li>
          <li>You have a dream for your future.</li>
          <li>You may know where you want to go.</li>
          <li>You may know the program you want to take.</li>
          <li>In any case, this handbook has information to help you on this next step in your education journey.</li>
        </ul>

        <div class="flex items-center py-4 lg:py-8 px-4 lg:px-8 bg-cadet-200 space-x-4">

          <img class="w-24 lg:w-64 object-cover object-top" src="<?= get_template_directory_uri() ?>/assets/images/people/bachelor-of-nursing-student.png" alt="Congratulation Quote Student">

          <div>
            <p class="mb-2 font-medium">Catherine Sergerie, Moose Cree First Nation</p>
            <p>Lakehead University, BScN (Bachelor of Science in Nursing) and a Minor in Indigenous Learning</p>
          </div>
        </div>

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

  <div class="bg-white">

    <h2 class="text-3xl p-4 max-w-7xl mx-auto text-red-500 font-bold">Attending College or University</h2>

    <div class="p-8 bg-attending-college-or-university">
      <p class="text-white max-w-7xl mx-auto">
        Transitioning from high school to college or university is a big change. If you are coming from a small First Nation, the school will likely have more students than the population of your community! There will also be students from around the world who will be learning alongside you.
      </p>
    </div>

    <div class="italic py-8 px-8 bg-cadet-500 text-cadet-900 space-y-4">
      <div class="max-w-7xl mx-auto lg:flex flex-col items-center">
        <i class="bi-quote text-7xl inline text-cadet-300"></i>
        <p class="font-medium inline text-xl">There’s so much opportunities for yourself to take,
          such as meeting new people, participating in extracurricular
          activities and you can do what interests
          you. Also, you will notice the way you feel your
          mind opening up in a way that you enjoy.”</p>
        <p class="mt-4 mb-2 font-medium">Keara Isaac, Moose Cree First Nation</p>
        <p>Social Service Worker – Indigenous Specialization at Cambrian College</p>
      </div>
    </div>


  </div>

</section>


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