// Espera a que todo el contenido del DOM esté completamente cargado
document.addEventListener("DOMContentLoaded", function () {
  // ────────────────────────────────────────────────────────────────
  // 🔄 FLIP DE TARJETAS DE DESTINO
  const tarjetas = document.querySelectorAll(".destino-card");
  tarjetas.forEach(function (tarjeta) {
    tarjeta.addEventListener("click", function () {
      tarjeta.classList.toggle("is-flipped");
    });
  });
  // ────────────────────────────────────────────────────────────────
  // 👁️ MOSTRAR/OCULTAR DESCRIPCIÓN DE ACTIVIDADES
  const botonesDescripcion = document.querySelectorAll(".descripcion-btn");
  botonesDescripcion.forEach((btn) => {
    btn.addEventListener("click", () => {
      const descripcion = btn.nextElementSibling;
      if (descripcion && descripcion.classList.contains("descripcion")) {
        const estaOculta = descripcion.classList.contains("oculto");
        descripcion.classList.toggle("oculto", !estaOculta);
        descripcion.classList.toggle("visible", estaOculta);
        btn.textContent = estaOculta ? "Cerrar" : "Descripción";
      }
    });
  });
  // ────────────────────────────────────────────────────────────────
  // 🍽️ CARRUSEL DE GASTRONOMÍA (Restaurante y Bar)
  document.querySelectorAll(".gastro-item").forEach((item) => {
    const slides = item.querySelectorAll(".gastro-slide");
    const prevBtn = item.querySelector(".carousel-arrow.left");
    const nextBtn = item.querySelector(".carousel-arrow.right");
    let current = 0;
    function showSlide(index) {
      slides.forEach((slide, i) => {
        slide.classList.toggle("active", i === index);
      });
    }
    prevBtn.addEventListener("click", () => {
      current = (current - 1 + slides.length) % slides.length;
      showSlide(current);
    });
    nextBtn.addEventListener("click", () => {
      current = (current + 1) % slides.length;
      showSlide(current);
    });
    showSlide(current);
  });
  // ────────────────────────────────────────────────────────────────
  // 🛏️ CARRUSELES INDEPENDIENTES POR HABITACIÓN
  document.querySelectorAll(".habitacion-carousel").forEach((carousel) => {
    const slides = carousel.querySelectorAll(".slide");
    const prev = carousel.querySelector(".carousel-arrow.left");
    const next = carousel.querySelector(".carousel-arrow.right");
    let index = 0;
    const show = (i) => {
      slides[index].classList.remove("active");
      index = (i + slides.length) % slides.length;
      slides[index].classList.add("active");
    };
    prev.addEventListener("click", () => show(index - 1));
    next.addEventListener("click", () => show(index + 1));
  });
  // ────────────────────────────────────────────────────────────────
  // 📍 DESPLAZAMIENTO SUAVE A #reservas SOLO EN index.php
  document.querySelectorAll('a[href="index.php#reservas"]').forEach((link) => {
    link.addEventListener("click", (e) => {
      if (window.location.pathname.endsWith("index.php")) {
        const target = document.querySelector("#reservas");
        if (target) {
          e.preventDefault();
          target.scrollIntoView({ behavior: "smooth" });
        }
      }
    });
  });
});