/* =========================================================
   CONFIGURACIÓN — lo único que TIENES que editar
========================================================= */

// Tu número de WhatsApp en formato internacional, SIN el "+",
// sin espacios y sin guiones. Ejemplo Chile: 56 9 1234 5678 -> "56912345678"
const WHATSAPP_NUMERO = "569XXXXXXXX"; // <-- reemplaza esto por tu número real

// Tu usuario de Instagram (ya se usa directamente en el HTML,
// lo dejamos acá también por si lo quieres usar en más lugares)
const INSTAGRAM_USUARIO = "bicius";


/* =========================================================
   1. MENÚ MÓVIL (hamburguesa)
   Buscamos los dos elementos en el HTML por su id y les
   agregamos un "escuchador de eventos" (event listener) que
   reacciona cuando el usuario hace clic.
========================================================= */
const menuToggle = document.getElementById("menuToggle");
const nav = document.getElementById("nav");

menuToggle.addEventListener("click", () => {
  // .toggle() agrega la clase si no está, y la quita si ya está.
  const abierto = nav.classList.toggle("is-open");
  menuToggle.classList.toggle("is-active");

  // Accesibilidad: le decimos a lectores de pantalla si el menú
  // está abierto o cerrado.
  menuToggle.setAttribute("aria-expanded", abierto);
});

// Si el usuario hace clic en un link del menú (en celular),
// cerramos el menú automáticamente para que no quede abierto.
document.querySelectorAll(".nav__link").forEach((link) => {
  link.addEventListener("click", () => {
    nav.classList.remove("is-open");
    menuToggle.classList.remove("is-active");
    menuToggle.setAttribute("aria-expanded", "false");
  });
});


/* =========================================================
   2. BOTONES "COMPRAR POR WHATSAPP"
   En vez de escribir el link a mano en cada botón del HTML,
   lo armamos aquí con JavaScript. Así, si cambias el número de
   WhatsApp arriba, se actualiza en TODOS los botones a la vez.
========================================================= */
const botonesWhatsapp = document.querySelectorAll(".js-whatsapp");

botonesWhatsapp.forEach((boton) => {
  boton.addEventListener("click", (evento) => {
    evento.preventDefault(); // evita que el link "#" haga scroll raro

    const producto = boton.dataset.producto; // viene de data-producto="..."
    const precio = boton.dataset.precio;      // viene de data-precio="..."

    let mensaje = "Hola BICIUS! Quiero hacer un pedido de la primera colección.";
    if (producto) {
      mensaje = `Hola BICIUS! Me interesa el poleron "${producto}" (${precio}). ¿Está disponible?`;
    }

    // encodeURIComponent convierte espacios, tildes y símbolos
    // en un formato válido para usar dentro de una URL.
    const url = `https://wa.me/${WHATSAPP_NUMERO}?text=${encodeURIComponent(mensaje)}`;

    window.open(url, "_blank");
  });
});


/* =========================================================
   3. ANIMACIÓN AL HACER SCROLL
   IntersectionObserver "observa" elementos y nos avisa cuando
   entran o salen de la pantalla, sin que tengamos que calcular
   posiciones de scroll a mano.
========================================================= */
const elementosParaRevelar = document.querySelectorAll(".reveal");

const observador = new IntersectionObserver(
  (entradas) => {
    entradas.forEach((entrada) => {
      if (entrada.isIntersecting) {
        entrada.target.classList.add("is-visible");
        observador.unobserve(entrada.target); // ya apareció, dejamos de observarlo
      }
    });
  },
  { threshold: 0.15 } // se activa cuando el 15% del elemento es visible
);

elementosParaRevelar.forEach((el) => observador.observe(el));


/* =========================================================
   4. AÑO AUTOMÁTICO EN EL FOOTER
   Así nunca tienes que acordarte de actualizar el "© 2026"
   a mano el próximo año.
========================================================= */
document.getElementById("year").textContent = new Date().getFullYear();