// Categories carousel — la lista viva sale del backend (api/categorias.php)
// con fallback a los datos por defecto si la API no responde.
const { useState, useEffect, useRef } = React;

const DEFAULT_CATEGORIES = [
{ age: "Sub-7", years: "5 – 7 años", desc: "Primeros contactos con la pelota. Juego libre, motricidad, hacer amigos.", color: "#4FB8E6", students: 28, coach: "Prof. Marian Di Paola", schedule: "Mar · Jue  17:00–18:00", photo: "https://images.unsplash.com/photo-1624880357913-a8539238245b?w=800&auto=format&fit=crop&q=80" },
{ age: "Sub-9", years: "7 – 9 años", desc: "Técnica individual, pase, conducción. Festivales los sábados.", color: "#4FB8E6", students: 34, coach: "Prof. Luis Fernández", schedule: "Lun · Mié · Vie  17:00–18:30", photo: "https://images.unsplash.com/photo-1459865264687-595d652de67e?w=800&auto=format&fit=crop&q=80" },
{ age: "Sub-11", years: "9 – 11 años", desc: "Juego en espacios reducidos, roles, primeros torneos oficiales.", color: "#1D4ED8", students: 30, coach: "Prof. Carolina Vera", schedule: "Lun · Mié · Vie  17:30–19:00", photo: "https://images.unsplash.com/photo-1431324155629-1a6deb1dec8d?w=800&auto=format&fit=crop&q=80" },
{ age: "Sub-13", years: "11 – 13 años", desc: "Fútbol 11. Táctica básica, preparación física inicial.", color: "#0B2545", students: 26, coach: "Prof. Maxi Torres", schedule: "Mar · Jue · Vie  18:00–19:30", photo: "https://images.unsplash.com/photo-1522778034537-20a2486be803?w=800&auto=format&fit=crop&q=80" },
{ age: "Sub-15", years: "13 – 15 años", desc: "Competencia regional, identidad de juego, responsabilidad.", color: "#4FB8E6", students: 24, coach: "Prof. Daniel Arce", schedule: "Lun · Mié · Vie  18:30–20:00", photo: "https://images.unsplash.com/photo-1517466787929-bc90951d0974?w=800&auto=format&fit=crop&q=80" },
{ age: "Sub-17", years: "15 – 17 años", desc: "Pre-competencia, proyección, acompañamiento integral.", color: "#A7DCF5", students: 22, coach: "Prof. Rodrigo Pérez", schedule: "Lun · Mié · Vie  19:00–20:30", photo: "https://images.unsplash.com/photo-1551958219-acbc608c6377?w=800&auto=format&fit=crop&q=80" }];

// Lista rica sincronizada con el backend: cada campo cargado desde el panel
// (edades, descripción, entrenador, horario, foto, color) pisa el contenido
// por defecto del sitio; lo vacío conserva la ficha original. Las categorías
// nuevas reciben una tarjeta genérica. Respeta orden y bajas del panel.
window.fcpbCatsRich = function () {
  const porNombre = {};
  DEFAULT_CATEGORIES.forEach((c) => { porNombre[c.age] = c; });
  const generica = (n) => ({
    age: n, years: "", color: "#1D4ED8", students: "—",
    coach: "A confirmar", schedule: "A confirmar",
    desc: "Nueva categoría del club. Escribinos para conocer horarios y detalles.",
    photo: "https://images.unsplash.com/photo-1431324155629-1a6deb1dec8d?w=800&auto=format&fit=crop&q=80",
  });
  if (!window.fcpbCatsFull) return Promise.resolve(DEFAULT_CATEGORIES);
  return window.fcpbCatsFull().then((lista) => lista.map((b) => {
    const base = porNombre[b.nombre] || generica(b.nombre);
    return {
      age: b.nombre,
      years: b.edades || base.years,
      desc: b.descripcion || base.desc,
      coach: b.entrenador || base.coach,
      schedule: b.horario || base.schedule,
      photo: b.foto_url || base.photo,
      color: b.color || base.color,
      students: (b.jugadores != null && b.jugadores > 0) ? b.jugadores : base.students,
    };
  })).catch(() => DEFAULT_CATEGORIES);
};

function CategoriasCarousel() {
  const scrollerRef = useRef(null);
  const [index, setIndex] = useState(0);
  const [cats, setCats] = useState(DEFAULT_CATEGORIES);

  useEffect(() => {
    window.fcpbCatsRich().then(setCats);
  }, []);

  const scrollTo = (i) => {
    const el = scrollerRef.current;
    if (!el) return;
    const card = el.children[i];
    if (card) {
      el.scrollTo({ left: card.offsetLeft - 32, behavior: 'smooth' });
    }
    setIndex(i);
  };

  const next = () => scrollTo(Math.min(index + 1, cats.length - 1));
  const prev = () => scrollTo(Math.max(index - 1, 0));

  useEffect(() => {
    const el = scrollerRef.current;
    if (!el) return;
    const onScroll = () => {
      const kids = Array.from(el.children);
      const scrollLeft = el.scrollLeft + 40;
      let i = 0;
      for (let j = 0; j < kids.length; j++) {
        if (kids[j].offsetLeft <= scrollLeft + 20) i = j;
      }
      setIndex(i);
    };
    el.addEventListener('scroll', onScroll, { passive: true });
    return () => el.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <section id="categorias" className="section section-cats">
      <div className="container">
        <Reveal>
          <div className="section-head section-head-row">
            <div>
              <div className="kicker">02 · Categorías</div>
              <h2 className="section-title">Desde los 3 años<br />hasta los 17.</h2>
            </div>
            <div className="cats-actions">
              <button className="arrow-btn" onClick={prev} aria-label="Anterior" disabled={index === 0}>←</button>
              <button className="arrow-btn" onClick={next} aria-label="Siguiente" disabled={index === cats.length - 1}>→</button>
              <a href="categorias.html" className="btn-ghost" style={{ marginLeft: 12 }}>Ver todas <span>→</span></a>
            </div>
          </div>
        </Reveal>
        <div className="cats-scroll" ref={scrollerRef}>
          {cats.map((c, i) =>
          <div key={c.age} className="cat-card" style={{ "--accent": c.color }}>
              <div className="cat-photo">
                <img src={c.photo} alt={c.age} />
                <div className="cat-age-badge">{c.age}</div>
              </div>
              <div className="cat-body">
                <div className="cat-years">{c.years}</div>
                <h3 className="cat-title">{c.age}</h3>
                <p className="cat-desc">{c.desc}</p>
                {/* El horario vive en la sección Horarios, para no repetirlo */}
                <div className="cat-meta">
                  <div><span className="cat-meta-label">Jugadores</span><span className="cat-meta-val">{c.students}</span></div>
                  <div><span className="cat-meta-label">A cargo</span><span className="cat-meta-val">{c.coach}</span></div>
                  <div><span className="cat-meta-label">Horarios</span><span className="cat-meta-val"><a href="#horarios" style={{ color: "var(--royal)" }}>Ver cuadro →</a></span></div>
                </div>
              </div>
            </div>
          )}
        </div>
        <div className="cats-dots">
          {cats.map((_, i) =>
          <button key={i} className={`cats-dot ${i === index ? 'is-active' : ''}`} onClick={() => scrollTo(i)} aria-label={`Ir a ${i + 1}`} />
          )}
        </div>
      </div>
    </section>);

}

window.CategoriasCarousel = CategoriasCarousel;
window.FCPB_CATEGORIES = DEFAULT_CATEGORIES;