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

<!-- Front Page/Landing Page Template -->

<!-- Padder -->
<div class="h-28 lg:h-30"></div>

<!-- Hero Section -->
<section>
  <div id="hero" class="relative">
    <div class="absolute flex flex-col h-full justify-center left-0 text-left top-0 w-full">
      <div class="flex flex-col items-start max-w-6xl mx-auto px-8 w-full xl:max-w-7xl">
        <h1 class="font-bold lg:text-5xl mb-4 text-3xl text-white uppercase px-8 py-4 rounded-md bg-blue-500 bg-opacity-20"> <?php _e('Compounding', 'themeStarter'); ?><br /><?php _e('Pharmacy', 'themeStarter'); ?> </h1>
        <p class="font-medium text-lg text-white"><?php _e('Find out how compounded medications can benefit you.', 'themeStarter'); ?></p>
        <div class="bg-white mb-8 mt-4 pt-1 w-36"></div>
        <div class="flex flex-col md:flex-row md:items-center md:space-x-4 md:space-y-0 space-y-4">
          <a class="items-center justify-center capitalize ease-in-out duration-700 py-2 px-5 font-normal hover:bg-gray-200 text-center text-black bg-white min-w-max transition hover:-translate-y-1" href="<?php echo esc_url(site_url('/contact')); ?>"><?php _e('Request Free Consultation', 'themeStarter'); ?>
          </a>
          <a class="capitalize duration-700 text-white hover:text-black inline-flex items-center justify-center font-normal hover:bg-gray-200 ease-in-out bg-blue-500 min-w-max py-2 px-8 hover:-translate-y-1 hover:ease-linear transition" href="<?php echo esc_url(site_url('/services')); ?>"><?php _e('Our Services', 'themeStarter'); ?>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Our Services Section -->
<section>

  <div class="py-8">

    <h2 class="capitalize font-medium text-xl md:text-2xl lg:text-4xl text-blue-500 text-center"><?php _e('Our Services', '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">Medical Place Health Solutions is a brand new retail and compounding pharmacy in Chatham. We can tailor medications that are prescribed to fit every patient’s specific needs, maximizing the benefits and minimizing the risk of adverse side effects. We offer specialty compounding services which you can find below. For more details click on the icon to continue to our Services page.</p>

    <div class="max-w-7xl mx-auto grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 md:gap-8 text-center">

      <div class="hover:-translate-y-4 transition-transform duration-300 shadow-sm p-8 flex flex-col items-center">
        <a class="font-medium underline flex flex-col items-center" href="" target="_blank">
          <img class="w-1/4" src="<?php echo get_template_directory_uri(); ?>/assets/images/icons/oral_solids.png" alt="Oral Solids">Oral Solids
        </a>
        <p class="mt-4">Compounded Tablets, Capsules, Gummies, etc.</p>
      </div>

      <div class="hover:-translate-y-4 transition-transform duration-300 shadow-sm p-8 flex flex-col items-center">
        <a class="font-medium underline flex flex-col items-center" href="" target="_blank">
          <img class="w-1/4" src="<?php echo get_template_directory_uri(); ?>/assets/images/icons/topicals.png" alt="Topicals">Topicals
        </a>
        <p class="mt-4">Creams, Gels, Ointments, etc.</p>
      </div>

      <div class="hover:-translate-y-4 transition-transform duration-300 shadow-sm p-8 flex flex-col items-center">
        <a class="font-medium underline flex flex-col items-center" href="" target="_blank">
          <img class="w-1/4" src="<?php echo get_template_directory_uri(); ?>/assets/images/icons/pain_management.png" alt="Pain Management">Pain Management
        </a>
        <p class="mt-4">Inflammatory Pain, Nerve Pain, Plantar Fasciitis, etc.</p>
      </div>

      <div class="hover:-translate-y-4 transition-transform duration-300 shadow-sm p-8 flex flex-col items-center">
        <a class="font-medium underline flex flex-col items-center" href="" target="_blank">
          <img class="w-1/4" src="<?php echo get_template_directory_uri(); ?>/assets/images/icons/wound_care.png" alt="Wound Care">Wound Care
        </a>
        <p class="mt-4">Burns, scars, infections, etc.</p>
      </div>

      <div class="hover:-translate-y-4 transition-transform duration-300 shadow-sm p-8 flex flex-col items-center">
        <a class="font-medium underline flex flex-col items-center" href="" target="_blank">
          <img class="w-1/4" src="<?php echo get_template_directory_uri(); ?>/assets/images/icons/oral_liquids.png" alt="Oral Liquids">Oral Liquids
        </a>
        <p class="mt-4">Solutions and Suspensions.</p>
      </div>

      <div class="hover:-translate-y-4 transition-transform duration-300 shadow-sm p-8 flex flex-col items-center">
        <a class="font-medium underline flex flex-col items-center" href="" target="_blank">
          <img class="w-1/4" src="<?php echo get_template_directory_uri(); ?>/assets/images/icons/dental-preparations.png" alt="Dental Preparations">Dental Preparations
        </a>
        <p class="mt-4">Mouthwashes, Pastes and Sprays.</p>
      </div>

      <div class="hover:-translate-y-4 transition-transform duration-300 shadow-sm p-8 flex flex-col items-center">
        <a class="font-medium underline flex flex-col items-center" href="" target="_blank">
          <img class="w-1/4" src="<?php echo get_template_directory_uri(); ?>/assets/images/icons/ophthalmic_preparations.png" alt="Ophthalmic Preparations">Ophthalmic Preparations
        </a>
        <p class="mt-4">Eye Drops and Ointments.</p>
      </div>

      <div class="hover:-translate-y-4 transition-transform duration-300 shadow-sm p-8 flex flex-col items-center">
        <a class="font-medium underline flex flex-col items-center" href="" target="_blank">
          <img class="w-1/4" src="<?php echo get_template_directory_uri(); ?>/assets/images/icons/ear_nose_throat.png" alt="Ear, Nose and Throat">Ear, Nose and Throat
        </a>
        <p class="mt-4">Ear Drops, Nose Sprays, Lozenges, etc.</p>
      </div>

      <div class="hover:-translate-y-4 transition-transform duration-300 shadow-sm p-8 flex flex-col items-center">
        <a class="font-medium underline flex flex-col items-center" href="" target="_blank">
          <img class="w-1/4" src="<?php echo get_template_directory_uri(); ?>/assets/images/icons/suppositories.png" alt="Suppositories">Suppositories
        </a>
        <p class="mt-4">Suppositories and Ovules</p>
      </div>

      <div class="hover:-translate-y-4 transition-transform duration-300 shadow-sm p-8 flex flex-col items-center">
        <a class="font-medium underline flex flex-col items-center" href="" target="_blank">
          <img class="w-1/4" src="<?php echo get_template_directory_uri(); ?>/assets/images/icons/foot_care.png" alt="Foot Care">Foot Care
        </a>
        <p class="mt-4">Warts, Calluses, Heel Spurs, circulation, etc.</p>
      </div>

      <div class="hover:-translate-y-4 transition-transform duration-300 shadow-sm p-8 flex flex-col items-center">
        <a class="font-medium underline flex flex-col items-center" href="" target="_blank">
          <img class="w-1/4" src="<?php echo get_template_directory_uri(); ?>/assets/images/icons/injectables.png" alt="Injectibles">Injectibles
        </a>
        <p class="mt-4">A variety of sterile injectable preparations.</p>
      </div>

      <div class="flex justify-center align-middle hover:-translate-y-4 transition-transform duration-300 shadow-sm p-8">
        <a class="font-medium underline flex flex-col items-center justify-center align-middle" href="<?= site_url('/services') ?>"><i class="text-2xl bi-caret-right-fill"></i>All Services</a>
      </div>

    </div>

  </div>

</section>


<!-- Our Pharmacy Section -->
<section>
  <div class="bg-blue-500">
    <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 text-white">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 text-white 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-10 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 text-center text-black bg-white min-w-max transition hover:-translate-y-1" href="<?php echo esc_url(site_url('/about')); ?>"><?php _e('About Us', 'themeStarter'); ?>
          </a>
          <div class="flex gap-1 items-center py-2">
            <a class="flex hover:-translate-y-1 ease-in-out duration-700 " href="<?php echo esc_url(site_url('/services')); ?>">
              <p class="hover:underline text-left text-white">Services</p>
              <i class="ml-2 text-white bi bi-chevron-right"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- PCCA SECTION -->
<section class="bg-gray-100 py-4">
  <a href="https://www.pccarx.com/" target="_blank">
    <div class="py-8 flex flex-col items-center space-y-6 px-4">
      <img src="<?php echo get_template_directory_uri(); ?>/assets/images/logos/pcca_logo.png" height="" width="250px" alt="PCCA Logo">
      <h3 class="font-bold text-xl text-center">Medical Place Health Solutions is a member of the PCCA.</h3>
    </div>
  </a>
</section>

<!-- 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' => 3,
          'post_type' => 'team',
          'orderby' => 'rand',
        )
      );

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

        <li>
          <div class="flex">
            <img class="aspect-video rounded-2xl w-full object-cover" src="<?= $teamThumbnailURL ?>" alt="Pharmacist Profile Photo">
          </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>
          </div>
        </li>
      <?php }

      wp_reset_postdata(); ?>
    </ul>

    <a class="mx-auto mt-8 capitalize duration-700 text-white hover:text-black inline-flex items-center justify-center font-normal hover:bg-gray-200 ease-in-out bg-blue-500 min-w-max py-2 px-8 hover:-translate-y-1 hover:ease-linear transition" href="<?php echo esc_url(site_url('/about/#about-teams')); ?>"><?php _e('Meet Our Health Team', 'themeStarter'); ?>
    </a>
  </div>

</section>

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