import React, { useState, useEffect } from 'react';const MOVIES = [  { title: "INCEPTION", clues: [    "This film's plot structure mirrors its central concept.",    "A spinning top plays a crucial role in the narrative.",    "The protagonist's wife is a constant presence, yet absent.",    "Architecture becomes a weapon in this reality-bending thriller.",    "The final shot leaves audiences debating the true nature of reality."  ]},  { title: "JURASSIC PARK", clues: [    "Chaos theory plays a significant role in this scientific adventure.",    "The antagonists in this film are the result of de-extinction.",    "A kitchen scene showcases the intelligence of the film's threats.",    "The creator's surname shares a name with a famous London park.",    "Fossilized tree sap is a crucial plot element."  ]},  { title: "THE MATRIX", clues: [    "Red and blue are significant color choices in this film's symbolism.",    "The protagonist's journey mirrors'The Hero's Journey' archetype.",    "Philosophy, particularly solipsism, heavily influences the plot.",    "The film's title refers to a mathematical concept.",    "Character names draw from various mythologies and religious texts."  ]},  { title: "FORREST GUMP", clues: [    "The protagonist's name reflects his simple yet endearing nature.",    "A feather bookends the narrative, symbolizing the story's themes.",    "Historical events are viewed through an unconventional lens.",    "The protagonist excels in table tennis, mirroring real-world events.",    "A popular confectionery metaphor is central to the film's philosophy."  ]},  { title: "STAR WARS", clues: [    "The film's structure closely follows Joseph Campbell's monomyth.",    "Binary suns set the stage for the protagonist's journey.",    "The antagonist's breathing is an iconic sound in cinema history.",    "A mystical energy field binds the galaxy together.",    "The film revolutionized merchandising in the movie industry."  ]}];function CinemaClue() {  const [currentMovie, setCurrentMovie] = useState(null);  const [revealedClues, setRevealedClues] = useState(0);  const [guess, setGuess] = useState('');  const [message, setMessage] = useState('');  const [gameOver, setGameOver] = useState(false);  useEffect(() => {    startNewGame();  }, []);  const startNewGame = () => {    const newMovie = MOVIES[Math.floor(Math.random() * MOVIES.length)];    setCurrentMovie(newMovie);    setRevealedClues(1);    setGuess('');    setMessage('');    setGameOver(false);  };  const handleGuess = () => {    if (guess.toUpperCase() === currentMovie.title) {      setMessage(`Correct! The movie was ${currentMovie.title}.`);      setGameOver(true);    } else {      setMessage('Incorrect. Try again!');      setGuess('');      if (revealedClues < currentMovie.clues.length) {        setRevealedClues(revealedClues + 1);      } else {        setMessage(`Game over. The movie was ${currentMovie.title}.`);        setGameOver(true);      }    }  };  const handleKeyDown = (event) => {    if (gameOver) return;    if (event.key === 'Enter') {      handleGuess();    }  };  useEffect(() => {    window.addEventListener('keydown', handleKeyDown);    return () => window.removeEventListener('keydown', handleKeyDown);  }, [guess, gameOver]);  if (!currentMovie) return null;  return (    <div style={{      fontFamily: 'Arial, sans-serif',      maxWidth: '600px',      margin: '0 auto',      textAlign: 'center',      backgroundColor: '#ffffff',      color: '#000000',      minHeight: '100vh',      padding: '20px',display: 'flex',      flexDirection: 'column',      alignItems: 'center',      justifyContent: 'center',    }}>      <h1 style={{        fontSize: '2rem',        marginBottom: '20px',        fontWeight: 'normal',      }}>        CinemaClue      </h1>      <div style={{        width: '100%',        marginBottom: '20px',        textAlign: 'left',      }}>        {currentMovie.clues.slice(0, revealedClues).map((clue, index) => (          <p key={index} style={{            backgroundColor: '#f0f0f0',            padding: '10px',            borderRadius: '5px',            marginBottom: '10px',          }}>            {clue}          </p>        ))}      </div>      <input        type="text"        value={guess}        onChange={(e) => setGuess(e.target.value)}        placeholder="Guess the movie"        style={{          width: '100%',          padding: '10px',          fontSize: '1rem',          marginBottom: '10px',        }}        disabled={gameOver}      />      <button        onClick={handleGuess}        disabled={gameOver}        style={{          padding: '10px 20px',          fontSize: '1rem',          backgroundColor: '#007bff',          color: 'white',          border: 'none',          borderRadius: '5px',          cursor: 'pointer',        }}      >        Guess      </button>      <div style={{ marginTop: '20px', fontSize: '1rem', minHeight: '40px' }}>        {message}      </div>      {gameOver && (        <button          onClick={startNewGame}          style={{            padding: '10px 20px',            fontSize: '1rem',            backgroundColor: '#28a745',            color: 'white',            border: 'none',            borderRadius: '5px',            cursor: 'pointer',            marginTop: '20px',          }}        >          Play Again        </button>      )}      <div style={{ marginTop: '20px', fontSize: '0.8rem', color: '#787c7e' }}>        Guess the movie based on the clues. New clue revealed after each incorrect guess.      </div>    </div>  );}export default CinemaClue;