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

<!-- About Us Page Template -->

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

<!-- Page Header -->
<div class="bg-yellow-400 mx-auto about-header pb-8 px-4 md:px-8">
  <div class="max-w-7xl mb-8 mx-auto pt-40 px-4 md:px-8">
    <div>
      <h1 class="font-bold text-4xl text-white tracking-tight"><?php the_title(); ?></h1>
    </div>
  </div>
</div>

<!-- Header Section -->
<section class="bg-blue-500 text-white text-center py-4">
  <h1 class="text-3xl px-4 py-8 font-bold">Medical Place Health Solutions</h1>
</section>

<!-- Our Pharmacy Section -->
<section>
  <div class="">
    <div class="gap-8 grid lg:grid-cols-2 max-w-7xl mx-auto px-8 py-12 items-center">
      <div>
        <p class="font-bold text-3xl text-left mb-8">Our Pharmacy</p>
        <img src="<?php echo get_template_directory_uri(); ?>/assets/images/bgs/anjema-building.jpg" alt="Anjema Building">
      </div>
      <div>
        <div class="mb-8  space-y-4">
          <p>Medical Place Health Solutions is located conveniently inside the Anjema Eye Institue building at 735 St. Clair Street, Chatham.</p>
          <p>Our pharmacy is equipped with a state of the art certified ISO class 7 cleanroom and ISO class 5 laminar airflow hood, so we are able to offer sterile preparations to fit various needs for our clients.</p>
          <p>Our sister pharmacy is Medical Place Pharmacy on Emma St. in Chatham. Visit their website www.chathamkentpharmacy.ca for more information on the health services they provide.</p>
          <p>If you need help finding our location, you can find directions here.</p>
        </div>

        <div class="flex mt-8 space-x-4">
          <a class="items-center justify-center capitalize ease-in-out duration-700 py-2 px-5 font-normal hover:bg-gray-200 hover:text-black text-center text-white bg-blue-500 min-w-max transition hover:-translate-y-1" href="<?php echo get_post_type_archive_link('project'); ?>"><?php _e('Services', 'themeStarter'); ?>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ABOUT TEAMS SECTION -->
<section id="about-teams">
  <div class="bg-gray-200 max-w-screen mx-auto px-4 py-4 my-2">

    <!-- Team Section -->
    <section class="py-16">
      <div class="max-w-7xl mx-auto">
        <h2 class="capitalize font-medium text-xl md:text-2xl lg:text-4xl text-blue-500 text-center"><?php _e('Our Team', 'themeStarter'); ?></h2>
        <div class="bg-blue-500 mx-auto mb-8 mt-4 pt-1 w-36"></div>
        <p class="text-center px-8 max-w-6xl mx-auto py-4">Our health professionals are ready to answer all of your questions.</p>
      </div>

      <div class="max-w-7xl mx-auto px-4 flex flex-col">

        <ul role="list" class="mx-auto mt-8 grid max-w-2xl grid-cols-2 gap-x-8 gap-y-12 lg:mx-0 lg:max-w-none md:grid-cols-3">
          <?php
          $teams = new WP_Query(
            array(
              'posts_per_page' => -1,
              'post_type' => 'team',
              'orderby' => 'title',
              'order' => 'ASC'
            )
          );

          while ($teams->have_posts()) {
            $teams->the_post();
            $teamTitle = get_the_title();
            $teamThumbnailURL = get_field('team_photo');
            $team_bio = get_field('team_bio') ?>

            <li>
              <div class="flex">
                <img class="aspect-video rounded-2xl w-full object-cover" src="<?= $teamThumbnailURL ?>" alt="Pharmacist Thumbnail">
              </div>
              <div class="text-center">
                <h3 class="mt-2 text-lg font-semibold leading-8 tracking-tight text-gray-900"><?= $teamTitle ?></h3>
                <p class="text-base leading-7 text-gray-600"><?= the_field('team_title'); ?> </p>
                <p><?= $team_bio ?> </p>
              </div>
            </li>
          <?php }

          wp_reset_postdata(); ?>
        </ul>

      </div>

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

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