/* =========================================================
   NOVA X — slider.js
   Slider hero (5 banners), autoplay y controles.
   El texto del hero permanece estable; solo la imagen de fondo
   tiene una animación Ken Burns definida en animations.css.
   ========================================================= */

const NovaSlider = (() => {
  const banners = [
    {
      imagen: "assets/banners/hero-tecnologia.png",
      eyebrow: "Colección 2026",
      titulo: "El futuro cabe en tu bolsillo",
      subtitulo: "Tecnología de punta seleccionada para acompañar tu ritmo de vida.",
      cta: "Ver tecnología",
      link: "productos.html?categoria=tecnologia",
    },
    {
      imagen: "assets/banners/hero-gaming.png",
      eyebrow: "Setup gamer",
      titulo: "Juega en otro nivel",
      subtitulo: "Periféricos, sillas y monitores para dominar cada partida.",
      cta: "Ver gaming",
      link: "productos.html?categoria=gaming",
    },
    {
      imagen: "assets/banners/hero-moda.png",
      eyebrow: "Nueva temporada",
      titulo: "Tu estilo, sin límites",
      subtitulo: "Prendas streetwear pensadas para moverte con actitud.",
      cta: "Ver moda",
      link: "productos.html?categoria=moda",
    },
    {
      imagen: "assets/banners/hero-calzado.png",
      eyebrow: "Hasta 30% off",
      titulo: "Pisa fuerte esta semana",
      subtitulo: "Zapatillas y botines con envío gratis desde S/99.",
      cta: "Ver calzado",
      link: "productos.html?categoria=calzado",
    },
    {
      imagen: "assets/banners/hero-hogar.png",
      eyebrow: "Vive mejor",
      titulo: "Tu espacio, tu energía",
      subtitulo: "Todo lo que necesitas para un hogar inteligente y cálido.",
      cta: "Ver hogar",
      link: "productos.html?categoria=hogar",
    },
  ];

  let indice = 0;
  let intervalo = null;

  function render() {
    const track = document.querySelector("[data-hero-track]");
    const dotsWrap = document.querySelector("[data-hero-dots]");
    if (!track) return;

    track.innerHTML = banners
      .map(
        (b, i) => `
      <div class="hero-slide ${i === 0 ? "is-active" : ""}" data-slide="${i}">
        <div class="hero-slide-media" style="background-image: url('${b.imagen}')"></div>
        <div class="hero-content">
          <span class="hero-eyebrow hero-badge-float">${b.eyebrow}</span>
          <h1 class="hero-title">${b.titulo}</h1>
          <p class="hero-subtitle">${b.subtitulo}</p>
          <div class="hero-actions">
            <a href="${b.link}" class="btn btn-primary">${b.cta}</a>
            <a href="productos.html" class="btn btn-ghost" style="background: rgba(255,255,255,0.16); color:#fff;">Ver todo</a>
          </div>
        </div>
      </div>`
      )
      .join("");

    if (dotsWrap) {
      dotsWrap.innerHTML = banners
        .map((_, i) => `<button type="button" class="hero-dot ${i === 0 ? "is-active" : ""}" data-dot="${i}" aria-label="Ir al banner ${i + 1}"></button>`)
        .join("");
    }
  }

  function irA(nuevoIndice) {
    const slides = document.querySelectorAll("[data-slide]");
    const dots = document.querySelectorAll("[data-dot]");
    if (!slides.length) return;

    indice = (nuevoIndice + slides.length) % slides.length;
    slides.forEach((s) => s.classList.remove("is-active"));
    dots.forEach((d) => d.classList.remove("is-active"));
    slides[indice].classList.add("is-active");
    dots[indice]?.classList.add("is-active");
  }

  function autoplay() {
    detener();
    intervalo = setInterval(() => irA(indice + 1), 5500);
  }

  function detener() {
    if (intervalo) clearInterval(intervalo);
  }

  function initControles() {
    document.querySelector("[data-hero-next]")?.addEventListener("click", () => {
      irA(indice + 1);
      autoplay();
    });
    document.querySelector("[data-hero-prev]")?.addEventListener("click", () => {
      irA(indice - 1);
      autoplay();
    });
    document.querySelectorAll("[data-dot]").forEach((dot) => {
      dot.addEventListener("click", () => {
        irA(parseInt(dot.getAttribute("data-dot"), 10));
        autoplay();
      });
    });
  }

  function init() {
    if (!document.querySelector("[data-hero-track]")) return;
    render();
    initControles();
    autoplay();
  }

  return { init };
})();
