// Horarios + Galería + Sponsors + CTA final
const { useState } = React;

function Horarios() {
  // Horarios cargados por categoría desde el panel; si ninguna categoría
  // tiene horario definido, se muestra el cuadro general por defecto.
  const [filas, setFilas] = useState(null);
  React.useEffect(() => {
    if (!window.fcpbCatsFull) return;
    window.fcpbCatsFull().then((cats) => {
      const conHorario = cats.filter((c) => c.horario);
      if (conHorario.length) {
        setFilas(conHorario.map((c) => ({ cat: c.nombre, texto: c.horario })));
      }
    });
  }, []);

  const schedule = [
    { cat: "Todas", lun: "17:30", mar: "17:30", mie: "17:30", jue: "17:30", vie: "17:30", sab: "Partido" },
  ];

  if (filas) {
    return (
      <section id="horarios" className="section section-schedule">
        <div className="container">
          <Reveal>
            <div className="section-head">
              <div className="kicker">05 · Horarios</div>
              <h2 className="section-title">Cuando entrenamos.</h2>
              <p className="section-sub">Los días y horarios de cada categoría.</p>
            </div>
          </Reveal>
          <Reveal delay={100}>
            <div className="schedule-table">
              <div className="schedule-head" style={{ gridTemplateColumns: "160px 1fr" }}>
                <div>Categoría</div><div>Días y horario</div>
              </div>
              {filas.map((row) => (
                <div key={row.cat} className="schedule-row" style={{ gridTemplateColumns: "160px 1fr" }}>
                  <div className="schedule-cat">{row.cat}</div>
                  <div className="schedule-cell">{row.texto}</div>
                </div>
              ))}
            </div>
          </Reveal>
          <Reveal delay={180}>
            <div className="schedule-note">
              Entrenamos en <b>Cancha Norte FCPB</b>, Av. del Puerto 1450, Puerto Belgrano.
            </div>
          </Reveal>
        </div>
      </section>
    );
  }

  return (
    <section id="horarios" className="section section-schedule">
      <div className="container">
        <Reveal>
          <div className="section-head">
            <div className="kicker">05 · Horarios</div>
            <h2 className="section-title">Cuando entrenamos.</h2>
          </div>
        </Reveal>
        <Reveal delay={100}>
          <div className="schedule-table">
            <div className="schedule-head">
              <div>Categoría</div>
              <div>Lun</div><div>Mar</div><div>Mié</div><div>Jue</div><div>Vie</div><div>Dom</div>
            </div>
            {schedule.map(row => (
              <div key={row.cat} className="schedule-row">
                <div className="schedule-cat">{row.cat}</div>
                {["lun","mar","mie","jue","vie","sab"].map(d => (
                  <div key={d} className={`schedule-cell ${row[d] === '—' ? 'is-rest' : ''}`}>{row[d]}</div>
                ))}
              </div>
            ))}
          </div>
        </Reveal>
        <Reveal delay={180}>
          <div className="schedule-note">
            Entrenamos de <b>Lunes a Viernes</b> de <b>17:30 a 19:00 hs</b>.<br/>
            Entrenamos en <b>Cancha Norte FCPB</b>, Av. del Puerto 1450, Puerto Belgrano.
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Galeria() {
  // Fotos reales del club (en assets/galeria)
  const photos = [
    { src: "assets/galeria/cuerpo-tecnico.jpg", size: "tall", alt: "Cuerpo técnico del FCPB en la cancha" },
    { src: "assets/galeria/equipo-sub13.jpg", size: "wide", alt: "Plantel juvenil del FCPB antes del partido" },
    { src: "assets/galeria/jugadores-7-8.jpg", size: "sq", alt: "Jugadores del FCPB con la camiseta celeste" },
    { src: "assets/galeria/equipo-sub9.jpg", size: "wide", alt: "Equipo de las categorías menores del FCPB" },
  ];

  const [zoom, setZoom] = useState(null);

  return (
    <section id="galeria" className="section section-gallery">
      <div className="container">
        <Reveal>
          <div className="section-head section-head-row">
            <div>
              <div className="kicker">06 · Galería</div>
              <h2 className="section-title">Fotos<br/>del club.</h2>
            </div>
            <a className="btn-ghost" href="contacto.html">Sumate <span>→</span></a>
          </div>
        </Reveal>
        <div className="gallery-grid">
          {photos.map((p, i) => (
            <Reveal key={i} delay={i * 60} style={{ gridColumn: p.size === "wide" ? "span 2" : "span 1", gridRow: p.size === "tall" ? "span 2" : "span 1" }}>
              <button
                type="button"
                className="gal-cell"
                style={{ height: "100%", width: "100%", padding: 0, border: 0, cursor: "zoom-in", background: "none" }}
                onClick={() => setZoom(p)}
                aria-label={"Ampliar foto: " + p.alt}
              >
                <img src={p.src} alt={p.alt} loading="lazy" />
              </button>
            </Reveal>
          ))}
        </div>
      </div>

      {zoom && (
        <div className="gal-lightbox" onClick={() => setZoom(null)} role="dialog" aria-modal="true">
          <button className="gal-lightbox-x" onClick={() => setZoom(null)} aria-label="Cerrar"><i className="fa-solid fa-xmark" aria-hidden="true" /></button>
          <img src={zoom.src} alt={zoom.alt} onClick={(e) => e.stopPropagation()} />
        </div>
      )}
    </section>
  );
}

function Sponsors() {
  const sponsors = ["Puerto SA", "Ferretería Don Julio", "Panadería La Esquina", "Gomería El Puerto", "Heladería Sur", "Farmacia Central", "Supermercado Norte", "Autoservicio Naval"];
  return (
    <section className="section section-sponsors">
      <div className="container">
        <Reveal>
          <div className="kicker" style={{ textAlign: "center" }}>Sponsors & amigos del club</div>
          <div style={{ textAlign: "center", fontSize: 14, opacity: 0.6, marginTop: 8 }}>Los que hacen posible que ningún chico se quede afuera.</div>
        </Reveal>
        <Reveal delay={100}>
          <div className="sponsors-grid">
            {sponsors.map(s => (
              <div key={s} className="sponsor-item">{s}</div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function CTAFinal() {
  return (
    <section className="section section-cta">
      <div className="container">
        <Reveal>
          <div className="cta-box">
            <div className="cta-bg-ball" aria-hidden="true"><i className="fa-solid fa-futbol" /></div>
            <div className="kicker" style={{ color: "rgba(255,255,255,0.7)" }}>Temporada 2026</div>
            <h2 className="cta-title">¿Listos para<br/>empezar a jugar?</h2>
            <p className="cta-lede">
              Inscripciones abiertas hasta el 15 de marzo. Primera clase de prueba gratuita para todos.
            </p>
            <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap", marginTop: 28 }}>
              <a href="inscripcion.html" className="btn-primary">Inscribirme ahora <span>→</span></a>
              <a href="contacto.html" className="btn-ghost btn-ghost-on-dark">Tengo dudas</a>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Horarios, Galeria, Sponsors, CTAFinal });