$(function () {

  /* ===========================
    メインビジュアル（mv）
  =========================== */
  var $mvSlides = $('.mv__slides li');
  var mvLen = $mvSlides.length;
  var mvIndex = 0;
  var interval = 5000;
  var timer;

  var $dotsWrap = $('.mv__dots');

  for (var i = 0; i < mvLen; i++) {
    $dotsWrap.append('<span data-index="' + i + '"></span>');
  }

  var $dots = $dotsWrap.find('span');
  $dots.eq(0).addClass('is-active');

  function changeMv(next) {
    $mvSlides.eq(mvIndex).removeClass('is-active');
    $dots.eq(mvIndex).removeClass('is-active');

    mvIndex = next;

    $mvSlides.eq(mvIndex).addClass('is-active');
    $dots.eq(mvIndex).addClass('is-active');
  }

  function autoMv() {
    var next = (mvIndex + 1) % mvLen;
    changeMv(next);
  }

  timer = setInterval(autoMv, interval);

  /* ===========================
    部屋スライダー（右側：Right）
  =========================== */
  var $boxR = $('.box__slider-right');
  var $boxSlidesR = $boxR.find('.box__slides li');
  var boxLenR = $boxSlidesR.length;
  var boxIndexR = 0;
  var boxTimerR;
  var boxIntervalR = 4000;

  function changeBoxR(next) {
    $boxSlidesR.eq(boxIndexR).removeClass('is-active');
    boxIndexR = next;
    $boxSlidesR.eq(boxIndexR).addClass('is-active');
  }

  function autoBoxR() {
    var next = (boxIndexR + 1) % boxLenR;
    changeBoxR(next);
  }

  boxTimerR = setInterval(autoBoxR, boxIntervalR);

  $boxR.find('.box__arrow--next').click(function (e) {
    if (e) e.preventDefault();
    clearInterval(boxTimerR);
    var next = (boxIndexR + 1) % boxLenR;
    changeBoxR(next);
    boxTimerR = setInterval(autoBoxR, boxIntervalR);
  });

  $boxR.find('.box__arrow--prev').click(function (e) {
    if (e) e.preventDefault();
    clearInterval(boxTimerR);
    var prev = (boxIndexR - 1 + boxLenR) % boxLenR;
    changeBoxR(prev);
    boxTimerR = setInterval(autoBoxR, boxIntervalR);
  });


  /* ===========================
    部屋スライダー（左側：Left）
  =========================== */
  var $boxL = $('.box__slider-left');
  var $boxSlidesL = $boxL.find('.box__slides li');
  var boxLenL = $boxSlidesL.length;
  var boxIndexL = 0;
  var boxTimerL;
  var boxIntervalL = 4000;

  function changeBoxL(next) {
    $boxSlidesL.eq(boxIndexL).removeClass('is-active');
    boxIndexL = next;
    $boxSlidesL.eq(boxIndexL).addClass('is-active');
  }

  function autoBoxL() {
    var next = (boxIndexL + 1) % boxLenL;
    changeBoxL(next);
  }

  // 初期実行
  boxTimerL = setInterval(autoBoxL, boxIntervalL);

  // 次へ
  $boxL.find('.box__arrow--next').click(function (e) {
    if (e) e.preventDefault();
    clearInterval(boxTimerL);
    var next = (boxIndexL + 1) % boxLenL;
    changeBoxL(next);
    boxTimerL = setInterval(autoBoxL, boxIntervalL);
  });

  // 前へ
  $boxL.find('.box__arrow--prev').click(function (e) {
    if (e) e.preventDefault();
    clearInterval(boxTimerL);
    var prev = (boxIndexL - 1 + boxLenL) % boxLenL;
    changeBoxL(prev);
    boxTimerL = setInterval(autoBoxL, boxIntervalL);
  });

/* ===========================
  中央スライダー（複数対応 + arrow追加）
=========================== */
  document.querySelectorAll(".box__slider-center").forEach((centerSlider) => {

    const centerSlides = centerSlider.querySelectorAll(".slide");
    const centerDotsWrap = centerSlider.querySelector(".slider__dots");
    const prevBtn = centerSlider.querySelector(".box__arrow--prev");
    const nextBtn = centerSlider.querySelector(".box__arrow--next");

    if (!centerSlides.length || !centerDotsWrap) return;

    let centerCurrent = 0;
    const centerTotal = centerSlides.length;
    const centerInterval = 5000;
    let centerTimer = null;

    /* ===== ドット生成 ===== */
    for (let i = 0; i < centerTotal; i++) {
      const btn = document.createElement("button");
      if (i === 0) btn.classList.add("is-active");
      centerDotsWrap.appendChild(btn);
    }

    const centerDots = centerDotsWrap.querySelectorAll("button");

    function goToCenterSlide(index) {
      centerSlides[centerCurrent].classList.remove("is-active");
      centerDots[centerCurrent].classList.remove("is-active");

      centerCurrent = index;

      centerSlides[centerCurrent].classList.add("is-active");
      centerDots[centerCurrent].classList.add("is-active");
    }

    function nextCenterSlide() {
      goToCenterSlide((centerCurrent + 1) % centerTotal);
    }

    function startCenterAuto() {
      stopCenterAuto();
      centerTimer = setInterval(nextCenterSlide, centerInterval);
    }

    function stopCenterAuto() {
      if (centerTimer) clearInterval(centerTimer);
    }

    /* ===== ドットクリック ===== */
    centerDots.forEach((dot, index) => {
      dot.addEventListener("click", () => {
        goToCenterSlide(index);
        startCenterAuto();
      });
    });

    /* ===== arrowクリック追加 ===== */
    if (prevBtn) {
      prevBtn.addEventListener("click", (e) => {
        e.preventDefault();
        goToCenterSlide((centerCurrent - 1 + centerTotal) % centerTotal);
        startCenterAuto();
      });
    }

    if (nextBtn) {
      nextBtn.addEventListener("click", (e) => {
        e.preventDefault();
        goToCenterSlide((centerCurrent + 1) % centerTotal);
        startCenterAuto();
      });
    }

    /* スライド1枚ならarrow非表示 */
    if (centerTotal <= 1) {
      if (prevBtn) prevBtn.style.display = "none";
      if (nextBtn) nextBtn.style.display = "none";
    }

    /* 初期化 */
    goToCenterSlide(0);
    startCenterAuto();

  });

});