document.addEventListener('DOMContentLoaded', function () {
  const container = document.querySelector('.mainimg');
  if (!container) return;

  // 既存の .slide を取得して、track に包む
  const slides = Array.from(container.querySelectorAll(':scope > .slide'));
  if (slides.length === 0) return;

  // すでに track が無ければ作成
  let track = container.querySelector(':scope > .track');
  if (!track) {
    track = document.createElement('div');
    track.className = 'track';

    // もともとの .slide を track に移動
    slides.forEach(slide => {
      track.appendChild(slide);
    });

    container.appendChild(track);
  }

  // ドット生成
  const dotsWrap = document.createElement('div');
  dotsWrap.className = 'dots';
  const dots = slides.map((_, idx) => {
    const b = document.createElement('button');
    b.className = 'dot';
    b.setAttribute('aria-label', `スライド ${idx + 1}`);
    dotsWrap.appendChild(b);
    return b;
  });
  container.appendChild(dotsWrap);

  // 状態
  const autoplaySpeed = 4000; // slick の autoplaySpeed に相当
  let index = 0;
  let timer = null;

  function update() {
    const offset = -index * 100;               // 1枚＝100%移動
    track.style.transform = `translateX(${offset}%)`;
    dots.forEach((d, i) => d.classList.toggle('active', i === index));
  }

  function goTo(i) {
    const len = slides.length;
    index = ((i % len) + len) % len;           // 無限ループ
    update();
  }

  function next() {
    goTo(index + 1);
  }

  function startAutoplay() {
    stopAutoplay();
    timer = setInterval(next, autoplaySpeed);
  }

  function stopAutoplay() {
    if (timer) {
      clearInterval(timer);
      timer = null;
    }
  }

  // ドットクリックで移動（自動再生は継続）
  dots.forEach((dot, i) => {
    dot.addEventListener('click', function () {
      goTo(i);
      startAutoplay(); // ユーザー操作後も継続させる
    });
  });

  // 初期化
  update();
  startAutoplay();

  // リサイズ時も位置を再適用（念のため）
  window.addEventListener('resize', update);

  // a 要素の href=""（空リンク）はクリック無効化しておく（任意）
  container.querySelectorAll('a[href=""]').forEach(a => {
    a.addEventListener('click', e => e.preventDefault());
  });
});