Marketing vs. Promotion: Music Release Game

import React, { useState } from "react";
import { motion } from "framer-motion";

const scenario = {
  analogy: "Music Release",
  marketing: "Artist brand & image (the long-term identity)",
  promotion: "Campaign for one album drop (specific push)",
  concertExample: "Beyoncé’s Renaissance brand vs. Club Renaissance promo",
};

export default function MarketingVsPromotionGame() {
  const [selected, setSelected] = useState(null);
  const [score, setScore] = useState(0);
  const [round, setRound] = useState(1);

  const handleChoice = (choice) => {
    setSelected(choice);
    if (choice === "marketing") {
      setScore(score + 1);
    }
    setTimeout(() => {
      setSelected(null);
      setRound(round + 1);
    }, 1500);
  };

  return (
    <div style={{ fontFamily: "Arial, sans-serif", padding: "20px", maxWidth: "700px", margin: "auto" }}>
      <h1 style={{ textAlign: "center" }}>Marketing vs. Promotion: Music Release Game</h1>
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
        style={{ border: "1px solid #ddd", borderRadius: "12px", padding: "20px", marginBottom: "20px", boxShadow: "0 4px 12px rgba(0,0,0,0.1)" }}
      >
        <h2>Analogy: {scenario.analogy}</h2>
        <p><em>Concert Example: {scenario.concertExample}</em></p>
        <p>Round {round}: Which of the following is <strong>MARKETING</strong>?</p>
        <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
          <motion.button
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            onClick={() => handleChoice("marketing")}
            style={{
              padding: "12px",
              borderRadius: "8px",
              border: selected === "marketing" ? "2px solid green" : "1px solid #333",
              background: selected === "marketing" ? "#d1fad1" : "#fff",
              cursor: "pointer",
              fontWeight: 600,
            }}
          >
            {scenario.marketing}
          </motion.button>
          <motion.button
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            onClick={() => handleChoice("promotion")}
            style={{
              padding: "12px",
              borderRadius: "8px",
              border: selected === "promotion" ? "2px solid red" : "1px solid #333",
              background: selected === "promotion" ? "#fad1d1" : "#fff",
              cursor: "pointer",
              fontWeight: 600,
            }}
          >
            {scenario.promotion}
          </motion.button>
        </div>
        {selected && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.4 }}
            style={{ marginTop: "20px", fontWeight: "bold", textAlign: "center" }}
          >
            {selected === "marketing" ? "✅ Correct! Marketing is long-term branding." : "❌ Not quite. That’s a promotional tactic."}
          </motion.div>
        )}
      </motion.div>
      <div style={{ textAlign: "center" }}>
        <p>Score: {score}</p>
      </div>
    </div>
  );
}