/* AcquiCup - "World Cup 101" primer page, reachable from BOTH sides of the gate:
 * pre-login from the marketing landing page's top menu (app.jsx swaps Landing ⇄
 * WorldCup101 while unauthenticated; the URL mirrors it as /world-cup-101), and
 * signed-in as a normal route from the footer menu (FOOTER_LINKS in components.jsx)
 * — pass `inApp` to render just the body inside AppShell, with the join CTAs
 * swapped for in-app actions. Like Landing it is built ENTIRELY from the logged-in
 * app's shell + primitives (same sticky topnav/topfooter, 1080px container,
 * hero-card, PageHead, .card/.card-pad, .lb tables, gap-* scale,
 * .eyebrow/.soft/.muted type, .btn variants) and reads NO
 * window.ACQ - every figure is hand-authored static data.
 *
 * Content covers tournament history THROUGH Qatar 2022 (2026 is the 23rd edition):
 * the full roll of honour, most titles, top scorers / assists / matches, most
 * participations, and prediction-relevant trivia. If a record falls during the
 * 2026 tournament, update the tables here by hand. */

// Emoji flag chip - same plate the landing page uses (no ACQ teams pre-login, so
// TeamBadge's flagcdn images aren't available; CSP-safe emoji stands in).
function Wc101Flag({ emoji, size = "" }) {
  const dim = size === "sm" ? { w: 27, h: 19, f: 12 } : { w: 33, h: 23, f: 15 };
  return <span className="team-flag fallback" style={{ width: dim.w, height: dim.h, borderRadius: 4, fontSize: dim.f, display: "inline-flex", alignItems: "center", justifyContent: "center", background: "var(--surface-2)", border: "1px solid var(--line)", flex: "none" }}>{emoji}</span>;
}

const WC101_FLAG = {
  Uruguay: "🇺🇾", Argentina: "🇦🇷", Italy: "🇮🇹", Czechoslovakia: "🇨🇿", Hungary: "🇭🇺",
  Brazil: "🇧🇷", "West Germany": "🇩🇪", Germany: "🇩🇪", Sweden: "🇸🇪", England: "🏴󠁧󠁢󠁥󠁮󠁧󠁿",
  Netherlands: "🇳🇱", France: "🇫🇷", Spain: "🇪🇸", Croatia: "🇭🇷", Mexico: "🇲🇽", Poland: "🇵🇱",
};

// FIFA trigrams for the finals table — on phones the full names swap to these
// (CSS .wc101-name-full/.wc101-name-code) so the row fits with no horizontal scroll.
const WC101_CODE = {
  Uruguay: "URU", Argentina: "ARG", Italy: "ITA", Czechoslovakia: "TCH", Hungary: "HUN",
  Brazil: "BRA", "West Germany": "FRG", Germany: "GER", Sweden: "SWE", England: "ENG",
  Netherlands: "NED", France: "FRA", Spain: "ESP", Croatia: "CRO",
};

// One side of a final — ellipsis-safe name that renders as the FIFA code on phones.
function Wc101Nation({ name, winner }) {
  return (
    <span className={winner ? "" : "muted"} style={{ fontWeight: winner ? 700 : 600, fontSize: 13.5, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
      <span className="wc101-name-full">{name}</span>
      <span className="wc101-name-code">{WC101_CODE[name]}</span>
    </span>
  );
}

// A per-edition leader cell (top scorer / most assists): muted name + mono count,
// optional hover tooltip for ties & disputed counts; "–" when no reliable record.
function Wc101Leader({ stat }) {
  if (!stat) return <span className="muted" style={{ fontSize: 12.5 }}>–</span>;
  return (
    <span className="nowrap" title={stat.t} style={stat.t ? { cursor: "help" } : undefined}>
      <span className="muted" style={{ fontSize: 12.5 }}>{stat.name}</span>
      <span className="mono" style={{ fontWeight: 700, fontSize: 12.5, marginLeft: 7 }}>{stat.n}</span>
    </span>
  );
}

/* ---------- the data (all through Qatar 2022 — hand-kept, like the landing demos) ---------- */

// Every final, 1930–2022. `note` renders muted under the score; 1950 carries the
// Maracanazo asterisk (no actual final that year — a decisive last group match).
// `scorer`/`assists` are that edition's leaders (desktop-only columns, hidden via
// .wc101-extra): {name, n, t?} where `t` is a hover tooltip for ties/disputes.
// Assists are official only from 1966; `assists: null` = no reliable record
// (1930–62 untracked; 1978 & 1990 exist only as fan reconstructions).
const WC101_FINALS = [
  { year: 2022, host: "Qatar", winner: "Argentina", score: "3–3", note: "4–2 pens", runner: "France",
    scorer: { name: "Mbappé", n: 8 }, assists: { name: "Five players", n: 3, t: "Messi, Griezmann, Kane, Perišić and Bruno Fernandes, 3 each" } },
  { year: 2018, host: "Russia", winner: "France", score: "4–2", runner: "Croatia",
    scorer: { name: "Kane", n: 6 }, assists: { name: "16 players", n: 2, t: "No standout creator: sixteen players finished on 2 assists" } },
  { year: 2014, host: "Brazil", winner: "Germany", score: "1–0", note: "aet", runner: "Argentina",
    scorer: { name: "James Rodríguez", n: 6 }, assists: { name: "Cuadrado", n: 4 } },
  { year: 2010, host: "South Africa", winner: "Spain", score: "1–0", note: "aet", runner: "Netherlands",
    scorer: { name: "T. Müller", n: 5, t: "Four players scored 5; Müller took the Golden Boot on most assists" }, assists: { name: "Five players", n: 3, t: "Kaká, T. Müller, Özil, Kuyt and Schweinsteiger, 3 each" } },
  { year: 2006, host: "Germany", winner: "Italy", score: "1–1", note: "5–3 pens", runner: "France",
    scorer: { name: "Klose", n: 5 }, assists: { name: "Totti", n: 4, t: "Opta also credits Riquelme with 4" } },
  { year: 2002, host: "Korea/Japan", winner: "Brazil", score: "2–0", runner: "Germany",
    scorer: { name: "Ronaldo", n: 8 }, assists: { name: "Ballack", n: 4 } },
  { year: 1998, host: "France", winner: "France", score: "3–0", runner: "Brazil",
    scorer: { name: "Šuker", n: 6 }, assists: { name: "Five players", n: 3, t: "Djorkaeff, Bergkamp, Ronaldo, Verón and B. Laudrup, 3 each" } },
  { year: 1994, host: "United States", winner: "Brazil", score: "0–0", note: "3–2 pens", runner: "Italy",
    scorer: { name: "Stoichkov / Salenko", n: 6, t: "Golden Boot shared" }, assists: { name: "Häßler", n: 5 } },
  { year: 1990, host: "Italy", winner: "West Germany", score: "1–0", runner: "Argentina",
    scorer: { name: "Schillaci", n: 6 }, assists: null },
  { year: 1986, host: "Mexico", winner: "Argentina", score: "3–2", runner: "West Germany",
    scorer: { name: "Lineker", n: 6 }, assists: { name: "Maradona", n: 5 } },
  { year: 1982, host: "Spain", winner: "Italy", score: "3–1", runner: "West Germany",
    scorer: { name: "Rossi", n: 6 }, assists: { name: "Littbarski", n: 5 } },
  { year: 1978, host: "Argentina", winner: "Argentina", score: "3–1", note: "aet", runner: "Netherlands",
    scorer: { name: "Kempes", n: 6 }, assists: null },
  { year: 1974, host: "West Germany", winner: "West Germany", score: "2–1", runner: "Netherlands",
    scorer: { name: "Lato", n: 7 }, assists: { name: "Gadocha", n: 5 } },
  { year: 1970, host: "Mexico", winner: "Brazil", score: "4–1", runner: "Italy",
    scorer: { name: "G. Müller", n: 10 }, assists: { name: "Pelé", n: 6 } },
  { year: 1966, host: "England", winner: "England", score: "4–2", note: "aet", runner: "West Germany",
    scorer: { name: "Eusébio", n: 9 }, assists: { name: "Held", n: 4 } },
  { year: 1962, host: "Chile", winner: "Brazil", score: "3–1", runner: "Czechoslovakia",
    scorer: { name: "Six players", n: 4, t: "Garrincha, Vavá, Leonel Sánchez, Albert, Ivanov and Jerković, 4 each" }, assists: null },
  { year: 1958, host: "Sweden", winner: "Brazil", score: "5–2", runner: "Sweden",
    scorer: { name: "Fontaine", n: 13 }, assists: null },
  { year: 1954, host: "Switzerland", winner: "West Germany", score: "3–2", runner: "Hungary",
    scorer: { name: "Kocsis", n: 11 }, assists: null },
  { year: 1950, host: "Brazil", winner: "Uruguay", score: "2–1", note: "*", runner: "Brazil",
    scorer: { name: "Ademir", n: 8, t: "FIFA's official count; several sources credit 9" }, assists: null },
  { year: 1938, host: "France", winner: "Italy", score: "4–2", runner: "Hungary",
    scorer: { name: "Leônidas", n: 7 }, assists: null },
  { year: 1934, host: "Italy", winner: "Italy", score: "2–1", note: "aet", runner: "Czechoslovakia",
    scorer: { name: "Nejedlý", n: 5 }, assists: null },
  { year: 1930, host: "Uruguay", winner: "Uruguay", score: "4–2", runner: "Argentina",
    scorer: { name: "Stábile", n: 8 }, assists: null },
];

// Titles per nation (8 winners in 22 editions), with the winning years.
const WC101_TITLES = [
  { nation: "Brazil", count: 5, years: "1958 · 1962 · 1970 · 1994 · 2002" },
  { nation: "Germany", count: 4, years: "1954 · 1974 · 1990 · 2014" },
  { nation: "Italy", count: 4, years: "1934 · 1938 · 1982 · 2006" },
  { nation: "Argentina", count: 3, years: "1978 · 1986 · 2022" },
  { nation: "France", count: 2, years: "1998 · 2018" },
  { nation: "Uruguay", count: 2, years: "1930 · 1950" },
  { nation: "England", count: 1, years: "1966" },
  { nation: "Spain", count: 1, years: "2010" },
];

const WC101_SCORERS = [
  { flag: "🇩🇪", name: "Miroslav Klose", sub: "2002–14", val: 16 },
  { flag: "🇧🇷", name: "Ronaldo", sub: "1998–2006", val: 15 },
  { flag: "🇩🇪", name: "Gerd Müller", sub: "1970–74", val: 14 },
  { flag: "🇫🇷", name: "Just Fontaine", sub: "1958", val: 13 },
  { flag: "🇦🇷", name: "Lionel Messi", sub: "2006–22", val: 13 },
  { flag: "🇧🇷", name: "Pelé", sub: "1958–70", val: 12 },
  { flag: "🇫🇷", name: "Kylian Mbappé", sub: "2018–22", val: 12 },
];

const WC101_ASSISTS = [
  { flag: "🇧🇷", name: "Pelé", sub: "1958–70", val: 10 },
  { flag: "🇦🇷", name: "Diego Maradona", sub: "1982–94", val: 8 },
  { flag: "🇦🇷", name: "Lionel Messi", sub: "2006–22", val: 8 },
];

const WC101_MATCHES = [
  { flag: "🇦🇷", name: "Lionel Messi", sub: "2006–22", val: 26 },
  { flag: "🇩🇪", name: "Lothar Matthäus", sub: "1982–98", val: 25 },
  { flag: "🇩🇪", name: "Miroslav Klose", sub: "2002–14", val: 24 },
  { flag: "🇮🇹", name: "Paolo Maldini", sub: "1990–2002", val: 23 },
  { flag: "🇵🇹", name: "Cristiano Ronaldo", sub: "2006–22", val: 22 },
];

const WC101_NATION_APPS = [
  { flag: "🇧🇷", name: "Brazil", sub: "every edition since 1930", val: 22 },
  { flag: "🇩🇪", name: "Germany", sub: "incl. West Germany", val: 20 },
  { flag: "🇮🇹", name: "Italy", sub: "4 titles along the way", val: 18 },
  { flag: "🇦🇷", name: "Argentina", sub: "champions in 2022", val: 18 },
  { flag: "🇲🇽", name: "Mexico", sub: "host in 1970, 1986 & 2026", val: 17 },
];

const WC101_PLAYER_APPS = [
  { flag: "🇦🇷", name: "Lionel Messi", sub: "2006–2026", val: 6 },
  { flag: "🇵🇹", name: "Cristiano Ronaldo", sub: "2006–2026", val: 6 },
  { flag: "🇲🇽", name: "Guillermo Ochoa", sub: "2006–2026", val: 6 },
  { flag: "🇲🇽", name: "Antonio Carbajal", sub: "1950–66", val: 5 },
  { flag: "🇩🇪", name: "Lothar Matthäus", sub: "1982–98", val: 5 },
];

// Prediction-relevant trivia — the "shine at the watercooler / on the leaderboard" bit.
const WC101_FACTS = [
  { icon: "home", title: "Home turf matters", body: "Hosts have lifted the trophy 6 times in 22 editions: Uruguay '30, Italy '34, England '66, West Germany '74, Argentina '78 and France '98. In 2026 there are three hosts to watch: the USA, Mexico and Canada." },
  { icon: "shield", title: "The champion's curse", body: "Four of the last six defending champions went out in the GROUP stage: France '02, Italy '10, Spain '14 and Germany '18. Argentina arrive in 2026 as holders. Predict accordingly." },
  { icon: "globe", title: "A two-continent story", body: "All 22 titles belong to just two continents, Europe (12) and South America (10), and only eight nations have ever won it. No team from anywhere else has even reached a final." },
  { icon: "target", title: "Low scores win contests", body: "Recent World Cups average roughly 2.7 goals per match, and tight scorelines like 1–0 and 2–1 are far more common than goal-fests. Worth remembering on your prediction slip." },
  { icon: "star", title: "The Americas hex", body: "Of the 8 editions staged in the Americas, 7 were won by South American sides; Germany 2014 is the only European exception. Edition number 9 kicks off in 2026." },
  { icon: "flame", title: "Records still standing", body: "Fontaine's 13 goals in a single World Cup (1958), Hungary 10–1 El Salvador (1982), the 12-goal Austria 7–5 Switzerland (1954) and Hakan Şükür's 10.8-second goal (2002)." },
];

/* ---------- building blocks ---------- */

// StatBox replica — identical to the landing page's LandingStat (inset accent
// stripe, 32px icon plate, eyebrow label, 30px mono value, muted sub).
function Wc101Stat({ icon, color, value, label, sub }) {
  return (
    <div className="card col gap-8" style={{ padding: "16px 18px", boxShadow: "inset 3px 0 0 " + color + ", var(--shadow-card)" }}>
      <div className="row gap-10">
        <span style={{ width: 32, height: 32, borderRadius: 9, flex: "none", display: "flex", alignItems: "center", justifyContent: "center", color: color, background: "color-mix(in srgb, " + color + " 14%, var(--surface))" }}>
          <Icon name={icon} size={17} stroke={2} />
        </span>
        <span className="eyebrow" style={{ alignSelf: "center" }}>{label}</span>
      </div>
      <span className="mono" style={{ fontSize: 30, fontWeight: 700, lineHeight: 1 }}>{value}</span>
      {sub && <span className="muted" style={{ fontSize: 12.5 }}>{sub}</span>}
    </div>
  );
}

// A compact record leaderboard card — same .lb structure as the app's tables:
// eyebrow header + unit badge, flag/name/era rows, big mono value on the right.
function Wc101RecordTable({ title, unit, rows, foot }) {
  return (
    <div className="card col" style={{ overflow: "hidden" }}>
      <div className="row between" style={{ padding: "13px 16px 11px" }}>
        <span className="eyebrow">{title}</span>
        <span className="badge mono" style={{ fontSize: 10.5 }}>{unit}</span>
      </div>
      <div className="grow" style={{ overflowX: "auto" }}>
        <table className="lb">
          <tbody>
            {rows.map((r, i) => (
              <tr key={r.name}>
                <td style={{ width: 30 }}><span className="rank-num">{i + 1}</span></td>
                <td>
                  <div className="row gap-10" style={{ minWidth: 0 }}>
                    <Wc101Flag emoji={r.flag} size="sm" />
                    <span className="nowrap" style={{ fontWeight: 600, fontSize: 13.5, overflow: "hidden", textOverflow: "ellipsis" }}>{r.name}</span>
                    <span className="muted nowrap wc101-era" style={{ fontSize: 12 }}>· {r.sub}</span>
                  </div>
                </td>
                <td style={{ textAlign: "right" }}><span className="mono" style={{ fontWeight: 700, fontSize: 14 }}>{r.val}</span></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      {foot && <div style={{ padding: "10px 16px 13px", borderTop: "1px solid var(--line-2)" }}><span className="muted" style={{ fontSize: 11.5, lineHeight: 1.45, display: "block" }}>{foot}</span></div>}
    </div>
  );
}

/* ---------- the page ---------- */

function WorldCup101({ onBack, onJoin, onSignIn, inApp = false, onPredict }) {
  const scrollTo = (id) => { const el = document.getElementById(id); if (el) el.scrollIntoView({ behavior: "smooth", block: "start" }); };
  const heroMuted = "color-mix(in srgb, var(--hero-ink) 70%, transparent)";

  // SEO: swap in the article's own title + meta description while it's on screen
  // (both modes), restored on unmount. Crawlers that don't run JS get the same
  // head server-side: src/seo.js swaps it into index.html for /world-cup-101 —
  // keep these two strings in sync with the constants there.
  useEffect(() => {
    const meta = document.querySelector('meta[name="description"]');
    const prev = { title: document.title, desc: meta && meta.getAttribute("content") };
    document.title = "World Cup 101: Winners, Records and History (1930-2026) | AcquiCup";
    if (meta) meta.setAttribute("content", "Every World Cup final since 1930, the eight champions, all-time goal and assist records, and the trivia that wins prediction contests. The 5-minute primer by AcquiCup.");
    return () => {
      document.title = prev.title;
      if (meta && prev.desc != null) meta.setAttribute("content", prev.desc);
    };
  }, []);

  // Everything inside the 1080 container. In-app (the signed-in footer link) the
  // body renders alone — AppShell already provides the topnav, container and footer.
  const body = (
          <div className="col gap-24">

            {/* ---------- hero (hero-card pattern) ---------- */}
            <div className="card hero-card" style={{ background: "var(--hero-bg)", color: "var(--hero-ink)", border: "none", overflow: "hidden", position: "relative" }}>
              <div style={{ position: "absolute", inset: 0, opacity: .5, background: "radial-gradient(700px 240px at 88% -30%, color-mix(in srgb, var(--brand-blue) 40%, transparent), transparent)" }} />
              <svg style={{ position: "absolute", right: 0, top: 0, height: "100%", opacity: .12 }} width="320" height="220" viewBox="0 0 320 220" fill="none" stroke="white" strokeWidth="1.5">
                <circle cx="300" cy="110" r="60" /><line x1="300" y1="0" x2="300" y2="220" /><rect x="250" y="70" width="80" height="80" />
              </svg>
              <div className="card-pad" style={{ padding: "26px 28px", position: "relative" }}>
                <div className="col gap-2" style={{ minWidth: 0, maxWidth: 640 }}>
                  <span className="eyebrow" style={{ color: heroMuted }}>World Cup 101 · The 5-minute primer</span>
                  <h1 style={{ fontSize: 30, marginTop: 8, fontWeight: 800, letterSpacing: "-.03em", lineHeight: 1.08 }}>Everything you need to know about the World Cup to shine</h1>
                  <span style={{ opacity: .82, fontSize: 14.5, marginTop: 10, lineHeight: 1.55 }}>Ninety-six years of finals, champions and records: every winner, the all-time scorers, and the trivia that wins watercoolers and prediction leaderboards alike. No football degree required.</span>
                  <div className="row gap-10 wrap" style={{ marginTop: 18 }}>
                    <button className="btn btn-primary" onClick={() => scrollTo("honours")}>Start with the winners ↓</button>
                    {!inApp && <button className="btn btn-ghost on-hero" onClick={onJoin}>Join the contest<Icon name="chevron" size={15} /></button>}
                  </div>
                </div>
              </div>
            </div>

            {/* ---------- headline numbers (StatBox grid) ---------- */}
            <div className="lp-stats" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(190px,1fr))", gap: 16 }}>
              <Wc101Stat icon="trophy" color="var(--gold)" value="23rd" label="Edition" sub="2026: first with 48 teams" />
              <Wc101Stat icon="shield" color="var(--brand-navy)" value="8" label="Nations have won" sub="In 22 tournaments since 1930" />
              <Wc101Stat icon="bolt" color="var(--accent)" value="16" label="Record goals" sub="Miroslav Klose, 2002–2014" />
              <Wc101Stat icon="flame" color="var(--brand-blue)" value="172" label="Goals in 2022" sub="The highest-scoring edition yet" />
            </div>

            {/* ---------- roll of honour: every final ---------- */}
            <div id="honours" className="col gap-20">
              <PageHead level={2} eyebrow="Winners & finalists" title="The roll of honour"
                sub="Every final since 1930: 22 editions, 22 stories, and only eight names ever engraved on the trophy." />
              <div className="card" style={{ overflow: "hidden" }}>
                <div style={{ overflowX: "auto" }}>
                  {/* Each final reads like a match card line: winner · score · runner-up
                      (same 1fr auto 1fr idiom as the app's match cards), so the two
                      participants face each other across the scoreline. */}
                  <table className="lb wc101-honours">
                    <thead><tr><th style={{ width: 56 }}>Year</th><th style={{ textAlign: "center" }}>The final</th><th className="wc101-extra" style={{ width: 150 }}>Top scorer</th><th className="wc101-extra" style={{ width: 128 }}>Most assists</th><th className="wc101-host" style={{ width: 110 }}>Host</th></tr></thead>
                    <tbody>
                      {WC101_FINALS.map((f) => (
                        <tr key={f.year}>
                          <td><span className="mono" style={{ fontWeight: 700, fontSize: 13.5 }}>{f.year}</span></td>
                          <td>
                            <div className="wc101-final">
                              <div className="wc101-side win">
                                <span className="wc101-cup" style={{ display: "inline-flex", color: "var(--gold)", flex: "none" }}><Icon name="trophy" size={13} stroke={2.2} /></span>
                                <Wc101Nation name={f.winner} winner />
                                <Wc101Flag emoji={WC101_FLAG[f.winner]} size="sm" />
                              </div>
                              <div className="col" style={{ alignItems: "center", lineHeight: 1.2 }}>
                                <span className="mono" style={{ fontWeight: 700, fontSize: 13.5 }}>{f.score}</span>
                                {f.note && <span className="muted nowrap" style={{ fontSize: 10 }}>{f.note}</span>}
                              </div>
                              <div className="wc101-side">
                                <Wc101Flag emoji={WC101_FLAG[f.runner]} size="sm" />
                                <Wc101Nation name={f.runner} />
                              </div>
                            </div>
                          </td>
                          <td className="wc101-extra"><Wc101Leader stat={f.scorer} /></td>
                          <td className="wc101-extra"><Wc101Leader stat={f.assists} /></td>
                          <td className="wc101-host"><span className="muted" style={{ fontSize: 12.5 }}>{f.host}</span></td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
                <div style={{ padding: "10px 16px 13px", borderTop: "1px solid var(--line-2)" }}>
                  <span className="muted" style={{ fontSize: 11.5, lineHeight: 1.45, display: "block" }}>* 1950 had no final: Uruguay beat hosts Brazil 2–1 in the decisive last match of the final group, the famous "Maracanazo". Assists were only tracked officially from 1966; a "–" means no reliable assists record exists for that edition. Hover a tied or disputed entry for the details.</span>
                </div>
              </div>
            </div>

            {/* ---------- most titles ---------- */}
            <div className="col gap-20">
              <PageHead level={2} eyebrow="Most times winners" title="The eight champions"
                sub="Brazil lead the all-time count, the only nation with five stars on the shirt." />
              <div className="card" style={{ overflow: "hidden" }}>
                <div style={{ overflowX: "auto" }}>
                  <table className="lb">
                    <tbody>
                      {WC101_TITLES.map((t, i) => (
                        <tr key={t.nation}>
                          <td style={{ width: 30 }}><span className="rank-num">{i + 1}</span></td>
                          <td>
                            <div className="row gap-10" style={{ minWidth: 0 }}>
                              <Wc101Flag emoji={WC101_FLAG[t.nation]} size="sm" />
                              <span className="nowrap" style={{ fontWeight: 700, fontSize: 13.5 }}>{t.nation}</span>
                              <span className="muted nowrap wc101-era" style={{ fontSize: 12 }}>· {t.years}</span>
                            </div>
                          </td>
                          <td style={{ textAlign: "right" }}>
                            <div className="row gap-8" style={{ justifyContent: "flex-end", alignItems: "center" }}>
                              <span className="row" style={{ gap: 3, color: "var(--gold)" }}>
                                {Array.from({ length: t.count }).map((_, k) => <Icon key={k} name="trophy" size={14} stroke={2.2} />)}
                              </span>
                              <span className="mono" style={{ fontWeight: 700, fontSize: 14, width: 16, textAlign: "right" }}>{t.count}</span>
                            </div>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>

            {/* ---------- player records: goals / assists / matches ---------- */}
            <div id="records" className="col gap-20">
              <PageHead level={2} eyebrow="Player records" title="Goals, assists & matches"
                sub="The all-time charts entering 2026, and Messi has all three records in his sights this summer." />
              <div className="wc101-grid3">
                <Wc101RecordTable title="Most goals" unit="goals" rows={WC101_SCORERS} />
                <Wc101RecordTable title="Most assists" unit="assists" rows={WC101_ASSISTS}
                  foot="Officially tracked only from 1966: Pelé's 10 is a retroactive reconstruction (his official count is 6); the official record is 8, shared by Maradona and Messi." />
                <Wc101RecordTable title="Most matches played" unit="matches" rows={WC101_MATCHES} />
              </div>
              {/* records in play in 2026 — gold-stripe callout, same pattern as the landing prizes card */}
              <div className="card card-pad row gap-16 wrap" style={{ alignItems: "center", boxShadow: "inset 3px 0 0 var(--brand-yellow), var(--shadow-card)" }}>
                <span style={{ width: 44, height: 44, borderRadius: 12, flex: "none", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--gold)", background: "color-mix(in srgb, var(--brand-yellow) 22%, var(--surface))" }}><Icon name="flame" size={22} /></span>
                <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.55, color: "var(--ink-2)", flex: "1 1 320px" }}><strong>Records in play this summer:</strong> Messi needs 4 goals to pass Klose's 16 and 3 assists to take Pelé's record outright. And the moment Messi, Ronaldo or Ochoa step on the pitch, they become the first men ever at a <strong>sixth</strong> World Cup.</p>
              </div>
            </div>

            {/* ---------- participations: nations & players ---------- */}
            <div className="col gap-20">
              <PageHead level={2} eyebrow="Most participations" title="The ever-presents"
                sub="One nation has never missed a single edition, and three players make history just by showing up in 2026." />
              <div className="dash-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, alignItems: "start" }}>
                <Wc101RecordTable title="Nations · World Cups played" unit="through 2022" rows={WC101_NATION_APPS}
                  foot="Brazil are the only nation to appear at all 22 editions; 2026 makes it 23 straight." />
                <Wc101RecordTable title="Players · World Cups played" unit="incl. 2026" rows={WC101_PLAYER_APPS}
                  foot="Messi, Ronaldo and Ochoa are all in their squads for 2026, a record sixth tournament for each." />
              </div>
            </div>

            {/* ---------- did you know — prediction-relevant trivia ---------- */}
            <div id="trivia" className="col gap-20">
              <PageHead level={2} eyebrow="Did you know?" title="Trivia that wins predictions"
                sub="History doesn't repeat, but it rhymes: six patterns worth keeping in mind before you fill in a scoreline." />
              <div className="wc101-facts">
                {WC101_FACTS.map((f) => (
                  <div key={f.title} className="card card-pad col gap-8" style={{ padding: "18px 20px" }}>
                    <span style={{ width: 34, height: 34, borderRadius: 10, display: "flex", alignItems: "center", justifyContent: "center", color: "var(--accent)", background: "var(--accent-soft)" }}><Icon name={f.icon} size={18} stroke={2} /></span>
                    <h3 style={{ fontSize: 16 }}>{f.title}</h3>
                    <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.5, color: "var(--ink-2)" }}>{f.body}</p>
                  </div>
                ))}
              </div>
            </div>

            {/* ---------- closing CTA (hero-card) ---------- */}
            <div className="card hero-card" style={{ background: "var(--hero-bg)", color: "var(--hero-ink)", border: "none", overflow: "hidden", position: "relative" }}>
              <div style={{ position: "absolute", inset: 0, opacity: .5, background: "radial-gradient(700px 240px at 12% -30%, color-mix(in srgb, var(--brand-blue) 40%, transparent), transparent)" }} />
              <div className="card-pad row between wrap gap-16" style={{ padding: "26px 28px", position: "relative", alignItems: "center" }}>
                <div className="col gap-2" style={{ minWidth: 0 }}>
                  <h2 style={{ fontSize: 24, fontWeight: 800, letterSpacing: "-.03em" }}>Class dismissed. Time to predict.</h2>
                  <span style={{ opacity: .82, fontSize: 14, marginTop: 4 }}>You now know more World Cup history than most of the leaderboard. Put it to work.</span>
                </div>
                <div className="row gap-10 wrap">
                  {inApp
                    ? <button className="btn btn-primary" onClick={onPredict}>Make your predictions<Icon name="chevron" size={15} /></button>
                    : <button className="btn btn-primary" onClick={onJoin}>Join the contest<Icon name="chevron" size={15} /></button>}
                  {!inApp && <button className="btn btn-ghost on-hero" onClick={onBack}>Back to the homepage</button>}
                </div>
              </div>
            </div>

          </div>
  );

  if (inApp) return body;

  // Standalone (pre-login): wrap the body in the landing page's shell — same
  // sticky topnav (brand = back link), anchor menu, and topfooter.
  return (
    <div className="acq-root" style={{ minHeight: "100vh", display: "flex", flexDirection: "column", background: "var(--bg)" }}>
      {/* ---------- top nav — identical to the landing page / AppShell desktop ---------- */}
      <header className="topnav" style={{ position: "sticky", top: 0, zIndex: 50, background: "var(--surface)", borderBottom: "1px solid var(--line)" }}>
        <div className="topnav-inner" style={{ maxWidth: 1180, margin: "0 auto", padding: "0 28px", height: 60, display: "flex", alignItems: "center", gap: 18 }}>
          <a className="row gap-12 topnav-brand pointer" onClick={onBack} style={{ flex: "0 0 auto", cursor: "pointer" }} title="Back to the homepage"><Logo h={20} /></a>
          <nav className="topnav-nav lp-nav" style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 2, flex: "1 1 auto", minWidth: 0 }}>
            {[["honours", "Roll of honour"], ["records", "Records"], ["trivia", "Did you know?"]].map(([id, label]) => (
              <a key={id} className="topnav-item pointer" onClick={() => scrollTo(id)}
                style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 12px", borderRadius: 10, fontFamily: "var(--ff)", fontSize: 14, fontWeight: 600, color: "var(--ink-2)", cursor: "pointer" }}>{label}</a>
            ))}
          </nav>
          <div className="row gap-10" style={{ flex: "0 0 auto" }}>
            <button className="btn btn-ghost btn-sm" onClick={onSignIn}>Sign in</button>
            <button className="btn btn-primary btn-sm" onClick={onJoin}>Join the contest</button>
          </div>
        </div>
      </header>

      <main className="grow" style={{ minWidth: 0, maxWidth: "100%" }}>
        <div style={{ maxWidth: 1080, margin: "0 auto", padding: "30px 36px 60px" }}>{body}</div>
      </main>

      {/* ---------- footer — topfooter pattern ---------- */}
      <footer className="topfooter" style={{ borderTop: "1px solid var(--line)", background: "var(--surface)", flex: "0 0 auto" }}>
        <div style={{ maxWidth: 1080, margin: "0 auto", padding: "18px 36px", display: "flex", flexWrap: "wrap", alignItems: "center", justifyContent: "space-between", gap: 18 }}>
          <div className="row gap-12"><Logo h={18} /><span className="muted" style={{ fontSize: 12.5 }}>World Cup 101 · stats through Qatar 2022</span></div>
          <a className="muted pointer" onClick={onBack} style={{ fontSize: 12.5, cursor: "pointer", textDecoration: "underline" }}>Back to the homepage</a>
        </div>
      </footer>
    </div>
  );
}

Object.assign(window, { WorldCup101 });