// Hero js
function initHeroSlider() {
  const slides = document.querySelectorAll(".hero-slider-item");
  const indicatorItems = document.querySelectorAll(
    ".hero-slider-indicator-item",
  );
  const nextBtn = document.getElementById("hero-slider-next");
  const prevBtn = document.getElementById("hero-slider-prev");

  if (!slides.length || !nextBtn || !prevBtn) return;

  let currentSlide = 0;
  const totalSlides = slides.length;
  let autoSlideInterval;

  function updateSlider(index) {
    slides.forEach((slide, i) => {
      if (i === index) {
        slide.style.opacity = "1";
        slide.style.zIndex = "10";
        slide.style.transform = "translateX(0)";
      } else {
        slide.style.opacity = "0";
        slide.style.zIndex = "0";
        slide.style.transform =
          i < index ? "translateX(-20px)" : "translateX(20px)";
      }
    });

    indicatorItems.forEach((indicator, i) => {
      const text = indicator.querySelector("span");
      const bar = indicator.querySelector(".hero-slider-progress-bar");

      if (i === index) {
        indicator.classList.remove("opacity-40");
        text.classList.add("text-lg");
        text.classList.remove("text-sm");
        if (bar) {
          bar.classList.add("h-12", "bg-primary");
          bar.classList.remove("h-8", "bg-white");
        }
      } else {
        indicator.classList.add("opacity-40");
        text.classList.remove("text-lg");
        text.classList.add("text-sm");
        if (bar) {
          bar.classList.remove("h-12", "bg-primary");
          bar.classList.add("h-8", "bg-white");
        }
      }
    });
    currentSlide = index;
  }

  function nextSlide() {
    let next = (currentSlide + 1) % totalSlides;
    updateSlider(next);
  }

  function prevSlide() {
    let prev = (currentSlide - 1 + totalSlides) % totalSlides;
    updateSlider(prev);
  }

  nextBtn.addEventListener("click", () => {
    nextSlide();
    resetAutoSlide();
  });

  prevBtn.addEventListener("click", () => {
    prevSlide();
    resetAutoSlide();
  });

  function startAutoSlide() {
    autoSlideInterval = setInterval(nextSlide, 8000);
  }

  function resetAutoSlide() {
    clearInterval(autoSlideInterval);
    startAutoSlide();
  }

  updateSlider(0);
  startAutoSlide();
}

document.addEventListener("DOMContentLoaded", () => {
  initHeroSlider();
});

// Services
function slide(direction) {
  const slider = document.getElementById("serviceSlider");
  const card = slider.querySelector(".prism-card");
  if (!card) return;

  // Single card increment logic: card width + the 16px gap
  const scrollAmount = card.offsetWidth + 16;

  if (direction === "left") {
    slider.scrollBy({ left: -scrollAmount, behavior: "smooth" });
  } else {
    slider.scrollBy({ left: scrollAmount, behavior: "smooth" });
  }
}

/**
 * Testimonial Slider Logic
 */
function initTestimonialSlider() {
  const state = {
    slider: document.getElementById("testimonialSlider"),
    nextBtn: document.getElementById("nextBtn"),
    prevBtn: document.getElementById("prevBtn"),
    autoPlayInterval: 6000,
    autoPlayTimer: null,
  };

  if (!state.slider || !state.nextBtn || !state.prevBtn) return;

  const getScrollStep = () => {
    const firstCard = state.slider.querySelector(".snap-center");
    // Cards have gap-6 (24px). Default to 344px if element check fails.
    return firstCard ? firstCard.offsetWidth + 24 : 344;
  };

  const scrollToNext = () => {
    const maxScroll = state.slider.scrollWidth - state.slider.clientWidth;
    if (state.slider.scrollLeft >= maxScroll - 10) {
      state.slider.scrollTo({ left: 0, behavior: "smooth" });
    } else {
      state.slider.scrollBy({ left: getScrollStep(), behavior: "smooth" });
    }
  };

  const scrollToPrev = () => {
    if (state.slider.scrollLeft <= 10) {
      state.slider.scrollTo({
        left: state.slider.scrollWidth,
        behavior: "smooth",
      });
    } else {
      state.slider.scrollBy({ left: -getScrollStep(), behavior: "smooth" });
    }
  };

  const startAutoPlay = () => {
    stopAutoPlay();
    state.autoPlayTimer = setInterval(scrollToNext, state.autoPlayInterval);
  };

  const stopAutoPlay = () => {
    if (state.autoPlayTimer) {
      clearInterval(state.autoPlayTimer);
      state.autoPlayTimer = null;
    }
  };

  // Event Listeners
  state.nextBtn.addEventListener("click", () => {
    scrollToNext();
    startAutoPlay(); // Reset timer on manual interaction
  });

  state.prevBtn.addEventListener("click", () => {
    scrollToPrev();
    startAutoPlay(); // Reset timer on manual interaction
  });

  state.slider.addEventListener("mouseenter", stopAutoPlay);
  state.slider.addEventListener("mouseleave", startAutoPlay);

  // Touch support pause
  state.slider.addEventListener("touchstart", stopAutoPlay, { passive: true });
  state.slider.addEventListener("touchend", startAutoPlay, { passive: true });

  // Initialize
  startAutoPlay();
}

// Initialize on DOM Content Loaded
document.addEventListener("DOMContentLoaded", initTestimonialSlider);

// navbar js
(function () {
  const initNavbar = () => {
    const mobileToggle = document.getElementById("dg-navbar-mobile-toggle");
    const mobileClose = document.getElementById("dg-navbar-mobile-close");
    const toggleIcon = document.getElementById("dg-navbar-toggle-icon");
    const mobileDrawer = document.getElementById("dg-navbar-mobile-drawer");
    const overlay = document.getElementById("dg-navbar-drawer-overlay");
    const megaTrigger = document.querySelector(".dg-navbar-trigger-group");
    const megaDropdown = document.getElementById("dg-navbar-mega-dropdown");
    const megaIcon = document.querySelector(".dg-navbar-expand-icon");

    const accordionTrigger = document.getElementById(
      "dg-navbar-mobile-accordion-trigger",
    );
    const accordionContent = document.getElementById(
      "dg-navbar-mobile-accordion-content",
    );
    const accordionIcon = document.getElementById("dg-navbar-accordion-icon");

    const toggleMobileMenu = (forceClose = false) => {
      const isActive = forceClose
        ? false
        : !mobileDrawer.classList.contains("is-active");

      if (isActive) {
        mobileDrawer.classList.add("is-active");
        overlay.classList.add("is-active");
        if (toggleIcon) toggleIcon.textContent = "close";
        document.body.style.overflow = "hidden";
      } else {
        mobileDrawer.classList.remove("is-active");
        overlay.classList.remove("is-active");
        if (toggleIcon) toggleIcon.textContent = "menu";
        document.body.style.overflow = "";
      }
    };

    const toggleMegaMenu = (show) => {
      if (megaDropdown) {
        if (show) {
          megaDropdown.classList.add("is-active");
          if (megaIcon) megaIcon.style.transform = "rotate(180deg)";
        } else {
          megaDropdown.classList.remove("is-active");
          if (megaIcon) megaIcon.style.transform = "rotate(0deg)";
        }
      }
    };

    if (mobileToggle)
      mobileToggle.addEventListener("click", (e) => {
        e.stopPropagation();
        toggleMobileMenu();
      });

    if (mobileClose)
      mobileClose.addEventListener("click", () => toggleMobileMenu(true));
    if (overlay)
      overlay.addEventListener("click", () => toggleMobileMenu(true));

    if (megaTrigger && window.innerWidth >= 1024) {
      megaTrigger.addEventListener("mouseenter", () => toggleMegaMenu(true));
      megaDropdown.addEventListener("mouseenter", () => toggleMegaMenu(true));

      megaTrigger.addEventListener("mouseleave", (e) => {
        if (!megaDropdown.contains(e.relatedTarget)) toggleMegaMenu(false);
      });
      megaDropdown.addEventListener("mouseleave", (e) => {
        if (!megaTrigger.contains(e.relatedTarget)) toggleMegaMenu(false);
      });
    }

    if (accordionTrigger) {
      accordionTrigger.addEventListener("click", (e) => {
        e.preventDefault();
        const isOpen = accordionContent.classList.toggle("is-open");
        accordionIcon.style.transform = isOpen
          ? "rotate(180deg)"
          : "rotate(0deg)";
        accordionTrigger.classList.toggle("text-primary");
      });
    }

    window.addEventListener("resize", () => {
      if (
        window.innerWidth >= 1024 &&
        mobileDrawer.classList.contains("is-active")
      ) {
        toggleMobileMenu(true);
      }
    });

    document.addEventListener("keydown", (e) => {
      if (e.key === "Escape") {
        toggleMobileMenu(true);
        toggleMegaMenu(false);
      }
    });
  };

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", initNavbar);
  } else {
    initNavbar();
  }
})();

// FAQ
function initDGFaqSystem() {
  const faqItems = document.querySelectorAll(".dg-faq-item");
  const heroImage = document.querySelector(".dg-faq-hero-img");

  // Sequential reveal for FAQ items
  faqItems.forEach((item, index) => {
    item.style.opacity = "0";
    item.style.transform = "translateY(20px)";
    setTimeout(
      () => {
        item.style.transition = "all 0.6s cubic-bezier(0.23, 1, 0.32, 1)";
        item.style.opacity = "1";
        item.style.transform = "translateY(0)";
      },
      200 + index * 100,
    );

    // Interaction Logic
    const trigger = item.querySelector(".dg-faq-trigger");
    const icon = item.querySelector(".dg-faq-icon");

    if (trigger) {
      trigger.addEventListener("click", () => {
        const isActive = item.classList.contains("dg-faq-item-active");

        // Optional: Close others
        // faqItems.forEach(i => i.classList.remove('dg-faq-item-active'));

        if (isActive) {
          item.classList.remove("dg-faq-item-active");
          if (icon) icon.classList.remove("rotate-45");
        } else {
          item.classList.add("dg-faq-item-active");
          if (icon) icon.classList.add("rotate-45");
        }
      });
    }
  });

  // Parallax Interaction for cinematic hero
  if (heroImage) {
    window.addEventListener("mousemove", (e) => {
      const x = (window.innerWidth / 2 - e.pageX) / 45;
      const y = (window.innerHeight / 2 - e.pageY) / 45;
      heroImage.style.transform = `scale(1.1) translate(${x}px, ${y}px)`;
    });
  }
}

// Boot system on DOM load
document.addEventListener("DOMContentLoaded", initDGFaqSystem);
