document.addEventListener("DOMContentLoaded", () => {
  const modal = document.getElementById("machineModal");
  if (!modal) return;

  // ✅ 새 모달 구조(그림/글1줄(밑줄)/글1줄/그림)
  const topImgEl    = document.getElementById("machineModalTopImg");
  const line1El     = document.getElementById("machineModalLine1");
  const line2El     = document.getElementById("machineModalLine2");
  const bottomImgEl = document.getElementById("machineModalBottomImg");
  const extraImg1 = document.getElementById("machineModalExtraImg1");
  const extraImg2 = document.getElementById("machineModalExtraImg2");

  //유튜브
  const videoWrap = document.getElementById("machineModalVideoWrap");
  const videoEl   = document.getElementById("machineModalVideo");

  // ✅ (있으면 사용, 없으면 무시)
  const btnPrev = modal.querySelector(".machine_modal_prev");
  const btnNext = modal.querySelector(".machine_modal_next");

  let images = [];
  let idx = 0;

  function openFromCell(cell){
    // 글 2줄
    line1El.textContent = cell.dataset.title || "";
    line2El.textContent = cell.dataset.desc  || "";

    // 이미지 리스트
    const raw = cell.dataset.images || "";
    images = raw.split(",").map(s => s.trim()).filter(Boolean);
    idx = 0;

    // ✅ 기본: images[0] = 위 그림, images[1] = 아래 그림
    const topSrc = images[0] || "";
    const bottomSrc = images[1] || images[0] || "";

    const extraSrc1 = images[2] || "";
    const extraSrc2 = images[3] || "";

    if (extraImg1) {
      extraImg1.src = extraSrc1;
      extraImg1.style.display = extraSrc1 ? "block" : "none";
    }

    if (extraImg2) {
      extraImg2.src = extraSrc2;
      extraImg2.style.display = extraSrc2 ? "block" : "none";
    }

    if (topImgEl) {
      topImgEl.src = topSrc;
      topImgEl.alt = (cell.dataset.title || "machine") + "_top";
      topImgEl.style.display = topSrc ? "block" : "none";
    }

    if (bottomImgEl) {
      bottomImgEl.src = bottomSrc;
      bottomImgEl.alt = (cell.dataset.title || "machine") + "_bottom";
      bottomImgEl.style.display = bottomSrc ? "block" : "none";
    }

    // 버튼 표시(이미지 2장 이상이면 사용 가능)
    const hasSlider = images.length >= 2;
    if (btnPrev) btnPrev.style.display = hasSlider ? "" : "none";
    if (btnNext) btnNext.style.display = hasSlider ? "" : "none";

    modal.classList.add("is-open");
    modal.setAttribute("aria-hidden", "false");
    document.documentElement.style.overflow = "hidden";

    //유튜브
    const youtube = cell.dataset.youtube || "";

    if (youtube && videoEl) {
      videoEl.src = youtube;
      videoWrap.style.display = "block";
    } else {
      videoEl.src = "";
      videoWrap.style.display = "none";
    }
  }

  function closeModal(){
    modal.classList.remove("is-open");
    modal.setAttribute("aria-hidden", "true");
    document.documentElement.style.overflow = "";

    if (topImgEl) topImgEl.src = "";
    if (bottomImgEl) bottomImgEl.src = "";
    if (extraImg1) extraImg1.src = "";
    if (extraImg2) extraImg2.src = "";
  }

  // ✅ 슬라이더: images를 돌리면 "위 그림"만 바뀌게(원하면 아래도 같이 바꾸게 수정 가능)
  function show(dir){
    if (!images.length) return;
    idx += dir;
    if (idx < 0) idx = images.length - 1;
    if (idx >= images.length) idx = 0;

    const src = images[idx] || "";
    if (topImgEl) {
      topImgEl.src = src;
      topImgEl.style.display = src ? "block" : "none";
    }
  }

  // ✅ 셀 클릭 → 모달 오픈
  document.querySelectorAll(".machine_cell[data-machine]").forEach(cell => {
    cell.addEventListener("click", () => openFromCell(cell));
  });

  // ✅ 딤 클릭/닫기 버튼
  modal.addEventListener("click", (e) => {
    if (e.target.matches("[data-close]")) closeModal();
  });

  // ✅ 이전/다음
  btnPrev?.addEventListener("click", (e) => { e.stopPropagation(); show(-1); });
  btnNext?.addEventListener("click", (e) => { e.stopPropagation(); show(1); });

  // ✅ ESC / 방향키
  window.addEventListener("keydown", (e) => {
    if(!modal.classList.contains("is-open")) return;
    if(e.key === "Escape") closeModal();
    if(e.key === "ArrowLeft") show(-1);
    if(e.key === "ArrowRight") show(1);
  });
});


// ✅ hover 이미지: 다음 이미지를 미리 깔아두고 원본만 사라지게(크로스페이드)
document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll(".machine_cell").forEach(cell => {
    const img = cell.querySelector("img.machine_box");
    if (!img) return;

    const hoverSrc = img.getAttribute("data-hover");
    if (!hoverSrc) return;

    // 1) img를 감싸는 래퍼 만들기(한 번만)
    let wrap = img.closest(".machine_box_wrap");
    if (!wrap) {
      wrap = document.createElement("span");
      wrap.className = "machine_box_wrap";
      img.parentNode.insertBefore(wrap, img);
      wrap.appendChild(img);
    }

    // 2) hover용 두 번째 이미지 만들기(한 번만)
    let hoverImg = wrap.querySelector(".machine_box_hover");
    if (!hoverImg) {
      hoverImg = document.createElement("img");
      hoverImg.className = "machine_box_hover";
      hoverImg.alt = img.alt || "";
      wrap.appendChild(hoverImg);
    }

    // 3) hover 이미지를 미리 로드해두기(깜빡임 방지)
    const pre = new Image();
    pre.src = hoverSrc;
    pre.onload = () => { hoverImg.src = hoverSrc; };
    hoverImg.src = hoverSrc;

    // 4) hover 시 클래스 토글(크로스페이드)
    cell.addEventListener("mouseenter", () => {
      cell.classList.add("is-hover");
    });

    cell.addEventListener("mouseleave", () => {
      cell.classList.remove("is-hover");
    });
  });
});


document.addEventListener("DOMContentLoaded", () => {
  const targets = document.querySelectorAll(".machine_intro_2 .fadeUp2");
  if (!targets.length) return;

  const io = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (!entry.isIntersecting) return;

      entry.target.classList.add("bb-show");
      io.unobserve(entry.target); // 한 번만 띠용
    });
  }, { threshold: 0.15 });

  targets.forEach(el => io.observe(el));
});