function initSmile360HorizonSlider() {
  const track = document.getElementById("slide-track");
  const prevBtn = document.getElementById("prev-slide");
  const nextBtn = document.getElementById("next-slide");
  const progressBar = document.getElementById("progress-bar");
  const currentIndexEl = document.getElementById("current-index");
  let currentIdx = 0;
  const totalSlides = track.children.length;
  function updateSlider() {
    track.style.transform = `translateX(-${currentIdx * 100}%)`;
    const progress = ((currentIdx + 1) / totalSlides) * 100;
    progressBar.style.width = `${progress}%`;
    currentIndexEl.textContent = `0${currentIdx + 1}`;
  }
  nextBtn.addEventListener("click", () => {
    currentIdx = (currentIdx + 1) % totalSlides;
    updateSlider();
  });
  prevBtn.addEventListener("click", () => {
    currentIdx = (currentIdx - 1 + totalSlides) % totalSlides;
    updateSlider();
  });
  updateSlider();
}
document.addEventListener("DOMContentLoaded", initSmile360HorizonSlider);

// navbar js
/**
 * Smile 360 Navigation Logic
 * Encapsulated to handle overlay transitions and state.
 */
(function () {
  const menuToggle = document.getElementById("menu-toggle");
  const closeMenu = document.getElementById("close-menu");
  const navOverlay = document.getElementById("nav-overlay");
  const body = document.body;

  const toggleMenu = (isOpen) => {
    if (isOpen) {
      navOverlay.classList.remove("translate-y-[-100%]");
      navOverlay.classList.add("translate-y-0");
      body.style.overflow = "hidden";
    } else {
      navOverlay.classList.remove("translate-y-0");
      navOverlay.classList.add("translate-y-[-100%]");
      body.style.overflow = "";
    }
  };

  menuToggle.addEventListener("click", () => toggleMenu(true));
  closeMenu.addEventListener("click", () => toggleMenu(false));

  // Close on escape key
  document.addEventListener("keydown", (e) => {
    if (e.key === "Escape" && navOverlay.classList.contains("translate-y-0")) {
      toggleMenu(false);
    }
  });

  // Handle link clicks (smooth close)
  const links = navOverlay.querySelectorAll("a");
  links.forEach((link) => {
    link.addEventListener("click", () => {
      setTimeout(() => toggleMenu(false), 300);
    });
  });
})();


// treatment calc js
const phases = [
  {
    tag: "PHASE 01",
    title: "Diagnostics",
    status: "Diagnostics Active",
    desc: "Every masterpiece begins with a blueprint. Using high-resolution CBCT scans and AI-driven bone density mapping, we create a sub-millimeter accurate digital double of your current dental anatomy.",
    accuracy: "99.9%",
    imaging: "4K CBCT",
    ai: "Enabled",
    icon: "biotech",
    label: "CLINICAL<br/>ACCURACY",
    dash: 233.25, // 311 * 0.75
    rotation: 0,
    image:
      "images/services/makeover.png",
  },
  {
    tag: "PHASE 02",
    title: "Mockup",
    status: "Simulation Lab",
    desc: "Virtual prototyping of your smile. We craft multiple aesthetic variations using 3D facial scanning, allowing you to preview and approve your new look before any physical intervention occurs.",
    accuracy: "100%",
    imaging: "3D Tooth",
    ai: "Optimized",
    icon: "model_training",
    label: "VISUAL<br/>FIDELITY",
    dash: 155.5, // 311 * 0.50
    rotation: -90,
    image:
      "images/services/implants.png",
  },
  {
    tag: "PHASE 03",
    title: "Execution",
    status: "Surgical Suite",
    desc: "Precision in motion. Guided surgery systems and robotic-assisted placement ensure that the digital plan is executed with flawless mechanical accuracy and minimal downtime.",
    accuracy: "99.98%",
    imaging: "Real-time",
    ai: "Monitoring",
    icon: "precision_manufacturing",
    label: "ROBOTIC<br/>PRECISION",
    dash: 77.75, // 311 * 0.25
    rotation: -180,
    image:
      "images/services/clear-align.png",
  },
  {
    tag: "PHASE 04",
    title: "Maintenance",
    status: "Post-Clinical",
    desc: "Long-term excellence. Our proprietary monitoring protocol ensures that your results remain stable and vibrant, backed by our concierge clinical support team for lifetime care.",
    accuracy: "100%",
    imaging: "Bio-Tech",
    ai: "Continuous",
    icon: "verified",
    label: "LIFETIME<br/>STANDARDS",
    dash: 0,
    rotation: -270,
    image:
      "images/services/aligner-orthodontics.png",
  },
];

let currentIdx = 0;

function setPhase(idx) {
  currentIdx = idx;
  const phase = phases[idx];

  // 1. Rotate the dial
  const dial = document.getElementById("orbital-dial");
  dial.style.transform = `rotate(${phase.rotation}deg)`;

  // 2. Adjust button styles and counter-rotate for text readability
  const btns = document.querySelectorAll(".phase-btn");
  btns.forEach((btn, i) => {
    const isActive = i === idx;

    // Counter-rotate the inner content to keep numbers upright
    btn.style.transform =
      btn.style.transform.split(" rotate(")[0] +
      ` rotate(${-phase.rotation}deg) scale(${isActive ? "1.25" : "1"})`;

    if (isActive) {
      btn.classList.add(
        "phase-indicator-active",
        "bg-white",
        "text-smile-blue",
        "z-50",
      );
      btn.classList.remove("bg-white/10", "text-white/40", "border-white/20");
    } else {
      btn.classList.remove(
        "phase-indicator-active",
        "bg-white",
        "text-smile-blue",
        "z-50",
      );
      btn.classList.add(
        "bg-white/10",
        "text-white/40",
        "border",
        "border-white/20",
      );
    }
  });

  // 3. Central Image Update
  const portalImg = document.getElementById("phase-image");
  portalImg.classList.remove("animate-portal");
  void portalImg.offsetWidth;
  portalImg.src = phase.image;
  portalImg.classList.add("animate-portal");

  // 4. SVG Arc progress
  document.getElementById("arc-progress").style.strokeDashoffset = phase.dash;

  // 5. Content Reveal
  const revealBox = document.getElementById("content-reveal-box");
  revealBox.classList.remove("animate-content");
  void revealBox.offsetWidth;

  document.getElementById("phase-tag").textContent = phase.tag;
  document.getElementById("phase-title").textContent = phase.title;
  document.getElementById("phase-desc").textContent = phase.desc;
  document.getElementById("phase-icon").textContent = phase.icon;
  document.getElementById("phase-label").innerHTML = phase.label;

  revealBox.classList.add("animate-content");

  // 6. Metrics
  document.getElementById("status-text").textContent = phase.status;
  document.getElementById("spec-accuracy").textContent = phase.accuracy;
  document.getElementById("spec-imaging").textContent = phase.imaging;
  document.getElementById("spec-ai").textContent = phase.ai;

  // 7. Bottom Navigation Bars
  document.querySelectorAll(".indicator-bar").forEach((bar, i) => {
    const active = i === idx;
    bar.style.opacity = active ? "1" : "0.3";
    const line = bar.querySelector("div");
    if (active) {
      line.classList.replace("bg-white/40", "bg-white");
    } else {
      line.classList.replace("bg-white", "bg-white/40");
    }
  });
}

function nextPhase() {
  setPhase((currentIdx + 1) % phases.length);
}

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

// testimonial js
(function initPremiumSlider() {
  const track = document.getElementById("testimonialTrack");
  const prevBtn = document.getElementById("prevBtn");
  const nextBtn = document.getElementById("nextBtn");
  const indicators = document.querySelectorAll(".indicator");

  let currentIndex = 0;
  const totalSets = 2;

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

    // Update indicators
    indicators.forEach((ind, i) => {
      if (i === currentIndex) {
        ind.classList.replace("w-4", "w-12");
        ind.classList.replace("bg-primary/20", "bg-primary");
      } else {
        ind.classList.replace("w-12", "w-4");
        ind.classList.replace("bg-primary", "bg-primary/20");
      }
    });
  }

  nextBtn.addEventListener("click", () => {
    currentIndex = (currentIndex + 1) % totalSets;
    updateSlider();
  });

  prevBtn.addEventListener("click", () => {
    currentIndex = (currentIndex - 1 + totalSets) % totalSets;
    updateSlider();
  });

  // Initialize
  updateSlider();
})();

// scan function
(function () {
  const canvas = document.getElementById("scan-canvas");
  const overlay = document.getElementById("scan-overlay");
  const beam = document.getElementById("scan-beam");
  const shadeProgress = document.getElementById("shade-progress");
  const alignmentBars = document.getElementById("alignment-metrics").children;
  const symmetryScore = document.getElementById("symmetry-score");
  const retriggerBtn = document.getElementById("retrigger-scan");

  let isAutoScanning = true;
  let autoScanProgress = 0;
  let direction = 1; // 1 for forward, -1 for backward
  let animationFrame;

  const updateUI = (progress) => {
    const p = Math.max(0, Math.min(progress, 100));

    // 1. Move Beam and Reveal Overlay
    beam.style.left = `${p}%`;
    overlay.style.clipPath = `inset(0 ${100 - p}% 0 0)`;

    // 2. Sync Analytics
    shadeProgress.style.width = `${Math.min(p * 0.95, 95)}%`;

    Array.from(alignmentBars).forEach((bar, index) => {
      const threshold = (index + 1) * 20;
      if (p >= threshold) {
        bar.classList.replace("bg-surface-container-high", "bg-primary");
      } else {
        bar.classList.replace("bg-primary", "bg-surface-container-high");
      }
    });

    const targetScore = 98.4;
    const currentScore = (p / 100) * targetScore;
    symmetryScore.textContent = currentScore.toFixed(1);
  };

  const animate = () => {
    if (!isAutoScanning) return;

    autoScanProgress += 0.4 * direction;

    if (autoScanProgress >= 100) {
      direction = -1;
      autoScanProgress = 100;
    } else if (autoScanProgress <= 0) {
      direction = 1;
      autoScanProgress = 0;
    }

    updateUI(autoScanProgress);
    animationFrame = requestAnimationFrame(animate);
  };

  const resetScan = () => {
    cancelAnimationFrame(animationFrame);
    autoScanProgress = 0;
    direction = 1;
    isAutoScanning = true;
    animate();
  };

  // User Interaction
  canvas.addEventListener("mousemove", (e) => {
    isAutoScanning = false;
    cancelAnimationFrame(animationFrame);
    const rect = canvas.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const percentage = (x / rect.width) * 100;
    autoScanProgress = percentage;
    updateUI(percentage);
  });

  canvas.addEventListener("mouseleave", () => {
    // Resume auto-scan after user stops interacting
    isAutoScanning = true;
    animate();
  });

  canvas.addEventListener("touchstart", (e) => {
    isAutoScanning = false;
    cancelAnimationFrame(animationFrame);
  });

  canvas.addEventListener("touchmove", (e) => {
    if (e.touches.length > 0) {
      const rect = canvas.getBoundingClientRect();
      const x = e.touches[0].clientX - rect.left;
      const percentage = (x / rect.width) * 100;
      autoScanProgress = percentage;
      updateUI(percentage);
    }
  });

  retriggerBtn.addEventListener("click", resetScan);

  // Initial Start
  animate();
})();

// faq section
document.addEventListener("DOMContentLoaded", () => {
  const faqItems = document.querySelectorAll(".faq-item");
  const triggers = document.querySelectorAll(".accordion-trigger");

  triggers.forEach((trigger) => {
    trigger.addEventListener("click", () => {
      const currentItem = trigger.closest(".faq-item");
      const currentContent = currentItem.querySelector(".accordion-content");
      const currentIcon = currentItem.querySelector(".accordion-icon");

      const isOpen = currentContent.classList.contains("grid-rows-[1fr]");

      // Close all items (Exclusive logic)
      faqItems.forEach((item) => {
        const content = item.querySelector(".accordion-content");
        const icon = item.querySelector(".accordion-icon");
        content.classList.replace("grid-rows-[1fr]", "grid-rows-[0fr]");
        icon.classList.remove("rotate-180");
      });

      // If it wasn't open, open it now
      if (!isOpen) {
        currentContent.classList.replace("grid-rows-[0fr]", "grid-rows-[1fr]");
        currentIcon.classList.add("rotate-180");
      }
    });
  });

  // Initialize - Open first item for visual feedback
  const firstItem = document.querySelector(".faq-item");
  if (firstItem) {
    firstItem
      .querySelector(".accordion-content")
      .classList.replace("grid-rows-[0fr]", "grid-rows-[1fr]");
    firstItem.querySelector(".accordion-icon").classList.add("rotate-180");
  }
});

// new process js
