// More.jsx — Palmares, Liga/Tabla, Galeria, Unete, Lightbox

function Palmares() {
  const data = window.JBN_DATA;
  const foto = data.campeonFoto || 'https://res.cloudinary.com/dzue7cdgf/image/upload/v1775280890/jebanofc/campeones.jpg';
  return (
    <section id="palmares" className="palmares-section">
      {/* Section tag */}
      <div className="section-tag" style={{padding:'56px 48px 0', maxWidth:1320, margin:'0 auto'}}>
        <span className="num">04</span>
        <span>PALMARÉS · LO QUE GANAMOS</span>
        <span className="rule"></span>
      </div>

      {/* Banner foto full-width */}
      <div className="palmares-banner" style={{marginTop:40}}>
        <img src={foto} alt="Campeones 2019"/>
        <div className="palmares-banner-over">
          <div style={{maxWidth:1320, width:'100%', padding:'0 48px', display:'flex', alignItems:'flex-end', justifyContent:'space-between'}}>
            <div>
              <div className="palmares-ey">CLAUSURA · LIGA REAL · 2019</div>
              <div className="palmares-main-title">CAMPEONES <em>de la real</em></div>
            </div>
            <div className="palmares-year-bg">19</div>
          </div>
        </div>
      </div>

      {/* Cuerpo: descripción + plantel */}
      <div className="palmares-body-wrap">
        <p className="palmares-caption">
          El título que validó todo. Siete años de armar equipo, de cancha en cancha, terminaron con la copa levantada. La verde, en alto.
        </p>
        <div>
          <div className="palmares-roster-label">EL PLANTEL CAMPEÓN</div>
          <div className="palmares-roster-names">
            {data.campeones2019.map((n, i) => <span key={i}>{n}</span>)}
          </div>
        </div>
      </div>
    </section>
  );
}

function Tabla() {
  const t = window.JBN_DATA.tabla;
  if (!t) return null;
  const cols = ['PJ','G','E','P','GF','GC','DG','PTS'];
  const keys = ['pj','g','e','p','gf','gc','dg','pts'];
  return (
    <section id="tabla" className="tabla-section section tight">
      <div className="wrap">
        <div className="section-tag" style={{color:'rgba(21,23,15,.45)'}}>
          <span className="num" style={{color:'#15170f'}}>05</span>
          <span>{t.nombre} · {t.grupo}</span>
          <span className="rule" style={{background:'rgba(21,23,15,.12)'}}></span>
        </div>

        <table className="tabla-table">
          <thead>
            <tr>
              <th style={{textAlign:'left', width:48}}>#</th>
              <th style={{textAlign:'left'}}>EQUIPO</th>
              {cols.map(c => <th key={c}>{c}</th>)}
            </tr>
          </thead>
          <tbody>
            {t.equipos.map((eq, i) => (
              <tr key={i} className={eq.jebano ? 'jebano-row' : ''}>
                <td className={'tabla-pos' + (eq.pos <= 3 ? ' top3' : '')}>{eq.pos}</td>
                <td className={'tabla-equipo' + (eq.jebano ? ' jebano' : '')}>
                  {eq.equipo}
                </td>
                {keys.map(k => (
                  <td key={k} className={k === 'pts' ? 'tabla-pts' : ''}>
                    {k === 'dg' && eq[k] > 0 ? '+' : ''}{eq[k]}
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
          <tfoot>
            <tr>
              <td colSpan={10}>Temporada recién comenzada · Los datos se actualizarán tras cada fecha</td>
            </tr>
          </tfoot>
        </table>

        {/* Resultados de la temporada */}
        <div style={{marginTop:48}}>
          <div style={{
            fontFamily:'var(--f-mono)', fontSize:11,
            textTransform:'uppercase', letterSpacing:'.14em',
            color:'rgba(21,23,15,.45)', marginBottom:20,
            display:'flex', alignItems:'center', gap:12
          }}>
            <span>RESULTADOS 2026</span>
            <span style={{flex:1, height:1, background:'rgba(21,23,15,.12)'}}></span>
          </div>

          {window.JBN_DATA.resultados.length === 0 ? (
            <div className="resultados-empty">
              Sin partidos disputados · El debut se viene en {window.JBN_DATA.proximoPartido.dia || 'Fecha 1'}
            </div>
          ) : (
            window.JBN_DATA.resultados.map((r, i) => {
              const isGanado = r.gf > r.gc;
              const isPerdido = r.gf < r.gc;
              return (
                <div className="resultado-row" key={i}>
                  <div className="resultado-fecha">{r.fecha}</div>
                  <div className={'resultado-equipo jebano'}>JEBAÑO FC</div>
                  <div className={'resultado-score' + (isGanado ? ' ganado' : isPerdido ? ' perdido' : '')}>{r.gf} – {r.gc}</div>
                  <div className="resultado-equipo">{r.rival}</div>
                  <div style={{fontFamily:'var(--f-mono)', fontSize:10, color:'rgba(21,23,15,.4)', textTransform:'uppercase', letterSpacing:'.1em'}}>{r.liga}</div>
                </div>
              );
            })
          )}
        </div>
      </div>
    </section>
  );
}

function Partidos() {
  const [tab, setTab] = React.useState('proximo');
  const data = window.JBN_DATA;
  const p = data.proximoPartido;
  const t = data.tabla;
  const cols = ['PJ','G','E','P','GF','GC','DG','PTS'];
  const keys = ['pj','g','e','p','gf','gc','dg','pts'];

  return (
    <section id="partidos">
      {/* Header verde oscuro */}
      <div style={{background:'#0a2f14', padding:'80px 0 64px'}}>
        <div className="wrap">
          <div className="section-tag" style={{color:'rgba(235,230,213,.45)'}}>
            <span className="num" style={{color:'#ebe6d5'}}>05</span>
            <span>PARTIDOS · TEMPORADA 2026</span>
            <span className="rule" style={{background:'rgba(235,230,213,.15)'}}></span>
          </div>
          <h2 style={{
            fontFamily:"'Barlow Condensed',var(--f-display),sans-serif",
            fontWeight:900, fontSize:'clamp(60px,9vw,120px)',
            lineHeight:.85, letterSpacing:'-.03em', textTransform:'uppercase',
            color:'#ebe6d5', marginTop:24
          }}>
            LIGA PREMIER <em style={{fontStyle:'italic',color:'var(--copihue)'}}>2026</em>
          </h2>
          <p style={{fontFamily:'var(--f-body)', fontSize:15, color:'rgba(235,230,213,.55)', marginTop:20}}>
            {t.nombre} · {t.grupo} · Partidos, resultados y tabla de posiciones
          </p>
        </div>
      </div>

      {/* Contenido crema */}
      <div style={{background:'#ebe6d5'}}>
        {/* Tabs dentro del wrap */}
        <div className="wrap">
          <div className="ptabs">
            {[['proximo','Próximo partido'],['resultados','Resultados'],['tabla','Clasificación']].map(([id,lbl]) => (
              <button key={id} className={'ptab' + (tab === id ? ' active' : '')} onClick={() => setTab(id)}>{lbl}</button>
            ))}
          </div>
        </div>

        {/* Próximo partido — ancho completo, fuera del wrap */}
        {tab === 'proximo' && (
          <div className="partido-card">
              <div className="partido-left">
                <div className="partido-comp">{t.nombre} · {t.grupo}</div>
                <div className="partido-fecha-big">{p.dia || p.label}</div>
                <div className="partido-hora-txt">{p.hora} hs · Cancha FinTA</div>
              </div>
              <div className="partido-vs-block">
                <div className="partido-team-home">
                  <span>JEBAÑO FC</span>
                  <small>LOCAL</small>
                </div>
                <div className="partido-vs-sep">vs</div>
                <div className="partido-team-away">
                  <span>{p.rival}</span>
                  <small>VISITA</small>
                </div>
              </div>
              <div className="partido-right">
                <div className="label" style={{color:'rgba(235,230,213,.45)', marginBottom:14}}>CITADOS</div>
                <div className="citados-grid" style={{gridTemplateColumns:'1fr 1fr', gap:'8px 12px'}}>
                  {(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" style={{fontSize:13}}>{n}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          )}

        {/* Resultados dentro del wrap */}
        {tab === 'resultados' && (
          <div className="wrap" style={{paddingBottom:80}}>
            {data.resultados.length === 0 ? (
              <div className="resultados-empty" style={{marginTop:32}}>
                Sin partidos disputados · El debut se viene en {p.dia || 'Fecha 1'}
              </div>
            ) : (
              data.resultados.map((r, i) => {
                const isGanado = r.gf > r.gc;
                const isPerdido = r.gf < r.gc;
                return (
                  <div className="resultado-row" key={i}>
                    <div className="resultado-fecha">{r.fecha}</div>
                    <div className="resultado-equipo jebano">JEBAÑO FC</div>
                    <div className={'resultado-score' + (isGanado ? ' ganado' : isPerdido ? ' perdido' : '')}>{r.gf} – {r.gc}</div>
                    <div className="resultado-equipo">{r.rival}</div>
                    <div style={{fontFamily:'var(--f-mono)',fontSize:10,color:'rgba(21,23,15,.4)',textTransform:'uppercase',letterSpacing:'.1em'}}>{r.liga}</div>
                  </div>
                );
              })
            )}
          </div>
        )}

        {/* Tabla dentro del wrap */}
        {tab === 'tabla' && (
          <div className="wrap" style={{paddingBottom:80}}>
              <table className="tabla-table" style={{marginTop:8}}>
                <thead>
                  <tr>
                    <th style={{textAlign:'left',width:48}}>#</th>
                    <th style={{textAlign:'left'}}>EQUIPO</th>
                    {cols.map(c => <th key={c}>{c}</th>)}
                  </tr>
                </thead>
                <tbody>
                  {t.equipos.map((eq, i) => (
                    <tr key={i} className={eq.jebano ? 'jebano-row' : ''}>
                      <td className={'tabla-pos' + (eq.pos <= 3 ? ' top3' : '')}>{eq.pos}</td>
                      <td className={'tabla-equipo' + (eq.jebano ? ' jebano' : '')}>{eq.equipo}</td>
                      {keys.map(k => (
                        <td key={k} className={k === 'pts' ? 'tabla-pts' : ''}>
                          {k === 'dg' && eq[k] > 0 ? '+' : ''}{eq[k]}
                        </td>
                      ))}
                    </tr>
                  ))}
                </tbody>
                <tfoot>
                  <tr><td colSpan={10}>Temporada recién comenzada · Los datos se actualizarán tras cada fecha</td></tr>
                </tfoot>
              </table>
          </div>
        )}
      </div>
    </section>
  );
}

function Galeria({ onPhoto }) {
  const [showAll, setShowAll] = React.useState(false);
  const gal = window.JBN_DATA.galeria || [];

  const dest = gal.filter(p => p.destacada);
  const rest = gal.filter(p => !p.destacada).slice(0, 7);
  const photos = [...dest, ...rest].slice(0, 13);

  const spans = [
    's-2x2', 's-1x2', 's-2x1', 's-1x1', 's-1x1', 's-w',
    's-2x2', 's-1x2', 's-2x1', 's-1x1', 's-1x1', 's-w', 's-w'
  ];

  function getYear(src) {
    const m = (src || '').match(/foto(\d+)/);
    if (!m) return '26';
    const n = parseInt(m[1]);
    if (n >= 700) return '26';
    if (n >= 600) return '25';
    if (n >= 500) return '24';
    if (n >= 400) return '23';
    return '22';
  }

  function getCaption(p) {
    if (!p.caption || p.caption === 'Jebaño FC') return 'Jebaño FC';
    return p.caption.replace(' · 2026','').replace(' · 2025','').replace(' · 2024','');
  }

  return (
    <section id="galeria" className="section" style={{background:'var(--hueso)'}}>
      <div className="wrap">
        <div className="section-tag">
          <span className="num">06</span>
          <span>GALERÍA · LO QUE PASA EN LA CANCHA</span>
          <span className="rule"></span>
        </div>

        <div className="galeria-head">
          <h2 className="h-xxl">CANCHA, ASADOS <em className="editorial-italic" style={{color:'var(--copihue)', fontSize:'1.35em'}}>y finales.</em></h2>
        </div>

        <div className="galeria-mosaic">
          {photos.map((p, i) => {
            const y = getYear(p.src);
            const cap = getCaption(p);
            return (
              <div key={i} className={`gm ${spans[i] || 's-1x1'}`}
                   onClick={() => onPhoto({ src: p.src, cap, y })}>
                <img src={p.src} alt={cap}/>
                <div className="gm-cap"><span className="y">'{y}</span>{cap}</div>
              </div>
            );
          })}
        </div>

        <div style={{textAlign:'center', marginTop:48}}>
          <button
            onClick={() => setShowAll(s => !s)}
            style={{
              fontFamily:'var(--f-display)',
              fontWeight:700,
              fontSize:13,
              letterSpacing:'.14em',
              textTransform:'uppercase',
              background:'transparent',
              border:'1px solid var(--border-strong)',
              color:'var(--fg1)',
              padding:'14px 32px',
              cursor:'pointer',
            }}
          >
            {showAll ? 'Ocultar archivo ↑' : `Ver las ${gal.length} fotos del archivo →`}
          </button>
        </div>

        {showAll && (
          <div style={{
            display:'grid',
            gridTemplateColumns:'repeat(auto-fill, minmax(180px, 1fr))',
            gap:6,
            marginTop:32
          }}>
            {gal.map((p, i) => {
              const y = getYear(p.src);
              const cap = getCaption(p);
              return (
                <div
                  key={i}
                  style={{aspectRatio:'1', overflow:'hidden', cursor:'pointer', background:'#ccc', position:'relative'}}
                  onClick={() => onPhoto({ src: p.src, cap, y })}
                >
                  <img
                    src={p.src}
                    alt={cap}
                    loading="lazy"
                    style={{width:'100%', height:'100%', objectFit:'cover', display:'block'}}
                  />
                </div>
              );
            })}
          </div>
        )}
      </div>
    </section>
  );
}

function Unete() {
  const opts = [
    { n: '01', lbl: 'QUIERO JUGAR',   sub: 'Buscamos sumar a la verde. Cuéntanos posición y de dónde vienes.' },
    { n: '02', lbl: 'QUIERO APOYAR',  sub: 'Sponsors, amigos del club, auspiciadores. Conversemos.' },
    { n: '03', lbl: 'PRENSA / DEMÁS', sub: 'Notas, entrevistas, colaboraciones. Escríbenos directo.' }
  ];
  return (
    <section id="unete" className="unete">
      <div className="wrap">
        <div className="section-tag" style={{color:'rgba(235,230,213,.7)'}}>
          <span className="num" style={{color:'var(--hueso)'}}>07</span>
          <span>ÚNETE · CONVERSEMOS</span>
          <span className="rule" style={{background:'rgba(235,230,213,.3)'}}></span>
        </div>
        <div className="unete-grid">
          <div>
            <h2 className="h-xxl">¿TE QUIERES<br/>PONER <em>LA VERDE</em>?</h2>
            <p className="unete-prose">
              Escríbenos a <strong>hola@jebanofc.cl</strong>, o pásate un sábado por la cancha FinTA. Somos los del escudo verde con la J grande.
            </p>
          </div>
          <div className="unete-options">
            {opts.map((o, i) => (
              <div className="unete-row" key={i} onClick={() => window.location.href = 'mailto:hola@jebanofc.cl'}>
                <div className="n">{o.n}</div>
                <div className="lbl">{o.lbl}<span className="sub">{o.sub}</span></div>
                <div className="arrow">→</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Lightbox({ photo, onClose }) {
  if (!photo) return null;
  return (
    <div className="lightbox" onClick={onClose}>
      <button className="lightbox-close">×</button>
      <img src={photo.src} alt={photo.cap} onClick={(e) => e.stopPropagation()}/>
      <div className="lightbox-cap">'{photo.y} · {photo.cap}</div>
    </div>
  );
}

Object.assign(window, { Palmares, Tabla, Partidos, Galeria, Unete, Lightbox });