// ——— Game catalog with descriptions ———
const GAMES = [
  { id: 'chess', title: 'The Game Of Chess', cat: 'Puzzle', color: 'var(--c-grape)', age: '6+', time: '10 min', playable: true,
    metric: 'points',
    desc: 'Play classic chess against the computer across 10 difficulty levels, from Beginner to Chess Legend. Castling, en passant, promotion — every real rule, with legal-move hints to help you learn.' },
  { id: 'dig-bomb', title: "Don't Dig the Bomb!", cat: 'Arcade', color: 'var(--c-coral)', age: '4+', time: '5 min', playable: true,
    metric: 'points',
    desc: 'Dig up coins, gems and treasure — but watch out for hidden bombs! Clear every safe tile to advance, unlock themes and climb the explorer ranks.' },
  { id: 'dino-run', title: 'Aydin Dino Run', cat: 'Arcade', color: 'var(--c-grass)', age: '5+', time: 'Endless', playable: true,
    metric: 'meters', desktopOnly: true,
    desc: 'Help Aydin the baby dinosaur run, jump, and dodge sleeping turtles, rolling coconuts and slime puddles. Grab stars and rainbow shields — how far can you go?' },
  { id: 'shuffle-quest', title: "Aaliyah's Shuffle Quest", cat: 'Spelling', color: 'var(--c-coral)', age: '5+', time: '3 min', playable: true,
    metric: 'points',
    desc: "Letters got mixed up by mischief! Unscramble themed words before the timer runs out. Build combo streaks for huge score multipliers." },
  { id: 'memory-zoo', title: 'Memory Zoo', cat: 'Memory', color: 'var(--c-sky)', age: '6+', time: '3 min', playable: true,
    lowerIsBetter: true, metric: 'moves',
    desc: 'Flip cards to find matching animal pairs. Train your memory and see how few moves you need!' },
  { id: 'math-catch', title: 'Number Catcher', cat: 'Math', color: 'var(--c-sun)', age: '6+', time: '2 min', playable: true,
    desc: 'Numbers rain from the sky — move the basket to catch only the ones that match the target. Quick hands required!' },
  { id: 'shape-jigsaw', title: 'Shape Jigsaw', cat: 'Puzzle', color: 'var(--c-coral)', age: '6+', time: '5 min', playable: true,
    lowerIsBetter: true, metric: 'moves',
    desc: 'Drag puzzle pieces into place to complete a colourful picture. Starts simple, gets trickier!' },
  { id: 'alphabet-safari', title: 'Alphabet Safari', cat: 'Spelling', color: 'var(--c-grass)', age: '6+', time: '4 min', playable: true,
    desc: 'An animal pops up — can you pick the letter it starts with? Race through the whole alphabet on safari!' },
  { id: 'color-studio', title: 'Color Studio', cat: 'Drawing', color: 'var(--c-grape)', age: '5+', time: 'Open', playable: true,
    desc: 'Pick colours from the palette and paint anything you like on the canvas. Save your masterpiece when done.' },
  { id: 'maze-runner', title: 'Bubble Maze', cat: 'Maze', color: 'var(--c-sky)', age: '7+', time: '3 min', playable: true,
    lowerIsBetter: true, metric: 'moves',
    desc: 'Guide the bubble through winding corridors without hitting the walls. Each level adds more twists!' },
  { id: 'word-builder', title: 'Word Builder', cat: 'Spelling', color: 'var(--c-sun)', age: '7+', time: '4 min', playable: true,
    desc: 'Drag letter tiles into the blank slots to spell the word shown in the picture. Build your vocabulary!' },
  { id: 'add-it-up', title: 'Add It Up', cat: 'Math', color: 'var(--c-coral)', age: '6+', time: '3 min', playable: true,
    desc: 'Simple addition questions appear one after another. Answer as fast as you can to beat your high score!' },
  { id: 'find-the-pair', title: 'Find the Pair', cat: 'Memory', color: 'var(--c-grass)', age: '5+', time: '3 min', playable: true,
    desc: 'Spot which two shapes, colours or objects match each other. Gets harder as more options appear.' },
  { id: 'rainbow-tap', title: 'Rainbow Tap', cat: 'Arcade', color: 'var(--c-grape)', age: '6+', time: '2 min', playable: true,
    desc: 'Coloured bubbles pop up — tap them in the order the rainbow says. How long can your streak go?' },
  { id: 'quiz-quest', title: 'Quiz Quest', cat: 'Quiz', color: 'var(--c-sky)', age: '8+', time: '5 min', playable: true,
    desc: 'Answer fun questions about animals, science, and the world. Four choices — pick the right one!' },
  { id: 'count-garden', title: 'Counting Garden', cat: 'Math', color: 'var(--c-grass)', age: '5+', time: '3 min', playable: true,
    desc: 'Count the flowers, bugs or butterflies in the garden and tap the right number. Perfect for new counters.' },
  { id: 'piece-puzzle', title: 'Picture Puzzle', cat: 'Puzzle', color: 'var(--c-sun)', age: '7+', time: '6 min', playable: true,
    lowerIsBetter: true, metric: 'moves',
    desc: 'A picture is scrambled into pieces — slide them back into the right spots to reveal the hidden scene.' },
  { id: 'letter-hop', title: 'Letter Hop', cat: 'Spelling', color: 'var(--c-coral)', age: '5+', time: '2 min', playable: true,
    desc: 'Help the frog hop from lily pad to lily pad in alphabetical order. A to Z without missing a step!' },
  { id: 'doodle-pad', title: 'Doodle Pad', cat: 'Drawing', color: 'var(--c-sky)', age: '4+', time: 'Open', playable: true,
    desc: 'A blank canvas and a big set of crayons. Draw anything — scribble, doodle, or create a scene.' },
  { id: 'space-dodge', title: 'Space Dodge', cat: 'Arcade', color: 'var(--c-grape)', age: '7+', time: '2 min', playable: true,
    desc: 'Steer your rocket through a field of asteroids. Tilt, tap or use arrow keys — survive as long as you can!' },
  { id: 'shape-maze', title: 'Shape Maze', cat: 'Maze', color: 'var(--c-grass)', age: '6+', time: '4 min', playable: true,
    desc: 'Navigate the maze to collect all the shapes in order: circle, square, triangle. No backtracking!' },
  { id: 'times-table', title: 'Times Table', cat: 'Math', color: 'var(--c-coral)', age: '8+', time: '5 min', playable: true,
    desc: 'Practise multiplication with dot arrays and quick-fire questions. From 2× up to 10×, step by step.' },
  { id: 'animal-facts', title: 'Animal Facts', cat: 'Quiz', color: 'var(--c-sun)', age: '7+', time: '4 min', playable: true,
    desc: 'True or false — do elephants really never forget? Swipe through wild facts about amazing animals.' },
  { id: 'memory-match-hard', title: 'Super Memory', cat: 'Memory', color: 'var(--c-grape)', age: '8+', time: '5 min', playable: true,
    lowerIsBetter: true, metric: 'moves',
    desc: 'Like Memory Zoo but with more cards, fewer hints, and faster time limits. For memory champions only!' },
];

const CATEGORIES = ['All', 'Memory', 'Math', 'Puzzle', 'Spelling', 'Drawing', 'Arcade', 'Maze', 'Quiz'];

function GameTile({ game, onPlay }) {
  return (
    <div className="tile" onClick={() => onPlay(game.id)}>
      <div className="tile-art" style={{ background: game.color, padding: 0, overflow: 'hidden' }}>
        <GameArt gameId={game.id} />
      </div>
      <div className="tile-body">
        <div className="tile-cat">{game.cat}</div>
        <div className="tile-title">{game.title}</div>
        <p style={{ fontSize: 13, color: 'var(--ink-soft)', marginTop: 6, marginBottom: 0, lineHeight: 1.45 }}>
          {game.desc}
        </p>
        <div className="tile-meta" style={{ marginTop: 10 }}>
          <span>Age {game.age}</span>
          <span className="tile-dot"></span>
          <span>{game.time}</span>
          {game.playable && (
            <>
              <span className="tile-dot" style={{ color: 'var(--c-grass)' }}></span>
              <span style={{ color: 'var(--c-grass)', fontWeight: 800 }}>Playable</span>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { GAMES, CATEGORIES, GameTile });