/* ============================================================
   Puntarenas FC — Homepage
   ============================================================ */
const { useState: useStateH, useEffect: useEffectH } = React;

function HeroNextMatch() {
  const { t, lang } = useApp();
  const D = window.PFC_DATA;
  const m = D.nextMatch;
  const date = new Date(m.date);
  const dateLabel = date.toLocaleDateString(lang === 'es' ? 'es-CR' : 'en-US',
    { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
  const timeLabel = date.toLocaleTimeString(lang === 'es' ? 'es-CR' : 'en-US',
    { hour: '2-digit', minute: '2-digit', hour12: false });

  return (
    <section className="hero">
      <div className="hero-bg">
        <div className="hero-bg__grad"/>
        <div className="hero-bg__stripes"/>
        <svg className="hero-bg__shark" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid slice">
          <defs>
            <radialGradient id="rg" cx="70%" cy="30%">
              <stop offset="0%" stopColor="#1F6A9C" stopOpacity=".55"/>
              <stop offset="100%" stopColor="#0A2540" stopOpacity="0"/>
            </radialGradient>
          </defs>
          <rect width="800" height="600" fill="url(#rg)"/>
          <path d="M100 420c120-80 260-110 420-90 40 6 72 20 96 40l80-12-44 40 52 36-88-4c-28 24-68 44-120 56-180 40-344 4-416-40l-36 20 16-40-24-40 64 34z" fill="#000" opacity=".18"/>
        </svg>
      </div>

      <div className="container-wide hero-inner">
        <div className="hero-left">
          <span className="pill pill-accent">{t.hero?.eyebrow}</span>
          <div className="hero-comp">{m.competition}</div>
          <div className="hero-matchup">
            <div className="hero-team">
              <div className="hero-crest" style={{background:'#F37021'}}>PFC</div>
              <div>
                <div className="hero-team__name">{m.home.name}</div>
                <div className="hero-team__loc">Local</div>
              </div>
            </div>
            <div className="hero-vs">{t.hero?.vs}</div>
            <div className="hero-team hero-team--away">
              <div>
                <div className="hero-team__name">{m.away.name}</div>
                <div className="hero-team__loc">Visitante</div>
              </div>
              <div className="hero-crest" style={{background: m.away.tri}}>{m.away.code}</div>
            </div>
          </div>
          <div className="hero-meta">
            <span><Icon name="cal" size={14}/> {dateLabel}</span>
            <span><Icon name="pin" size={14}/> {m.venue}</span>
            <span><Icon name="tv"  size={14}/> {m.broadcast.join(' / ')}</span>
          </div>
          <div className="hero-ctas">
            <a href="#tickets" className="btn btn-primary"><Icon name="ticket" size={16}/> {t.hero?.cta}</a>
            <a href="fixtures.html" className="btn btn-ghost" style={{borderColor:'rgba(255,255,255,.35)', color:'#fff'}}>{t.hero?.moreInfo}</a>
          </div>
        </div>

        <div className="hero-right">
          <div className="hero-kick">
            <span className="eyebrow" style={{color:'rgba(255,255,255,.7)'}}>Pitido inicial · {timeLabel}</span>
            <Countdown to={m.date}/>
          </div>
        </div>
      </div>

      <svg className="hero-wave" viewBox="0 0 1440 60" preserveAspectRatio="none">
        <path d="M0 30 C180 60 360 0 540 20 S900 60 1080 30 1440 10 1440 30 V60 H0 Z" fill="var(--bg)"/>
      </svg>
    </section>
  );
}

function LatestResults() {
  const { t } = useApp();
  const D = window.PFC_DATA;
  return (
    <section className="section">
      <div className="container-wide">
        <div className="section-head">
          <div>
            <span className="kicker">{t.sections?.latestResults}</span>
            <h2 className="display-md">Últimos resultados</h2>
          </div>
          <a href="fixtures.html" className="link-arrow">{t.sections?.viewAll} <Icon name="arrow" size={14}/></a>
        </div>
        <div className="results-grid">
          {D.latestResults.map((m,i) => <MatchCard key={i} m={m} kind="result"/>)}
        </div>
      </div>
    </section>
  );
}

function NewsStrip() {
  const { t } = useApp();
  const D = window.PFC_DATA;
  const feat = D.news[0];
  const sides = D.news.slice(1, 3);
  const thirds = D.news.slice(3, 6);
  return (
    <section className="section" style={{background:'var(--bg-inset)'}}>
      <div className="container-wide">
        <div className="section-head">
          <div>
            <span className="kicker">{t.sections?.news}</span>
            <h2 className="display-md">Últimas noticias</h2>
          </div>
          <a href="news.html" className="link-arrow">{t.sections?.viewAll} <Icon name="arrow" size={14}/></a>
        </div>

        <div className="news-grid">
          <article className="news-card news-card--feature">
            <a href={`article.html?id=${feat.id}`}>
              <div className="news-card__media">
                <SharkThumb hue={feat.hue}>
                  <span className="pill pill-accent">{feat.cat}</span>
                </SharkThumb>
              </div>
              <div className="news-card__body">
                <div className="news-card__meta">
                  <span className="eyebrow">{new Date(feat.date).toLocaleDateString('es-CR',{day:'2-digit',month:'short',year:'numeric'})}</span>
                  <span className="eyebrow">· {feat.readMin} min</span>
                </div>
                <h3 className="news-card__title">{feat.title}</h3>
                <p className="news-card__excerpt">{feat.excerpt}</p>
              </div>
            </a>
          </article>

          <div className="news-card--side" style={{display:'flex', flexDirection:'column', gap:'var(--sp-5)', gridColumn:'span 4'}}>
            {sides.map(n => (
              <article key={n.id} className="news-card" style={{flex:1}}>
                <a href={`article.html?id=${n.id}`}>
                  <div className="news-card__media" style={{aspectRatio:'16 / 8'}}>
                    <SharkThumb hue={n.hue}>
                      <span className="pill pill-dark">{n.cat}</span>
                    </SharkThumb>
                  </div>
                  <div className="news-card__body">
                    <h3 className="news-card__title" style={{fontSize:22}}>{n.title}</h3>
                    <span className="eyebrow">{new Date(n.date).toLocaleDateString('es-CR',{day:'2-digit',month:'short'})}</span>
                  </div>
                </a>
              </article>
            ))}
          </div>

          {thirds.map(n => (
            <article key={n.id} className="news-card news-card--third">
              <a href={`article.html?id=${n.id}`}>
                <div className="news-card__media">
                  <SharkThumb hue={n.hue}>
                    <span className="pill pill-outline" style={{background:'rgba(255,255,255,.8)', color:'#000'}}>{n.cat}</span>
                  </SharkThumb>
                </div>
                <div className="news-card__body">
                  <h3 className="news-card__title">{n.title}</h3>
                  <p className="news-card__excerpt">{n.excerpt}</p>
                </div>
              </a>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomeKPIs() {
  const D = window.PFC_DATA;
  const us = D.standings.find(s => s.team === "Puntarenas FC");
  return (
    <section className="section-tight" style={{background:'var(--pfc-black)', color:'#fff', position:'relative', overflow:'hidden'}}>
      <div className="container-wide">
        <div className="home-kpi-split">
          <div>
            <span className="kicker">Clausura 2026</span>
            <h2 className="display-md" style={{color:'#fff', marginTop:8}}>La Marea<br/>naranja</h2>
            <p style={{color:'#A8AEB6', maxWidth:380, marginTop:14, fontSize:15}}>
              Nuestra campaña en curso. Seguimos escalando posiciones y peleando por zona de clasificación.
            </p>
          </div>
          <div className="kpi-grid">
            <div className="kpi" style={{background:'#16191D', borderColor:'#22272E', color:'#fff'}}>
              <span className="label" style={{color:'#A8AEB6'}}>Posición</span>
              <div className="value" style={{color:'#fff'}}>{us.pos}º</div>
              <div className="sub" style={{color:'#A8AEB6'}}>de 12 equipos</div>
            </div>
            <div className="kpi" style={{background:'#16191D', borderColor:'#22272E', color:'#fff'}}>
              <span className="label" style={{color:'#A8AEB6'}}>Puntos</span>
              <div className="value" style={{color:'#fff'}}>{us.Pts}</div>
              <div className="sub" style={{color:'#A8AEB6'}}>{us.W}G · {us.D}E · {us.L}P</div>
            </div>
            <div className="kpi" style={{background:'#16191D', borderColor:'#22272E', color:'#fff'}}>
              <span className="label" style={{color:'#A8AEB6'}}>Goles a favor</span>
              <div className="value" style={{color:'#fff'}}>{us.GF}</div>
              <div className="sub" style={{color:'#A8AEB6'}}>DG {us.GF - us.GA >= 0 ? '+' : ''}{us.GF - us.GA}</div>
            </div>
            <div className="kpi" style={{background:'#16191D', borderColor:'#22272E', color:'#fff'}}>
              <span className="label" style={{color:'#A8AEB6'}}>Goleador</span>
              <div className="value" style={{color:'#fff'}}>8</div>
              <div className="sub" style={{color:'#A8AEB6'}}>D. Rodríguez · #21</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function StandingsPreview() {
  const { t } = useApp();
  const D = window.PFC_DATA;
  return (
    <section className="section">
      <div className="container-wide">
        <div className="section-head">
          <div>
            <span className="kicker">{t.sections?.standings}</span>
            <h2 className="display-md">Tabla de posiciones</h2>
          </div>
          <a href="standings.html" className="link-arrow">{t.sections?.viewAll} <Icon name="arrow" size={14}/></a>
        </div>
        <div className="card" style={{overflow:'hidden'}}>
          <table className="standings">
            <thead>
              <tr>
                <th className="pos">{t.labels?.pos}</th>
                <th className="team">{t.labels?.team}</th>
                <th>{t.labels?.played}</th>
                <th>{t.labels?.won}</th>
                <th>{t.labels?.drawn}</th>
                <th>{t.labels?.lost}</th>
                <th>{t.labels?.gf}</th>
                <th>{t.labels?.ga}</th>
                <th>{t.labels?.pts}</th>
              </tr>
            </thead>
            <tbody>
              {D.standings.slice(0, 6).map(r => (
                <tr key={r.pos} className={r.team === 'Puntarenas FC' ? 'is-us' : ''}>
                  <td className="pos">{r.pos}</td>
                  <td className="team">{r.team}</td>
                  <td>{r.P}</td><td>{r.W}</td><td>{r.D}</td><td>{r.L}</td>
                  <td>{r.GF}</td><td>{r.GA}</td>
                  <td style={{color:'var(--accent)', fontWeight:700}}>{r.Pts}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

function UpcomingStrip() {
  const { t } = useApp();
  const D = window.PFC_DATA;
  return (
    <section className="section" style={{background:'var(--bg-inset)'}}>
      <div className="container-wide">
        <div className="section-head">
          <div>
            <span className="kicker">{t.sections?.fixtures}</span>
            <h2 className="display-md">Próximos partidos</h2>
          </div>
          <a href="fixtures.html" className="link-arrow">{t.sections?.viewAll} <Icon name="arrow" size={14}/></a>
        </div>
        <div className="results-grid">
          {D.fixtures.slice(0, 4).map((m,i) => <MatchCard key={i} m={m} kind="fixture"/>)}
        </div>
      </div>
    </section>
  );
}

function HomeApp() {
  return (
    <AppProvider>
      <Page active="home">
        <HeroNextMatch/>
        <LatestResults/>
        <NewsStrip/>
        <HomeKPIs/>
        <StandingsPreview/>
        <UpcomingStrip/>
      </Page>
    </AppProvider>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<HomeApp/>);