<section
  id="service-gallery"
  class="w-full pt-0 pb-20"
  data-component-type="Content"
>

  <div class="max-w-[1920px] mx-auto flex items-center gap-10 px-[96px] service-gallery-container">

    <!-- LEFT TEXT -->
    <div class="w-[280px] flex-shrink-0">

      <p
        data-node="gallery_subtitle"
        data-node-type="text"
        data-node-label="Gallery Subtitle"
        data-node-default="Gallery"
        class="gallery-subtitle"
      >
        {{gallery_subtitle}}
      </p>

      <h2
        data-node="gallery_title"
        data-node-type="text"
        data-node-label="Gallery Title"
        data-node-default="Happy Moments"
        class="gallery-title leading-[1.1]"
      >
        {{gallery_title}}
      </h2>

    </div>

    <!-- SLIDER AREA -->
    <div class="relative w-full overflow-hidden">

      <!-- Slider Track -->
      <div
        id="gallerySlider"
        class="flex gap-6 transition-all duration-700 ease-linear"
      >

        <!-- SLIDE 1 -->
        <img
          data-node="gallery_image_1"
          data-node-type="file"
          data-node-label="Gallery Image 1"
          data-node-default="../assets/service-gallery/Gallery 1.webp"
          src="{{gallery_image_1}}"
          class="gallery-img"
        />

        <!-- SLIDE 2 -->
        <img
          data-node="gallery_image_2"
          data-node-type="file"
          data-node-label="Gallery Image 2"
          data-node-default="../assets/service-gallery/Gallery 2.webp"
          src="{{gallery_image_2}}"
          class="gallery-img"
        />

        <!-- SLIDE 3 -->
        <img
          data-node="gallery_image_3"
          data-node-type="file"
          data-node-label="Gallery Image 3"
          data-node-default="../assets/service-gallery/Gallery 3.webp"
          src="{{gallery_image_3}}"
          class="gallery-img"
        />

        <!-- SLIDE 4 -->
        <img
          data-node="gallery_image_4"
          data-node-type="file"
          data-node-label="Gallery Image 4"
          data-node-default="../assets/service-gallery/Gallery 4.webp"
          src="{{gallery_image_4}}"
          class="gallery-img"
        />

        <!-- CLONED SLIDES (for infinite loop) -->
        <img src="{{gallery_image_1}}" class="gallery-img" />
        <img src="{{gallery_image_2}}" class="gallery-img" />
        <img src="{{gallery_image_3}}" class="gallery-img" />
        <img src="{{gallery_image_4}}" class="gallery-img" />

      </div>
    </div>

    <!-- ARROWS -->
    <div class="flex items-center gap-6 flex-shrink-0">

      <button id="galleryPrev">
        <img
          data-node="gallery_prev_icon"
          data-node-type="file"
          data-node-label="Gallery Previous Arrow Icon"
          data-node-default="../assets/service-gallery/Left arrow.svg"
          src="{{gallery_prev_icon}}"
          class="w-[48px] h-[48px]"
        />
      </button>

      <button id="galleryNext">
        <img
          data-node="gallery_next_icon"
          data-node-type="file"
          data-node-label="Gallery Next Arrow Icon"
          data-node-default="../assets/service-gallery/Right Arrow.svg"
          src="{{gallery_next_icon}}"
          class="w-[48px] h-[48px]"
        />
      </button>

    </div>

  </div>

</section>


<style>
  /* Subtitle */
.gallery-subtitle {
  font-family: 'Montserrat', sans-serif;
  font-size: 23.64px;
  font-weight: 500;
  text-transform: uppercase;
  color: #534931;
}

/* Title */
.gallery-title {
  font-family: 'Raleway', sans-serif;
  font-size: 47.27px;
  font-weight: 600;
  line-height: 66.18px;
  color: #534931;
}

/* Images */
.gallery-img {
  width: 260px;
  height: 260px;
  object-fit: cover;
}

/* Responsive Container Padding */
.service-gallery-container {
  padding-left: 96px;
  padding-right: 96px;
}



/* ================================
   RESPONSIVE — GALLERY SECTION
================================ */

/* Tablet adjustments */
@media (max-width: 1024px) {
  .service-gallery-container {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 30px;
    align-items: center;
  }

  .gallery-img {
    width: 220px;
    height: 220px;
  }
}

/* ================================
   MOBILE — FIXED LAYOUT
   (Text left, arrows right, slider below)
================================ */
@media (max-width: 768px) {

  /* Main container grid */
  .service-gallery-container {
    display: grid !important;
    grid-template-columns: 1fr auto; /* text | arrows */
    grid-template-rows: auto auto;   /* row 1 = text+arrows, row 2 = slider */
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 20px;
    align-items: center !important;
  }

  /* TEXT BLOCK — row 1, col 1 */
  .service-gallery-container > div:nth-child(1) {
    grid-row: 1;
    grid-column: 1;
    text-align: left;
  }

  .gallery-title {
    font-size: 32px;
    line-height: 42px;
  }

  .gallery-subtitle {
    font-size: 18px;
  }

  /* ARROWS — row 1, col 2 */
  .service-gallery-container > div:nth-child(3) {
    grid-row: 1;
    grid-column: 2;
    justify-self: end;
  }

  /* SLIDER — row 2, full width */
  .service-gallery-container > div:nth-child(2) {
    grid-row: 2;
    grid-column: 1 / span 2; /* full width */
    width: 100%;
    overflow: hidden !important;
  }

  /* SLIDER TRACK */
  #gallerySlider {
    display: flex;
    gap: 16px !important;
    justify-content: flex-start;
    overflow: visible;
  }

  /* ⭐ PERFECT 2-image sizing */
  .gallery-img {
    width: calc(50vw - 24px);
    height: calc(50vw - 24px);
    object-fit: cover;
    flex-shrink: 0 !important;
  }
}



/* ================================
   SMALL MOBILE (Below 480px)
================================ */
@media (max-width: 480px) {

  .gallery-img {
    width: 200px;
    height: 200px;
  }

  .gallery-title {
    font-size: 28px;
    line-height: 38px;
  }

  .gallery-subtitle {
    font-size: 16px;
  }

  /* Arrows slightly smaller */
  #galleryPrev img,
  #galleryNext img {
    width: 36px;
    height: 36px;
  }
}


</style>


<script>
function initSingleSlideGallery() {
  const slider = document.getElementById("gallerySlider");
  const slides = document.querySelectorAll(".gallery-img");

  let index = 0;

  // GET REAL SLIDE WIDTH + the gap (computed)
  const slideWidth = slides[0].getBoundingClientRect().width +
                     parseInt(getComputedStyle(slider).gap);

  function moveTo(i, animate = true) {
    if (!animate) slider.style.transition = "none";
    else slider.style.transition = "all 0.7s ease-in-out";

    slider.style.transform = `translateX(-${i * slideWidth}px)`;
  }

  function nextSlide() {
    index++;
    moveTo(index, true);

    // If reached the cloned end → snap instantly to real first slide
    if (index === slides.length - 4) {
      setTimeout(() => {
        index = 0;
        moveTo(index, false);
      }, 710);
    }
  }

  function prevSlide() {
    index--;

    if (index < 0) {
      // Jump instantly to last real slide before moving left
      index = slides.length - 5;
      moveTo(index, false);

      setTimeout(() => {
        index--;
        moveTo(index, true);
      }, 20);
    } else {
      moveTo(index, true);
    }
  }

  // Auto-loop every 3s
  let auto = setInterval(nextSlide, 3000);

  // Buttons
  document.getElementById("galleryNext").onclick = () => {
    clearInterval(auto);
    nextSlide();
    auto = setInterval(nextSlide, 3000);
  };

  document.getElementById("galleryPrev").onclick = () => {
    clearInterval(auto);
    prevSlide();
    auto = setInterval(nextSlide, 3000);
  };

  // Initial position
  moveTo(index, false);
}

setTimeout(initSingleSlideGallery, 500);
</script>