Untitled

export default function ColorPersonalityTestGame() {
  const questions = [
    {
      question: "What kind of weekend sounds most relaxing to you?",
      answers: [
        { text: "A peaceful day at home", color: "Blue" },
        { text: "An exciting adventure outdoors", color: "Red" },
        { text: "Trying something creative or artistic", color: "Yellow" },
        { text: "Spending time with loved ones", color: "Green" },
      ],
    },
    {
      question: "How do your friends usually describe you?",
      answers: [
        { text: "Calm and thoughtful", color: "Blue" },
        { text: "Bold and confident", color: "Red" },
        { text: "Fun and energetic", color: "Yellow" },
        { text: "Kind and supportive", color: "Green" },
      ],
    },
    {
      question: "Which environment do you enjoy the most?",
      answers: [
        { text: "The beach or ocean", color: "Blue" },
        { text: "A busy city full of energy", color: "Red" },
        { text: "A colorful festival or concert", color: "Yellow" },
        { text: "A peaceful forest or garden", color: "Green" },
      ],
    },
    {
      question: "What motivates you the most?",
      answers: [
        { text: "Inner peace and stability", color: "Blue" },
        { text: "Success and achievement", color: "Red" },
        { text: "Freedom and fun", color: "Yellow" },
        { text: "Helping others", color: "Green" },
      ],
    },
    {
      question: "Pick a favorite activity:",
      answers: [
        { text: "Reading or journaling", color: "Blue" },
        { text: "Sports or competition", color: "Red" },
        { text: "Dancing or performing", color: "Yellow" },
        { text: "Cooking or caring for people", color: "Green" },
      ],
    },
  ];

  const personalities = {
    Blue: {
      title: "Blue Personality 💙",
      description:
        "You are calm, thoughtful, and emotionally intelligent. People trust you because of your honesty and peaceful energy. You value deep connections and meaningful conversations.",
      bg: "bg-blue-100",
      button: "bg-blue-500 hover:bg-blue-600",
    },
    Red: {
      title: "Red Personality ❤️",
      description:
        "You are passionate, determined, and confident. You naturally take leadership roles and enjoy challenges. Your strong energy inspires the people around you.",
      bg: "bg-red-100",
      button: "bg-red-500 hover:bg-red-600",
    },
    Yellow: {
      title: "Yellow Personality 💛",
      description:
        "You are creative, cheerful, and spontaneous. You bring fun and positivity wherever you go. Your imagination and optimism make you stand out.",
      bg: "bg-yellow-100",
      button: "bg-yellow-500 hover:bg-yellow-600",
    },
    Green: {
      title: "Green Personality 💚",
      description:
        "You are caring, loyal, and compassionate. You value harmony and love helping others feel comfortable and supported. People appreciate your warm heart.",
      bg: "bg-green-100",
      button: "bg-green-500 hover:bg-green-600",
    },
  };

  const [currentQuestion, setCurrentQuestion] = React.useState(0);
  const [scores, setScores] = React.useState({
    Blue: 0,
    Red: 0,
    Yellow: 0,
    Green: 0,
  });
  const [result, setResult] = React.useState(null);

  const handleAnswer = (color) => {
    const updatedScores = {
      ...scores,
      [color]: scores[color] + 1,
    };

    setScores(updatedScores);

    if (currentQuestion + 1 < questions.length) {
      setCurrentQuestion(currentQuestion + 1);
    } else {
      const topColor = Object.keys(updatedScores).reduce((a, b) =>
        updatedScores[a] > updatedScores[b] ? a : b
      );
      setResult(personalities[topColor]);
    }
  };

  const restartGame = () => {
    setCurrentQuestion(0);
    setScores({ Blue: 0, Red: 0, Yellow: 0, Green: 0 });
    setResult(null);
  };

  if (result) {
    return (
      <div className={`min-h-screen flex items-center justify-center p-6 ${result.bg}`}>
        <div className="bg-white rounded-3xl shadow-2xl max-w-xl w-full p-8 text-center">
          <h1 className="text-4xl font-bold mb-4">{result.title}</h1>
          <p className="text-lg text-gray-700 leading-relaxed mb-6">
            {result.description}
          </p>
          <button
            onClick={restartGame}
            className={`${result.button} text-white px-6 py-3 rounded-2xl text-lg font-semibold transition-all`}
          >
            Play Again
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-pink-100 via-purple-100 to-blue-100 flex items-center justify-center p-6">
      <div className="bg-white shadow-2xl rounded-3xl p-8 max-w-2xl w-full">
        <div className="mb-6">
          <h1 className="text-4xl font-bold text-center mb-2">
            🎨 Color Personality Test
          </h1>
          <p className="text-center text-gray-500">
            Discover which color matches your personality!
          </p>
        </div>

        <div className="mb-4 text-sm text-gray-500 text-center">
          Question {currentQuestion + 1} of {questions.length}
        </div>

        <h2 className="text-2xl font-semibold mb-8 text-center text-gray-800">
          {questions[currentQuestion].question}
        </h2>

        <div className="grid gap-4">
          {questions[currentQuestion].answers.map((answer, index) => (
            <button
              key={index}
              onClick={() => handleAnswer(answer.color)}
              className="w-full p-4 rounded-2xl border-2 border-gray-200 hover:border-purple-400 hover:shadow-lg transition-all text-left font-medium text-gray-700"
            >
              {answer.text}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}