document.addEventListener("DOMContentLoaded", () => {
  const block1 = document.querySelector(".panel-a");
  const block2 = document.querySelector(".panel-b");

  // Ensure both blocks are visible by setting their initial positions
  block1.style.transform = "translateX(0)";
  block2.style.transform = "translateX(100%)";
  block1.style.transition = "transform 1s ease-in-out";
  block2.style.transition = "transform 1s ease-in-out";

  let isBlock1Active = true;

  const animateBlocks = () => {
    if (isBlock1Active) {
      block1.style.transform = "translateX(-100%)"; // Slide block1 left
      block2.style.transform = "translateX(0)";     // Slide block2 into view
    } else {
      block1.style.transform = "translateX(0)";     // Slide block1 into view
      block2.style.transform = "translateX(100%)";  // Slide block2 right
    }
    isBlock1Active = !isBlock1Active; // Toggle active block
  };

  // Start the animation loop after an initial delay
  setTimeout(() => {
    setInterval(animateBlocks, 10000); // Switch blocks every 10 seconds (5s delay + 1s animation)
  }, 10000); // Wait 5 seconds before the first transition
});