// FCPB Home - Hero + Valores + Categorías carousel + Partidos/Calendar + Galería + Sponsors
const { useState, useEffect, useRef } = React;

// La marquesina vive en shell.jsx (window.Marquesina) porque se usa en
// todas las páginas, no sólo en la home.
const Marquesina = window.Marquesina;

// ---------------- Tarjeta del próximo partido ----------------
// Toma el primer partido programado desde hoy (api/partidos.php).
// Si no hay partidos cargados, invita a inscribirse en vez de mostrar
// datos inventados.
function ProximoPartidoCard() {
  const [p, setP] = useState(null);
  const [cargando, setCargando] = useState(true);

  useEffect(() => {
    fetch("api/partidos.php", { headers: { Accept: "application/json" } })
      .then((r) => (r.ok ? r.json() : Promise.reject()))
      .then((j) => {
        if (!j || !j.ok || !Array.isArray(j.partidos)) return;
        const hoy = new Date();
        const key = `${hoy.getFullYear()}-${String(hoy.getMonth() + 1).padStart(2, "0")}-${String(hoy.getDate()).padStart(2, "0")}`;
        const prox = j.partidos
          .filter((x) => x.estado !== "finalizado" && x.fecha >= key)
          .sort((a, b) => (a.fecha + (a.hora || "")).localeCompare(b.fecha + (b.hora || "")))[0];
        if (prox) setP(prox);
      })
      .catch(() => {})
      .finally(() => setCargando(false));
  }, []);

  if (cargando) {
    return (
      <div className="home-hero-next-card">
        <div className="kicker">Próximo partido</div>
        <div className="hnc-title" style={{ opacity: 0.35 }}>Cargando…</div>
      </div>
    );
  }

  if (!p) {
    return (
      <div className="home-hero-next-card">
        <div className="kicker">Próximo partido</div>
        <div className="hnc-title">Agenda en armado</div>
        <div className="hnc-sub">Pronto publicamos el calendario de la temporada.</div>
        <div style={{ display: "flex", gap: 6, marginTop: 12 }}>
          <a href="inscripcion.html" className="tag tag-yellow" style={{ textDecoration: "none" }}>SUMATE AL CLUB</a>
        </div>
      </div>
    );
  }

  const d = new Date(p.fecha + "T12:00");
  const dias = ["Dom", "Lun", "Mar", "Mié", "Jue", "Vie", "Sáb"];
  const meses = ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"];
  const cuando = `${dias[d.getDay()]} ${d.getDate()} ${meses[d.getMonth()]}` +
    (p.hora && p.hora !== "—" ? ` · ${p.hora}hs` : "") +
    (p.sede ? ` · ${p.sede}` : "");

  return (
    <div className="home-hero-next-card">
      <div className="kicker">Próximo partido</div>
      <div className="hnc-title">
        {p.es_local ? `FCPB vs. ${p.rival}` : `${p.rival} vs. FCPB`}
      </div>
      <div className="hnc-sub">{cuando}</div>
      <div style={{ display: "flex", gap: 6, marginTop: 12, flexWrap: "wrap" }}>
        {p.categoria && <span className="tag tag-yellow">{p.categoria.toUpperCase()}</span>}
        <span className="tag tag-navy">{p.es_local ? "LOCAL" : "VISITANTE"}</span>
      </div>
    </div>
  );
}

// ---------------- HERO ----------------
const MOSTRAR_STATS_HERO = false;

function HomeHero() {
  // Contadores reales del club (fallback a los valores por defecto)
  const [stats, setStats] = useState({});
  useEffect(() => {
    if (window.fcpbStats) window.fcpbStats().then(setStats);
  }, []);
  return (
    <section className="home-hero">
      <div className="home-hero-grid container">
        <div className="home-hero-left">
          <Reveal>
            <div className="chip">
              <span className="chip-dot" />
              Inscripción Temporada 2026 abierta
            </div>
          </Reveal>
          <Reveal delay={80}>
            <h1 className="home-hero-title">
              Acá empieza<br/>tu <em>sueño.</em>
            </h1>
          </Reveal>
          <Reveal delay={160}>
            <p className="home-hero-lede">
              Escuela de fútbol infantil y juvenil en el corazón de Puerto Belgrano.
              Formamos jugadores, pero sobre todo, formamos personas.
            </p>
          </Reveal>
          <Reveal delay={220}>
            <div className="home-hero-ctas">
              <a href="inscripcion.html" className="btn-primary">Inscribí a tu hijo/a <span>→</span></a>
              <a href="#valores" className="btn-ghost">▶ Conocé el club</a>
            </div>
          </Reveal>
          {MOSTRAR_STATS_HERO && (
            <Reveal delay={300}>
              <div className="home-hero-stats">
                {[
                  { n: stats.jugadores || 217, s: "Jugadores" },
                  { n: stats.categorias || 6, s: "Categorías" },
                  { n: 38, s: "Años" },
                  { n: stats.entrenadores || 14, s: "Entrenadores" },
                ].map(x => (
                  <div className="home-hero-stat" key={x.s}>
                    <div className="home-hero-stat-n"><CountUp to={x.n} /></div>
                    <div className="home-hero-stat-s">{x.s}</div>
                  </div>
                ))}
              </div>
            </Reveal>
          )}
        </div>
        <div className="home-hero-right">
          <Reveal delay={150}>
            <div className="home-hero-photo">
              <img src="assets/hero-cancha.jpg" alt="Atardecer en la cancha del FCPB, con la pelota del club sobre el césped" fetchpriority="high" />
              <div className="home-hero-photo-meta">
                <span>★</span> FCPB · Puerto Belgrano
              </div>
            </div>
          </Reveal>
          <Reveal delay={280}>
            <ProximoPartidoCard />
          </Reveal>
        </div>
      </div>

      <Marquesina />
    </section>
  );
}

// ---------------- VALORES ----------------
function Valores() {
  const items = [
    {
      n: "01",
      t: "Todos juegan",
      d: "No se arma un equipo 'A'. Acá todos los chicos participan, rotan y cometen errores. Es así como se aprende a jugar.",
      icon: "fa-futbol"
    },
    {
      n: "02",
      t: "Respeto primero",
      d: "Al compañero, al rival, al árbitro y al club. Si hay que elegir entre ganar y faltar el respeto, no se duda.",
      icon: "fa-handshake"
    },
    {
      n: "03",
      t: "Familia que acompaña",
      d: "Los papás y las mamás son parte del equipo. Los invitamos a entrenar con los chicos una vez al mes.",
      icon: "fa-people-roof"
    },
    {
      n: "04",
      t: "La pelota enseña",
      d: "Técnica y táctica sí, pero también paciencia, frustración, victoria y derrota. El fútbol es una escuela de la vida.",
      icon: "fa-brain"
    },
  ];
  return (
    <section id="valores" className="section section-valores">
      <div className="container">
        <Reveal>
          <div className="section-head">
            <div className="kicker">01 · Filosofía</div>
            <h2 className="section-title">Formamos jugadores.<br/><em>Y personas.</em></h2>
          </div>
        </Reveal>
        <div className="valores-grid">
          {items.map((v, i) => (
            <Reveal key={v.n} delay={i * 80}>
              <div className="valor-card">
                <div className="valor-n">{v.n}</div>
                <div className="valor-icon"><i className={`fa-solid ${v.icon}`} aria-hidden="true" /></div>
                <h3 className="valor-t">{v.t}</h3>
                <p className="valor-d">{v.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

window.HomeHero = HomeHero;
window.Valores = Valores;