/* @component-map
 * App — Main container, handles screen switching and header
 * IntroScreen — Rules and start game screen
 * GameScreen — Main game play area with HUD, questions, history
 * EndScreen — Win/lose results with play again option
 * @end-component-map */

import { IntroScreen } from './components/IntroScreen.jsx';
import { GameScreen } from './components/GameScreen.jsx';
import { useState } from 'react';
import { EndScreen } from './components/EndScreen.jsx';

function App() {
  const [screen, setScreen] = useState('intro');
  const [gameKey, setGameKey] = useState(0);
  const [endData, setEndData] = useState(null);

  function startGame() {
    setGameKey(k => k + 1);
    setScreen('game');
  }

  function endGame(data) {
    setEndData(data);
    setScreen('end');
  }

  return (
    <>
      <div className="scanline" />
      <header>
        <div className="title-badge">
          <h1>Ultimate 20 Questions</h1>
          <p className="subtitle">The Classic Deduction Game</p>
        </div>
      </header>
      <div className="game-wrapper">
        {screen === 'intro' && <IntroScreen onStart={startGame} />}
        {screen === 'game' && <GameScreen key={gameKey} onEnd={endGame} onNewGame={startGame} />}
        {screen === 'end' && <EndScreen data={endData} onPlayAgain={startGame} />}
      </div>
    </>
  );
}

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