// Hero image transitions and animations
document.addEventListener("DOMContentLoaded", function () {
  // Enhanced slide + zoom hero image transitions
  const imgs = [
    "assets/images/optimized/room_optimized.jpg",
    "assets/images/optimized/chair_optimized.jpg",
    "assets/images/optimized/google_optimized.jpg",
  ];

  const currentImg = document.getElementById("currentImg");
  const nextImg = document.getElementById("nextImg");

  if (currentImg && nextImg) {
    let currentIndex = 0;
    let isTransitioning = false;

    // Alternate slide directions for dynamic effect
    const slideDirections = ["left", "right"];
    let slideIndex = 0;

    function performSlideZoomTransition() {
      if (isTransitioning) return;
      isTransitioning = true;

      // Get next image index
      const nextIndex = (currentIndex + 1) % imgs.length;
      const slideDirection =
        slideDirections[slideIndex % slideDirections.length];
      slideIndex++;

      // Set up next image
      nextImg.src = imgs[nextIndex];
      nextImg.style.opacity = "1";

      // Apply animations based on slide direction
      if (slideDirection === "left") {
        // Current slides out left, next zooms in from right
        currentImg.style.animation = "slideOutLeft 1s ease-in-out forwards";
        nextImg.style.animation = "zoomInFromRight 1s ease-in-out forwards";
      } else {
        // Current slides out right, next zooms in from left
        currentImg.style.animation = "slideOutRight 1s ease-in-out forwards";
        nextImg.style.animation = "zoomInFromLeft 1s ease-in-out forwards";
      }

      // After animation completes, swap the images
      setTimeout(() => {
        // Swap the images
        currentImg.src = imgs[nextIndex];
        currentImg.style.animation = "";
        currentImg.style.transform = "";
        currentImg.style.opacity = "1";

        // Reset next image
        nextImg.style.animation = "";
        nextImg.style.transform = "";
        nextImg.style.opacity = "0";

        currentIndex = nextIndex;
        isTransitioning = false;
      }, 1000); // Match animation duration
    }

    // Start the transition cycle
    setInterval(performSlideZoomTransition, 10000); // Every 10 seconds for better viewing
  }
});