import React, { useState, useEffect } from 'react';const WORDS = ['REACT', 'CLONE', 'WORDLE', 'GUESS', 'GAME', 'PIANO', 'RIVER', 'STONE', 'CLOUD', 'LIGHT'];const EnhancedWordleClone = () => {  const [solution, setSolution] = useState('');  const [guesses, setGuesses] = useState(Array(6).fill(null));  const [currentGuess, setCurrentGuess] = useState('');  const [gameOver, setGameOver] = useState(false);  const [message, setMessage] = useState('');  useEffect(() => {    const randomWord = WORDS[Math.floor(Math.random() * WORDS.length)];    setSolution(randomWord);  }, []);  useEffect(() => {    const handleKeyDown = (event) => {      if (gameOver) return;      if (event.key === 'Enter') {        if (currentGuess.length !== 5) {          setMessage('Word must be 5 letters long');          return;        }        const newGuesses = [...guesses];        const firstEmptyIndex = newGuesses.findIndex(guess => guess == null);        newGuesses[firstEmptyIndex] = currentGuess;        setGuesses(newGuesses);        setCurrentGuess('');        if (currentGuess === solution) {          setGameOver(true);          setMessage('Congratulations! You won!');        } else if (firstEmptyIndex === 5) {          setGameOver(true);          setMessage(`Game over! The word was ${solution}`);        } else {          setMessage('');        }      } else if (event.key === 'Backspace') {        setCurrentGuess(currentGuess.slice(0, -1));        setMessage('');      } else if (currentGuess.length < 5 && event.key.match(/^[A-Za-z]$/)) {        setCurrentGuess(currentGuess + event.key.toUpperCase());        setMessage('');      }    };    window.addEventListener('keydown', handleKeyDown);    return () => window.removeEventListener('keydown', handleKeyDown);  }, [currentGuess, gameOver, guesses, solution]);  const getLetterColor = (letter, index, guess) => {    if (solution[index] === letter) {      return '#6aaa64'; // green    } else if (solution.includes(letter)) {      return '#c9b458'; // yellow    } else {      return '#787c7e'; // grey    }  };  return (    <div style={{      fontFamily: "'Helvetica Neue', Arial, sans-serif",      display: 'flex',      flexDirection: 'column',      alignItems: 'center',      justifyContent: 'center',      height: '100vh',      backgroundColor: '#f0f0f0',color: '#1a1a1a'    }}>      <h1 style={{ marginBottom: '20px', fontSize: '2.5rem', fontWeight: 'bold', color: '#1a1a1a' }}>Wordle Clone</h1>      <div style={{ display: 'grid', gridTemplateRows: 'repeat(6, 1fr)', gap: '5px', marginBottom: '20px' }}>        {guesses.map((guess, i) => (          <div key={i} style={{ display: 'flex', gap: '5px' }}>            {Array.from({ length: 5 }).map((_, j) => (              <div                key={j}                style={{                  width: '60px',                  height: '60px',                  border: '2px solid #d3d6da',                  borderRadius: '5px',                  display: 'flex',                  justifyContent: 'center',                  alignItems: 'center',                  fontSize: '2rem',                  fontWeight: 'bold',                  backgroundColor: guess ? getLetterColor(guess[j], j, guess) : 'white',                  color: guess ? 'white' : 'black',                  transition: 'all 0.3s ease',                  boxShadow: guess ? '0 2px 4px rgba(0,0,0,0.1)' : 'none',                }}              >                {guess ? guess[j] : ''}              </div>            ))}          </div>        ))}      </div>      <div style={{         height: '50px',         marginBottom: '20px',         fontSize: '2rem',         display: 'flex',         alignItems: 'center',         justifyContent: 'center',        width: '310px',        border: '2px solid #d3d6da',        borderRadius: '5px',        backgroundColor: 'white'      }}>        {currentGuess}      </div>      <div style={{         height: '30px',         marginBottom: '20px',         fontSize: '1.2rem',         color: message.includes('Congratulations') ? '#6aaa64' : '#d11c1c',        fontWeight: 'bold'      }}>        {message}      </div>      {gameOver && (        <button          onClick={() => window.location.reload()}           style={{            padding: '10px 20px',            fontSize: '1rem',            backgroundColor: '#4CAF50',            color: 'white',            border: 'none',            borderRadius: '5px',            cursor: 'pointer',            transition: 'background-color 0.3s ease'          }}          onMouseOver={(e) => e.target.style.backgroundColor = '#45a049'}          onMouseOut={(e) => e.target.style.backgroundColor = '#4CAF50'}        >          Play Again        </button>      )}    </div>  );};export default EnhancedWordleClone;