var copy = document.querySelector(".logos-slide").cloneNode(true);
document.querySelector(".logos").appendChild(copy);

// Get all images, descriptions, pagination buttons
const images = document.querySelectorAll(".swiper-slide");
const descriptions = document.querySelectorAll(".project-description");
const paginationButtons = document.querySelectorAll(".pagination-button");

let currentIndex = 0; // Start with the first slide

// Function to update the displayed content based on the current index
function updateContent(index) {
  // Hide all descriptions
  descriptions.forEach((desc) => {
    desc.classList.remove("active");
  });

  // Show the current description
  const selectedDescription = document.getElementById(`description-${index}`);
  if (selectedDescription) {
    selectedDescription.classList.add("active");
  }

  // Update pagination active class
  paginationButtons.forEach((button) => {
    button.classList.remove("active");
  });
  paginationButtons[index].classList.add("active");
}

// Event listeners for image clicks
images.forEach((image, index) => {
  image.addEventListener("click", () => {
    currentIndex = index;
    updateContent(currentIndex);
  });
});

// Event listeners for pagination buttons
paginationButtons.forEach((button, index) => {
  button.addEventListener("click", () => {
    currentIndex = index;
    updateContent(currentIndex);
  });
});

// Initialize the content (first image and description are visible)
updateContent(currentIndex);