/* Who Still Qualifies? — extra "programme" sections. Exports to window.WSQ_Extras.
   Requires wsq-data.js + wsq-content.js. */
(function () {
  const { useState } = React;
  const C = window.WSQ_CONTENT;
  const T = window.WSQ.teams;

  function colorsFor(code) {
    if (T[code]) return T[code].c;
    if (C.extraColors[code]) return C.extraColors[code];
    return ['#888', '#555'];
  }
  function Chip({ code, size = 18 }) {
    const c = colorsFor(code);
    return <span className="chip" style={{ width: size, height: size, background: `linear-gradient(125deg, ${c[0]} 0 52%, ${c[1]} 52% 100%)` }} aria-hidden="true" />;
  }

  /* ---- flags marquee ---- */
  function FlagsStrip() {
    const list = Object.keys(T).map((code) => ({ code, name: T[code].name }));
    const row = list.concat(list);
    return (
      <div className="flags-strip" aria-hidden="true">
        <div className="flags-track">
          {row.map((t, i) => (
            <span className="flag-chip" key={i}><Chip code={t.code} size={16} />{t.code}</span>
          ))}
        </div>
      </div>
    );
  }

  /* ---- quotes ---- */
  function Quotes() {
    return (
      <section className="section">
        <div className="wrap">
          <div className="sec-head">
            <span className="kicker red">From the touchline</span>
            <h2 className="sec-title">Words that<br />stuck</h2>
          </div>
          <div className="quotes">
            {C.quotes.map((q, i) => (
              <div className="quote-card" key={i}>
                <span className="q-mark">&ldquo;</span>
                <p className="q-text">{q.t}</p>
                <div className="q-who"><Chip code={natCode(q.nat)} size={16} />{q.who}<small>· {q.nat}</small></div>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  /* ---- facts ---- */
  function Facts() {
    const [tri, setTri] = useState(0);
    const WIN = {}; C.history.forEach((h) => { WIN[String(h.y)] = h.win; });
    return (
      <section className="section">
        <div className="wrap">
          <div className="sec-head">
            <span className="kicker green">Ninety-six years of it</span>
            <h2 className="sec-title">Every World Cup, one story each</h2>
            <p className="sec-sub">From 13 invited teams in 1930 to 48 nations in 2026 — a fact from every tournament ever played.</p>
          </div>
          <div className="facts">
            {C.facts.map((f, i) => (
              <div className={`fact-card ${f.y === '2026' ? 'now' : ''}`} key={f.y}>
                <div className="fc-year">{f.y}</div>
                <div className="fc-meta"><b>Host</b> {f.host}<span className="fc-dot">·</span><b>Won</b> {WIN[f.y] || '\u2014'}</div>
                <p className="fc-text">{f.f}</p>
              </div>
            ))}
          </div>
          <div className="trivia-bar">
            <span className="tb-tag">Did you know</span>
            <p>{C.trivia[tri]}</p>
            <button className="ghost tb-next" onClick={() => setTri((tri + 1) % C.trivia.length)}>Another →</button>
          </div>
        </div>
      </section>
    );
  }

  /* ---- legends ---- */
  function Legends() {
    const [order, setOrder] = useState(C.legends.map((_, i) => i));
    const shuffle = () => {
      const a = [...order];
      for (let i = a.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [a[i], a[j]] = [a[j], a[i]]; }
      setOrder(a);
    };
    return (
      <section className="section">
        <div className="wrap">
          <div className="sec-head" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: '16px' }}>
            <div style={{ flex: '1 1 auto', minWidth: 0 }}>
              <span className="kicker blue">The sticker album</span>
              <h2 className="sec-title">Legends of the<br />tournament</h2>
            </div>
            <button className="cta" onClick={shuffle} style={{ background: 'var(--saffron)', color: '#1B150D', flex: 'none' }}>Shuffle the album ⤮</button>
          </div>
          <div className="leg-grid">
            {order.map((idx) => {
              const L = C.legends[idx];
              const init = L.name.split(' ').map((w) => w[0]).slice(0, 2).join('');
              return (
                <div className="legend-card" key={L.name}>
                  <div className="lg-sticker" style={{ background: `linear-gradient(150deg, ${L.col[0]} 0 55%, ${L.col[1]} 55% 100%)` }}>
                    <span className="lg-init">{init}</span>
                    <span className="lg-num">{L.num}</span>
                  </div>
                  <div className="lg-body">
                    <div className="lg-name">{L.name}</div>
                    <div className="lg-meta"><span className="mini-chip" style={{ background: `linear-gradient(125deg, ${L.col[0]} 0 52%, ${L.col[1]} 52% 100%)` }} />{L.nat} · {L.role}</div>
                    <p className="lg-fact">{L.f}</p>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>
    );
  }

  /* ---- history ---- */
  function History() {
    return (
      <section className="section">
        <div className="wrap">
          <div className="sec-head">
            <span className="kicker saffron">Hosts &amp; champions</span>
            <h2 className="sec-title">Twenty-three<br />tournaments</h2>
            <p className="sec-sub">Only eight nations have ever lifted it. Tap through the years — and notice how few names there are.</p>
          </div>
          <div className="history">
            {C.history.map((h) => (
              <div className={`hist ${h.y === 2026 ? 'now' : ''}`} key={h.y}>
                {h.code && (T[h.code] || C.extraColors[h.code]) && h.win !== '?' && <span className="h-cap">★</span>}
                <div className="h-year">{h.y}</div>
                <div className="h-row"><span className="h-lbl">Host</span><span className="h-host">{h.host}</span></div>
                <div className="h-row"><span className="h-lbl">Winner</span><span className="h-win">{h.code ? <Chip code={h.code} size={14} /> : <span className="mini-chip" style={{ width: 14, height: 14, borderRadius: 3, background: 'rgba(255,255,255,0.4)' }} />}<small>{h.win}</small></span></div>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  // map a nation NAME (from quotes) to a code we have colours for
  function natCode(name) {
    const map = { Netherlands: 'NED', Scotland: 'SCO', Germany: 'GER', Brazil: 'BRA', Argentina: 'ARG', Portugal: 'POR', France: 'FRA', Spain: 'ESP' };
    return map[name] || 'BRA';
  }

  window.WSQ_Extras = { FlagsStrip, Quotes, Facts, Legends, History };
})();