<script>
document.addEventListener("DOMContentLoaded", function () {

  const wrapper = document.querySelector(".orbit-wrapper");
  const orbit = wrapper.querySelector(".e-con-inner");
  const circles = document.querySelectorAll(".orbit-circle");

  const total = circles.length;
  const angleStep = 360 / total;

  let rotation = 0;
  let isDragging = false;
  let startX = 0;
  let autoplay;

  function applyRotation() {

    orbit.style.transform = `translate(-50%, -50%) rotate(${rotation}deg)`;

    // keep content upright
    circles.forEach(circle => {
      const contents = circle.querySelectorAll(".orbit-content");
      contents.forEach(c => {
        c.style.transform = `rotate(${-rotation}deg)`;
      });
    });
  }

  function rotateNext() {
    rotation -= angleStep;
    applyRotation();
  }

  function startAutoplay() {
    autoplay = setInterval(rotateNext, 3500);
  }

  function stopAutoplay() {
    clearInterval(autoplay);
  }

  /* -----------------------
     Drag Controls
  ----------------------- */

  wrapper.addEventListener("mousedown", (e) => {
    isDragging = true;
    startX = e.clientX;
    stopAutoplay();
  });

  window.addEventListener("mouseup", () => {
    if (!isDragging) return;

    isDragging = false;

    // snap to nearest item
    rotation = Math.round(rotation / angleStep) * angleStep;
    applyRotation();

    startAutoplay();
  });

  window.addEventListener("mousemove", (e) => {
    if (!isDragging) return;

    const delta = e.clientX - startX;
    const sensitivity = 0.4;

    rotation += delta * sensitivity;
    startX = e.clientX;

    applyRotation();
  });

  /* -----------------------
     Touch support
  ----------------------- */

  wrapper.addEventListener("touchstart", (e) => {
    isDragging = true;
    startX = e.touches[0].clientX;
    stopAutoplay();
  });

  window.addEventListener("touchend", () => {
    if (!isDragging) return;

    isDragging = false;

    rotation = Math.round(rotation / angleStep) * angleStep;
    applyRotation();

    startAutoplay();
  });

  window.addEventListener("touchmove", (e) => {
    if (!isDragging) return;

    const delta = e.touches[0].clientX - startX;
    const sensitivity = 0.4;

    rotation += delta * sensitivity;
    startX = e.touches[0].clientX;

    applyRotation();
  });

  /* -----------------------
     Init
  ----------------------- */

  applyRotation();
  startAutoplay();

});
</script>