/* ==========================================================================
   CREA DISEÑO & CONSTRUCCIÓN · GALERÍA, FILTROS Y MODAL
   ========================================================================== */

document.addEventListener('DOMContentLoaded', () => {
  // POPUP / MODAL DE GALERÍA DE IMÁGENES
  const modal = document.getElementById("modal-galeria");
  const imgExpandida = document.getElementById("imagen-expandida");
  const btnCerrar = document.querySelector(".cerrar-modal");
  const imagenesGaleria = document.querySelectorAll(".portfolio-card-img-wrap img");

  imagenesGaleria.forEach(img => {
    img.addEventListener("click", () => {
      if (modal && imgExpandida) {
        modal.style.display = "flex";
        imgExpandida.src = img.src;
      }
    });
  });

  if (btnCerrar) {
    btnCerrar.addEventListener("click", () => {
      if (modal) modal.style.display = "none";
    });
  }

  if (modal) {
    modal.addEventListener("click", (e) => {
      if (e.target === modal) {
        modal.style.display = "none";
      }
    });
  }

  document.addEventListener("keydown", (e) => {
    if (e.key === "Escape" && modal && modal.style.display === "flex") {
      modal.style.display = "none";
    }
  });
});

// CAMBIAR PESTAÑA DE GALERÍA (CASAS, COMERCIAL, ETC.)
window.cambiarGaleria = function(evento, idGaleriaObjetivo, idGrupoFiltros) {
  const bloquePadre = evento.currentTarget.closest('.galeria-bloque') || evento.currentTarget.closest('.portfolio-block');
  if (!bloquePadre) return;

  const todasLasGalerias = bloquePadre.querySelectorAll('.portfolio-carousel-track');
  todasLasGalerias.forEach(galeria => {
    galeria.style.display = "none";
  });

  const grupoFiltro = document.getElementById(idGrupoFiltros);
  if (grupoFiltro) {
    const botonesFiltro = grupoFiltro.querySelectorAll('.portfolio-filter-btn');
    botonesFiltro.forEach(btn => btn.classList.remove('active'));
  }

  const galeriaMostrar = document.getElementById(idGaleriaObjetivo);
  if (galeriaMostrar) {
    galeriaMostrar.style.display = "flex";
  }

  evento.currentTarget.classList.add('active');
};

// DESPLAZAR CARRUSEL HORIZONTAL
window.moverCarrusel = function(evento, direccion) {
  const contenedor = evento.currentTarget.closest('.portfolio-carousel-wrapper');
  if (!contenedor) return;

  const tracks = contenedor.querySelectorAll('.portfolio-carousel-track');
  let galeriaActiva = null;

  tracks.forEach(track => {
    if (window.getComputedStyle(track).display !== 'none') {
      galeriaActiva = track;
    }
  });

  if (galeriaActiva) {
    const scrollAmount = 350;
    if (direccion === 'prev') {
      galeriaActiva.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
    } else {
      galeriaActiva.scrollBy({ left: scrollAmount, behavior: 'smooth' });
    }
  }
};