import { useState, useEffect } from "react"; import * as MDReactSQL from "@motherduck/react-sql-query"; import { ChevronLeft, ChevronRight, Trophy, RotateCcw, Pencil, MapPin } from "lucide-react"; const { useSQLQuery } = MDReactSQL; // useDiveState is not available in every dive runtime (e.g. the gallery // submission preview ships an older version). Fall back to plain useState so // the dive still renders — picks just won't persist across reloads in that // environment. In the regular dive viewer it works as normal. const useDiveState = MDReactSQL.useDiveState || ((_key, initial) => useState(initial)); export const REQUIRED_DATABASES = [ { type: 'share', path: 'md:_share/worldcup_2026_share/1f04d6f4-e084-4d4f-b2a0-947cc7e2f6f2', alias: 'worldcup_2026_share' } ]; const STAGES = ["group", "thirds", "r32", "r16", "qf", "sf", "final"]; const STAGE_LABELS = { group: "Groups", thirds: "Pick Thirds", r32: "R32", r16: "R16", qf: "QF", sf: "SF", final: "Final", }; // FIFA's official Annex C lookup: for each of the C(12,8) = 495 combinations of qualifying // third-placed groups, the table specifies which third goes into which R32 slot. // Key: the 8 qualifying group letters, sorted (e.g. "ABCDEFGH"). // Value: 8-char string giving the third's group in slot order T1, T2, T3, T4, T5, T6, T7, T8. const SLOT_ORDER = ["T1", "T2", "T3", "T4", "T5", "T6", "T7", "T8"]; const FIFA_THIRDS_TABLE = {"ABCDEFGH":"CFHEBAGD","ABCDEFGI":"DFCIBAGE","ABCDEFGJ":"DFCJBAGE","ABCDEFGK":"DFCKBAGE","ABCDEFGL":"DFCEBAGL","ABCDEFHI":"CFHIBAED","ABCDEFHJ":"CFHEBAJD","ABCDEFHK":"CFHKBAED","ABCDEFHL":"CDHEBAFL","ABCDEFIJ":"DFCIBAJE","ABCDEFIK":"DFCKBAEI","ABCDEFIL":"DFCIBAEL","ABCDEFJK":"DFCKBAJE","ABCDEFJL":"DFCEBAJL","ABCDEFKL":"DFCKBAEL","ABCDEGHI":"CDHIBAGE","ABCDEGHJ":"CDHJBAGE","ABCDEGHK":"CDHKBAGE","ABCDEGHL":"CDHEBAGL","ABCDEGIJ":"CDEJBAGI","ABCDEGIK":"CDEKBAGI","ABCDEGIL":"CDEIBAGL","ABCDEGJK":"CDEKBAGJ","ABCDEGJL":"CDEJBAGL","ABCDEGKL":"CDEKBAGL","ABCDEHIJ":"CDHIBAJE","ABCDEHIK":"CDHKBAEI","ABCDEHIL":"CDHIBAEL","ABCDEHJK":"CDHKBAJE","ABCDEHJL":"CDHEBAJL","ABCDEHKL":"CDHKBAEL","ABCDEIJK":"CDEKBAJI","ABCDEIJL":"CDEIBAJL","ABCDEIKL":"CDEKBAIL","ABCDEJKL":"CDEKBAJL","ABCDFGHI":"CFHIBAGD","ABCDFGHJ":"CFHJBAGD","ABCDFGHK":"CFHKBAGD","ABCDFGHL":"DFCHBAGL","ABCDFGIJ":"DFCJBAGI","ABCDFGIK":"DFCKBAGI","ABCDFGIL":"DFCIBAGL","ABCDFGJK":"DFCKBAGJ","ABCDFGJL":"DFCJBAGL","ABCDFGKL":"DFCKBAGL","ABCDFHIJ":"CFHIBAJD","ABCDFHIK":"CDHKBAFI","ABCDFHIL":"CDHIBAFL","ABCDFHJK":"CFHKBAJD","ABCDFHJL":"DFCHBAJL","ABCDFHKL":"CDHKBAFL","ABCDFIJK":"DFCKBAJI","ABCDFIJL":"DFCIBAJL","ABCDFIKL":"DFCKBAIL","ABCDFJKL":"DFCKBAJL","ABCDGHIJ":"CDHJBAGI","ABCDGHIK":"CDHKBAGI","ABCDGHIL":"CDHIBAGL","ABCDGHJK":"CDHKBAGJ","ABCDGHJL":"CDHJBAGL","ABCDGHKL":"CDHKBAGL","ABCDGIJK":"DGCKBAJI","ABCDGIJL":"DGCIBAJL","ABCDGIKL":"CDIKBAGL","ABCDGJKL":"DGCKBAJL","ABCDHIJK":"CDHKBAJI","ABCDHIJL":"CDHIBAJL","ABCDHIKL":"CDHKBAIL","ABCDHJKL":"CDHKBAJL","ABCDIJKL":"CDIKBAJL","ABCEFGHI":"CFHIBAGE","ABCEFGHJ":"CFHJBAGE","ABCEFGHK":"CFHKBAGE","ABCEFGHL":"CFHEBAGL","ABCEFGIJ":"CFEJBAGI","ABCEFGIK":"CFEKBAGI","ABCEFGIL":"CFEIBAGL","ABCEFGJK":"CFEKBAGJ","ABCEFGJL":"CFEJBAGL","ABCEFGKL":"CFEKBAGL","ABCEFHIJ":"CFHIBAJE","ABCEFHIK":"CFHKBAEI","ABCEFHIL":"CFHIBAEL","ABCEFHJK":"CFHKBAJE","ABCEFHJL":"CFHEBAJL","ABCEFHKL":"CFHKBAEL","ABCEFIJK":"CFEKBAJI","ABCEFIJL":"CFEIBAJL","ABCEFIKL":"CFEKBAIL","ABCEFJKL":"CFEKBAJL","ABCEGHIJ":"CGHIBAJE","ABCEGHIK":"CHEKBAGI","ABCEGHIL":"CHEIBAGL","ABCEGHJK":"CGHKBAJE","ABCEGHJL":"CGHEBAJL","ABCEGHKL":"CHEKBAGL","ABCEGIJK":"CGEKBAJI","ABCEGIJL":"CGEIBAJL","ABCEGIKL":"ACEKBIGL","ABCEGJKL":"CGEKBAJL","ABCEHIJK":"CHEKBAJI","ABCEHIJL":"CHEIBAJL","ABCEHIKL":"CHEKBAIL","ABCEHJKL":"CHEKBAJL","ABCEIJKL":"ACEKBIJL","ABCFGHIJ":"CFHJBAGI","ABCFGHIK":"CFHKBAGI","ABCFGHIL":"CFHIBAGL","ABCFGHJK":"CFHKBAGJ","ABCFGHJL":"CFHJBAGL","ABCFGHKL":"CFHKBAGL","ABCFGIJK":"FGCKBAJI","ABCFGIJL":"FGCIBAJL","ABCFGIKL":"CFIKBAGL","ABCFGJKL":"FGCKBAJL","ABCFHIJK":"CFHKBAJI","ABCFHIJL":"CFHIBAJL","ABCFHIKL":"CFHKBAIL","ABCFHJKL":"CFHKBAJL","ABCFIJKL":"CFIKBAJL","ABCGHIJK":"CGHKBAJI","ABCGHIJL":"CGHIBAJL","ABCGHIKL":"CHIKBAGL","ABCGHJKL":"CGHKBAJL","ABCGIJKL":"CGIKBAJL","ABCHIJKL":"CHIKBAJL","ABDEFGHI":"DFHIBAGE","ABDEFGHJ":"DFHJBAGE","ABDEFGHK":"DFHKBAGE","ABDEFGHL":"DFHEBAGL","ABDEFGIJ":"DFEJBAGI","ABDEFGIK":"DFEKBAGI","ABDEFGIL":"DFEIBAGL","ABDEFGJK":"DFEKBAGJ","ABDEFGJL":"DFEJBAGL","ABDEFGKL":"DFEKBAGL","ABDEFHIJ":"DFHIBAJE","ABDEFHIK":"DFHKBAEI","ABDEFHIL":"DFHIBAEL","ABDEFHJK":"DFHKBAJE","ABDEFHJL":"DFHEBAJL","ABDEFHKL":"DFHKBAEL","ABDEFIJK":"DFEKBAJI","ABDEFIJL":"DFEIBAJL","ABDEFIKL":"DFEKBAIL","ABDEFJKL":"DFEKBAJL","ABDEGHIJ":"DGHIBAJE","ABDEGHIK":"DHEKBAGI","ABDEGHIL":"DHEIBAGL","ABDEGHJK":"DGHKBAJE","ABDEGHJL":"DGHEBAJL","ABDEGHKL":"DHEKBAGL","ABDEGIJK":"DGEKBAJI","ABDEGIJL":"DGEIBAJL","ABDEGIKL":"ADEKBIGL","ABDEGJKL":"DGEKBAJL","ABDEHIJK":"DHEKBAJI","ABDEHIJL":"DHEIBAJL","ABDEHIKL":"DHEKBAIL","ABDEHJKL":"DHEKBAJL","ABDEIJKL":"ADEKBIJL","ABDFGHIJ":"DFHJBAGI","ABDFGHIK":"DFHKBAGI","ABDFGHIL":"DFHIBAGL","ABDFGHJK":"DFHKBAGJ","ABDFGHJL":"DFHJBAGL","ABDFGHKL":"DFHKBAGL","ABDFGIJK":"DGFKBAJI","ABDFGIJL":"DGFIBAJL","ABDFGIKL":"DFIKBAGL","ABDFGJKL":"DGFKBAJL","ABDFHIJK":"DFHKBAJI","ABDFHIJL":"DFHIBAJL","ABDFHIKL":"DFHKBAIL","ABDFHJKL":"DFHKBAJL","ABDFIJKL":"DFIKBAJL","ABDGHIJK":"DGHKBAJI","ABDGHIJL":"DGHIBAJL","ABDGHIKL":"DHIKBAGL","ABDGHJKL":"DGHKBAJL","ABDGIJKL":"DGIKBAJL","ABDHIJKL":"DHIKBAJL","ABEFGHIJ":"FGHIBAJE","ABEFGHIK":"FHEKBAGI","ABEFGHIL":"FHEIBAGL","ABEFGHJK":"FGHKBAJE","ABEFGHJL":"FGHEBAJL","ABEFGHKL":"FHEKBAGL","ABEFGIJK":"FGEKBAJI","ABEFGIJL":"FGEIBAJL","ABEFGIKL":"AFEKBIGL","ABEFGJKL":"FGEKBAJL","ABEFHIJK":"FHEKBAJI","ABEFHIJL":"FHEIBAJL","ABEFHIKL":"FHEKBAIL","ABEFHJKL":"FHEKBAJL","ABEFIJKL":"AFEKBIJL","ABEGHIJK":"AGEKBHJI","ABEGHIJL":"AGEIBHJL","ABEGHIKL":"AHEKBIGL","ABEGHJKL":"AGEKBHJL","ABEGIJKL":"AGEKBIJL","ABEHIJKL":"AHEKBIJL","ABFGHIJK":"FGHKBAJI","ABFGHIJL":"FGHIBAJL","ABFGHIKL":"AFHKBIGL","ABFGHJKL":"FGHKBAJL","ABFGIJKL":"FGIKBAJL","ABFHIJKL":"AFHKBIJL","ABGHIJKL":"AGHKBIJL","ACDEFGHI":"CFHIEAGD","ACDEFGHJ":"CFHEJAGD","ACDEFGHK":"CFHKEAGD","ACDEFGHL":"CDHEFAGL","ACDEFGIJ":"DFCIJAGE","ACDEFGIK":"DFCKEAGI","ACDEFGIL":"DFCIEAGL","ACDEFGJK":"DFCKJAGE","ACDEFGJL":"DFCEJAGL","ACDEFGKL":"DFCKEAGL","ACDEFHIJ":"CFHIEAJD","ACDEFHIK":"CDHKFAEI","ACDEFHIL":"CDHIFAEL","ACDEFHJK":"CFHKEAJD","ACDEFHJL":"CDHEFAJL","ACDEFHKL":"CDHKFAEL","ACDEFIJK":"DFCKEAJI","ACDEFIJL":"DFCIEAJL","ACDEFIKL":"DFCKIAEL","ACDEFJKL":"DFCKEAJL","ACDEGHIJ":"CDHIJAGE","ACDEGHIK":"CDHKEAGI","ACDEGHIL":"CDHIEAGL","ACDEGHJK":"CDHKJAGE","ACDEGHJL":"CDHEJAGL","ACDEGHKL":"CDHKEAGL","ACDEGIJK":"CDEKJAGI","ACDEGIJL":"CDEIJAGL","ACDEGIKL":"CDEKIAGL","ACDEGJKL":"CDEKJAGL","ACDEHIJK":"CDHKEAJI","ACDEHIJL":"CDHIEAJL","ACDEHIKL":"CDHKIAEL","ACDEHJKL":"CDHKEAJL","ACDEIJKL":"CDEKIAJL","ACDFGHIJ":"CFHIJAGD","ACDFGHIK":"CDHKFAGI","ACDFGHIL":"CDHIFAGL","ACDFGHJK":"CFHKJAGD","ACDFGHJL":"DFCHJAGL","ACDFGHKL":"CDHKFAGL","ACDFGIJK":"DFCKJAGI","ACDFGIJL":"DFCIJAGL","ACDFGIKL":"DFCKIAGL","ACDFGJKL":"DFCKJAGL","ACDFHIJK":"CDHKFAJI","ACDFHIJL":"CDHIFAJL","ACDFHIKL":"CDHKIAFL","ACDFHJKL":"CDHKFAJL","ACDFIJKL":"DFCKIAJL","ACDGHIJK":"CDHKJAGI","ACDGHIJL":"CDHIJAGL","ACDGHIKL":"CDHKIAGL","ACDGHJKL":"CDHKJAGL","ACDGIJKL":"CDIKJAGL","ACDHIJKL":"CDHKIAJL","ACEFGHIJ":"CFHIJAGE","ACEFGHIK":"CFHKEAGI","ACEFGHIL":"CFHIEAGL","ACEFGHJK":"CFHKJAGE","ACEFGHJL":"CFHEJAGL","ACEFGHKL":"CFHKEAGL","ACEFGIJK":"CFEKJAGI","ACEFGIJL":"CFEIJAGL","ACEFGIKL":"CFEKIAGL","ACEFGJKL":"CFEKJAGL","ACEFHIJK":"CFHKEAJI","ACEFHIJL":"CFHIEAJL","ACEFHIKL":"CFHKIAEL","ACEFHJKL":"CFHKEAJL","ACEFIJKL":"CFEKIAJL","ACEGHIJK":"CHEKJAGI","ACEGHIJL":"CHEIJAGL","ACEGHIKL":"CHEKIAGL","ACEGHJKL":"CHEKJAGL","ACEGIJKL":"CGEKIAJL","ACEHIJKL":"CHEKIAJL","ACFGHIJK":"CFHKJAGI","ACFGHIJL":"CFHIJAGL","ACFGHIKL":"CFHKIAGL","ACFGHJKL":"CFHKJAGL","ACFGIJKL":"CFIKJAGL","ACFHIJKL":"CFHKIAJL","ACGHIJKL":"CGHKIAJL","ADEFGHIJ":"DFHIJAGE","ADEFGHIK":"DFHKEAGI","ADEFGHIL":"DFHIEAGL","ADEFGHJK":"DFHKJAGE","ADEFGHJL":"DFHEJAGL","ADEFGHKL":"DFHKEAGL","ADEFGIJK":"DFEKJAGI","ADEFGIJL":"DFEIJAGL","ADEFGIKL":"DFEKIAGL","ADEFGJKL":"DFEKJAGL","ADEFHIJK":"DFHKEAJI","ADEFHIJL":"DFHIEAJL","ADEFHIKL":"DFHKIAEL","ADEFHJKL":"DFHKEAJL","ADEFIJKL":"DFEKIAJL","ADEGHIJK":"DHEKJAGI","ADEGHIJL":"DHEIJAGL","ADEGHIKL":"DHEKIAGL","ADEGHJKL":"DHEKJAGL","ADEGIJKL":"DGEKIAJL","ADEHIJKL":"DHEKIAJL","ADFGHIJK":"DFHKJAGI","ADFGHIJL":"DFHIJAGL","ADFGHIKL":"DFHKIAGL","ADFGHJKL":"DFHKJAGL","ADFGIJKL":"DFIKJAGL","ADFHIJKL":"DFHKIAJL","ADGHIJKL":"DGHKIAJL","AEFGHIJK":"FHEKJAGI","AEFGHIJL":"FHEIJAGL","AEFGHIKL":"FHEKIAGL","AEFGHJKL":"FHEKJAGL","AEFGIJKL":"FGEKIAJL","AEFHIJKL":"FHEKIAJL","AEGHIJKL":"AGEKIHJL","AFGHIJKL":"FGHKIAJL","BCDEFGHI":"DFCIBHGE","BCDEFGHJ":"CFHEBJGD","BCDEFGHK":"DFCKBHGE","BCDEFGHL":"DFCEBHGL","BCDEFGIJ":"DFCIBJGE","BCDEFGIK":"DFCKBEGI","BCDEFGIL":"DFCIBEGL","BCDEFGJK":"DFCKBJGE","BCDEFGJL":"DFCEBJGL","BCDEFGKL":"DFCKBEGL","BCDEFHIJ":"DFCIBHJE","BCDEFHIK":"DFCKBHEI","BCDEFHIL":"DFCIBHEL","BCDEFHJK":"DFCKBHJE","BCDEFHJL":"DFCEBHJL","BCDEFHKL":"DFCKBHEL","BCDEFIJK":"DFCKBEJI","BCDEFIJL":"DFCIBEJL","BCDEFIKL":"DFCKBIEL","BCDEFJKL":"DFCKBEJL","BCDEGHIJ":"CDHIBJGE","BCDEGHIK":"CDEKBHGI","BCDEGHIL":"CDEIBHGL","BCDEGHJK":"CDHKBJGE","BCDEGHJL":"CDHEBJGL","BCDEGHKL":"CDEKBHGL","BCDEGIJK":"CDEKBJGI","BCDEGIJL":"CDEIBJGL","BCDEGIKL":"CDEKBIGL","BCDEGJKL":"CDEKBJGL","BCDEHIJK":"CDEKBHJI","BCDEHIJL":"CDEIBHJL","BCDEHIKL":"CDEKBHIL","BCDEHJKL":"CDEKBHJL","BCDEIJKL":"CDEKBIJL","BCDFGHIJ":"CFHIBJGD","BCDFGHIK":"DFCKBHGI","BCDFGHIL":"DFCIBHGL","BCDFGHJK":"CFHKBJGD","BCDFGHJL":"DFCJBHGL","BCDFGHKL":"DFCKBHGL","BCDFGIJK":"DFCKBJGI","BCDFGIJL":"DFCIBJGL","BCDFGIKL":"DFCKBIGL","BCDFGJKL":"DFCKBJGL","BCDFHIJK":"DFCKBHJI","BCDFHIJL":"DFCIBHJL","BCDFHIKL":"DFCKBHIL","BCDFHJKL":"DFCKBHJL","BCDFIJKL":"DFCKBIJL","BCDGHIJK":"CDHKBJGI","BCDGHIJL":"CDHIBJGL","BCDGHIKL":"CDHKBIGL","BCDGHJKL":"CDHKBJGL","BCDGIJKL":"CDIKBJGL","BCDHIJKL":"CDHKBIJL","BCEFGHIJ":"CFHIBJGE","BCEFGHIK":"CFEKBHGI","BCEFGHIL":"CFEIBHGL","BCEFGHJK":"CFHKBJGE","BCEFGHJL":"CFHEBJGL","BCEFGHKL":"CFEKBHGL","BCEFGIJK":"CFEKBJGI","BCEFGIJL":"CFEIBJGL","BCEFGIKL":"CFEKBIGL","BCEFGJKL":"CFEKBJGL","BCEFHIJK":"CFEKBHJI","BCEFHIJL":"CFEIBHJL","BCEFHIKL":"CFEKBHIL","BCEFHJKL":"CFEKBHJL","BCEFIJKL":"CFEKBIJL","BCEGHIJK":"CGEKBHJI","BCEGHIJL":"CGEIBHJL","BCEGHIKL":"CHEKBIGL","BCEGHJKL":"CGEKBHJL","BCEGIJKL":"CGEKBIJL","BCEHIJKL":"CHEKBIJL","BCFGHIJK":"CFHKBJGI","BCFGHIJL":"CFHIBJGL","BCFGHIKL":"CFHKBIGL","BCFGHJKL":"CFHKBJGL","BCFGIJKL":"CFIKBJGL","BCFHIJKL":"CFHKBIJL","BCGHIJKL":"CGHKBIJL","BDEFGHIJ":"DFHIBJGE","BDEFGHIK":"DFEKBHGI","BDEFGHIL":"DFEIBHGL","BDEFGHJK":"DFHKBJGE","BDEFGHJL":"DFHEBJGL","BDEFGHKL":"DFEKBHGL","BDEFGIJK":"DFEKBJGI","BDEFGIJL":"DFEIBJGL","BDEFGIKL":"DFEKBIGL","BDEFGJKL":"DFEKBJGL","BDEFHIJK":"DFEKBHJI","BDEFHIJL":"DFEIBHJL","BDEFHIKL":"DFEKBHIL","BDEFHJKL":"DFEKBHJL","BDEFIJKL":"DFEKBIJL","BDEGHIJK":"DGEKBHJI","BDEGHIJL":"DGEIBHJL","BDEGHIKL":"DHEKBIGL","BDEGHJKL":"DGEKBHJL","BDEGIJKL":"DGEKBIJL","BDEHIJKL":"DHEKBIJL","BDFGHIJK":"DFHKBJGI","BDFGHIJL":"DFHIBJGL","BDFGHIKL":"DFHKBIGL","BDFGHJKL":"DFHKBJGL","BDFGIJKL":"DFIKBJGL","BDFHIJKL":"DFHKBIJL","BDGHIJKL":"DGHKBIJL","BEFGHIJK":"FGEKBHJI","BEFGHIJL":"FGEIBHJL","BEFGHIKL":"FHEKBIGL","BEFGHJKL":"FGEKBHJL","BEFGIJKL":"FGEKBIJL","BEFHIJKL":"FHEKBIJL","BEGHIJKL":"BGEKIHJL","BFGHIJKL":"FGHKBIJL","CDEFGHIJ":"DFCIJHGE","CDEFGHIK":"DFCKEHGI","CDEFGHIL":"DFCIEHGL","CDEFGHJK":"DFCKJHGE","CDEFGHJL":"DFCEJHGL","CDEFGHKL":"DFCKEHGL","CDEFGIJK":"DFCKEJGI","CDEFGIJL":"DFCIEJGL","CDEFGIKL":"DFCKEIGL","CDEFGJKL":"DFCKEJGL","CDEFHIJK":"DFCKEHJI","CDEFHIJL":"DFCIEHJL","CDEFHIKL":"DFCKIHEL","CDEFHJKL":"DFCKEHJL","CDEFIJKL":"DFCKEIJL","CDEGHIJK":"CDEKJHGI","CDEGHIJL":"CDEIJHGL","CDEGHIKL":"CDEKIHGL","CDEGHJKL":"CDEKJHGL","CDEGIJKL":"CDEKIJGL","CDEHIJKL":"CDEKIHJL","CDFGHIJK":"DFCKJHGI","CDFGHIJL":"DFCIJHGL","CDFGHIKL":"DFCKIHGL","CDFGHJKL":"DFCKJHGL","CDFGIJKL":"DFCKIJGL","CDFHIJKL":"DFCKIHJL","CDGHIJKL":"CDHKIJGL","CEFGHIJK":"CFEKJHGI","CEFGHIJL":"CFEIJHGL","CEFGHIKL":"CFEKIHGL","CEFGHJKL":"CFEKJHGL","CEFGIJKL":"CFEKIJGL","CEFHIJKL":"CFEKIHJL","CEGHIJKL":"CGEKIHJL","CFGHIJKL":"CFHKIJGL","DEFGHIJK":"DFEKJHGI","DEFGHIJL":"DFEIJHGL","DEFGHIKL":"DFEKIHGL","DEFGHJKL":"DFEKJHGL","DEFGIJKL":"DFEKIJGL","DEFHIJKL":"DFEKIHJL","DEGHIJKL":"DGEKIHJL","DFGHIJKL":"DFHKIJGL","EFGHIJKL":"FGEKIHJL"}; const R32_MATCHES = [ { id: "M74", slots: [{ t: "g", pos: "1E" }, { t: "3", sid: "T1" }] }, { id: "M76", slots: [{ t: "g", pos: "1C" }, { t: "g", pos: "2F" }] }, { id: "M77", slots: [{ t: "g", pos: "1I" }, { t: "3", sid: "T2" }] }, { id: "M78", slots: [{ t: "g", pos: "2E" }, { t: "g", pos: "2I" }] }, { id: "M73", slots: [{ t: "g", pos: "2A" }, { t: "g", pos: "2B" }] }, { id: "M79", slots: [{ t: "g", pos: "1A" }, { t: "3", sid: "T3" }] }, { id: "M75", slots: [{ t: "g", pos: "1F" }, { t: "g", pos: "2C" }] }, { id: "M80", slots: [{ t: "g", pos: "1L" }, { t: "3", sid: "T4" }] }, { id: "M83", slots: [{ t: "g", pos: "2K" }, { t: "g", pos: "2L" }] }, { id: "M86", slots: [{ t: "g", pos: "1J" }, { t: "g", pos: "2H" }] }, { id: "M84", slots: [{ t: "g", pos: "1H" }, { t: "g", pos: "2J" }] }, { id: "M88", slots: [{ t: "g", pos: "2D" }, { t: "g", pos: "2G" }] }, { id: "M81", slots: [{ t: "g", pos: "1D" }, { t: "3", sid: "T5" }] }, { id: "M85", slots: [{ t: "g", pos: "1B" }, { t: "3", sid: "T7" }] }, { id: "M82", slots: [{ t: "g", pos: "1G" }, { t: "3", sid: "T6" }] }, { id: "M87", slots: [{ t: "g", pos: "1K" }, { t: "3", sid: "T8" }] }, ]; const R16_MATCHES = [ { id: "M89", feeders: ["M74", "M77"] }, { id: "M91", feeders: ["M76", "M78"] }, { id: "M90", feeders: ["M73", "M75"] }, { id: "M92", feeders: ["M79", "M80"] }, { id: "M93", feeders: ["M83", "M84"] }, { id: "M95", feeders: ["M86", "M88"] }, { id: "M94", feeders: ["M81", "M82"] }, { id: "M96", feeders: ["M85", "M87"] }, ]; const QF_MATCHES = [ { id: "M97", feeders: ["M89", "M90"] }, { id: "M99", feeders: ["M91", "M92"] }, { id: "M98", feeders: ["M93", "M94"] }, { id: "M100", feeders: ["M95", "M96"] }, ]; const SF_MATCHES = [ { id: "M101", feeders: ["M97", "M98"] }, { id: "M102", feeders: ["M99", "M100"] }, ]; const F_MATCH = { id: "M104", feeders: ["M101", "M102"] }; const THIRD_SLOTS = [ { id: "T1", match: "M74", allowed: ["A", "B", "C", "D", "F"] }, { id: "T2", match: "M77", allowed: ["C", "D", "F", "G", "H"] }, { id: "T3", match: "M79", allowed: ["C", "E", "F", "H", "I"] }, { id: "T4", match: "M80", allowed: ["E", "H", "I", "J", "K"] }, { id: "T5", match: "M81", allowed: ["B", "E", "F", "I", "J"] }, { id: "T6", match: "M82", allowed: ["A", "E", "H", "I", "J"] }, { id: "T7", match: "M85", allowed: ["E", "F", "G", "I", "J"] }, { id: "T8", match: "M87", allowed: ["D", "E", "I", "J", "L"] }, ]; const C = { first: "#FFDB00", firstText: "#231f20", second: "#9aa3ad", third: "#b87a3d", primary: "#02B906", primarySoft: "#e6f7e6", bg: "#fafaf7", text: "#0a0a0a", muted: "#6a6a6a", cardBg: "#ffffff", border: "#e5e5e5", }; export default function WorldCupBracket() { // QUERY: SELECT group_letter, seed, team FROM "worldcup_2026_share"."main"."groups" ORDER BY group_letter, seed const { data: groupsData, isLoading, isError, error } = useSQLQuery( `SELECT group_letter, seed, team FROM "worldcup_2026_share"."main"."groups" ORDER BY group_letter, seed` ); // QUERY: SELECT match_id, city FROM "worldcup_2026_share"."main"."match_venues" const { data: venuesData } = useSQLQuery( `SELECT match_id, city FROM "worldcup_2026_share"."main"."match_venues"` ); const [groups, setGroups] = useState({}); const [renames, setRenames] = useDiveState("renames", {}); const [ranks, setRanks] = useDiveState("ranks", {}); const [thirdsAdvancing, setThirdsAdvancing] = useDiveState("thirdsAdvancing", {}); const [thirdAssignments, setThirdAssignments] = useDiveState("thirdAssignments", {}); const [knockouts, setKnockouts] = useDiveState("knockouts", {}); const [stage, setStage] = useDiveState("stage", "group"); const [editingTeam, setEditingTeam] = useState(null); useEffect(() => { const rows = Array.isArray(groupsData) ? groupsData : []; if (rows.length === 0) return; const g = {}; for (const r of rows) { const letter = r.group_letter; const seed = Number(r.seed); if (!g[letter]) g[letter] = []; const key = `${letter}-${seed - 1}`; g[letter][seed - 1] = renames[key] || r.team; } setGroups(g); }, [groupsData, renames]); // Build city-by-match lookup const cityByMatch = {}; if (Array.isArray(venuesData)) { for (const r of venuesData) cityByMatch[r.match_id] = r.city; } const groupKeys = Object.keys(groups).sort(); const setRank = (g, team, rank) => { const key = `${g}-${team}`; const nr = { ...ranks }; if (nr[key] === rank) { delete nr[key]; } else { for (const t of groups[g]) { if (t !== team && nr[`${g}-${t}`] === rank) delete nr[`${g}-${t}`]; } nr[key] = rank; } setRanks(nr); }; const getRank = (g, team) => ranks[`${g}-${team}`]; const teamAtRank = (g, rank) => (groups[g] || []).find((t) => getRank(g, t) === rank); const groupComplete = (g) => [1, 2, 3].every((r) => teamAtRank(g, r)); const allGroupsComplete = groupKeys.length === 12 && groupKeys.every(groupComplete); const thirdsCount = Object.values(thirdsAdvancing).filter(Boolean).length; const resolveSlot = (slot) => { if (slot.t === "g") { const rank = Number(slot.pos[0]); const letter = slot.pos[1]; return teamAtRank(letter, rank); } const letter = thirdAssignments[slot.sid]; if (!letter) return null; return teamAtRank(letter, 3); }; const matchTeams = (matchId) => { const r32 = R32_MATCHES.find((m) => m.id === matchId); if (r32) return r32.slots.map(resolveSlot); const all = [...R16_MATCHES, ...QF_MATCHES, ...SF_MATCHES, F_MATCH]; const m = all.find((x) => x.id === matchId); if (!m) return [null, null]; return m.feeders.map((f) => knockouts[f] || null); }; const slotLabel = (slot) => { if (slot.t === "g") return slot.pos; const letter = thirdAssignments[slot.sid]; return letter ? `${letter}3` : "3rd"; }; const pickWinner = (matchId, team) => { setKnockouts((prev) => ({ ...prev, [matchId]: team })); }; // Auto-assign thirds to R32 slots from FIFA's Annex C lookup whenever exactly // 8 thirds are picked. Anything other than 8 clears the assignment. useEffect(() => { const picked = Object.keys(thirdsAdvancing).filter((g) => thirdsAdvancing[g]); if (picked.length !== 8) { if (Object.keys(thirdAssignments).length > 0) setThirdAssignments({}); return; } const key = [...picked].sort().join(""); const assignString = FIFA_THIRDS_TABLE[key]; if (!assignString) { if (Object.keys(thirdAssignments).length > 0) setThirdAssignments({}); return; } const next = {}; for (let i = 0; i < SLOT_ORDER.length; i++) next[SLOT_ORDER[i]] = assignString[i]; const same = Object.keys(next).length === Object.keys(thirdAssignments).length && SLOT_ORDER.every((s) => next[s] === thirdAssignments[s]); if (!same) setThirdAssignments(next); }, [thirdsAdvancing]); // Migrate legacy URLs that have stage="assign" from before Annex C auto-fill. // Run once on mount; nothing here should re-fire later. useEffect(() => { if (!STAGES.includes(stage)) setStage("group"); }, []); // Whenever upstream picks change, drop any knockout winner that is no longer // one of the two valid teams in its match. Walk R32 → Final so invalidating a // round cascades to the next. Picks that remain valid are preserved. // Uses the functional setter form so `knockouts` doesn't need to be in deps, // which would cause a double-render every time we write. useEffect(() => { setKnockouts((prev) => { const next = { ...prev }; let changed = false; const validate = (matchId, teamA, teamB) => { const winner = next[matchId]; if (winner != null && winner !== teamA && winner !== teamB) { delete next[matchId]; changed = true; } }; for (const m of R32_MATCHES) { const [a, b] = m.slots.map(resolveSlot); validate(m.id, a, b); } for (const m of R16_MATCHES) { const [a, b] = m.feeders.map((f) => next[f] || null); validate(m.id, a, b); } for (const m of QF_MATCHES) { const [a, b] = m.feeders.map((f) => next[f] || null); validate(m.id, a, b); } for (const m of SF_MATCHES) { const [a, b] = m.feeders.map((f) => next[f] || null); validate(m.id, a, b); } const [fa, fb] = F_MATCH.feeders.map((f) => next[f] || null); validate(F_MATCH.id, fa, fb); return changed ? next : prev; }); }, [ranks, thirdsAdvancing, thirdAssignments, groups]); const resetAll = () => { setRanks({}); setThirdsAdvancing({}); setThirdAssignments({}); setKnockouts({}); setRenames({}); setStage("group"); }; const currentRoundMatches = () => { if (stage === "r32") return R32_MATCHES; if (stage === "r16") return R16_MATCHES; if (stage === "qf") return QF_MATCHES; if (stage === "sf") return SF_MATCHES; if (stage === "final") return [F_MATCH]; return []; }; const canAdvance = () => { if (stage === "group") return allGroupsComplete; if (stage === "thirds") return thirdsCount === 8; const matches = currentRoundMatches(); return matches.length > 0 && matches.every((m) => knockouts[m.id]); }; const advance = () => { const i = STAGES.indexOf(stage); if (i < STAGES.length - 1) setStage(STAGES[i + 1]); }; const goBack = () => { const i = STAGES.indexOf(stage); if (i > 0) setStage(STAGES[i - 1]); }; const renameTeam = (g, idx, newName) => { const trimmed = (newName || "").trim(); if (!trimmed) { setEditingTeam(null); return; } const oldName = groups[g][idx]; if (trimmed === oldName) { setEditingTeam(null); return; } const newGroups = { ...groups, [g]: [...groups[g]] }; newGroups[g][idx] = trimmed; setGroups(newGroups); setRenames({ ...renames, [`${g}-${idx}`]: trimmed }); const oldKey = `${g}-${oldName}`; if (ranks[oldKey] != null) { const nr = { ...ranks }; nr[`${g}-${trimmed}`] = nr[oldKey]; delete nr[oldKey]; setRanks(nr); } setEditingTeam(null); }; const renderGroupStage = () => (

Tap 1, 2, or 3 to set a team's finish. Tap the same pill again to clear. Pencil to rename.

{groupKeys.map((g) => (

Group {g}

{groups[g].map((team, i) => { const rank = getRank(g, team); const editing = editingTeam === `${g}-${i}`; return (

{editing ? ( renameTeam(g, i, e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") renameTeam(g, i, e.target.value); if (e.key === "Escape") setEditingTeam(null); }} style={{ flex: 1, padding: "4px 6px", fontSize: 12, border: `1px solid ${C.primary}`, borderRadius: 3 }} /> ) : ( <>

{team}

{[1, 2, 3].map((r) => { const active = rank === r; const color = r === 1 ? C.first : r === 2 ? C.second : C.third; return ( ); })}

)}

); })}

))}

); const renderThirdsPick = () => (

Pick 8 of the 12 third-placed teams to advance to R32. FIFA's Annex C lookup auto-assigns each qualifying third to its R32 slot once you've picked 8. Selected:{" "} {thirdsCount} / 8

{groupKeys.map((g) => { const third = teamAtRank(g, 3); if (!third) return null; const selected = !!thirdsAdvancing[g]; return ( ); })}

); const renderKnockoutRound = () => { const matches = currentRoundMatches(); if (matches.length === 0) return null; const cols = matches.length > 1 ? 2 : 1; return (

{matches.length} {matches.length === 1 ? "match" : "matches"}. Click to advance your pick.

{matches.map((m) => { const teams = matchTeams(m.id); const city = cityByMatch[m.id]; return (

{STAGE_LABELS[stage]} · {m.id} {stage === "r32" && m.slots && ( ({slotLabel(m.slots[0])} vs {slotLabel(m.slots[1])}) )} {city && ( {city} )}

{teams.map((team, j) => { const isWinner = knockouts[m.id] === team && !!team; return ( ); })}

); })}

); }; const stageContent = () => { if (isLoading || groupKeys.length === 0) { return (

{Array.from({ length: 12 }).map((_, i) => (

))}

); } if (isError) { return (

Couldn't load teams from worldcup_2026_share.main.groups. {String(error?.message || error || "")}

); } if (stage === "group") return renderGroupStage(); if (stage === "thirds") return renderThirdsPick(); return renderKnockoutRound(); }; const isLastStage = stage === STAGES[STAGES.length - 1]; const champion = knockouts["M104"]; const finalCity = cityByMatch["M104"]; return (

2026 World Cup Bracket

Pairings follow the official FIFA bracket. Each match card shows its host city.

{STAGES.map((s, i) => { const active = s === stage; const done = STAGES.indexOf(stage) > i; const clickable = done || active; return (

clickable && setStage(s)} style={{ padding: "5px 10px", borderRadius: 4, background: active ? C.primary : done ? C.primarySoft : C.cardBg, color: active ? "white" : done ? C.primary : C.muted, border: `1px solid ${active ? C.primary : done ? C.primary : C.border}`, cursor: clickable ? "pointer" : "default", fontWeight: active ? 600 : 400, userSelect: "none", }} > {STAGE_LABELS[s]}

); })}

{champion && (

Your predicted winner: {champion} {finalCity && · lifts trophy in {finalCity}}

)} {stageContent()}

); }

2026 World Cup Bracket Predictor

Comments