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

<!-- Front Page/Landing Page Template -->
<section class="h-full overflow-scroll no-scrollbar pt-16 pb-24">

  <!-- Page Header -->
  <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>

  <section class="bg-white">
    <div class="max-w-7xl mx-auto">
      <div class="bg-white">
        <h2 class="text-3xl p-4 text-red-500 font-bold">Attending College or University</h2>
        <div class="px-4 py-8 bg-attending-college-or-university">
          <p class="text-white">
            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>
      <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>


  <!-- Top Level Pages Section -->
  <div class="px-4 py-2 lg:h-full">
    <ul class="grid grid-cols-1 lg:grid-cols-2 gap-2 lg:h-full place-items-stretch">

      <!-- 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 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="w-full py-8 px-8 space-y-2 lg:flex lg:flex-col lg:items-center lg:justify-center" href="<?php echo $pageSlug ?>">

            <i class="<?php echo $pageBootstrapIcon ?> text-2xl" aria-hidden="true"></i>
            <h2 class="font-bold uppercase"><?php echo $pageTitle ?></h2>
            <p class="font-medium lg:text-center"><?php echo get_field('description', $pageID); ?></p>

          </a>

        </li>

      <?php } ?>

    </ul>
  </div>

</section>


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