import React, { useState, useEffect } from 'react';const movieTitles = [  "AVATAR", "TITANIC", "JAWS", "ALIEN", "FROZEN", "GLADIATOR", "INCEPTION",  "MATRIX", "CASABLANCA", "PSYCHO", "GODFATHER", "JURASSIC", "PULP FICTION"];const MovieWordle = () => {  const [answer, setAnswer] = useState('');  const [guesses, setGuesses] = useState(Array(6).fill(null));  const [currentGuess, setCurrentGuess] = useState('');  const [gameOver, setGameOver] = useState(false);  useEffect(() => {    setAnswer(movieTitles[Math.floor(Math.random() * movieTitles.length)]);  }, []);  const handleKeyDown = (event) => {    if (gameOver) return;    if (event.key === 'Enter') {      if (currentGuess.length !== answer.length) {        alert(`Guess must be ${answer.length} characters long!`);        return;      }      const newGuesses = [...guesses];      const firstNullIndex = newGuesses.findIndex(guess => guess == null);      newGuesses[firstNullIndex] = currentGuess;      setGuesses(newGuesses);      setCurrentGuess('');      if (currentGuess === answer) {        setGameOver(true);        alert('Congratulations! You guessed the movie!');      } else if (firstNullIndex === newGuesses.length - 1) {        setGameOver(true);        alert(`Game over! The movie was ${answer}`);      }    } else if (event.key === 'Backspace') {      setCurrentGuess(currentGuess.slice(0, -1));    } else if (event.key.match(/^[A-Za-z]$/)) {      if (currentGuess.length < answer.length) {        setCurrentGuess((oldGuess) => oldGuess + event.key.toUpperCase());      }    }  };  useEffect(() => {    window.addEventListener('keydown', handleKeyDown);    return () => window.removeEventListener('keydown', handleKeyDown);  }, [currentGuess, answer, gameOver, guesses]);  return (    <div style={styles.container}>      <h1 style={styles.title}>Movie Wordle</h1>      <div style={styles.grid}>        {guesses.map((guess, i) => (          <Row            key={i}             guess={guess ?? currentGuess}             answer={answer}             isGuessed={guess != null}          />        ))}      </div></div>  );};const Row = ({ guess, answer, isGuessed }) => {  const tiles = [];  for (let i = 0; i < answer.length; i++) {    let className = styles.tile;        if (isGuessed) {      if (guess[i] === answer[i]) {        className = {...className, ...styles.correct};      } else if (answer.includes(guess[i])) {        className = {...className, ...styles.present};      } else {        className = {...className, ...styles.absent};      }    }    tiles.push(      <div key={i} style={className}>        {guess[i] || ''}      </div>    );  }  return <div style={styles.row}>{tiles}</div>;};const styles = {  container: {    display: 'flex',    flexDirection: 'column',    alignItems: 'center',    fontFamily: 'Arial, sans-serif',    backgroundColor: '#f0f0f0',    minHeight: '100vh',padding: '20px',  },  title: {    fontSize: '2.5rem',    marginBottom: '20px',    color: '#333',  },  grid: {    display: 'grid',    gridTemplateRows: 'repeat(6, 1fr)',    gap: '5px',    marginBottom: '20px',  },  row: {    display: 'flex',    gap: '5px',  },  tile: {    width: '50px',    height: '50px',    border: '2px solid #d3d6da',    fontSize: '2rem',    fontWeight: 'bold',    display: 'flex',    justifyContent: 'center',    alignItems: 'center',    textTransform: 'uppercase',    backgroundColor: 'white',  },  correct: {    backgroundColor: '#6aaa64',    borderColor: '#6aaa64',    color: 'white',  },  present: {    backgroundColor: '#c9b458',    borderColor: '#c9b458',    color: 'white',  },  absent: {    backgroundColor: '#787c7e',    borderColor: '#787c7e',    color: 'white',  },};export default MovieWordle;