import { useState, useEffect } from "react";
import { ArrowLeft, RefreshCw } from "lucide-react";

/* ------------------------------------------------------------------ */
/*  Stil: Flutlicht über nassem Rasen, Kreide auf der Taktiktafel       */
/* ------------------------------------------------------------------ */
const CSS = `
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Barlow:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

.ap-root{
  --night:#0A1F1C;
  --night2:#0E2B26;
  --panel:#102F29;
  --line:rgba(242,239,227,0.16);
  --chalk:#F2EFE3;
  --dim:rgba(242,239,227,0.60);
  --flood:#FFC24B;
  --grass:#59B389;
  --red:#E2574C;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(255,194,75,0.16), transparent 60%),
    var(--night);
  color:var(--chalk);
  font-family:'Barlow', system-ui, sans-serif;
  min-height:100%;
}
.ap-root *{box-sizing:border-box;}
.disp{font-family:'Anton', Impact, sans-serif; letter-spacing:0.02em; text-transform:uppercase; font-weight:400;}
.mono{font-family:'Space Mono', ui-monospace, monospace;}
.chalk{color:var(--chalk);} .dim{color:var(--dim);} .flood{color:var(--flood);}
.grass{color:var(--grass);} .red{color:var(--red);}
.hair{border-color:var(--line);}
.panel{background:var(--panel); border:1px solid var(--line);}
.board{background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.18)); border:1px solid var(--line);}
.btn{
  font-family:'Barlow',sans-serif; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  border:1px solid var(--line); color:var(--chalk); background:transparent;
  padding:0.6rem 1.1rem; font-size:0.78rem; cursor:pointer; transition:background .15s, border-color .15s, color .15s;
}
.btn:hover{background:rgba(242,239,227,0.07); border-color:rgba(242,239,227,0.4);}
.btn-solid{background:var(--flood); color:#12211B; border-color:var(--flood);}
.btn-solid:hover{background:#ffd47a; border-color:#ffd47a; color:#12211B;}
.btn[disabled]{opacity:.4; cursor:not-allowed;}
.ap-root :focus-visible{outline:2px solid var(--flood); outline-offset:2px;}

.tile{
  position:relative; background:rgba(242,239,227,0.03); border:1px solid var(--line);
  color:var(--chalk); cursor:pointer; text-align:left; line-height:1.15;
  transition:background .15s, border-color .15s, transform .12s;
}
.tile:hover{background:rgba(242,239,227,0.08); border-color:rgba(242,239,227,0.35);}
.tile.on{background:rgba(255,194,75,0.14); border-color:var(--flood); color:var(--flood);}
.tile.free{background:rgba(89,179,137,0.12); border-color:var(--grass); color:var(--grass); cursor:default;}
.tile.won{background:rgba(89,179,137,0.16); border-color:var(--grass);}

.goal{position:relative; width:100%; padding-top:52%; background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.25)); border:3px solid var(--chalk); border-bottom:none;}
.net{position:absolute; inset:0; opacity:.16;
  background-image:linear-gradient(rgba(242,239,227,.9) 1px, transparent 1px), linear-gradient(90deg, rgba(242,239,227,.9) 1px, transparent 1px);
  background-size:22px 22px;}
.zone{position:absolute; border:1px dashed transparent; cursor:pointer; transition:background .15s, border-color .15s;}
.zone:hover{background:rgba(255,194,75,0.14); border-color:rgba(255,194,75,.6);}
.zone[disabled]{cursor:default;}
.zone[disabled]:hover{background:transparent; border-color:transparent;}
.ball{position:absolute; width:7%; padding-top:7%; border-radius:50%; background:var(--chalk);
  box-shadow:0 0 0 2px rgba(10,31,28,.8), 0 6px 18px rgba(0,0,0,.5);
  transform:translate(-50%,-50%); transition:left .55s cubic-bezier(.2,.8,.3,1), top .55s cubic-bezier(.2,.8,.3,1);}
.keeper{position:absolute; width:15%; height:26%; border-radius:6px; background:var(--flood); opacity:.85;
  transform:translate(-50%,-50%); transition:left .4s ease, top .4s ease;}
.dot{width:10px; height:10px; border-radius:50%; display:inline-block; border:1px solid var(--line);}
.dot.g{background:var(--grass); border-color:var(--grass);}
.dot.r{background:var(--red); border-color:var(--red);}

.opt{width:100%; text-align:left; padding:0.85rem 1rem; background:rgba(242,239,227,0.03); border:1px solid var(--line); color:var(--chalk); cursor:pointer; transition:background .15s, border-color .15s;}
.opt:hover:not([disabled]){background:rgba(242,239,227,0.08); border-color:rgba(242,239,227,0.4);}
.opt.right{background:rgba(89,179,137,0.16); border-color:var(--grass); color:var(--grass);}
.opt.wrong{background:rgba(226,87,76,0.14); border-color:var(--red); color:var(--red);}
.opt[disabled]{cursor:default;}

.card{background:rgba(242,239,227,0.03); border:1px solid var(--line); transition:background .15s, border-color .15s, transform .15s; cursor:pointer; text-align:left; width:100%;}
.card:hover{background:rgba(242,239,227,0.07); border-color:rgba(255,194,75,.55); transform:translateY(-2px);}
.bar{height:3px; background:rgba(242,239,227,0.12);}
.bar > div{height:100%; background:var(--flood); transition:width .3s ease;}

@keyframes flicker{0%,100%{opacity:.9} 45%{opacity:.55} 47%{opacity:.95}}
.flick{animation:flicker 5s ease-in-out infinite;}
@media (prefers-reduced-motion: reduce){
  .ap-root *{animation:none !important; transition:none !important;}
}
`;

const shuffle = (arr) => {
  const a = [...arr];
  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]];
  }
  return a;
};

/* ------------------------------------------------------------------ */
/*  Daten                                                              */
/* ------------------------------------------------------------------ */
const BINGO_EVENTS = [
  "Tor aus dem Strafraum", "Kopfballtor", "Freistoßtor", "Elfmeter gepfiffen",
  "Torwart hält den Elfmeter", "Latte oder Pfosten", "Eigentor", "Gelbe Karte",
  "Gelb wegen Meckern", "Rote Karte", "Abseitspfiff", "Tor nach Videobeweis aberkannt",
  "Schiri lässt Vorteil laufen", "Trainer diskutiert an der Linie", "Doppelwechsel",
  "Wechsel in der Halbzeit", "Spieler bleibt liegen und macht weiter", "Krampf in der Verlängerung",
  "Fehlpass direkt zum Gegner", "Rückpass zum Torwart unter Druck", "Kurz ausgeführte Ecke",
  "Ecke bringt eine Großchance", "Schuss aus über 25 Metern", "Fallrückzieher-Versuch",
  "Ball landet auf der Tribüne", "Weiter Abschlag des Torwarts", "Grätsche mit sauberer Balleroberung",
  "Konter über die Außenbahn", "Doppelpass in den Sechzehner", "Tor in den letzten 10 Minuten",
  "Nachspielzeit von 5 Minuten oder mehr", "Torjubel vor der eigenen Kurve", "Trikottausch nach Abpfiff",
  "Kommentator nennt eine kuriose Statistik", "Freistoß bleibt in der Mauer hängen",
  "Ball an die Hand im Strafraum", "Torwart läuft zur Ecke mit hoch", "Spieler wird ausgepfiffen",
  "Fahne oder Schal groß im Bild", "Standbild-Wiederholung in Zeitlupe",
  "Innenverteidiger dribbelt sich fest", "Schuss geht meterweit drüber",
];

const QUIZ = [
  { q: "Wer wurde 2014 in Brasilien Weltmeister?", a: "Deutschland", w: ["Argentinien", "Brasilien", "Spanien"] },
  { q: "Wie breit ist ein Fußballtor?", a: "7,32 m", w: ["6,50 m", "8,00 m", "9,15 m"] },
  { q: "Welcher Klub hat die meisten Titel im Europapokal der Landesmeister bzw. der Champions League?", a: "Real Madrid", w: ["AC Mailand", "FC Bayern", "FC Liverpool"] },
  { q: "Wer erzielte das Siegtor im WM-Finale 2014?", a: "Mario Götze", w: ["Thomas Müller", "André Schürrle", "Miroslav Klose"] },
  { q: "In welchem Stadion spielt Borussia Dortmund?", a: "Signal Iduna Park", w: ["Veltins-Arena", "Weserstadion", "Volksparkstadion"] },
  { q: "Wie viele Klubs spielen in der Bundesliga?", a: "18", w: ["16", "20", "22"] },
  { q: "Wofür steht die Abkürzung VAR?", a: "Video Assistant Referee", w: ["Visual Action Review", "Video Analysis Rule", "Verified Assistant Replay"] },
  { q: "Welches Land gewann die erste Fußball-WM 1930?", a: "Uruguay", w: ["Brasilien", "Italien", "Argentinien"] },
  { q: "Welche Nation gewann die EM 2016?", a: "Portugal", w: ["Frankreich", "Deutschland", "Spanien"] },
  { q: "Wer ist Rekordtorschütze bei Weltmeisterschaften?", a: "Miroslav Klose", w: ["Ronaldo", "Gerd Müller", "Pelé"] },
  { q: "Wie viele Punkte gibt es für einen Sieg?", a: "3", w: ["1", "2", "4"] },
  { q: "Wie groß ist der Radius des Mittelkreises?", a: "9,15 m", w: ["7,32 m", "11,00 m", "16,50 m"] },
  { q: "Wie weit ist der Elfmeterpunkt von der Torlinie entfernt?", a: "11 m", w: ["9,15 m", "12 m", "16,50 m"] },
  { q: "Welcher Klub trägt den Spitznamen „Werkself“?", a: "Bayer 04 Leverkusen", w: ["VfL Wolfsburg", "TSG Hoffenheim", "FC Schalke 04"] },
  { q: "Wer gewann die WM 2022 in Katar?", a: "Argentinien", w: ["Frankreich", "Kroatien", "Marokko"] },
  { q: "Wer gewann die EM 2024 in Deutschland?", a: "Spanien", w: ["England", "Frankreich", "Deutschland"] },
  { q: "Wie viele Bundesliga-Tore erzielte Robert Lewandowski in der Rekordsaison 2020/21?", a: "41", w: ["37", "40", "44"] },
  { q: "Wer wurde 2002 als bester Spieler der WM ausgezeichnet?", a: "Oliver Kahn", w: ["Ronaldo", "Rivaldo", "Michael Ballack"] },
  { q: "Wie lang ist die reguläre Spielzeit?", a: "90 Minuten", w: ["80 Minuten", "100 Minuten", "120 Minuten"] },
  { q: "Welcher Verein spielt im Camp Nou?", a: "FC Barcelona", w: ["Real Madrid", "Atlético Madrid", "FC Valencia"] },
];

const PLAYERS = [
  {
    name: "Miroslav Klose",
    w: ["Lukas Podolski", "Mario Gomez", "Oliver Bierhoff"],
    clues: [
      "Geboren in Polen, spielte er später für Deutschland.",
      "Sein Markenzeichen war ein Salto als Torjubel.",
      "Er spielte für Kaiserslautern, Werder Bremen, Bayern und Lazio Rom.",
      "2014 wurde er in Brasilien Weltmeister.",
      "Mit 16 Treffern ist er Rekordtorschütze bei Weltmeisterschaften.",
    ],
  },
  {
    name: "Thomas Müller",
    w: ["Mario Götze", "Toni Kroos", "Philipp Lahm"],
    clues: [
      "In München wurde er zur Vereinslegende.",
      "Seine Position nennt er selbst „Raumdeuter“.",
      "Bei der WM 2010 holte er den Goldenen Schuh als bester Torschütze.",
      "2014 wurde er mit Deutschland Weltmeister.",
      "Bei Bayern trug er jahrelang die Nummer 25.",
    ],
  },
  {
    name: "Oliver Kahn",
    w: ["Jens Lehmann", "Manuel Neuer", "Sepp Maier"],
    clues: [
      "Er stand seine ganze Karriere zwischen den Pfosten.",
      "Sein Spitzname: „Der Titan“.",
      "Er spielte für den Karlsruher SC und den FC Bayern.",
      "2002 wurde er als bester Spieler der WM ausgezeichnet — als bislang einziger Torwart.",
      "Später war er Vorstandsvorsitzender des FC Bayern.",
    ],
  },
  {
    name: "Lionel Messi",
    w: ["Neymar", "Sergio Agüero", "Andrés Iniesta"],
    clues: [
      "Als Jugendlicher zog er aus Südamerika nach Spanien.",
      "Sein Spitzname ist „La Pulga“ — der Floh.",
      "Achtmal gewann er den Ballon d’Or.",
      "Mit Barcelona holte er vier Champions-League-Titel.",
      "2022 wurde er in Katar Weltmeister.",
    ],
  },
  {
    name: "Zinédine Zidane",
    w: ["Ronaldinho", "Luís Figo", "Roberto Baggio"],
    clues: [
      "Er spielte im Mittelfeld und wurde später Trainer.",
      "Im WM-Finale 2006 sah er Rot nach einem Kopfstoß.",
      "1998 wurde er im eigenen Land Weltmeister — mit zwei Kopfballtoren im Finale.",
      "Als Trainer gewann er dreimal in Folge die Champions League.",
      "Als Spieler stand er bei Juventus und Real Madrid unter Vertrag.",
    ],
  },
  {
    name: "Robert Lewandowski",
    w: ["Erling Haaland", "Zlatan Ibrahimović", "Pierre-Emerick Aubameyang"],
    clues: [
      "Er ist Rekordtorschütze seiner Nationalmannschaft.",
      "2015 traf er als Einwechselspieler fünfmal in neun Minuten.",
      "Ablösefrei wechselte er von Dortmund nach München.",
      "In der Saison 2020/21 erzielte er 41 Bundesliga-Tore — Rekord.",
      "Danach ging er zum FC Barcelona.",
    ],
  },
  {
    name: "Manuel Neuer",
    w: ["Marc-André ter Stegen", "Bernd Leno", "Roman Weidenfeller"],
    clues: [
      "Seine Karriere begann auf Schalke.",
      "Der „mitspielende Torwart“ wurde durch ihn zum Standard.",
      "2014 wurde er Weltmeister und bekam den Goldenen Handschuh.",
      "2020 gewann er mit Bayern das Triple.",
      "Er trägt die Nummer 1 und lange Zeit die Kapitänsbinde.",
    ],
  },
  {
    name: "Diego Maradona",
    w: ["Pelé", "Ronaldo", "Gabriel Batistuta"],
    clues: [
      "Er wurde 1960 in Buenos Aires geboren.",
      "1986 führte er sein Land zum WM-Titel.",
      "Die „Hand Gottes“ und das „Tor des Jahrhunderts“ fielen im selben Spiel.",
      "In Neapel wird er bis heute verehrt.",
      "Das Stadion von Napoli trägt seinen Namen.",
    ],
  },
  {
    name: "Toni Kroos",
    w: ["Mesut Özil", "Bastian Schweinsteiger", "İlkay Gündoğan"],
    clues: [
      "Er stammt aus Greifswald und wurde bei Bayern ausgebildet.",
      "2014 wurde er Weltmeister.",
      "Sechs Champions-League-Titel stehen in seiner Vita — fünf davon mit Real Madrid.",
      "Nach der Heim-EM 2024 beendete er seine Karriere.",
      "Sein Markenzeichen: der Pass aus dem Zentrum, Rückennummer 8.",
    ],
  },
  {
    name: "Erling Haaland",
    w: ["Kylian Mbappé", "Harry Kane", "Vinícius Júnior"],
    clues: [
      "Sein Vater spielte selbst in der Premier League.",
      "Über Salzburg kam er nach Dortmund.",
      "In seinem Bundesliga-Debüt traf er nach Einwechslung dreimal.",
      "2023 gewann er mit Manchester City das Triple.",
      "Er ist Norweger und trägt die Nummer 9.",
    ],
  },
];

/* ------------------------------------------------------------------ */
/*  Kreide-Glyphen fürs Menü                                           */
/* ------------------------------------------------------------------ */
const glyphProps = { fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round" };

function GlyphBingo() {
  return (
    <svg viewBox="0 0 64 64" width="48" height="48" {...glyphProps}>
      <rect x="6" y="6" width="52" height="52" />
      <path d="M23 6v52M41 6v52M6 23h52M6 41h52" opacity=".5" />
      <path d="M10 10l9 9M19 10l-9 9M45 45l9 9M54 45l-9 9" strokeWidth="3" />
    </svg>
  );
}
function GlyphGoal() {
  return (
    <svg viewBox="0 0 64 64" width="48" height="48" {...glyphProps}>
      <path d="M6 42V16h52v26" />
      <path d="M18 16v26M32 16v26M46 16v26M6 26h52M6 34h52" opacity=".4" />
      <circle cx="32" cy="53" r="5" />
      <path d="M32 48V44" strokeDasharray="3 4" />
    </svg>
  );
}
function GlyphQuiz() {
  return (
    <svg viewBox="0 0 64 64" width="48" height="48" {...glyphProps}>
      <circle cx="32" cy="32" r="24" />
      <path d="M25 25a7 7 0 1 1 9 7v5" />
      <path d="M34 45h.01" strokeWidth="4" />
    </svg>
  );
}
function GlyphPerson() {
  return (
    <svg viewBox="0 0 64 64" width="48" height="48" {...glyphProps}>
      <circle cx="32" cy="22" r="11" />
      <path d="M10 56c0-11 10-18 22-18s22 7 22 18" />
      <path d="M28 20a4 4 0 1 1 5 4v2" />
    </svg>
  );
}

/* ------------------------------------------------------------------ */
/*  Fußball-Bingo                                                      */
/* ------------------------------------------------------------------ */
function makeCard(size) {
  const picks = shuffle(BINGO_EVENTS).slice(0, size * size);
  const cells = picks.map((t) => ({ text: t, marked: false, free: false }));
  if (size === 5) cells[12] = { text: "Anpfiff", marked: true, free: true };
  return cells;
}

function linesOf(size) {
  const out = [];
  for (let r = 0; r < size; r++) out.push([...Array(size)].map((_, c) => r * size + c));
  for (let c = 0; c < size; c++) out.push([...Array(size)].map((_, r) => r * size + c));
  out.push([...Array(size)].map((_, i) => i * size + i));
  out.push([...Array(size)].map((_, i) => i * size + (size - 1 - i)));
  return out;
}

function Bingo() {
  const [size, setSize] = useState(5);
  const [cells, setCells] = useState(() => makeCard(5));

  const newCard = (s) => { setSize(s); setCells(makeCard(s)); };
  const toggle = (i) => {
    if (cells[i].free) return;
    setCells(cells.map((c, k) => (k === i ? { ...c, marked: !c.marked } : c)));
  };

  const full = linesOf(size).filter((l) => l.every((i) => cells[i].marked));
  const winSet = new Set(full.flat());
  const marked = cells.filter((c) => c.marked && !c.free).length;

  return (
    <div>
      <div className="flex flex-wrap items-end justify-between gap-3 mb-4">
        <div>
          <h2 className="disp text-3xl">Fußball-Bingo</h2>
          <p className="dim text-sm mt-1">
            Tippt an, was ihr im Spiel seht. Eine volle Reihe – waagerecht, senkrecht oder diagonal – ist Bingo.
          </p>
        </div>
        <div className="flex gap-2">
          <button className={"btn " + (size === 3 ? "btn-solid" : "")} onClick={() => newCard(3)}>3 × 3</button>
          <button className={"btn " + (size === 5 ? "btn-solid" : "")} onClick={() => newCard(5)}>5 × 5</button>
          <button className="btn" onClick={() => newCard(size)}>
            <RefreshCw size={13} style={{ display: "inline", marginRight: 6, verticalAlign: "-2px" }} />
            Neue Karte
          </button>
        </div>
      </div>

      {full.length > 0 && (
        <div className="board flick p-3 mb-4 flex items-center justify-between">
          <span className="disp text-2xl flood">Bingo!</span>
          <span className="mono text-xs dim">{full.length} {full.length === 1 ? "Reihe" : "Reihen"} voll</span>
        </div>
      )}

      <div className="grid gap-2" style={{ gridTemplateColumns: `repeat(${size}, minmax(0,1fr))` }}>
        {cells.map((c, i) => (
          <button
            key={i}
            onClick={() => toggle(i)}
            className={"tile p-2 " + (c.free ? "free " : "") + (c.marked && !c.free ? "on " : "") + (winSet.has(i) ? "won " : "")}
            style={{ aspectRatio: "1 / 1", fontSize: size === 5 ? "0.68rem" : "0.9rem" }}
          >
            <span className="flex h-full items-center">{c.text}</span>
            {c.marked && !c.free && (
              <svg viewBox="0 0 100 100" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.35 }}>
                <path d="M18 16 L82 84 M82 16 L18 84" stroke="currentColor" strokeWidth="7" strokeLinecap="round" fill="none" />
              </svg>
            )}
          </button>
        ))}
      </div>

      <p className="mono text-xs dim mt-4">{marked} von {size * size - (size === 5 ? 1 : 0)} Feldern markiert</p>
    </div>
  );
}

/* ------------------------------------------------------------------ */
/*  Elfmeter-Duell                                                     */
/* ------------------------------------------------------------------ */
const COLX = [17, 50, 83];
const ROWY = [24, 50, 76];
const zx = (z) => COLX[z % 3];
const zy = (z) => ROWY[Math.floor(z / 3)];
const cpuPick = () => {
  const weights = [3, 1, 3, 2, 1, 2, 3, 2, 3];
  const total = weights.reduce((a, b) => a + b, 0);
  let r = Math.random() * total;
  for (let i = 0; i < 9; i++) { r -= weights[i]; if (r <= 0) return i; }
  return 4;
};

function Elfmeter({ addPoints }) {
  const [round, setRound] = useState(1);
  const [phase, setPhase] = useState("shoot");     // shoot | keep | over
  const [busy, setBusy] = useState(false);
  const [ball, setBall] = useState({ x: 50, y: 122 });
  const [keeper, setKeeper] = useState(4);
  const [msg, setMsg] = useState("Runde 1 — du schießt. Such dir eine Ecke.");
  const [you, setYou] = useState([]);   // true = Tor
  const [cpu, setCpu] = useState([]);
  const [done, setDone] = useState(false);

  const yourGoals = you.filter(Boolean).length;
  const cpuGoals = cpu.filter(Boolean).length;

  const reset = () => {
    setRound(1); setPhase("shoot"); setBusy(false); setBall({ x: 50, y: 122 });
    setKeeper(4); setMsg("Runde 1 — du schießt. Such dir eine Ecke."); setYou([]); setCpu([]); setDone(false);
  };

  const nextStep = (nextYou, nextCpu, nextPhase) => {
    const r = round;
    if (nextPhase === "keep") { setPhase("keep"); setMsg(`Runde ${r} — jetzt hältst du. Wähle deine Ecke.`); return; }
    const decidedFive = r >= 5;
    const yg = nextYou.filter(Boolean).length;
    const cg = nextCpu.filter(Boolean).length;
    if (decidedFive && yg !== cg) { setDone(true); setPhase("over"); setMsg(yg > cg ? "Du gewinnst das Duell." : "Der Keeper gewinnt das Duell."); return; }
    setRound(r + 1);
    setPhase("shoot");
    setMsg(decidedFive ? `Sudden Death, Runde ${r + 1} — du schießt.` : `Runde ${r + 1} — du schießt.`);
  };

  const shoot = (z) => {
    if (busy || phase !== "shoot") return;
    setBusy(true);
    const k = cpuPick();
    setKeeper(k);
    setBall({ x: zx(z), y: zy(z) });
    const miss = Math.random() < (z < 3 ? 0.17 : 0.06);
    const saved = !miss && k === z && Math.random() < 0.85;
    const scored = !miss && !saved;
    setTimeout(() => {
      const nextYou = [...you, scored];
      setYou(nextYou);
      setMsg(miss ? "Drüber. Nichts draus geworden." : saved ? "Gehalten! Der Keeper war in der Ecke." : "Tor! Sauber verwandelt.");
      if (scored) addPoints(10);
      setTimeout(() => {
        setBall({ x: 50, y: 122 });
        setKeeper(4);
        setBusy(false);
        nextStep(nextYou, cpu, "keep");
      }, 1100);
    }, 620);
  };

  const dive = (z) => {
    if (busy || phase !== "keep") return;
    setBusy(true);
    const target = cpuPick();
    setKeeper(z);
    setBall({ x: zx(target), y: zy(target) });
    const miss = Math.random() < 0.11;
    const saved = !miss && z === target && Math.random() < 0.85;
    const conceded = !miss && !saved;
    setTimeout(() => {
      const nextCpu = [...cpu, conceded];
      setCpu(nextCpu);
      setMsg(miss ? "Vorbei! Der Schütze verzieht." : saved ? "Gehalten! Du hast die Ecke erwischt." : "Drin. Da warst du im falschen Eck.");
      if (!conceded) addPoints(15);
      setTimeout(() => {
        setBall({ x: 50, y: 122 });
        setKeeper(4);
        setBusy(false);
        nextStep(you, nextCpu, "shoot");
      }, 1100);
    }, 620);
  };

  const active = !busy && !done;

  return (
    <div>
      <div className="flex flex-wrap items-end justify-between gap-3 mb-4">
        <div>
          <h2 className="disp text-3xl">Elfmeter-Duell</h2>
          <p className="dim text-sm mt-1">Fünf Schüsse, fünf Paraden. Bei Gleichstand geht es ins Sudden Death.</p>
        </div>
        <button className="btn" onClick={reset}>
          <RefreshCw size={13} style={{ display: "inline", marginRight: 6, verticalAlign: "-2px" }} />
          Neu starten
        </button>
      </div>

      <div className="board p-3 mb-4 flex items-center justify-between">
        <div className="flex items-center gap-3">
          <span className="mono text-xs dim">DU</span>
          <span className="disp text-3xl flood">{yourGoals}</span>
          <span className="disp text-xl dim">:</span>
          <span className="disp text-3xl">{cpuGoals}</span>
          <span className="mono text-xs dim">KEEPER</span>
        </div>
        <div className="hidden sm:flex gap-1">
          {you.map((g, i) => <span key={"y" + i} className={"dot " + (g ? "g" : "r")} />)}
          {cpu.length > 0 && <span className="mono text-xs dim mx-1">/</span>}
          {cpu.map((g, i) => <span key={"c" + i} className={"dot " + (g ? "r" : "g")} />)}
        </div>
      </div>

      <div className="goal">
        <div className="net" />
        {[...Array(9)].map((_, z) => (
          <button
            key={z}
            className="zone"
            disabled={!active}
            onClick={() => (phase === "shoot" ? shoot(z) : dive(z))}
            aria-label={`Ecke ${z + 1}`}
            style={{ left: `${(z % 3) * 33.33}%`, top: `${Math.floor(z / 3) * 33.33}%`, width: "33.33%", height: "33.33%" }}
          />
        ))}
        <div className="keeper" style={{ left: `${zx(keeper)}%`, top: `${zy(keeper)}%` }} />
        <div className="ball" style={{ left: `${ball.x}%`, top: `${ball.y}%` }} />
      </div>
      <div style={{ height: 3, background: "var(--chalk)", opacity: 0.9 }} />

      <div className="flex items-center justify-between gap-3 mt-4">
        <p className="text-sm chalk">{msg}</p>
        <span className="mono text-xs dim whitespace-nowrap">{phase === "keep" ? "HALTEN" : phase === "shoot" ? "SCHIESSEN" : "ENDE"}</span>
      </div>
    </div>
  );
}

/* ------------------------------------------------------------------ */
/*  Fußball-Quiz                                                       */
/* ------------------------------------------------------------------ */
function buildQuiz() {
  return shuffle(QUIZ).slice(0, 10).map((item) => ({ ...item, options: shuffle([item.a, ...item.w]) }));
}

function Quiz({ addPoints }) {
  const [set, setSet] = useState(buildQuiz);
  const [i, setI] = useState(0);
  const [picked, setPicked] = useState(null);
  const [score, setScore] = useState(0);

  const q = set[i];
  const last = i === set.length - 1;

  const choose = (opt) => {
    if (picked) return;
    setPicked(opt);
    if (opt === q.a) { setScore(score + 1); addPoints(10); }
  };
  const next = () => { setPicked(null); setI(i + 1); };
  const restart = () => { setSet(buildQuiz()); setI(0); setPicked(null); setScore(0); };

  if (i >= set.length) {
    const rank = score >= 9 ? "Weltmeister" : score >= 7 ? "Startelf" : score >= 5 ? "Einwechselspieler" : score >= 3 ? "Ersatzbank" : "Zeugwart";
    return (
      <div className="text-center py-10">
        <p className="mono text-xs dim">ENDSTAND</p>
        <p className="disp text-6xl flood mt-2">{score} / {set.length}</p>
        <p className="disp text-2xl mt-3">{rank}</p>
        <button className="btn btn-solid mt-6" onClick={restart}>Neue Runde</button>
      </div>
    );
  }

  return (
    <div>
      <div className="flex items-end justify-between gap-3 mb-4">
        <div>
          <h2 className="disp text-3xl">Fußball-Quiz</h2>
          <p className="dim text-sm mt-1">Zehn Fragen, vier Antworten, kein Videobeweis.</p>
        </div>
        <span className="mono text-xs dim whitespace-nowrap">FRAGE {i + 1}/{set.length} · {score} RICHTIG</span>
      </div>

      <div className="bar mb-6"><div style={{ width: `${(i / set.length) * 100}%` }} /></div>

      <p className="text-xl chalk mb-5" style={{ lineHeight: 1.35 }}>{q.q}</p>

      <div className="grid gap-2">
        {q.options.map((opt) => {
          const state = !picked ? "" : opt === q.a ? "right" : opt === picked ? "wrong" : "";
          return (
            <button key={opt} className={"opt " + state} disabled={!!picked} onClick={() => choose(opt)}>
              {opt}
            </button>
          );
        })}
      </div>

      {picked && (
        <div className="flex items-center justify-between gap-3 mt-5">
          <p className="text-sm" style={{ color: picked === q.a ? "var(--grass)" : "var(--red)" }}>
            {picked === q.a ? "Richtig." : `Falsch — richtig ist: ${q.a}`}
          </p>
          <button className="btn btn-solid" onClick={next}>{last ? "Auswertung" : "Weiter"}</button>
        </div>
      )}
    </div>
  );
}

/* ------------------------------------------------------------------ */
/*  Wer bin ich?                                                       */
/* ------------------------------------------------------------------ */
function buildRound() {
  return shuffle(PLAYERS).slice(0, 5).map((p) => ({ ...p, options: shuffle([p.name, ...p.w]) }));
}

function WerBinIch({ addPoints }) {
  const [set, setSet] = useState(buildRound);
  const [i, setI] = useState(0);
  const [shown, setShown] = useState(1);
  const [picked, setPicked] = useState(null);
  const [score, setScore] = useState(0);

  const p = set[i];
  const value = Math.max(10, 50 - (shown - 1) * 10);

  const choose = (opt) => {
    if (picked) return;
    setPicked(opt);
    setShown(p.clues.length);
    if (opt === p.name) { setScore(score + value); addPoints(value); }
  };
  const next = () => { setPicked(null); setShown(1); setI(i + 1); };
  const restart = () => { setSet(buildRound()); setI(0); setShown(1); setPicked(null); setScore(0); };

  if (i >= set.length) {
    return (
      <div className="text-center py-10">
        <p className="mono text-xs dim">GESAMMELTE PUNKTE</p>
        <p className="disp text-6xl flood mt-2">{score}</p>
        <p className="dim text-sm mt-3">Maximal möglich waren 250.</p>
        <button className="btn btn-solid mt-6" onClick={restart}>Neue Runde</button>
      </div>
    );
  }

  return (
    <div>
      <div className="flex items-end justify-between gap-3 mb-4">
        <div>
          <h2 className="disp text-3xl">Wer bin ich?</h2>
          <p className="dim text-sm mt-1">Je weniger Hinweise du brauchst, desto mehr Punkte gibt es.</p>
        </div>
        <span className="mono text-xs dim whitespace-nowrap">SPIELER {i + 1}/{set.length} · {score} PKT</span>
      </div>

      <div className="grid gap-2 mb-5">
        {p.clues.slice(0, shown).map((c, k) => (
          <div key={k} className="panel p-3 flex gap-3 items-start">
            <span className="mono text-xs flood" style={{ paddingTop: 2 }}>{k + 1}</span>
            <span className="text-sm">{c}</span>
          </div>
        ))}
      </div>

      {!picked && shown < p.clues.length && (
        <button className="btn mb-6" onClick={() => setShown(shown + 1)}>
          Nächster Hinweis — kostet 10 Punkte
        </button>
      )}

      <div className="grid gap-2 sm:grid-cols-2">
        {p.options.map((opt) => {
          const state = !picked ? "" : opt === p.name ? "right" : opt === picked ? "wrong" : "";
          return (
            <button key={opt} className={"opt " + state} disabled={!!picked} onClick={() => choose(opt)}>
              {opt}
            </button>
          );
        })}
      </div>

      {picked && (
        <div className="flex items-center justify-between gap-3 mt-5">
          <p className="text-sm" style={{ color: picked === p.name ? "var(--grass)" : "var(--red)" }}>
            {picked === p.name ? `Richtig — ${value} Punkte.` : `Gesucht war ${p.name}.`}
          </p>
          <button className="btn btn-solid" onClick={next}>{i === set.length - 1 ? "Auswertung" : "Nächster"}</button>
        </div>
      )}

      {!picked && (
        <p className="mono text-xs dim mt-4">Aktueller Wert: {value} Punkte</p>
      )}
    </div>
  );
}

/* ------------------------------------------------------------------ */
/*  Menü + Rahmen                                                      */
/* ------------------------------------------------------------------ */
const GAMES = [
  { id: "bingo", title: "Fußball-Bingo", meta: "2–10 Personen · ein ganzes Spiel", desc: "Eine Karte voller Spielszenen. Wer zuerst eine Reihe voll hat, ruft Bingo.", Glyph: GlyphBingo },
  { id: "elfer", title: "Elfmeter-Duell", meta: "1 Person · 5 Minuten", desc: "Fünf Schüsse gegen den Keeper, fünf Paraden gegen den Computer.", Glyph: GlyphGoal },
  { id: "quiz", title: "Fußball-Quiz", meta: "1–4 Personen · 10 Fragen", desc: "Regeln, Rekorde und Finals — von 1930 bis heute.", Glyph: GlyphQuiz },
  { id: "wer", title: "Wer bin ich?", meta: "1–4 Personen · 5 Spieler", desc: "Hinweis für Hinweis zum gesuchten Profi. Früh raten bringt mehr.", Glyph: GlyphPerson },
];

export default function AnpfiffApp() {
  const [view, setView] = useState("menu");
  const [points, setPoints] = useState(0);
  const [minute, setMinute] = useState(1);

  useEffect(() => {
    const t = setInterval(() => setMinute((m) => (m >= 90 ? 90 : m + 1)), 4000);
    return () => clearInterval(t);
  }, []);

  const addPoints = (n) => setPoints((p) => p + n);
  const current = GAMES.find((g) => g.id === view);

  return (
    <div className="ap-root" style={{ minHeight: "100vh" }}>
      <style>{CSS}</style>

      {/* Anzeigetafel */}
      <div className="border-b hair">
        <div className="mx-auto flex items-center justify-between px-5 py-2" style={{ maxWidth: 940 }}>
          <div className="flex items-center gap-3">
            <span className="mono text-xs dim">SPIELZEIT</span>
            <span className="mono text-sm flood flick">{minute}′</span>
          </div>
          <div className="flex items-center gap-3">
            <span className="mono text-xs dim">{current ? current.title.toUpperCase() : "SPIELAUSWAHL"}</span>
            <span className="mono text-xs dim">|</span>
            <span className="mono text-xs dim">PUNKTE</span>
            <span className="mono text-sm flood">{points}</span>
          </div>
        </div>
      </div>

      <div className="mx-auto px-5 py-8" style={{ maxWidth: 940 }}>
        {view === "menu" ? (
          <>
            <header className="mb-9">
              <h1 className="disp" style={{ fontSize: "clamp(3rem, 12vw, 6.5rem)", lineHeight: 0.88 }}>
                Anpfiff
              </h1>
              <p className="dim mt-3" style={{ maxWidth: 520 }}>
                Vier Spiele für den Fußballabend — vor dem Fernseher, in der Kabine oder am Tresen.
                Alles läuft auf einem Gerät, das ihr herumreicht.
              </p>
            </header>

            <div className="grid gap-3 sm:grid-cols-2">
              {GAMES.map(({ id, title, desc, meta, Glyph }) => (
                <button key={id} className="card p-5" onClick={() => setView(id)}>
                  <div className="flood mb-4"><Glyph /></div>
                  <h2 className="disp text-2xl">{title}</h2>
                  <p className="mono text-xs dim mt-1">{meta.toUpperCase()}</p>
                  <p className="text-sm dim mt-3" style={{ lineHeight: 1.45 }}>{desc}</p>
                  <span className="mono text-xs flood mt-4" style={{ display: "inline-block" }}>SPIELEN →</span>
                </button>
              ))}
            </div>

            <p className="mono text-xs dim mt-10">
              Tipp: Beim Bingo reicht ein Handy pro Team — Karte zeigen, Feld antippen, weiterschauen.
            </p>
          </>
        ) : (
          <>
            <button className="btn mb-6" onClick={() => setView("menu")}>
              <ArrowLeft size={13} style={{ display: "inline", marginRight: 6, verticalAlign: "-2px" }} />
              Spielauswahl
            </button>
            {view === "bingo" && <Bingo />}
            {view === "elfer" && <Elfmeter addPoints={addPoints} />}
            {view === "quiz" && <Quiz addPoints={addPoints} />}
            {view === "wer" && <WerBinIch addPoints={addPoints} />}
          </>
        )}
      </div>
    </div>
  );
}