// Nav js
function imaplants_dentistry_nav() {
  const shell = document.getElementById("main-nav-shell");
  const mobileToggle = document.getElementById("mobile-toggle");
  const mobileMenu = document.getElementById("mobile-menu");
  const menuIcon = document.getElementById("menu-icon");
  const closeIcon = document.getElementById("close-icon");
  const mobileLinks = document.querySelectorAll(
    ".implants-dentistry-nav-mobile-link",
  );

  let isMenuOpen = false;

  // 1. Scroll Effect Handler
  const handleScroll = () => {
    if (window.scrollY > 10) {
      shell.classList.add("nav-scrolled");
      shell.classList.remove("bg-transparent");
    } else {
      if (!isMenuOpen) {
        shell.classList.remove("nav-scrolled");
        shell.classList.add("bg-transparent");
      }
    }
  };

  // 2. Mobile Menu Toggle
  const toggleMenu = () => {
    isMenuOpen = !isMenuOpen;

    if (isMenuOpen) {
      mobileMenu.classList.add("active");
      menuIcon.classList.add("hidden");
      closeIcon.classList.remove("hidden");
      shell.classList.add("nav-scrolled"); // Force background when menu is open
      document.body.style.overflow = "hidden"; // Prevent scroll
    } else {
      mobileMenu.classList.remove("active");
      menuIcon.classList.remove("hidden");
      closeIcon.classList.add("hidden");
      handleScroll(); // Restore scroll-based background
      document.body.style.overflow = "";
    }
  };

  // Event Listeners
  window.addEventListener("scroll", handleScroll);
  mobileToggle.addEventListener("click", toggleMenu);

  // Close menu when clicking links
  mobileLinks.forEach((link) => {
    link.addEventListener("click", () => {
      if (isMenuOpen) toggleMenu();
    });
  });

  // Handle window resize (close menu if desktop size reached)
  window.addEventListener("resize", () => {
    if (window.innerWidth >= 768 && isMenuOpen) {
      toggleMenu();
    }
  });

  // Initial check
  handleScroll();
}

// Initialize on DOM Ready
document.addEventListener("DOMContentLoaded", imaplants_dentistry_nav);

// Hero slider js
function implants_dentistry_hero() {
  const slides = document.querySelectorAll(
    ".implants-dentistry-hero-slider-item",
  );
  const circles = [
    document.getElementById("implants-dentistry-hero-progress-0"),
    document.getElementById("implants-dentistry-hero-progress-1"),
    document.getElementById("implants-dentistry-hero-progress-2"),
  ];
  const nextBtn = document.getElementById("implants-dentistry-hero-next");
  const prevBtn = document.getElementById("implants-dentistry-hero-prev");
  const dotBtns = [
    document.getElementById("implants-dentistry-hero-btn-0"),
    document.getElementById("implants-dentistry-hero-btn-1"),
    document.getElementById("implants-dentistry-hero-btn-2"),
  ];

  let currentSlideIndex = 0;
  const slideDuration = 6000;
  let startTime = null;
  let animationFrameId = null;
  const circumference = 2 * Math.PI * 22;

  function updateSlide(index) {
    slides.forEach((slide, i) => {
      slide.classList.remove("implants-dentistry-hero-slide-active");
      if (i === index) {
        slide.classList.add("implants-dentistry-hero-slide-active");
      }
    });
    currentSlideIndex = index;
    resetCircles();
    startAnimation();
  }

  function resetCircles() {
    circles.forEach((circle) => {
      if (circle) circle.style.strokeDashoffset = circumference;
    });
  }

  function animate(timestamp) {
    if (!startTime) startTime = timestamp;
    const elapsed = timestamp - startTime;
    const progress = Math.min(elapsed / slideDuration, 1);

    const offset = circumference - progress * circumference;
    if (circles[currentSlideIndex]) {
      circles[currentSlideIndex].style.strokeDashoffset = offset;
    }

    if (progress < 1) {
      animationFrameId = requestAnimationFrame(animate);
    } else {
      nextSlide();
    }
  }

  function startAnimation() {
    if (animationFrameId) cancelAnimationFrame(animationFrameId);
    startTime = null;
    animationFrameId = requestAnimationFrame(animate);
  }

  function nextSlide() {
    const next = (currentSlideIndex + 1) % slides.length;
    updateSlide(next);
  }

  function prevSlide() {
    const prev = (currentSlideIndex - 1 + slides.length) % slides.length;
    updateSlide(prev);
  }

  nextBtn.addEventListener("click", () => nextSlide());
  prevBtn.addEventListener("click", () => prevSlide());

  dotBtns.forEach((btn, idx) => {
    btn.addEventListener("click", () => updateSlide(idx));
  });

  resetCircles();
  startAnimation();

  document.addEventListener("visibilitychange", () => {
    if (document.hidden) {
      cancelAnimationFrame(animationFrameId);
    } else {
      startAnimation();
    }
  });
}

// Initialize Hero logic
document.addEventListener("DOMContentLoaded", implants_dentistry_hero);

// MULTIPLE SMILE-MAKEOVER PAGE TRANSFORMATIONS JS
(function () {
  function initTransformationSliders() {
    const sliders = document.querySelectorAll("[data-slider]");

    sliders.forEach((slider) => {
      const beforeImg = slider.querySelector(".before-image");
      const handle = slider.querySelector(".slider-handle");
      const button = slider.querySelector(".slider-button");

      let isResizing = false;

      function updatePosition(x) {
        const rect = slider.getBoundingClientRect();
        const position = ((x - rect.left) / rect.width) * 100;
        const clampedPosition = Math.max(0, Math.min(100, position));

        beforeImg.style.clipPath = `inset(0 ${100 - clampedPosition}% 0 0)`;
        handle.style.left = `${clampedPosition}%`;
        button.style.transform = `translate(-50%, -50%) rotate(${clampedPosition * 3.6}deg)`;
      }

      // Event Listeners
      slider.addEventListener("mousedown", (e) => {
        isResizing = true;
        updatePosition(e.clientX);
      });

      window.addEventListener("mousemove", (e) => {
        if (!isResizing) return;
        updatePosition(e.clientX);
      });

      window.addEventListener("mouseup", () => {
        isResizing = false;
      });

      // Touch support
      slider.addEventListener("touchstart", (e) => {
        isResizing = true;
        updatePosition(e.touches[0].clientX);
      });

      window.addEventListener(
        "touchmove",
        (e) => {
          if (!isResizing) return;
          updatePosition(e.touches[0].clientX);
        },
        { passive: false },
      );

      window.addEventListener("touchend", () => {
        isResizing = false;
      });

      // Add hover effect rotation
      slider.addEventListener("mouseenter", () => {
        button.style.transition =
          "transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)";
        button.style.scale = "1.1";
      });

      slider.addEventListener("mouseleave", () => {
        button.style.scale = "1";
      });
    });
  }

  // Initialize on DOM load
  document.addEventListener("DOMContentLoaded", initTransformationSliders);
})();

// Testimonaisl js
function implants_dentistry_reviews() {
  const track = document.getElementById("sliderTrack");
  const nextBtn = document.getElementById("nextBtn");
  const prevBtn = document.getElementById("prevBtn");
  const paginationContainer = document.getElementById("paginationContainer");
  const cards = track.querySelectorAll(".flex-shrink-0");

  let currentIndex = 0;
  let isMobile = window.innerWidth < 768;
  let startX = 0;
  let currentTranslate = 0;
  let prevTranslate = 0;
  let isDragging = false;

  // Configuration
  const totalCards = cards.length;

  function getVisibleCount() {
    return isMobile ? 1 : 3;
  }

  function getMaxIndex() {
    return totalCards - getVisibleCount();
  }

  function createPagination() {
    paginationContainer.innerHTML = "";
    const count = totalCards; // Show progress for each card
    for (let i = 0; i < count; i++) {
      const bar = document.createElement("div");
      bar.className =
        "implants-dentistry-reviews-progress-bar rounded-full overflow-hidden";
      bar.innerHTML = `<div class="implants-dentistry-reviews-progress-fill" style="width: 0%"></div>`;
      paginationContainer.appendChild(bar);
    }
    updatePagination();
  }

  function updatePagination() {
    const fills = paginationContainer.querySelectorAll(
      ".implants-dentistry-reviews-progress-fill",
    );
    fills.forEach((fill, idx) => {
      const isActive = idx === currentIndex;
      const isGroupVisible =
        !isMobile && idx >= currentIndex && idx < currentIndex + 3;

      if (isMobile) {
        fill.style.width = isActive ? "100%" : "0%";
      } else {
        fill.style.width = isGroupVisible ? "100%" : "0%";
      }
    });
  }

  function updateSlider() {
    const cardWidth = 100 / getVisibleCount();
    const offset = currentIndex * -cardWidth;
    track.style.transform = `translateX(${offset}%)`;
    updatePagination();

    // Adjust opacity for focus
    cards.forEach((card, idx) => {
      const isVisible =
        idx >= currentIndex && idx < currentIndex + getVisibleCount();
      card.style.opacity = isVisible ? "1" : "0.4";
    });
  }

  // Navigation
  nextBtn.addEventListener("click", () => {
    if (currentIndex < getMaxIndex()) {
      currentIndex++;
    } else {
      currentIndex = 0; // Loop back
    }
    updateSlider();
  });

  prevBtn.addEventListener("click", () => {
    if (currentIndex > 0) {
      currentIndex--;
    } else {
      currentIndex = getMaxIndex(); // Loop to end
    }
    updateSlider();
  });

  // Touch Interaction (Mobile)
  track.addEventListener("touchstart", (e) => {
    startX = e.touches[0].clientX;
    isDragging = true;
    track.style.transition = "none";
  });

  track.addEventListener("touchmove", (e) => {
    if (!isDragging) return;
    const currentX = e.touches[0].clientX;
    const diff = currentX - startX;
    const cardWidth = track.offsetWidth / getVisibleCount();
    const baseTranslate = currentIndex * -cardWidth;
    track.style.transform = `translateX(${baseTranslate + diff}px)`;
  });

  track.addEventListener("touchend", (e) => {
    isDragging = false;
    track.style.transition = "transform 0.8s cubic-bezier(0.16, 1, 0.3, 1)";
    const endX = e.changedTouches[0].clientX;
    const diff = startX - endX;
    const threshold = 50;

    if (diff > threshold && currentIndex < getMaxIndex()) {
      currentIndex++;
    } else if (diff < -threshold && currentIndex > 0) {
      currentIndex--;
    }
    updateSlider();
  });

  // Resize handling
  window.addEventListener("resize", () => {
    const newIsMobile = window.innerWidth < 768;
    if (newIsMobile !== isMobile) {
      isMobile = newIsMobile;
      currentIndex = 0;
      createPagination();
      updateSlider();
    }
  });

  // Init
  createPagination();
  updateSlider();

  // Auto-advance
  let autoPlay = setInterval(() => {
    if (currentIndex < getMaxIndex()) {
      currentIndex++;
    } else {
      currentIndex = 0;
    }
    updateSlider();
  }, 8000);

  track.addEventListener("mouseenter", () => clearInterval(autoPlay));
}

// Initialize on load
window.addEventListener("DOMContentLoaded", implants_dentistry_reviews);

// Header scroll effect
window.addEventListener("scroll", () => {
  const header = document.querySelector("header");
  if (window.scrollY > 20) {
    header.classList.add("shadow-md", "bg-surface/90");
    header.classList.remove("bg-surface/60");
  } else {
    header.classList.remove("shadow-md", "bg-surface/90");
    header.classList.add("bg-surface/60");
  }
});
