import React, { useState, useEffect } from 'react';const WORD_LENGTH = 5;const MAX_GUESSES = 6;const MOVIES = ['ALIEN', 'JAWS', 'ROCKY', 'PSYCHO', 'MATRIX', 'FROZEN', 'AVATAR', 'CLUELESS', 'INCEPTION', 'TITANIC'];function Moviele() {  const [targetMovie, setTargetMovie] = useState('');  const [guesses, setGuesses] = useState([]);  const [currentGuess, setCurrentGuess] = useState('');  const [gameOver, setGameOver] = useState(false);  const [message, setMessage] = useState('');  useEffect(() => {    setTargetMovie(MOVIES[Math.floor(Math.random() * MOVIES.length)]);  }, []);  const handleGuess = () => {    if (currentGuess.length !== WORD_LENGTH) return;    const newGuesses = [...guesses, currentGuess];    setGuesses(newGuesses);    setCurrentGuess('');    if (currentGuess === targetMovie) {      setGameOver(true);      setMessage(`🎬 You got it! The movie was ${targetMovie}. 🎥`);    } else if (newGuesses.length === MAX_GUESSES) {      setGameOver(true);      setMessage(`🎭 Game over! The movie was ${targetMovie}.🍿`);    } else {      setMessage(getMovieHint(newGuesses.length));    }  };  const handleKeyDown = (event) => {    if (gameOver) return;    if (event.key === 'Enter') {      handleGuess();    } else if (event.key === 'Backspace') {      setCurrentGuess(currentGuess.slice(0, -1));    } else if (event.key.match(/^[A-Za-z]$/) && currentGuess.length < WORD_LENGTH) {      setCurrentGuess((prev) => prev + event.key.toUpperCase());    }  };  useEffect(() => {    window.addEventListener('keydown', handleKeyDown);    return () => window.removeEventListener('keydown', handleKeyDown);  }, [currentGuess, gameOver]);  const getMovieHint = (guessCount) => {    const hints = [      "🎬 Action! First guess down.",      "🎥 Keep rolling! You're doing great.",      "🍿 Intermission! Grab some popcorn and keep guessing.",      "🎭 Plot twist! Don't give up now.",      "🌟 Final act approaching. You've got this!"    ];    return hints[guessCount - 1] || "🎞️ The suspense is killing me!";  };  const renderGuess = (guess, isCurrentGuess = false) => {    const tiles = [];    for (let i = 0; i < WORD_LENGTH; i++) {      let letter = guess[i];      let backgroundColor = 'rgba(18, 18, 18, 0.8)';      let borderColor = '#444';      let color = 'white';      if (!isCurrentGuess && letter) {        if (letter === targetMovie[i]) {          backgroundColor = '#538d4e';} else if (targetMovie.includes(letter)) {          backgroundColor = '#b59f3b';        } else {          backgroundColor = '#3a3a3c';        }borderColor = backgroundColor;      }      tiles.push(        <div key={i} style={{          width: '60px',          height: '60px',          border: `2px solid ${borderColor}`,          borderRadius: '12px',          display: 'flex',          justifyContent: 'center',          alignItems: 'center',          fontSize: '2rem',          fontWeight: 'bold',          backgroundColor,          color,          textTransform: 'uppercase',          margin: '3px',          boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',transition: 'all 0.3s ease',        }}>          {letter || ''}        </div>      );    }    return tiles;  };  return (    <div style={{      fontFamily: "'Roboto', sans-serif",      maxWidth: '100%',      margin: '0 auto',      textAlign: 'center',      backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80")',      backgroundSize: 'cover',      backgroundPosition: 'center',      backgroundAttachment: 'fixed',      color: 'white',      minHeight: '100vh',      padding: '20px',      display: 'flex',      flexDirection: 'column',      alignItems: 'center',      justifyContent: 'center',    }}>      <h1 style={{        fontSize: '3rem',        marginBottom: '20px',        textShadow: '2px 2px 4px rgba(0,0,0,0.5)',        color: '#FFD700',        fontFamily: "'Playfair Display', serif",      }}>        Moviele      </h1>      <div style={{        background: 'rgba(0, 0, 0, 0.6)',        borderRadius: '15px',        padding: '20px',        boxShadow: '0 8px 32px 0 rgba(31, 38, 135, 0.37)',        backdropFilter: 'blur(4px)',        border: '1px solid rgba(255, 255, 255, 0.18)',maxWidth: '500px',        width: '100%',}}>        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: '20px' }}>          {guesses.map((guess, index) => (            <div key={index} style={{ display: 'flex', marginBottom: '5px' }}>              {renderGuess(guess)}            </div>          ))}          {!gameOver && guesses.length < MAX_GUESSES && (            <div style={{ display: 'flex', marginBottom: '5px' }}>              {renderGuess(currentGuess.padEnd(WORD_LENGTH), true)}            </div>          )}        </div>        <div style={{ marginTop: '20px', fontSize: '1.2rem', minHeight: '60px', fontStyle: 'italic' }}>          {message}        </div>        <div style={{ marginTop: '20px', fontSize: '0.9rem', opacity: '0.8' }}>          Guess the 5-letter movie title. Type and press Enter. Use Backspace to delete.        </div>      </div>    </div>  );}export default Moviele;