src/components/lessons/Chapter3Slides.jsx

import React from 'react';
import { motion } from 'framer-motion';
import { Smile, Brain, AlertTriangle, Gamepad2, Accessibility, Heart, Shield, CheckCircle2 } from 'lucide-react';
import ClickReveal from './ClickReveal';
import KeyTermBadge from './KeyTermBadge';
import { EmotionFaceDemo } from './AnimatedDiagram';

export const chapter3Slides = [
  // Slide 1: What is Emotion Recognition?
  {
    content: (
      <div className="space-y-8">
        <motion.div
          initial={{ scale: 0 }}
          animate={{ scale: 1 }}
          transition={{ type: "spring", delay: 0.2 }}
          className="w-24 h-24 mx-auto rounded-3xl bg-gradient-to-br from-emerald-500 to-teal-500 flex items-center justify-center shadow-2xl shadow-emerald-500/30"
        >
          <Smile className="w-12 h-12 text-white" />
        </motion.div>

        <div className="text-center">
          <h1 className="text-4xl md:text-5xl font-black text-white mb-4">
            What is Emotion Recognition?
          </h1>
          <p className="text-xl text-white/70">Chapter 3 • Slide 1 of 5</p>
        </div>

        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.4 }}
          className="bg-white/5 backdrop-blur-xl rounded-3xl p-8 border border-white/10"
        >
          <p className="text-xl text-white/90 leading-relaxed mb-6">
            <KeyTermBadge term="Emotion Recognition" definition="AI technology that identifies human emotions from facial expressions" color="green" /> teaches computers to understand how people are feeling by looking at their faces!
          </p>
          
          <p className="text-lg text-white/70 leading-relaxed">
            Just like you can tell when a friend is happy, sad, or surprised, AI can learn to read these same expressions — and it's getting really good at it!
          </p>
        </motion.div>

        <ClickReveal title="🧠 Mind-Blowing Fact!" color="green">
          <p>Humans can recognize emotions in just 100 milliseconds — that's faster than the blink of an eye! AI is learning to match this speed.</p>
        </ClickReveal>
      </div>
    )
  },

  // Slide 2: The 7 Emotions
  {
    content: (
      <div className="space-y-8">
        <div className="text-center">
          <h1 className="text-4xl md:text-5xl font-black text-white mb-4">
            The 7 Basic Emotions
          </h1>
          <p className="text-xl text-white/70">What AI learns to detect</p>
        </div>

        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          {[
            { emoji: "😊", label: "Happy", color: "from-yellow-400 to-orange-400" },
            { emoji: "😢", label: "Sad", color: "from-blue-400 to-indigo-400" },
            { emoji: "😠", label: "Angry", color: "from-red-400 to-rose-400" },
            { emoji: "😨", label: "Fear", color: "from-purple-400 to-violet-400" },
            { emoji: "😲", label: "Surprise", color: "from-pink-400 to-fuchsia-400" },
            { emoji: "🤢", label: "Disgust", color: "from-green-400 to-lime-400" },
            { emoji: "😐", label: "Neutral", color: "from-gray-400 to-slate-400" }
          ].map((emotion, i) => (
            <motion.div
              key={i}
              initial={{ opacity: 0, scale: 0.8 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ delay: 0.2 + i * 0.08 }}
              whileHover={{ scale: 1.05, y: -5 }}
              className="bg-white/5 backdrop-blur-xl rounded-2xl p-4 border border-white/10 text-center cursor-pointer"
            >
              <motion.span 
                className="text-5xl block mb-2"
                animate={{ rotate: [0, -5, 5, 0] }}
                transition={{ duration: 2, repeat: Infinity, delay: i * 0.2 }}
              >
                {emotion.emoji}
              </motion.span>
              <span className={`inline-block px-3 py-1 rounded-full bg-gradient-to-r ${emotion.color} text-white font-bold text-sm`}>
                {emotion.label}
              </span>
            </motion.div>
          ))}
          <motion.div
            initial={{ opacity: 0, scale: 0.8 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ delay: 0.8 }}
            className="bg-gradient-to-br from-emerald-500/20 to-teal-500/20 backdrop-blur-xl rounded-2xl p-4 border border-emerald-500/30 flex items-center justify-center"
          >
            <p className="text-white/80 text-sm font-medium text-center">
              These 7 emotions are called <KeyTermBadge term="FER" definition="Facial Expression Recognition - the standard set of 7 emotions used in AI" color="green" /> emotions!
            </p>
          </motion.div>
        </div>

        <ClickReveal title="🌍 Universal Expressions" color="green">
          <p>These 7 emotions are recognized across all cultures! A smile means happiness whether you're in Tokyo, New York, or Cairo.</p>
        </ClickReveal>
      </div>
    )
  },

  // Slide 3: How the Model Reads Faces
  {
    content: (
      <div className="space-y-8">
        <div className="text-center">
          <h1 className="text-4xl md:text-5xl font-black text-white mb-4">
            How AI Reads Faces
          </h1>
          <p className="text-xl text-white/70">The technical magic explained</p>
        </div>

        <div className="grid md:grid-cols-2 gap-8">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.3 }}
          >
            <EmotionFaceDemo />
          </motion.div>

          <div className="space-y-4">
            <motion.div
              initial={{ opacity: 0, x: 20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: 0.4 }}
              className="bg-white/5 backdrop-blur-xl rounded-2xl p-5 border border-white/10"
            >
              <h3 className="text-xl font-bold text-white mb-3">48×48 Pixels</h3>
              <p className="text-white/80">
                The AI looks at tiny <KeyTermBadge term="Grayscale" definition="Black and white image without color - makes processing faster" color="green" /> images — just 48 by 48 pixels! That's smaller than most emojis.
              </p>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, x: 20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: 0.5 }}
              className="bg-white/5 backdrop-blur-xl rounded-2xl p-5 border border-white/10"
            >
              <h3 className="text-xl font-bold text-white mb-3">Pattern Recognition</h3>
              <p className="text-white/80">
                The model looks for patterns: raised eyebrows = surprise, frown + lowered brows = anger, upturned mouth = happy!
              </p>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, x: 20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: 0.6 }}
              className="bg-white/5 backdrop-blur-xl rounded-2xl p-5 border border-white/10"
            >
              <h3 className="text-xl font-bold text-white mb-3">Confidence Scores</h3>
              <p className="text-white/80">
                The AI gives a <KeyTermBadge term="Classification" definition="Putting something into a category - like sorting emotions" color="green" /> score for each emotion, like "85% happy, 10% neutral, 5% surprise."
              </p>
            </motion.div>
          </div>
        </div>
      </div>
    )
  },

  // Slide 4: Real-World Uses
  {
    content: (
      <div className="space-y-8">
        <div className="text-center">
          <h1 className="text-4xl md:text-5xl font-black text-white mb-4">
            Real-World Applications
          </h1>
          <p className="text-xl text-white/70">Where emotion AI helps</p>
        </div>

        <div className="grid gap-6">
          {[
            {
              icon: Gamepad2,
              title: "Video Games",
              description: "Games can adapt to your mood! If you look frustrated, the game might offer hints. If you're having fun, it might increase the challenge.",
              color: "from-purple-500 to-pink-500"
            },
            {
              icon: Heart,
              title: "Smart Assistants",
              description: "Virtual assistants might change their tone based on your mood — being more upbeat when you're sad or calmer when you're stressed.",
              color: "from-red-500 to-rose-500"
            },
            {
              icon: Accessibility,
              title: "Accessibility",
              description: "Helps people with autism or other conditions understand facial expressions better through real-time feedback.",
              color: "from-emerald-500 to-teal-500"
            }
          ].map((item, i) => (
            <motion.div
              key={i}
              initial={{ opacity: 0, x: -30 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: 0.3 + i * 0.15 }}
              className="bg-white/5 backdrop-blur-xl rounded-2xl p-6 border border-white/10 flex items-start gap-4"
            >
              <div className={`w-14 h-14 rounded-xl bg-gradient-to-br ${item.color} flex items-center justify-center flex-shrink-0`}>
                <item.icon className="w-7 h-7 text-white" />
              </div>
              <div>
                <h3 className="text-xl font-bold text-white mb-2">{item.title}</h3>
                <p className="text-white/70">{item.description}</p>
              </div>
            </motion.div>
          ))}
        </div>

        <ClickReveal title="🎬 In Movies!" color="green">
          <p>Film studios use emotion recognition to test audience reactions to trailers and scenes before movies are released!</p>
        </ClickReveal>
      </div>
    )
  },

  // Slide 5: Chapter Summary
  {
    content: (
      <div className="space-y-10">
        <div className="text-center mb-8">
          <div className="text-7xl mb-6">🌟</div>
          <h1 className="text-5xl md:text-6xl font-black text-white mb-6">
            Chapter Complete!
          </h1>
          <p className="text-2xl text-white/70">You've mastered Emotion Recognition</p>
        </div>

        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.3 }}
          className="bg-gradient-to-br from-amber-500/20 to-orange-500/20 rounded-3xl p-8 border border-amber-500/30"
        >
          <div className="flex items-start gap-4">
            <AlertTriangle className="w-8 h-8 text-amber-400 flex-shrink-0" />
            <div>
              <h3 className="text-xl font-bold text-white mb-2">Remember</h3>
              <p className="text-white/80 text-lg">
                Just because AI <em>can</em> do something doesn't mean it <em>should</em>. Always use emotion recognition responsibly!
              </p>
            </div>
          </div>
        </motion.div>

        <div className="bg-gradient-to-br from-emerald-500/20 to-teal-500/20 rounded-3xl p-10 border border-emerald-500/30">
          <h3 className="text-2xl font-bold text-white mb-6 flex items-center gap-3">
            <CheckCircle2 className="w-8 h-8 text-emerald-400" />
            What You Learned
          </h3>
          <div className="grid gap-4">
            {[
              { icon: "😊", text: "Emotion AI detects 7 basic facial expressions" },
              { icon: "🖼️", text: "It uses small grayscale images (48×48 pixels)" },
              { icon: "🎮", text: "Applications include games, assistants, and accessibility" },
              { icon: "⚖️", text: "Ethics and privacy are crucial considerations" }
            ].map((item, i) => (
              <motion.div
                key={i}
                initial={{ opacity: 0, x: -20 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: 0.5 + i * 0.1 }}
                className="flex items-center gap-4 bg-white/5 rounded-2xl p-5"
              >
                <div className="text-4xl">{item.icon}</div>
                <p className="text-white/90 text-lg flex-1">{item.text}</p>
              </motion.div>
            ))}
          </div>
        </div>

        <div className="grid md:grid-cols-3 gap-6">
          <div className="bg-white/5 rounded-2xl p-6 text-center border border-white/10">
            <div className="text-4xl mb-3">🎯</div>
            <div className="text-3xl font-bold text-emerald-400">5</div>
            <div className="text-white/60">Slides Completed</div>
          </div>
          <div className="bg-white/5 rounded-2xl p-6 text-center border border-white/10">
            <div className="text-4xl mb-3">😊</div>
            <div className="text-3xl font-bold text-teal-400">7</div>
            <div className="text-white/60">Emotions Tracked</div>
          </div>
          <div className="bg-white/5 rounded-2xl p-6 text-center border border-white/10">
            <div className="text-4xl mb-3">🖼️</div>
            <div className="text-3xl font-bold text-cyan-400">48×48</div>
            <div className="text-white/60">Pixel Size</div>
          </div>
        </div>
      </div>
    )
  }
];