/* @component-map
 * App — Main container, handles view switching and layout
 * ScoreBar — Displays score, best, and level stats
 * GameBoard — The 8x8 grid board with drag-drop placement
 * SidePanel — Shows next piece, lines, and combo info
 * PieceTray — The three draggable piece slots
 * GameOverlay — Start/game-over modal
 * ComboDisplay — Floating combo text animation
 * GhostPiece — The piece that follows the cursor during drag
 * @end-component-map */

import { ScoreBar } from './components/ScoreBar.jsx';
import { GameBoard } from './components/GameBoard.jsx';
import { SidePanel } from './components/SidePanel.jsx';
import { PieceTray } from './components/PieceTray.jsx';
import { GameOverlay } from './components/GameOverlay.jsx';
import { ComboDisplay } from './components/ComboDisplay.jsx';
import { GhostPiece } from './components/GhostPiece.jsx';

function AppInner() {
  return (
    <>
      <h1>⬛ BLOCK BLAST</h1>
      <div id="app">
        <ScoreBar score={0} best={0} level={1} />
        <div id="game-area">
          <div id="board-wrap">
            <GameBoard />
          </div>
          <SidePanel nextPiece={null} lines={0} combo={0} />
        </div>
        <PieceTray />
        <div id="instructions">✦ Drag a piece onto the board to place it · Fill rows &amp; columns to clear them!</div>
      </div>
      <GhostPiece />
      <ComboDisplay />
      <GameOverlay />
    </>
  );
}

function App() {
  return <AppInner />;
}

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