// App shell — orchestrates screens

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "cardSize": "tall"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [screen, setScreen] = React.useState('landing'); // landing | quiz | reveal | result | share
  const [answers, setAnswers] = React.useState([]);
  const [result, setResult] = React.useState(null);

  const goLanding = () => { setAnswers([]); setResult(null); setScreen('landing'); };
  const goQuiz = () => { setAnswers([]); setScreen('quiz'); };
  const completeQuiz = (finalAnswers) => {
    const r = computeResult(finalAnswers);
    setResult(r);
    setScreen('reveal');
  };
  const goResult = () => setScreen('result');
  const goShare = () => setScreen('share');
  const closeShare = () => setScreen('result');

  return (
    <div style={{
      width: '100%', minHeight: '100vh',
      fontFamily: 'var(--font-body)',
      position: 'relative',
    }}>
      {screen === 'landing' && <LandingScreen onStart={goQuiz} />}
      {screen === 'quiz' && <QuizScreen answers={answers} setAnswers={setAnswers} onComplete={completeQuiz} />}
      {screen === 'reveal' && result && <RevealScreen result={result} onContinue={goResult} />}
      {screen === 'result' && result && <ResultScreen result={result} onShare={goShare} onRetry={goLanding} />}
      {screen === 'share' && result && (
        <ShareScreen result={result} onClose={closeShare} cardSize={t.cardSize} setCardSize={(v) => setTweak('cardSize', v)} />
      )}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);