document.addEventListener('DOMContentLoaded', function() {
  var container = document.querySelector('.km-slider-container');
  var track = document.querySelector('.km-slider-track');
  
  if (!container || !track) return;

  // WordPressの自動改行機能（wpautop）が挿入した不要なタグ（brやp）を除外してカードだけを取得
  var slides = Array.prototype.filter.call(track.children, function(child) {
    return child.classList.contains('km-slide');
  });
  var prevBtn = document.querySelector('.km-prev');
  var nextBtn = document.querySelector('.km-next');
  
  if (slides.length === 0 || !prevBtn || !nextBtn) return;

  var currentIndex = 0;
  var autoPlayTimer = null;
  var autoPlaySpeed = 3000; // 自動で切り替わる速度（3000 = 3秒）

  // 横幅を見てPCなら2枚、スマホなら1枚の表示枚数を返す
  function getSlidesPerView() {
    if (window.innerWidth <= 767) return 1; // スマホ（767px以下）は1列
    return 2;                               // PC・タブレットは2列
  }

  // 位置の計算とスライダーの移動処理
  function updateSlider() {
    var slidesPerView = getSlidesPerView();
    var maxIndex = Math.max(0, slides.length - slidesPerView);
    
    if (currentIndex > maxIndex) currentIndex = 0;
    if (currentIndex < 0) currentIndex = maxIndex;
    
    var slideWidth = container.clientWidth / slidesPerView;
    
    slides.forEach(function(slide) {
      slide.style.width = slideWidth + 'px';
    });

    track.style.transform = 'translateX(-' + (currentIndex * slideWidth) + 'px)';
  }

  function nextSlide() {
    currentIndex++;
    updateSlider();
  }

  function prevSlide() {
    currentIndex--;
    updateSlider();
  }

  // オートプレイ（自動再生）の開始・停止
  function startAutoPlay() {
    stopAutoPlay();
    autoPlayTimer = setInterval(nextSlide, autoPlaySpeed);
  }

  function stopAutoPlay() {
    if (autoPlayTimer) clearInterval(autoPlayTimer);
  }

  // ボタンクリックイベントの設定（クリック時にタイマーをリフレッシュ）
  nextBtn.addEventListener('click', function() {
    nextSlide();
    startAutoPlay();
  });

  prevBtn.addEventListener('click', function() {
    prevSlide();
    startAutoPlay();
  });

  // マウスがスライダーの上に乗っている間は自動再生を一時停止する
  var wrapper = document.querySelector('.km-slider-wrapper');
  if (wrapper) {
    wrapper.addEventListener('mouseenter', stopAutoPlay);
    wrapper.addEventListener('mouseleave', startAutoPlay);
  }

  // 画面リサイズ時にズレを追従補正
  window.addEventListener('resize', updateSlider);
  
  // 初期実行
  updateSlider();
  startAutoPlay();
});