/* =====================================================================
   Future Consulting — Game components
   "Okosabb vagy, mint egy AI?" — 6 mini-games
   ===================================================================== */

const { useState: gUseState, useEffect: gUseEffect, useRef: gUseRef, useMemo: gUseMemo } = React;

/* ---------- Shared bits ---------- */

function GameHud({ gameIdx, total, score, label }) {
  const pct = ((gameIdx) / total) * 100;
  return (
    <div className="game-hud">
      <div className="container nav-inner" style={{padding:0, width:'100%'}}>
        <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', gap:24, width:'100%'}}>
          <div className="game-hud-left">
            <span><strong>{String(gameIdx + 1).padStart(2,'0')}</strong> / {String(total).padStart(2,'0')}</span>
            <span style={{color:'var(--line-2)'}}>·</span>
            <span>{label}</span>
          </div>
          <div className="game-progress-track" aria-hidden="true">
            <div className="game-progress-fill" style={{width: pct + '%'}}/>
          </div>
          <div className="game-hud-right">
            <span>SCORE</span>
            <strong>{score}</strong>
          </div>
        </div>
      </div>
    </div>
  );
}

function Reveal({ good, children }) {
  return (
    <div className="game-reveal">
      <div className={"game-reveal-head " + (good ? '' : 'bad')}>
        {good
          ? <Check size={14}/>
          : <X size={14}/>
        }
        <span>{good ? (useI18n().t === window.FCS_I18N.hu ? 'Találat' : 'Got it') : (useI18n().t === window.FCS_I18N.hu ? 'Nem ez volt' : 'Off')}</span>
      </div>
      <p className="game-reveal-text">{children}</p>
    </div>
  );
}

function GameFooter({ left, primary, secondary, onPrimary, onSecondary }) {
  return (
    <div className="game-footer">
      <div className="game-footer-left">{left}</div>
      <div style={{display:'flex', gap:12}}>
        {secondary && <button className="game-btn game-btn-ghost" onClick={onSecondary}>{secondary}</button>}
        {primary && <button className="game-btn game-btn-primary" onClick={onPrimary}>{primary} <ArrowRight size={14}/></button>}
      </div>
    </div>
  );
}

/* ---------- 01 PROMPT DUEL ---------- */
function PromptDuel({ data, onComplete }) {
  const { t } = useI18n();
  const tt = t.promptDuel;
  const [round, setRound] = gUseState(0);
  const [pick, setPick] = gUseState(null);
  const [score, setScore] = gUseState(0);
  const cur = tt.rounds[round];

  const click = (id) => {
    if (pick) return;
    setPick(id);
    if (id === cur.correct) setScore(s => s + 1);
  };
  const next = () => {
    if (round + 1 >= tt.rounds.length) {
      onComplete(score + (pick === cur.correct && pick ? 0 : 0));
      return;
    }
    setRound(r => r + 1); setPick(null);
  };

  const showReveal = pick !== null;
  const correct = pick === cur.correct;

  return (
    <div className="game-card">
      <div>
        <div className="game-eyebrow">{tt.title}</div>
        <h2 className="game-q" style={{marginTop:12}}>{tt.sub}</h2>
      </div>

      <div className="duel-task">
        <span style={{fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--fg-3)'}}>{t === window.FCS_I18N.hu ? 'Feladat' : 'Task'}</span>
        <strong>{cur.task}</strong>
      </div>

      <div className="duel">
        {['a','b'].map(id => {
          const isPicked = pick === id;
          const cls = !pick ? '' :
            (id === cur.correct ? (isPicked ? 'right' : 'right') : (isPicked ? 'wrong' : ''));
          return (
            <button key={id} className={"duel-card " + cls + (isPicked ? ' picked' : '')} onClick={() => click(id)} disabled={!!pick}>
              <div className="duel-card-label">
                <span>Prompt {id.toUpperCase()}</span>
                {pick && id === cur.correct && <span style={{color:'var(--game-good)'}}>✓ {t === window.FCS_I18N.hu ? 'Jobb' : 'Better'}</span>}
              </div>
              <div className="duel-card-text">{cur[id]}</div>
            </button>
          );
        })}
      </div>

      {showReveal && <Reveal good={correct}>{cur.why}</Reveal>}

      <GameFooter
        left={`${t.common.round} ${round+1} / ${tt.rounds.length}`}
        primary={pick ? (round+1 === tt.rounds.length ? t.common.next : t.common.next) : null}
        onPrimary={next}
      />
    </div>
  );
}

/* ---------- 02 SPOT THE AI ---------- */
function SpotAI({ data, onComplete }) {
  const { t } = useI18n();
  const tt = t.spotAI;
  const [round, setRound] = gUseState(0);
  const [pick, setPick] = gUseState(null);
  const [score, setScore] = gUseState(0);
  const cur = tt.rounds[round];

  const click = (id) => {
    if (pick) return;
    setPick(id);
    if (id === cur.aiAnswer) setScore(s => s + 1);
  };
  const next = () => {
    if (round + 1 >= tt.rounds.length) { onComplete(score); return; }
    setRound(r => r + 1); setPick(null);
  };
  const correct = pick === cur.aiAnswer;

  return (
    <div className="game-card">
      <div>
        <div className="game-eyebrow">{tt.title}</div>
        <h2 className="game-q" style={{marginTop:12}}>{tt.sub}</h2>
      </div>

      <div className="duel-task">
        <span style={{fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--fg-3)'}}>{t === window.FCS_I18N.hu ? 'Téma' : 'Topic'}</span>
        <strong>{cur.topic}</strong>
      </div>

      <div className="spot">
        {['a','b'].map(id => {
          const isPicked = pick === id;
          const isAi = id === cur.aiAnswer;
          const cls = !pick ? '' : (isAi ? 'right' : (isPicked ? 'wrong' : ''));
          return (
            <button key={id} className={"spot-card " + cls + (isPicked ? ' picked' : '')} onClick={() => click(id)} disabled={!!pick}>
              <div className="duel-card-label">
                <span>Text {id.toUpperCase()}</span>
              </div>
              <div className="spot-card-text">{cur[id]}</div>
              {pick && (
                <div className={"spot-verdict " + (isAi ? 'ai' : 'human')}>
                  <span>{isAi ? '◆ AI-generated' : '○ Human-written'}</span>
                </div>
              )}
            </button>
          );
        })}
      </div>

      {pick && <Reveal good={correct}>{cur.why}</Reveal>}

      <GameFooter
        left={`${t.common.round} ${round+1} / ${tt.rounds.length}`}
        primary={pick ? t.common.next : null}
        onPrimary={next}
      />
    </div>
  );
}

/* ---------- 03 WORKFLOW WAGER ---------- */
function WorkflowWager({ data, onComplete }) {
  const { t } = useI18n();
  const tt = t.workflowWager;
  const [round, setRound] = gUseState(0);
  const [val, setVal] = gUseState(null);
  const [locked, setLocked] = gUseState(false);
  const [score, setScore] = gUseState(0);
  const cur = tt.rounds[round];

  gUseEffect(() => {
    setVal(Math.round((cur.range[0] + cur.range[1]) / 2));
    setLocked(false);
  }, [round]);

  const lock = () => {
    if (locked) return;
    setLocked(true);
    const range = cur.range[1] - cur.range[0];
    const dist = Math.abs(val - cur.real);
    const pct = dist / range;
    let pts = 0;
    if (pct < 0.05) pts = 3;
    else if (pct < 0.15) pts = 2;
    else if (pct < 0.30) pts = 1;
    setScore(s => s + pts);
  };
  const next = () => {
    if (round + 1 >= tt.rounds.length) { onComplete(score); return; }
    setRound(r => r + 1);
  };

  if (val === null) return null;

  const realPctOnTrack = ((cur.real - cur.range[0]) / (cur.range[1] - cur.range[0])) * 100;
  const valPctOnTrack = ((val - cur.range[0]) / (cur.range[1] - cur.range[0])) * 100;
  const dist = Math.abs(val - cur.real);
  const range = cur.range[1] - cur.range[0];
  const pct = dist / range;
  const closeLabel = pct < 0.05 ? 'bullseye' : pct < 0.15 ? 'common' : pct < 0.3 ? 'common' : 'far';

  return (
    <div className="game-card">
      <div>
        <div className="game-eyebrow">{tt.title}</div>
        <h2 className="game-q" style={{marginTop:12}}>{tt.sub}</h2>
      </div>

      <div className="wager">
        <h3 className="wager-process">{cur.process}</h3>
        <div className="wager-hint">{cur.hint}</div>

        <div className="wager-slider-wrap">
          <div className="wager-slider-track">
            <div className="wager-slider-fill" style={{width: valPctOnTrack + '%'}}/>
            <div
              className={"wager-slider-real " + (locked ? 'shown' : '')}
              style={{left: realPctOnTrack + '%'}}
              data-label={`${tt.unit === '%' ? cur.real + '%' : cur.real + ' ' + tt.unit}`}
            />
          </div>
          <input
            type="range"
            className="wager-slider-input"
            min={cur.range[0]} max={cur.range[1]}
            value={val}
            disabled={locked}
            onChange={e => setVal(Number(e.target.value))}
          />
        </div>

        <div className="wager-readout">
          <div className="wager-readout-block">
            <div className="wager-readout-k">{t.common.yourPick}</div>
            <div className="wager-readout-v">{val}<small>{tt.unit}</small></div>
          </div>
          {locked && (
            <>
              <div className="wager-readout-block" style={{textAlign:'right'}}>
                <div className="wager-readout-k">{t.common.aiPick}</div>
                <div className="wager-readout-v real">{cur.real}<small>{tt.unit}</small></div>
              </div>
            </>
          )}
        </div>

        {locked && (
          <div className="wager-readout-delta">
            {(t === window.FCS_I18N.hu ? 'Eltérés: ' : 'Off by: ')}
            <strong className={pct < 0.15 ? 'close' : 'far'}>{dist} {tt.unit}</strong>
          </div>
        )}
      </div>

      {locked && <Reveal good={pct < 0.30}>{cur.why}</Reveal>}

      <GameFooter
        left={`${t.common.round} ${round+1} / ${tt.rounds.length}`}
        primary={!locked ? (t === window.FCS_I18N.hu ? 'Tipp rögzítése' : 'Lock in') : t.common.next}
        onPrimary={!locked ? lock : next}
      />
    </div>
  );
}

/* ---------- 04 AI VS YOU ---------- */
function AiVsYou({ data, onComplete }) {
  const { t } = useI18n();
  const tt = t.aiVsYou;
  const [round, setRound] = gUseState(0);
  const [phase, setPhase] = gUseState('write');   // 'write' | 'score'
  const [text, setText] = gUseState('');
  const [secs, setSecs] = gUseState(tt.seconds);
  const [scoring, setScoring] = gUseState({});
  const [totalScore, setTotalScore] = gUseState(0);
  const cur = tt.rounds[round];

  gUseEffect(() => {
    setText(''); setPhase('write'); setSecs(tt.seconds); setScoring({});
  }, [round]);

  gUseEffect(() => {
    if (phase !== 'write') return;
    if (secs <= 0) { setPhase('score'); return; }
    const id = setTimeout(() => setSecs(s => s - 1), 1000);
    return () => clearTimeout(id);
  }, [secs, phase]);

  const submit = () => setPhase('score');

  const setScoreFor = (k, v) => setScoring(s => ({...s, [k]: v}));

  const next = () => {
    const got = Object.values(scoring).filter(v => v === 'you').length;
    setTotalScore(s => s + got);
    if (round + 1 >= tt.rounds.length) {
      onComplete(totalScore + got);
      return;
    }
    setRound(r => r + 1);
  };

  const allScored = cur.aiTraits.every((_, i) => scoring[i]);

  return (
    <div className="game-card">
      <div>
        <div className="game-eyebrow">{tt.title}</div>
        <h2 className="game-q" style={{marginTop:12}}>{tt.sub}</h2>
      </div>

      <div className="battle-scenario">{cur.situation}</div>

      <div className="battle">
        <div className="battle-side you">
          <div className="battle-side-label">
            <span>{t === window.FCS_I18N.hu ? '◯ Az Ön válasza' : '◯ Your answer'}</span>
            <span className={"battle-side-clock " + (secs < 10 ? 'warn' : '')}>{phase === 'write' ? `${secs}s` : 'submitted'}</span>
          </div>
          <textarea
            className="battle-input"
            placeholder={t === window.FCS_I18N.hu ? 'Írja be röviden a válaszát…' : 'Write your reply briefly…'}
            value={text}
            onChange={e => setText(e.target.value)}
            disabled={phase !== 'write'}
          />
          {phase === 'write' && (
            <button className="game-btn game-btn-primary" onClick={submit}>
              {t === window.FCS_I18N.hu ? 'Beküldés' : 'Submit'} <ArrowRight size={14}/>
            </button>
          )}
        </div>
        <div className="battle-side ai">
          <div className="battle-side-label">
            <span>◆ AI</span>
            <span className="battle-side-clock">{phase === 'write' ? '12s' : 'done'}</span>
          </div>
          <div className={"battle-ai-text " + (phase === 'write' ? 'hidden' : '')}>
            {phase === 'write' ? (t === window.FCS_I18N.hu ? '(rejtett, amíg ki nem tölti)' : '(hidden until you submit)') : cur.aiResponse}
          </div>
          {phase === 'score' && (
            <div className="battle-ai-traits">
              {cur.aiTraits.map((tr, i) => <span key={i} className="trait">{tr}</span>)}
            </div>
          )}
        </div>
      </div>

      {phase === 'score' && (
        <div className="battle-scoring">
          <p className="battle-scoring-q" style={{margin:0, color:'var(--fg-1)'}}>
            <strong style={{color:'var(--fg-0)'}}>{t === window.FCS_I18N.hu ? 'Önbecslés:' : 'Self-score:'}</strong>{' '}
            {t === window.FCS_I18N.hu ? 'a 4 kritérium közül melyikben volt erősebb a saját válasza?' : 'on which of the 4 criteria was your answer stronger?'}
          </p>
          {cur.aiTraits.map((tr, i) => (
            <div key={i} style={{display:'flex', alignItems:'center', gap:12}}>
              <div style={{flex:1, fontSize:'var(--fs-13)', color:'var(--fg-2)', fontFamily:'var(--font-mono)', letterSpacing:'0.04em', textTransform:'uppercase'}}>{tr}</div>
              <div className="battle-scoring-row" style={{flex:'0 0 auto', width:'auto'}}>
                <button className={"battle-scoring-btn " + (scoring[i] === 'you' ? 'on' : '')} onClick={() => setScoreFor(i, 'you')}>{t === window.FCS_I18N.hu ? 'Ön' : 'You'}</button>
                <button className={"battle-scoring-btn " + (scoring[i] === 'ai' ? 'on' : '')} onClick={() => setScoreFor(i, 'ai')}>AI</button>
              </div>
            </div>
          ))}
        </div>
      )}

      <GameFooter
        left={`${t.common.round} ${round+1} / ${tt.rounds.length}`}
        primary={phase === 'score' && allScored ? t.common.next : null}
        onPrimary={next}
      />
    </div>
  );
}

/* ---------- 05 DECISION MAZE ---------- */
function DecisionMaze({ data, onComplete }) {
  const { t } = useI18n();
  const tt = t.decisionMaze;
  const [step, setStep] = gUseState(0);
  const [picks, setPicks] = gUseState([]); // array of option ids
  const [stepScore, setStepScore] = gUseState(0);

  const cur = tt.steps[step];

  const click = (opt) => {
    if (picks[step]) return;
    const np = [...picks]; np[step] = opt.id;
    setPicks(np);
    setStepScore(s => s + opt.score);
  };

  const next = () => {
    if (step + 1 >= tt.steps.length) {
      onComplete(stepScore);
      return;
    }
    setStep(s => s + 1);
  };

  const picked = picks[step];

  return (
    <div className="game-card">
      <div>
        <div className="game-eyebrow">{tt.title}</div>
        <h2 className="game-q" style={{marginTop:12}}>{tt.sub}</h2>
      </div>

      <div className="maze">
        <div className="maze-scenario">{tt.scenario}</div>

        <div className="maze-step">
          <h3 className="maze-step-q">{cur.q}</h3>
          <div className="maze-options">
            {cur.options.map(opt => {
              const isPicked = picked === opt.id;
              const isLocked = !!picked;
              return (
                <button
                  key={opt.id}
                  className={"maze-option " + (isPicked ? 'picked' : '') + (isLocked ? ' locked' : '') + (opt.ai ? ' ai-pick' : '')}
                  onClick={() => click(opt)}
                  disabled={isLocked && !isPicked}
                >
                  <div className="maze-option-id">{opt.id.toUpperCase()}</div>
                  <div className="maze-option-body">
                    <p className="maze-option-text">{opt.text}</p>
                    <p className="maze-option-outcome">→ {opt.outcome}</p>
                    {opt.ai && <span className="maze-option-badge"><Spark size={12}/> AI-supported</span>}
                  </div>
                </button>
              );
            })}
          </div>
        </div>
      </div>

      <GameFooter
        left={`${t === window.FCS_I18N.hu ? 'Lépés' : 'Step'} ${step+1} / ${tt.steps.length}`}
        primary={picked ? (step+1 < tt.steps.length ? t.common.next : t.common.finish) : null}
        onPrimary={next}
      />
    </div>
  );
}

/* ---------- 06 PREDICTION GAME ---------- */
function PredictionGame({ data, onComplete }) {
  const { t } = useI18n();
  const tt = t.predictionGame;
  const [round, setRound] = gUseState(0);
  const [val, setVal] = gUseState(null);
  const [locked, setLocked] = gUseState(false);
  const [score, setScore] = gUseState(0);
  const cur = tt.rounds[round];

  gUseEffect(() => {
    setVal((cur.min + cur.max) / 2);
    setLocked(false);
  }, [round]);

  const lock = () => {
    if (locked) return;
    setLocked(true);
    const range = cur.max - cur.min;
    const dist = Math.abs(val - cur.real);
    const pct = dist / range;
    let pts = 0;
    if (pct < 0.05) pts = 3;
    else if (pct < 0.15) pts = 2;
    else if (pct < 0.30) pts = 1;
    setScore(s => s + pts);
  };
  const next = () => {
    if (round + 1 >= tt.rounds.length) { onComplete(score); return; }
    setRound(r => r + 1);
  };

  if (val === null) return null;
  const step = cur.step || 1;
  const realPct = ((cur.real - cur.min) / (cur.max - cur.min)) * 100;
  const valPct = ((val - cur.min) / (cur.max - cur.min)) * 100;
  const dist = Math.abs(val - cur.real);
  const range = cur.max - cur.min;
  const pct = dist / range;

  return (
    <div className="game-card">
      <div>
        <div className="game-eyebrow">{tt.title}</div>
        <h2 className="game-q" style={{marginTop:12}}>{tt.sub}</h2>
      </div>

      <div className="wager">
        <h3 className="wager-process">{cur.q}</h3>

        <div className="wager-slider-wrap">
          <div className="wager-slider-track">
            <div className="wager-slider-fill" style={{width: valPct + '%'}}/>
            <div
              className={"wager-slider-real " + (locked ? 'shown' : '')}
              style={{left: realPct + '%'}}
              data-label={`${cur.real}${cur.unit}`}
            />
          </div>
          <input
            type="range"
            className="wager-slider-input"
            min={cur.min} max={cur.max} step={step}
            value={val}
            disabled={locked}
            onChange={e => setVal(Number(e.target.value))}
          />
        </div>

        <div className="wager-readout">
          <div className="wager-readout-block">
            <div className="wager-readout-k">{t.common.yourPick}</div>
            <div className="wager-readout-v">{val}<small>{cur.unit}</small></div>
          </div>
          {locked && (
            <div className="wager-readout-block" style={{textAlign:'right'}}>
              <div className="wager-readout-k">{t.common.aiPick}</div>
              <div className="wager-readout-v real">{cur.real}<small>{cur.unit}</small></div>
            </div>
          )}
        </div>

        {locked && (
          <div className="wager-readout-delta">
            {(t === window.FCS_I18N.hu ? 'Eltérés: ' : 'Off by: ')}
            <strong className={pct < 0.15 ? 'close' : 'far'}>{Math.round(dist * 10)/10}{cur.unit}</strong>
          </div>
        )}
      </div>

      {locked && <Reveal good={pct < 0.30}>{cur.why}</Reveal>}

      <GameFooter
        left={`${t.common.round} ${round+1} / ${tt.rounds.length}`}
        primary={!locked ? (t === window.FCS_I18N.hu ? 'Tipp rögzítése' : 'Lock in') : t.common.next}
        onPrimary={!locked ? lock : next}
      />
    </div>
  );
}

/* ---------- LANDING ---------- */
function GameLanding({ onStart }) {
  const { t } = useI18n();
  const tt = t.landing;
  return (
    <div className="game-landing">
      <div className="game-landing-hero">
        <div>
          <div className="game-eyebrow">{t.common.pageEyebrow}</div>
          <h1 className="game-landing-h1" style={{marginTop:24}}>
            {t === window.FCS_I18N.hu ? <>Okosabb vagy, mint <em>egy AI?</em></> : <>Smarter than <em>an AI?</em></>}
          </h1>
          <p className="game-landing-lead">{tt.lead}</p>
        </div>
        <div className="game-landing-meta">
          {tt.meta.map((m, i) => (
            <div key={i} className="game-landing-meta-row">
              <span className="game-landing-meta-k">{m.k}</span>
              <span className="game-landing-meta-v">{m.v}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="game-landing-grid">
        {tt.games.map((g, i) => (
          <div key={i} className="game-landing-tile">
            <div className="game-landing-tile-num">{g.num}</div>
            <h3 className="game-landing-tile-title">{g.title}</h3>
            <p className="game-landing-tile-desc">{g.desc}</p>
          </div>
        ))}
      </div>

      <div className="game-landing-cta">
        <button className="game-btn game-btn-primary" onClick={onStart}>
          {tt.start} <ArrowRight size={16}/>
        </button>
      </div>
    </div>
  );
}

/* ---------- RESULTS ---------- */
/* ---------- Lead capture (a Results-en belül, a profil után) ---------- */
function GameLeadCapture() {
  const { t } = useI18n();
  const lead = t.gameLead;
  const [email, setEmail] = gUseState("");
  const [gdpr, setGdpr] = gUseState(false);
  const [error, setError] = gUseState("");
  const [status, setStatus] = gUseState(() => {
    try { return localStorage.getItem('fcs-game-lead-sent') === '1' ? 'sent' : 'idle'; }
    catch { return 'idle'; }
  });

  const onSubmit = async (e) => {
    e.preventDefault();
    if (!email.trim() || !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) {
      setError(t.form.invalidEmail);
      return;
    }
    if (!gdpr) {
      setError(t.form.required);
      return;
    }
    setError("");
    setStatus('sending');
    // BACKEND TODO: itt fogjuk az emailt + score-okat elküldeni a CRM/email szolgáltatóhoz.
    await new Promise(r => setTimeout(r, 600));
    try { localStorage.setItem('fcs-game-lead-sent', '1'); } catch {}
    setStatus('sent');
  };

  if (status === 'sent') {
    return (
      <div className="game-lead game-lead-sent">
        <div className="game-lead-icon"><Check size={32}/></div>
        <h3>{lead.success.title}</h3>
        <p>{lead.success.desc}</p>
      </div>
    );
  }

  return (
    <div className="game-lead">
      <div className="game-lead-text">
        <h3>{lead.title}</h3>
        <p>{lead.desc}</p>
      </div>
      <form onSubmit={onSubmit} className="game-lead-form">
        <div className="game-lead-row">
          <input
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder={lead.emailPlaceholder}
            aria-label={lead.emailLabel}
            className="form-input"
            required
          />
          <button type="submit" className="game-btn game-btn-primary" disabled={status === 'sending'}>
            {status === 'sending' ? t.form.sending : lead.submit}
            {status !== 'sending' && <ArrowRight size={14}/>}
          </button>
        </div>
        <label className="form-checkbox">
          <input type="checkbox" checked={gdpr} onChange={(e) => setGdpr(e.target.checked)}/>
          <span className="form-checkbox-text">{lead.gdpr}</span>
        </label>
        {error && <p className="form-error-banner">{error}</p>}
      </form>
    </div>
  );
}

function Results({ scores, onRestart }) {
  const { t } = useI18n();
  const tt = t.results;
  // Normalize each game's score to /100, average.
  // Max scores: 01=5, 02=4, 03=15, 04=12, 05=15, 06=15
  const maxes = [5, 4, 15, 12, 15, 15];
  const pctScores = scores.map((s, i) => Math.min(100, Math.round((s / maxes[i]) * 100)));
  const total = Math.round(pctScores.reduce((a,b)=>a+b,0) / pctScores.length);
  const profile = tt.profiles.find(p => total >= p.min && total <= p.max) || tt.profiles[0];

  // Animated disc
  const ringRef = gUseRef(null);
  gUseEffect(() => {
    const tm = setTimeout(() => {
      if (ringRef.current) ringRef.current.style.strokeDashoffset = String(2 * Math.PI * 130 * (1 - total/100));
    }, 200);
    return () => clearTimeout(tm);
  }, [total]);

  const circumference = 2 * Math.PI * 130;

  return (
    <div className="results-wrap">
      <div className="results-hero">
        <div>
          <div className="results-eyebrow">{t.common.pageEyebrow}</div>
          <h1 className="results-h1">{tt.title}</h1>
          <p className="results-sub">{tt.sub}</p>
        </div>
        <div className="results-score-disc">
          <svg viewBox="0 0 280 280">
            <circle cx="140" cy="140" r="130" fill="none" stroke="var(--line-1)" strokeWidth="2"/>
            <circle
              ref={ringRef}
              cx="140" cy="140" r="130"
              fill="none"
              stroke="var(--mint)"
              strokeWidth="3"
              strokeLinecap="round"
              strokeDasharray={circumference}
              strokeDashoffset={circumference}
              style={{transition:'stroke-dashoffset 1.4s cubic-bezier(.65,0,.35,1)', filter:'drop-shadow(0 0 8px var(--mint-glow))'}}
            />
          </svg>
          <div className="results-score-disc-inner">
            <div className="results-score-num">{total}<small>/100</small></div>
            <div className="results-score-label">{tt.scoreLabel}</div>
          </div>
        </div>
      </div>

      <div className="results-profile">
        <div className="results-profile-eyebrow">{t === window.FCS_I18N.hu ? 'Az Ön profilja' : 'Your profile'}</div>
        <h2 className="results-profile-name">{profile.name}</h2>
        <p className="results-profile-tagline">{profile.tagline}</p>
        <p className="results-profile-desc">{profile.desc}</p>
        <div className="results-profile-next">{profile.next}</div>
      </div>

      <GameLeadCapture/>

      <div className="results-breakdown">
        <h3>{tt.breakdown}</h3>
        <div className="results-breakdown-grid">
          {tt.gamesShort.map((name, i) => (
            <div key={i} className="results-breakdown-cell">
              <div className="results-breakdown-num">{String(i+1).padStart(2,'0')}</div>
              <p className="results-breakdown-name">{name}</p>
              <div className="results-breakdown-bar">
                <div className="results-breakdown-bar-fill" style={{width: pctScores[i] + '%'}}/>
              </div>
              <div className="results-breakdown-pts">{pctScores[i]}/100</div>
            </div>
          ))}
        </div>
      </div>

      <div className="results-cta">
        <div>
          <h3>{tt.ctaTitle}</h3>
          <p>{tt.ctaDesc}</p>
        </div>
        <div className="results-cta-actions">
          <a href="kapcsolat.html" className="game-btn game-btn-primary">
            {tt.ctaButton} <ArrowRight size={14}/>
          </a>
          <button className="game-btn" onClick={onRestart}>{t.common.restart}</button>
        </div>
      </div>
    </div>
  );
}

/* ---------- MAIN GAME PAGE ---------- */
function GamePage() {
  const { t } = useI18n();
  const TOTAL = 6;
  const [phase, setPhase] = gUseState('landing'); // landing | playing | results
  const [gameIdx, setGameIdx] = gUseState(0);
  const [scores, setScores] = gUseState([0,0,0,0,0,0]);

  const start = () => { setPhase('playing'); setGameIdx(0); setScores([0,0,0,0,0,0]); };

  const onGameComplete = (s) => {
    const ns = [...scores]; ns[gameIdx] = s; setScores(ns);
    if (gameIdx + 1 >= TOTAL) {
      setPhase('results');
    } else {
      setGameIdx(i => i + 1);
      window.scrollTo({top: 0, behavior: 'smooth'});
    }
  };

  const restart = () => { setPhase('landing'); };

  const games = [PromptDuel, SpotAI, WorkflowWager, AiVsYou, DecisionMaze, PredictionGame];
  const labels = t.landing.games.map(g => g.title);

  const G = games[gameIdx];

  return (
    <div className="game-page">
      <Nav active="game"/>
      <div className="game-stage">
        <div className="container">
          {phase === 'landing' && <GameLanding onStart={start}/>}
          {phase === 'playing' && (
            <>
              <GameHud gameIdx={gameIdx} total={TOTAL} score={scores.reduce((a,b)=>a+b,0)} label={labels[gameIdx]}/>
              <G key={gameIdx} onComplete={onGameComplete}/>
            </>
          )}
          {phase === 'results' && <Results scores={scores} onRestart={restart}/>}
        </div>
      </div>
      <Footer/>
      <CookieBanner/>
    </div>
  );
}

/* ---------- Mount ---------- */
function GameApp() {
  return (
    <I18nProvider>
      <GamePage/>
    </I18nProvider>
  );
}

const gameRoot = ReactDOM.createRoot(document.getElementById('root'));
gameRoot.render(<GameApp/>);