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

  const line1El = document.getElementById("allShopModalLine1");
  const line2El = document.getElementById("allShopModalLine2");

  const img1 = document.getElementById("allShopModalImg1");
  const img2 = document.getElementById("allShopModalImg2");
  const img3 = document.getElementById("allShopModalImg3");
  const img4 = document.getElementById("allShopModalImg4");
  const img5 = document.getElementById("allShopModalImg5");
  const img6 = document.getElementById("allShopModalImg6");

  const imgs = [img1, img2, img3, img4, img5, img6];

  // 유튜브(선택)
  const videoWrap = document.getElementById("allShopModalVideoWrap");
  const videoEl   = document.getElementById("allShopModalVideo");

  function setImg(el, src, alt){
    if (!el) return;
    if (src) {
      el.src = src;
      el.alt = alt || "";
      el.style.display = "block";
    } else {
      el.src = "";
      el.style.display = "none";
    }
  }

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

    const raw = cell.dataset.images || "";
    const list = raw.split(",").map(s => s.trim()).filter(Boolean);

    // ✅ 순서: 이미지(1) / 글씨 / 이미지(2~6)
    for (let i = 0; i < imgs.length; i++){
      const src = list[i] || "";
      setImg(imgs[i], src, (cell.dataset.title || "all_shop") + "_img" + (i+1));
    }

    // ✅ 유튜브(원하면 유지, 원치 않으면 아래 통째로 지워도 됨)
    const youtube = cell.dataset.youtube || "";
    if (youtube && videoEl) {
      videoEl.src = youtube;
      videoWrap.style.display = "block";
    } else {
      if (videoEl) videoEl.src = "";
      if (videoWrap) videoWrap.style.display = "none";
    }

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

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

    imgs.forEach(el => {
      if (!el) return;
      el.src = "";
      el.style.display = "none";
    });

    if (videoEl) videoEl.src = "";
    if (videoWrap) videoWrap.style.display = "none";
  }

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

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

  // ESC
  window.addEventListener("keydown", (e) => {
    if(!modal.classList.contains("is-open")) return;
    if(e.key === "Escape") closeModal();
  });
});