<header data-record-id="ed7ec991-3828-fdb0-10e0-a71a504ca304" data-copilot="true" class="section utility-padding-all-0 utility-text-on-overlay">
    <div class="w-layout-grid grid-layout">
      <div id="w-node-_83130efd-cc89-3e63-e012-238651cb9c90-51cb9c8e" class="utility-position-relative utility-min-height-100dvh w-node-_96fd2722-e9c1-daac-a142-9395711fa117-3bdcc718"><img class="cover-image utility-position-absolute" src="<?= base_url() . 'uploads/facilities/' . $facility['hero_image'] ?>" width="1216" height="832" alt="" sizes="100vw" data-aisg-image-id="99496238-05ba-49f4-acb8-0e6acb035701" loading="lazy">
        <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); z-index: 1;"></div>
      </div>
      <div id="w-node-_83130efd-cc89-3e63-e012-238651cb9c93-51cb9c8e" class="container utility-position-relative utility-padding-bottom-4rem w-node-_96fd2722-e9c1-daac-a142-9395711fa123-3bdcc718" style="z-index: 2;">
        <div class="w-layout-grid grid-layout tablet-1-column grid-gap-lg y-bottom">
          <h1 class="h1-heading utility-margin-bottom-0"><?= $facility['hero_title'] ?></h1>
        </div>
      </div>
    </div>
  </header>
  <section data-copilot="true" class="section" style="padding-top: 0px;">
    <div class="container">
      <div class="w-layout-grid grid-layout desktop-3-column tablet-1-column grid-gap-md"><img class="image cover-image utility-aspect-4x3 w-node-_855eaf0f-12e0-670f-63ec-792c119d4ce5-3bdcc718" src="<?= base_url() . 'uploads/facilities/' . $facility['intro_image'] ?>" width="" height="" alt="" sizes="100vw" data-aisg-image-id="58cb55ff-7b59-4e05-98e3-88b45d973dc0" id="w-node-_0b664277-1b3d-1629-7716-5b56d7b1e702-80c0cef9" loading="lazy">
        <div id="w-node-c04d9b41-7df1-862c-b90f-ca4b2f41f161-80c0cef9" class="w-node-_855eaf0f-12e0-670f-63ec-792c119d4cef-3bdcc718">
          <h2 class="h2-heading"><?= $facility['intro_title'] ?></h2>
          <div class="subheading">
            <?= $facility['intro_subtitle'] ?>
          </div>
        </div>
      </div>
    </div>
  </section>
  
  <!-- Magnific Popup CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
  
  <!-- Magnific Popup JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
  
  <script>
  $(document).ready(function() {
    $('.popup-gallery').magnificPopup({
      type: 'image',
      gallery: {
        enabled: true
      },
      mainClass: 'mfp-with-zoom',
      zoom: {
        enabled: true,
        duration: 300,
        easing: 'ease-in-out',
        opener: function(openerElement) {
          return openerElement.is('img') ? openerElement : openerElement.find('img');
        }
      }
    });
  });
  </script>
  <section data-record-id="cec6bcd9-1fe1-ee23-782d-5b5419f0a84b" data-copilot="true" class="section utility-overflow-hidden secondary-section" style="padding-top: 0px;">
    <div class="container">
      <h2 class="utility-text-align-center utility-margin-bottom-4rem"><?= $facility['facility_title'] ?></h2>
      <div class="subheading">
        <?= $facility['facility_subtitle'] ?>
      </div>
      <div data-w-id="63947c5b-2605-2d75-135a-3cd94632b987" class="grid-layout desktop-3-column mobile-landscape-1-column grid-gap-sm">
        <?php for ($i=1; $i < 7; $i++) : ?>
          <?php if(!empty($facility['facility' . $i . '_title'])) : ?>
            <div class="ix-card-stack-1">
              <div class="card card-on-secondary">
                <div class="card-body utility-padding-bottom-0">
                  <p class="h4-heading"><?= $facility['facility' . $i . '_title'] ?></p>
                  <div>
                    <?= $facility['facility' . $i . '_subtitle'] ?>
                  </div>
                </div>
                <div class="utility-aspect-1x1 utility-radius-md utility-overflow-clip utility-width-100"><img class="image cover-image utility-overlay utility-margin-left-2rem utility-margin-top-1rem" src="<?= base_url() . 'uploads/facilities/' . $facility['facility' . $i . '_image'] ?>" width="1216" height="832" alt="" sizes="100vw" data-aisg-image-id="d12dac0b-fce5-446d-b3cc-9a807d0c78e2" loading="lazy"></div>
              </div>
            </div>
          <?php endif ?>  
        <?php endfor ?>
      </div>
    </div>
  </section>
  <section data-record-id="fe4b76d3-268c-85bf-7ccf-d0be6cfbb067" data-copilot="true" class="section" style="padding-top: 0px;">
    <div class="container">
      <div class="utility-text-align-center utility-margin-bottom-4rem">
        <h2 class="h2-heading"><?= $facility['hero_title'] ?> Gallery</h2>
      </div>
      <div class="w-layout-grid grid-layout desktop-4-column tablet-2-column mobile-portrait-1-column grid-gap-xs">
        <?php for ($i = 1; $i <= 10; $i++) : ?>
          <?php if (!empty($facility['gallery' . $i . '_image'])) : ?>
            <div class="utility-aspect-1x1">
              <a href="<?= base_url() . 'uploads/facilities/' . $facility['gallery' . $i . '_image']; ?>" class="popup-gallery">
                <img class="image cover-image" 
                     src="<?= base_url() . 'uploads/facilities/' . $facility['gallery' . $i . '_image']; ?>" 
                     width="1216" 
                     height="832" 
                     alt="<?= $facility['hero_title'] ?> Gallery Image" 
                     sizes="100vw" 
                     loading="lazy">
              </a>
            </div>
          <?php endif; ?>
        <?php endfor; ?>
      </div>
    </div>
  </section>