// Sections.jsx — Hero, Nuestra Historia, Stats
const HERO_FOTO = 'img/fotos/portada.jpg?v=2';

function Hero({ onLiga }) {
  const p = window.JBN_DATA.proximoPartido;
  return (
    <>
      <section id="top" className="hero" style={{backgroundImage:`url(${HERO_FOTO})`}}>
        <div className="hero-overlay"/>
        <div className="wrap hero-content">
          <div className="hero-news">
            <span className="hero-news-dot"></span>
            <span>TEMPORADA 2026 · La pelota empieza a rodar — debut vs {p.rival}</span>
          </div>
          <div className="hero-tag">FÚTBOL AMATEUR · TEMUCO + SANTIAGO · DESDE 2012</div>
          <h1 className="hero-title">
            VOLVEMOS<br/>
            A LA <em>cancha.</em>
          </h1>
          <div className="hero-sub">No te lo pierdas —</div>
          <div className="hero-meta">
            <div className="hero-meta-cell">
              <div className="label">PRÓXIMO PARTIDO</div>
              <div className="v">{p.label} · {p.hora}</div>
            </div>
          </div>
        </div>
      </section>

      {/* Match strip: J watermark + partido info + citados */}
      <div className="match-strip">
        <div className="wrap" style={{position:'relative'}}>
          <img src="img/j-oficial.png" className="match-j-bg" aria-hidden="true" alt=""/>
          <div className="match-strip-grid2">

            {/* Izquierda: partido + links */}
            <div className="match-cell">
              <div className="label">PRÓXIMO PARTIDO</div>
              <div className="v">{p.dia || p.label}</div>
              <div className="meta">{p.hora} HS · {p.label}</div>
              <div className="match-vs-compact">
                <span className="mvs-team mvs-jebano">JEBAÑO FC</span>
                <span className="mvs-sep">vs</span>
                <span className="mvs-team">{p.rival}</span>
              </div>
              <div className="match-links">
                <button className="match-link" onClick={() => onLiga('tabla')}>Tabla de la liga →</button>
                <button className="match-link" onClick={() => onLiga('resultados')}>Últimos resultados →</button>
              </div>
            </div>

            {/* Derecha: citados */}
            <div className="match-cell match-citados-cell">
              <div className="label">CITADOS · {p.label}</div>
              <div className="citados-grid">
                {(p.citados || []).map((n, i) => (
                  <div key={i} className="citado">
                    <span className="citado-n">{String(i + 1).padStart(2, '0')}</span>
                    <span className="citado-name">{n}</span>
                  </div>
                ))}
              </div>
            </div>

          </div>
        </div>
      </div>
    </>
  );
}

const EQUIPO_FOTOS = [
  'img/fotos/equipo_484069112_1220775396717978_6934512139761730203_n.jpg',
  'img/fotos/equipo_484329678_1220775500051301_6176792128340786838_n.jpg',
  'img/fotos/equipo_486502780_1229932952468889_7255520309651737121_n.jpg',
  'img/fotos/equipo_502547152_4079845228970174_8668971330912896903_n.jpg',
  'img/fotos/equipo_505586724_3132751506872835_8854834265760506467_n.jpg',
  'img/fotos/equipo_507086420_10045130238880486_3747584431615236380_n.jpg',
  'img/fotos/equipo_509250499_10064678900258953_3233379529537814823_n.jpg',
  'img/fotos/equipo_510597438_10099462403447269_5540760572293090064_n.jpg',
  'img/fotos/equipo_513042200_10033748683360539_3723353662858350141_n.jpg',
  'img/fotos/equipo_517594149_10237413012042655_2477791673889875934_n.jpg',
  'img/fotos/equipo_518326751_10237837398572031_6109392824615131915_n.jpg',
  'img/fotos/equipo_518340449_10237734980051632_4800749450256491289_n.jpg',
  'img/fotos/equipo_519008687_10237940764356111_5445688681159787586_n.jpg',
  'img/fotos/equipo_WhatsApp_Image_2026_04_01_at_11.17.38_3_.jpeg',
  'img/fotos/equipo_WhatsApp_Image_2026_04_01_at_11.21.49.jpeg',
  'img/fotos/equipo_WhatsApp_Image_2026_04_01_at_21.14.47.jpeg',
  'img/fotos/equipo_WhatsApp_Image_2026_04_02_at_06.29.53_1_.jpeg',
  'img/fotos/equipo_WhatsApp_Image_2026_04_02_at_06.29.53_2_.jpeg',
  'img/fotos/equipo_WhatsApp_Image_2026_04_02_at_06.29.53_3_.jpeg',
  'img/fotos/equipo_WhatsApp_Image_2026_04_02_at_06.29.53.jpeg',
  'img/fotos/equipo_WhatsApp_Image_2026_04_04_at_00.56.01_1_.jpeg',
  'img/fotos/equipo_WhatsApp_Image_2026_04_04_at_00.56.12_1_.jpeg',
  'img/fotos/equipo_461992543_8246883488764480_8745415170520149411_n.png',
].map(p => p + '?v=2');

function ManifiestoSlideshow() {
  const [cur, setCur] = React.useState(0);
  const [shown, setShown] = React.useState(true);

  React.useEffect(() => {
    const t = setInterval(() => {
      setShown(false);
      setTimeout(() => {
        setCur(i => (i + 1) % EQUIPO_FOTOS.length);
        setShown(true);
      }, 700);
    }, 4000);
    return () => clearInterval(t);
  }, []);

  return (
    <div className="manifiesto-foto-wrap">
      <img
        src={EQUIPO_FOTOS[cur]}
        alt="Jebaño FC"
        className="manifiesto-foto"
        style={{opacity: shown ? 1 : 0, transition: 'opacity .7s ease'}}
      />
    </div>
  );
}

function Manifiesto() {
  const principios = [
    { n: '01', titulo: 'COMPAÑERISMO', desc: 'Nos conocemos hace más de una década. El partido es una excusa para seguir juntos.' },
    { n: '02', titulo: 'GARRA',        desc: 'La J no se pone, se gana. Se defiende cancha a cancha, partido a partido.' },
    { n: '03', titulo: 'SUR',          desc: 'De Temuco venimos. Ese sur está en la camiseta, en la cancha, en cada asado.' },
    { n: '04', titulo: 'AMOR',         desc: 'No nos pagan, no nos ficharon. Elegimos estar. Eso vale más que cualquier título.' },
  ];
  return (
    <section id="club" className="manifiesto">
      <div className="wrap">
        <div className="section-tag">
          <span className="num">01</span>
          <span>EL CLUB · NUESTRA HISTORIA</span>
          <span className="rule"></span>
        </div>

        <div className="manifiesto-grid">
          <ManifiestoSlideshow/>
          <div className="manifiesto-prose">
            <p className="lead">Jebaño FC nació en 2012, como nacen los equipos que de verdad duran: de un grupo de amigos de Temuco que llegó a Santiago, pero nunca dejó de encontrarse. La cancha fue el punto de reunión. Y hasta hoy, lo sigue siendo.</p>
            <p>La historia de este club se explica en algo muy profundo: la necesidad de seguir perteneciendo. En volver a verse. En seguir sintiendo, aunque sea por un rato, que el sur nunca quedó tan lejos.</p>
            <p>La épica de Jebaño FC no está en los títulos, está en su mística. En ser el lugar donde los temuquenses que la vida trajo a Santiago vuelven a encontrarse alrededor de una pelota. No todos han sido de Temuco, es cierto, pero todos entienden rápido de qué se trata. Porque esta camiseta contagia algo más que fútbol.</p>
            <p>No somos un club. Somos un grupo de amigos que juega a serlo, y lo hace en serio.</p>
            <div className="manifiesto-sig">— Jebaño FC, fundado en 2012 · Temuco / Santiago</div>
          </div>
        </div>

        <div className="principios-grid">
          {principios.map((p, i) => (
            <div key={i} className="principio-item">
              <div style={{
                fontFamily:"'Bebas Neue', var(--f-display), sans-serif",
                fontStyle:'italic',
                fontWeight:900,
                fontSize:42,
                lineHeight:.9,
                textTransform:'uppercase',
                letterSpacing:'-.02em',
                color:'var(--copihue)',
                marginBottom:10
              }}>{p.titulo}</div>
              <div style={{
                fontFamily:'var(--f-body)',
                fontSize:14,
                lineHeight:1.6,
                color:'var(--fg2)'
              }}>{p.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Stats() {
  const total = window.JBN_DATA.actuales.length + window.JBN_DATA.historicos.length;
  const stats = [
    { v: '2012', em: '',        label: 'FUNDACIÓN',        desc: 'Temuco. Un grupo de amigos.' },
    { v: '14',   em: 'años',    label: 'EN CANCHA',        desc: 'Doce torneos, una identidad.' },
    { v: total + '+', em: '',   label: 'JUGADORES',         desc: 'Todos los que se pusieron la verde.' },
    { v: '01',   em: 'título',  label: 'LIGA REAL · 2019', desc: 'El que validó todo.' }
  ];
  return (
    <section className="dark section tight">
      <div className="wrap">
        <div className="section-tag">
          <span className="num">02</span>
          <span>EN NÚMEROS · 2012 — 2026</span>
          <span className="rule"></span>
        </div>
        <div className="stats-grid">
          {stats.map((s, i) => (
            <div className="stat" key={i}>
              <div className="v">{s.v}{s.em && <em> {s.em}</em>}</div>
              <div className="label">{s.label}</div>
              <div className="desc">{s.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, Manifiesto, Stats });