(function () {
  /**
   * Lumina Floating Shards Slider Module
   * Encapsulated to prevent global namespace pollution.
   */
  const initializeFloatingShards = () => {
    const sliderRoot = document.querySelector(".dg-floating-shards-slider");
    if (!sliderRoot) return;

    // Slider Logic Scope
    const setupSlider = () => {
      const trackElement = document.getElementById("sliderTrack");
      const prevButton = document.getElementById("prevBtn");
      const nextButton = document.getElementById("nextBtn");
      const dotsContainer = document.getElementById("paginationDots");

      if (!trackElement || !prevButton || !nextButton || !dotsContainer) return;

      const sliderItems = trackElement.children;
      let currentSliderIndex = 0;
      let visibleItemCount = 1;

      const calculateVisibleCount = () => {
        if (window.innerWidth >= 1024) visibleItemCount = 4;
        else if (window.innerWidth >= 768) visibleItemCount = 2;
        else visibleItemCount = 1;
      };

      const renderPaginationDots = () => {
        dotsContainer.innerHTML = "";
        const totalDotPages = sliderItems.length - visibleItemCount + 1;
        for (let i = 0; i < totalDotPages; i++) {
          const dotElement = document.createElement("div");
          dotElement.className = `dot ${i === currentSliderIndex ? "active" : ""}`;
          dotElement.onclick = () => scrollToSlide(i);
          dotsContainer.appendChild(dotElement);
        }
      };

      const scrollToSlide = (targetIndex) => {
        const maxPossibleIndex = sliderItems.length - visibleItemCount;
        currentSliderIndex = Math.max(
          0,
          Math.min(targetIndex, maxPossibleIndex),
        );

        const singleItemWidth = sliderItems[0].offsetWidth + 24; // Width + gap
        trackElement.style.transform = `translateX(-${currentSliderIndex * singleItemWidth}px)`;
        renderPaginationDots();
      };

      prevButton.onclick = () => scrollToSlide(currentSliderIndex - 1);
      nextButton.onclick = () => scrollToSlide(currentSliderIndex + 1);

      window.addEventListener("resize", () => {
        calculateVisibleCount();
        scrollToSlide(currentSliderIndex);
      });

      calculateVisibleCount();
      renderPaginationDots();
    };

    // Background Bubbles Animation Scope
    const setupAmbientBubbles = () => {
      const bubbleRootContainer = document.getElementById("bubble-container");
      if (!bubbleRootContainer) return;

      const totalBubbleCount = 20;
      const activeBubblesList = [];

      for (let i = 0; i < totalBubbleCount; i++) {
        const bubbleEl = document.createElement("div");
        bubbleEl.className = "bubble";
        const randomSize = Math.random() * 60 + 20;
        bubbleEl.style.width = `${randomSize}px`;
        bubbleEl.style.height = `${randomSize}px`;

        bubbleRootContainer.appendChild(bubbleEl);
        activeBubblesList.push({
          el: bubbleEl,
          posX: Math.random() * window.innerWidth,
          posY: Math.random() * 700,
          velX: (Math.random() - 0.5) * 0.8,
          velY: (Math.random() - 0.5) * 0.8,
        });
      }

      const updateBubblePositions = () => {
        activeBubblesList.forEach((bubble) => {
          bubble.posX += bubble.velX;
          bubble.posY += bubble.velY;

          if (bubble.posX < -100) bubble.posX = window.innerWidth + 100;
          if (bubble.posX > window.innerWidth + 100) bubble.posX = -100;
          if (bubble.posY < -100) bubble.posY = 800;
          if (bubble.posY > 800) bubble.posY = -100;

          bubble.el.style.transform = `translate(${bubble.posX}px, ${bubble.posY}px)`;
        });
        requestAnimationFrame(updateBubblePositions);
      };
      updateBubblePositions();
    };

    setupSlider();
    setupAmbientBubbles();
  };

  // Run initialization on DOM load
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", initializeFloatingShards);
  } else {
    initializeFloatingShards();
  }
})();
