//Scroll Animations
const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      // console.log(entry);
      if (entry.isIntersecting) {
        entry.target.classList.add('animations-show-item');
        observer.unobserve(entry.target);
      } else {
        entry.target.classList.remove('animations-show-item');
      }
    });
  });

  const hiddenElements = document.querySelectorAll('.animations-hidden-item');
  hiddenElements.forEach((el) => observer.observe(el));

document.addEventListener("DOMContentLoaded", function () {

  const slides = document.querySelectorAll(".slide-item");
  const thumbContainer = document.querySelector(".all-thumbs");

  if (!slides.length || !thumbContainer) return;

  let currentIndex = 0;

  // CREATE THUMBNAILS
  slides.forEach((slide, i) => {
    const img = slide.querySelector("img");
    if (!img) return;

    // Create wrapper div
    const wrapper = document.createElement("div");
    wrapper.classList.add("thumb-wrapper");

    // Create thumbnail image
    const thumb = document.createElement("img");
    thumb.src = img.src;
    thumb.classList.add("slider-thumb");
    thumb.dataset.index = i;

    // CLICK THUMB → SHOW SLIDE
    wrapper.addEventListener("click", () => {
      currentIndex = i;
      showSlide(currentIndex);
    });

    // Append
    wrapper.appendChild(thumb);
    thumbContainer.appendChild(wrapper);
  });

  const wrappers = document.querySelectorAll(".thumb-wrapper");

  // SHOW SLIDE
  function showSlide(index) {
    slides.forEach((slide, i) => {
      slide.style.display = i === index ? "block" : "none";
    });

    wrappers.forEach((wrap, i) => {
      wrap.classList.toggle("active-thumb", i === index);
    });
  }

  // INITIAL LOAD
  showSlide(currentIndex);

});