// palmares.jsx — interactive trophy grid with country/decade/club filters
// clubs.jsx merged in — the clubs journey list

const { useState: useStateP, useMemo: useMemoP } = React;

function Palmares({ t }) {
  const p = t.palm;
  const trophies = p.trophies;

  const [country, setCountry] = useStateP('ALL');
  const [decade, setDecade] = useStateP('ALL');
  const [club, setClub] = useStateP('ALL');

  const countries = useMemoP(() => {
    const m = new Map();
    trophies.forEach((tr) => { if (!m.has(tr.country)) m.set(tr.country, tr.flag); });
    return Array.from(m.entries());
  }, [trophies]);

  const decades = useMemoP(() => {
    const set = new Set(trophies.map((tr) => tr.decade));
    return Array.from(set).sort();
  }, [trophies]);

  const clubs = useMemoP(() => {
    const set = new Set(trophies.map((tr) => tr.club));
    return Array.from(set);
  }, [trophies]);

  const filtered = trophies.filter((tr) =>
    (country === 'ALL' || tr.country === country) &&
    (decade === 'ALL' || tr.decade === decade) &&
    (club === 'ALL' || tr.club === club)
  );

  // Make sure the layout works even when fewer than 4 cards: don't force a hero card if
  // its trophy got filtered out. Keep hero styling only when libertadores/paulista are visible.

  return (
    <section className="section palm" id="palmares" data-screen-label="03 Glorias">
      <div className="wrap">
        <div className="head reveal">
          <div>
            <div className="mono-label on-dark" style={{marginBottom: 18, color:'rgba(245,241,234,.55)'}}>{p.eyebrow}</div>
            <h2>{p.title_a} <em>{p.title_b}</em></h2>
          </div>
          <div className="intro">
            {p.intro_a}
            {p.intro_b}
          </div>
        </div>

        <div className="filters reveal">
          <div className="group">
            <span className="lbl">{p.filter_country}</span>
            <button className={country === 'ALL' ? 'on' : ''} onClick={() => setCountry('ALL')}>{p.filter_all}</button>
            {countries.map(([code, flag]) => (
              <button key={code} className={country === code ? 'on' : ''} onClick={() => setCountry(code)}>{flag}</button>
            ))}
          </div>
          <div className="group">
            <span className="lbl">{p.filter_decade}</span>
            <button className={decade === 'ALL' ? 'on' : ''} onClick={() => setDecade('ALL')}>{p.filter_all}</button>
            {decades.map((d) => (
              <button key={d} className={decade === d ? 'on' : ''} onClick={() => setDecade(d)}>{d}</button>
            ))}
          </div>
          <div className="group">
            <span className="lbl">{p.filter_club}</span>
            <button className={club === 'ALL' ? 'on' : ''} onClick={() => setClub('ALL')}>{p.filter_all}</button>
            {clubs.map((cl) => (
              <button key={cl} className={club === cl ? 'on' : ''} onClick={() => setClub(cl)}>{cl}</button>
            ))}
          </div>
        </div>

        <div className="grid">
          {filtered.map((tr, i) => {
            const heroCls = tr.hero ? ' hero' : '';
            const libCls = tr.comp.toLowerCase().includes('libertadores') ? ' libertadores' : '';
            return (
              <article key={`${tr.year}-${tr.comp}-${i}`} className={`card${heroCls}${libCls}`}>
                {tr.marker && <div className="marker">{tr.marker}</div>}
                <div className="country-flag">{tr.country}</div>
                <div>
                  <div className="yr serif tab-num">{tr.year}</div>
                </div>
                <div>
                  <div className="comp">{tr.comp}</div>
                  <div className="club">{tr.club}</div>
                  {tr.ctx && <p className="ctx">{tr.ctx}</p>}
                </div>
              </article>
            );
          })}
        </div>

        <div className="count-row">
          <div>{p.showing} <span className="n">{filtered.length}</span> {p.of} <span className="n">{trophies.length}</span> {p.count_label.toLowerCase()}</div>
          <div>{p.count_label} · 1996 — 2025</div>
        </div>
      </div>
    </section>
  );
}

function Clubs({ t }) {
  const c = t.clubs;
  return (
    <section className="section clubs" id="clubes" data-screen-label="04 Clubes">
      <div className="wrap">
        <div className="head reveal">
          <div>
            <div className="mono-label" style={{marginBottom: 18}}>{c.eyebrow}</div>
            <h2>{c.title_a} <em>{c.title_b}</em></h2>
          </div>
          <div className="intro">{c.intro}</div>
        </div>

        <div className="rows">
          {c.rows.map((r, i) => (
            <a key={i} href="#" className="row reveal" style={{['--reveal-delay']: `${i * 35}ms`}}>
              <div className="idx tab-num">{String(i + 1).padStart(2, '0')}</div>
              <div className="name">
                <span className="crest" style={{background: r.crest}}></span>
                {r.name}
              </div>
              <div className="period tab-num">{r.period}</div>
              <div className="country">{r.country}</div>
              <div className="titles">
                <span className="tab-num">{r.titles > 0 ? r.titles : '—'}</span>
                <small>{r.titles > 0 ? c.titles_label : c.explore}</small>
              </div>
              <div className="arrow">→</div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Palmares, Clubs });