/* === Kids Kingdom — Gallery Carousel V2 === */
const { useState, useEffect, useRef } = React;

function GaleriaCarrusel() {
  const slides = [
    { src: (window.KK_IMAGES || "static/images/") + "fachada-castillo.jpg",   t: "Nuestro castillo",            c: "El lugar donde tus hijos llegarán cada mañana con una sonrisa.",          tag: "Fachada" },
    { src: (window.KK_IMAGES || "static/images/") + "fachada-completa.jpg",   t: "Frente del reino",            c: "Un castillo de verdad — donde la imaginación comienza desde la fachada.", tag: "Fachada" },
    { src: (window.KK_IMAGES || "static/images/") + "fachada-logo.jpg",       t: "La entrada al reino",         c: "Aquí comienzan las grandes aventuras de cada día.",                       tag: "Fachada" },
    { src: (window.KK_IMAGES || "static/images/") + "welcome-castle.jpg",     t: "Welcome to our Castle",       c: "Te damos la bienvenida con los brazos abiertos.",                          tag: "Murales" },
    { src: (window.KK_IMAGES || "static/images/") + "logo-puerta.jpg",        t: "Where playing is learning",   c: "Nuestra filosofía: aprender jugando, crecer siendo.",                      tag: "Identidad" },
    { src: (window.KK_IMAGES || "static/images/") + "recepcion-arbol.jpg",    t: "Árbol del recibimiento",      c: "Un espacio cálido para empezar el día con confianza.",                     tag: "Recepción" },
    { src: (window.KK_IMAGES || "static/images/") + "mesas-triangulares.jpg", t: "Aula de exploración",         c: "Salones llenos de color donde nacen las mejores ideas.",                   tag: "Aulas" },
    { src: (window.KK_IMAGES || "static/images/") + "aula-azul-purpura.jpg",  t: "Salones temáticos",           c: "Ambientes que despiertan la curiosidad en cada esquina.",                  tag: "Aulas" },
    { src: (window.KK_IMAGES || "static/images/") + "cocina-juego.jpg",       t: "Creatividad presente",        c: "Cocinar, vender, soñar: jugar es la mejor manera de aprender.",            tag: "Creatividad" },
    { src: (window.KK_IMAGES || "static/images/") + "kids-kiosk.jpg",         t: "Kids Kingdom Market",         c: "Un mercado del reino para descubrir nuevos roles y oficios.",              tag: "Creatividad" },
    { src: (window.KK_IMAGES || "static/images/") + "sala-mesas.jpg",         t: "Mesas del consejo",           c: "Pequeños grupos, grandes aprendizajes.",                                   tag: "Aulas" },
    { src: (window.KK_IMAGES || "static/images/") + "sala-imaginacion.jpg",   t: "Let your imagination grow",   c: "Espacios amplios para correr, saltar y crear sin límites.",                tag: "Juego" },
    { src: (window.KK_IMAGES || "static/images/") + "pasillo-arcoiris.jpg",   t: "Baños para niños",            c: "Pensados a su medida, para que ganen autonomía con seguridad.",            tag: "Servicios" },
  ];
  const [i, setI] = useState(0);
  const [auto, setAuto] = useState(true);
  const stripRef = useRef(null);

  const next = () => setI((p) => (p + 1) % slides.length);
  const prev = () => setI((p) => (p - 1 + slides.length) % slides.length);
  const go   = (n) => { setI(n); setAuto(false); };

  // Auto-advance
  useEffect(() => {
    if (!auto) return;
    const id = setInterval(next, 4500);
    return () => clearInterval(id);
  }, [auto, i]);

  // Scroll thumbnail strip horizontally to keep active visible (sin afectar la página)
  useEffect(() => {
    if (!stripRef.current) return;
    const strip = stripRef.current;
    const el = strip.querySelector(`[data-idx="${i}"]`);
    if (!el) return;
    const target = el.offsetLeft - (strip.clientWidth / 2) + (el.clientWidth / 2);
    strip.scrollTo({ left: Math.max(0, target), behavior: "smooth" });
  }, [i]);

  // Keyboard navigation — solo cuando el carrusel es visible en pantalla
  const wrapRef = useRef(null);
  useEffect(() => {
    const onKey = (e) => {
      if (!wrapRef.current) return;
      const r = wrapRef.current.getBoundingClientRect();
      const visible = r.top < window.innerHeight * 0.6 && r.bottom > window.innerHeight * 0.4;
      if (!visible) return;
      if (e.key === "ArrowRight") { next(); setAuto(false); }
      if (e.key === "ArrowLeft")  { prev(); setAuto(false); }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  // Touch / swipe
  const touch = useRef({ x: 0 });
  const onTS = (e) => { touch.current.x = e.touches[0].clientX; };
  const onTE = (e) => {
    const dx = e.changedTouches[0].clientX - touch.current.x;
    if (Math.abs(dx) > 50) {
      dx < 0 ? next() : prev();
      setAuto(false);
    }
  };

  const cur = slides[i];
  const prevIdx = (i - 1 + slides.length) % slides.length;
  const nextIdx = (i + 1) % slides.length;

  return (
    <section id="galeria" className="kk-section">
      <div className="carousel-head">
        <div>
          <span className="kk-eyebrow reveal">Recorre el reino</span>
          <h2 className="kk-h2 reveal reveal-d1" style={{margin: "16px 0 12px"}}>
            Cada rincón fue pensado para{" "}
            <span style={{color: "var(--kk-green)", fontStyle:"italic"}}>despertar</span>.
          </h2>
          <p className="kk-sub reveal reveal-d2">
            Conoce nuestro castillo: la fachada, los pasillos, las aulas y los
            espacios sensoriales donde los niños viven sus aventuras.
          </p>
        </div>
        <div className="carousel-counter reveal reveal-d3">
          <span className="num">{String(i + 1).padStart(2, "0")}</span>
          <span className="sep">/</span>
          <span className="tot">{String(slides.length).padStart(2, "0")}</span>
        </div>
      </div>

      <div
        className="carousel reveal"
        ref={wrapRef}
        onMouseEnter={() => setAuto(false)}
        onMouseLeave={() => setAuto(true)}
        onTouchStart={onTS}
        onTouchEnd={onTE}
      >
        {/* Side peek prev */}
        <div className="peek peek-prev" onClick={() => { prev(); setAuto(false); }} aria-hidden>
          <img src={slides[prevIdx].src} alt="" loading="lazy" decoding="async"/>
        </div>

        {/* Main slide */}
        <div className="slide-main" key={i}>
          <img src={cur.src} alt={cur.t} decoding="async"/>
          <div className="slide-overlay"/>
          <div className="slide-info">
            <span className="slide-tag">{cur.tag}</span>
            <h3>{cur.t}</h3>
            <p>{cur.c}</p>
          </div>
          <button className="ctrl prev" onClick={() => { prev(); setAuto(false); }} aria-label="Anterior">
            <Icon.Arrow size={20} c="#fff"/>
          </button>
          <button className="ctrl next" onClick={() => { next(); setAuto(false); }} aria-label="Siguiente">
            <Icon.Arrow size={20} c="#fff"/>
          </button>
        </div>

        {/* Side peek next */}
        <div className="peek peek-next" onClick={() => { next(); setAuto(false); }} aria-hidden>
          <img src={slides[nextIdx].src} alt="" loading="lazy" decoding="async"/>
        </div>
      </div>

      {/* Thumbnail strip */}
      <div className="carousel-strip" ref={stripRef}>
        {slides.map((s, idx) => (
          <button
            key={idx}
            data-idx={idx}
            className={"thumb " + (i === idx ? "active" : "")}
            onClick={() => go(idx)}
            aria-label={s.t}
          >
            <img src={s.src} alt={s.t} loading="lazy" decoding="async"/>
            <span className="thumb-label">{s.tag}</span>
          </button>
        ))}
      </div>

      {/* Progress bar */}
      <div className="carousel-progress">
        <span style={{width: `${((i + 1) / slides.length) * 100}%`}}/>
      </div>
    </section>
  );
}

Object.assign(window, { GaleriaCarrusel });