document.addEventListener("DOMContentLoaded", function () {
  const asset = (file) => `${window.assetBaseUrl}images/home/${file}`;
  // Website data configuration
  const websites = [
    {
      image: asset("skl.png"),
      url: "wasdal.jakarta.go.id",
      title: "Sistem Ketaatan Lingkungan",
    },
    {
      image: asset("bps.png"),
      url: "jaklingko.jakarta.go.id",
      title: "Jakarta Lingko",
    },
    {
      image: asset("bps.png"),
      url: "lingkungan.jakarta.go.id",
      title: "Lingkungan Jakarta",
    },
    {
      image: asset("bps.png"),
      url: "lingkungan.jakarta.go.id",
      title: "Lingkungan Jakarta",
    },
    {
      image: asset("bps.png"),
      url: "lingkungan.jakarta.go.id",
      title: "Lingkungan Jakarta",
    },
    {
      image: asset("bps.png"),
      url: "lingkungan.jakarta.go.id",
      title: "Lingkungan Jakarta",
    },
    {
      image: asset("bps.png"),
      url: "lingkungan.jakarta.go.id",
      title: "Lingkungan Jakarta",
    },
    {
      image: asset("bps.png"),
      url: "lingkungan.jakarta.go.id",
      title: "Lingkungan Jakarta",
    },
  ];

  // DOM Elements
  const urlInput = document.getElementById("urlDisplay");
  const websiteCards = document.querySelectorAll(".website-card");
  const indicators = document.querySelectorAll(".indicator");

  let currentIndex = 1; // Start with middle card active
  let autoRotateInterval;

  // Update active states
  function updateActiveStates() {
    // Update cards
    websiteCards.forEach((card, index) => {
      if (index === currentIndex) {
        card.classList.add("active");
      } else {
        card.classList.remove("active");
      }
    });

    // Update indicators
    indicators.forEach((indicator, index) => {
      if (index === currentIndex) {
        indicator.classList.add("active");
        indicator.querySelector("div").classList.remove("bg-white/30");
        indicator.querySelector("div").classList.add("bg-white");
        indicator
          .querySelector("span")
          .classList.remove("opacity-0", "text-white/70");
        indicator.querySelector("span").classList.add("text-white");
      } else {
        indicator.classList.remove("active");
        indicator.querySelector("div").classList.remove("bg-white");
        indicator.querySelector("div").classList.add("bg-white/30");
        indicator
          .querySelector("span")
          .classList.add("opacity-0", "text-white/70");
        indicator.querySelector("span").classList.remove("text-white");
      }
    });

    // Update URL
    if (websites[currentIndex]) {
      urlInput.value = websites[currentIndex].url;
    }
  }

  // Navigate to specific slide
  function navigateToSlide(targetIndex) {
    if (targetIndex === currentIndex) return;
    currentIndex = targetIndex;
    updateActiveStates();
  }

  // Auto-rotate functionality
  function startAutoRotate() {
    autoRotateInterval = setInterval(() => {
      currentIndex = (currentIndex + 1) % websites.length;
      updateActiveStates();
    }, 4000);
  }

  function stopAutoRotate() {
    if (autoRotateInterval) {
      clearInterval(autoRotateInterval);
      autoRotateInterval = null;
    }
  }

  function resetAutoRotate() {
    stopAutoRotate();
    setTimeout(startAutoRotate, 6000);
  }

  // Event listeners
  websiteCards.forEach((card, index) => {
    card.addEventListener("click", () => {
      resetAutoRotate();
      navigateToSlide(index);
    });
  });

  indicators.forEach((indicator, index) => {
    indicator.addEventListener("click", () => {
      resetAutoRotate();
      navigateToSlide(index);
    });
  });

  // Mouse events for auto-rotate control
  const container = document.querySelector(".max-w-6xl");
  container.addEventListener("mouseenter", stopAutoRotate);
  container.addEventListener("mouseleave", () => {
    if (!autoRotateInterval) {
      startAutoRotate();
    }
  });

  // Initialize
  updateActiveStates();
  startAutoRotate();
});