import React, { useState, useEffect } from 'react';const MovieWordle = () => {  const [movieList, setMovieList] = useState([    "AVATAR", "TITANIC", "FROZEN", "JAWS", "ALIEN", "MATRIX"  ]);  const [targetMovie, setTargetMovie] = useState('');  const [guesses, setGuesses] = useState([]);  const [currentGuess, setCurrentGuess] = useState('');  const [gameOver, setGameOver] = useState(false);  const [message, setMessage] = useState('');  useEffect(() => {    setTargetMovie(movieList[Math.floor(Math.random() * movieList.length)]);  }, []);  const handleGuess = () => {    if (currentGuess.length !== targetMovie.length) {      setMessage(`Please enter a ${targetMovie.length}-letter movie title.`);      return;    }    const newGuesses = [...guesses, currentGuess.toUpperCase()];    setGuesses(newGuesses);    setCurrentGuess('');    if (currentGuess.toUpperCase() === targetMovie) {      setGameOver(true);      setMessage('Congratulations! You guessed the movie!');    } else if (newGuesses.length >= 6) {      setGameOver(true);      setMessage(`Game over! The movie was ${targetMovie}.`);    }  };  const renderGuesses = () => {    return guesses.map((guess, index) => (      <div key={index} style={{ display: 'flex', justifyContent: 'center', marginBottom: '5px' }}>        {guess.split('').map((letter, i) => (          <div            key={i}            style={{              width: '40px',              height: '40px',              border: '2px solid #3a3a3c',              borderRadius: '5px',              display: 'flex',              justifyContent: 'center',              alignItems: 'center',              margin: '0 2px',              fontSize: '20px',              fontWeight: 'bold',              backgroundColor:                 letter === targetMovie[i] ? '#538d4e' :                targetMovie.includes(letter) ? '#b59f3b' : '#3a3a3c',              color: 'white',              transition: 'background-color 0.3s ease'            }}          >            {letter}          </div>        ))}      </div>    ));  };  return (    <div style={{      fontFamily: 'Arial, sans-serif',      maxWidth: '100%',      margin: '0 auto',      textAlign: 'center',      display: 'flex',      flexDirection: 'column',      alignItems: 'center',      justifyContent: 'center',      minHeight: '100vh',      backgroundColor: '#121213',      color: '#ffffff'    }}>      <h1 style={{ color: '#ffffff', fontSize: '36px', marginBottom: '20px' }}>Movie Wordle</h1>      <p style={{ fontSize: '18px', marginBottom: '20px' }}>Guess the {targetMovie.length}-letter movie title!</p>      {renderGuesses()}      <div style={{ marginTop: '20px' }}>        <input          type="text"          value={currentGuess}          onChange={(e) => setCurrentGuess(e.target.value)}          disabled={gameOver}          style={{            marginRight: '10px',             padding: '10px',             fontSize: '16px',             borderRadius: '5px',            border: '2px solid #3a3a3c',            backgroundColor: '#121213',            color: '#ffffff'          }}        />        <button           onClick={handleGuess}           disabled={gameOver}           style={{             padding: '10px 20px',             fontSize: '16px',             backgroundColor: '#538d4e',             color: '#ffffff',             border: 'none',             borderRadius: '5px',            cursor: 'pointer'          }}        >          Guess        </button>      </div>      <p style={{ marginTop: '20px', fontSize: '18px' }}>{message}</p>      {gameOver && (        <button           onClick={() => window.location.reload()}           style={{             padding: '10px 20px',             fontSize: '16px',             backgroundColor: '#538d4e',             color: '#ffffff',             border: 'none',             borderRadius: '5px',            cursor: 'pointer',            marginTop: '20px'          }}        >          Play Again        </button>      )}    </div>  );};export default MovieWordle;