import React from 'react';
import { motion } from 'framer-motion';
import { Eye, Car, Bot, Camera, Zap, Target, CheckCircle2 } from 'lucide-react';
import ClickReveal from './ClickReveal';
import KeyTermBadge from './KeyTermBadge';
import { BoundingBoxDemo } from './AnimatedDiagram';

export const chapter1Slides = [
  // Slide 1: What is Object Detection?
  {
    content: (
      <div className="space-y-10">
        <motion.div
          initial={{ scale: 0 }}
          animate={{ scale: 1 }}
          transition={{ type: "spring", delay: 0.2 }}
          className="w-28 h-28 mx-auto rounded-3xl bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center shadow-2xl shadow-blue-500/30"
        >
          <Eye className="w-14 h-14 text-white" />
        </motion.div>

        <div className="text-center mb-8">
          <h1 className="text-5xl md:text-6xl font-black text-white mb-6 leading-tight">
            What is Object Detection?
          </h1>
          <p className="text-xl text-white/70">Chapter 1 • 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-10 border border-white/10"
        >
          <p className="text-2xl text-white/90 leading-relaxed mb-8">
            <KeyTermBadge term="Object Detection" definition="A computer vision technique that identifies and locates objects in images or videos" color="cyan" /> is like giving a computer the power to <span className="text-cyan-400 font-semibold">see and identify things</span> in pictures and videos — just like you can!
          </p>
          
          <div className="flex items-center justify-center gap-8 my-8">
            <div className="text-7xl">👁️</div>
            <div className="text-5xl">➡️</div>
            <div className="text-7xl">🤖</div>
          </div>
          
          <p className="text-xl text-white/70 leading-relaxed">
            When you look at a photo, you instantly know "that's a dog" or "that's a car." Object detection teaches computers to do the same thing automatically!
          </p>
        </motion.div>

        <ClickReveal title="🤔 Fun Fact!" color="blue">
          <p className="text-lg">Your brain processes images in just 13 milliseconds — but modern AI can now detect objects almost as fast!</p>
        </ClickReveal>
      </div>
    )
  },

  // Slide 2: How Computers See Objects
  {
    content: (
      <div className="space-y-10">
        <div className="text-center mb-8">
          <h1 className="text-5xl md:text-6xl font-black text-white mb-6">
            How Computers See Objects
          </h1>
          <p className="text-2xl text-white/70">Bounding Boxes & Labels</p>
        </div>

        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.3 }}
          className="mb-10"
        >
          <BoundingBoxDemo />
        </motion.div>

        <div className="grid md:grid-cols-2 gap-6">
          <motion.div
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ delay: 0.5 }}
            className="bg-white/5 backdrop-blur-xl rounded-3xl p-8 border border-white/10"
          >
            <div className="text-5xl mb-4">📦</div>
            <h3 className="text-2xl font-bold text-white mb-4 flex items-center gap-2">
              <Target className="w-7 h-7 text-cyan-400" />
              Bounding Boxes
            </h3>
            <p className="text-white/80 leading-relaxed text-lg">
              A <KeyTermBadge term="Bounding Box" definition="A rectangle drawn around an object to show where it is in the image" color="cyan" /> is a rectangle that the computer draws around each object it finds. It's like drawing a box around something to say "Look here!"
            </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-3xl p-8 border border-white/10"
          >
            <div className="text-5xl mb-4">⚡</div>
            <h3 className="text-2xl font-bold text-white mb-4 flex items-center gap-2">
              <Zap className="w-7 h-7 text-yellow-400" />
              Confidence Score
            </h3>
            <p className="text-white/80 leading-relaxed text-lg">
              The computer also gives a <KeyTermBadge term="Confidence Score" definition="A percentage showing how sure the AI is about its prediction" color="yellow" /> — like saying "I'm 98% sure this is a car!"
            </p>
          </motion.div>
        </div>
      </div>
    )
  },

  // Slide 3: Real-World Examples
  {
    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 Examples
          </h1>
          <p className="text-xl text-white/70">Object detection is everywhere!</p>
        </div>

        <div className="grid gap-6">
          {[
            {
              icon: Car,
              title: "Self-Driving Cars",
              description: "Cars use object detection to spot other vehicles, pedestrians, traffic signs, and road markings to drive safely.",
              color: "from-blue-500 to-cyan-500"
            },
            {
              icon: Bot,
              title: "Robots & Automation",
              description: "Factory robots detect products on assembly lines to pick, sort, and package items automatically.",
              color: "from-purple-500 to-pink-500"
            },
            {
              icon: Camera,
              title: "Phone Cameras",
              description: "Your phone's camera detects faces to focus properly and apply cool filters!",
              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="🚗 Did you know?" color="blue">
          <p>A single self-driving car processes about 1 terabyte of data per day — that's like watching 500 hours of HD video!</p>
        </ClickReveal>
      </div>
    )
  },

  // Slide 4: How Detection Works
  {
    content: (
      <div className="space-y-8">
        <div className="text-center">
          <h1 className="text-4xl md:text-5xl font-black text-white mb-4">
            How Detection Works
          </h1>
          <p className="text-xl text-white/70">The magic behind the scenes</p>
        </div>

        <div className="relative">
          {/* Process Steps */}
          <div className="space-y-6">
            {[
              { step: 1, title: "Input Image", desc: "The computer receives a photo or video frame", icon: "📷" },
              { step: 2, title: "Grid Division", desc: "The image is split into a grid of small cells", icon: "🔲" },
              { step: 3, title: "Feature Extraction", desc: "AI looks for patterns, edges, and shapes", icon: "🔍" },
              { step: 4, title: "Predictions", desc: "Each cell predicts what objects might be there", icon: "🎯" },
              { step: 5, title: "Output", desc: "Final boxes and labels are drawn on the image", icon: "✅" }
            ].map((item, i) => (
              <motion.div
                key={i}
                initial={{ opacity: 0, x: -30 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: 0.2 + i * 0.1 }}
                className="flex items-center gap-4"
              >
                <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 border border-cyan-500/30 flex items-center justify-center text-2xl">
                  {item.icon}
                </div>
                <div className="flex-1 bg-white/5 rounded-2xl p-4 border border-white/10">
                  <div className="flex items-center gap-2 mb-1">
                    <span className="w-6 h-6 rounded-full bg-cyan-500 text-white text-sm font-bold flex items-center justify-center">{item.step}</span>
                    <h4 className="font-bold text-white">{item.title}</h4>
                  </div>
                  <p className="text-white/70 text-sm">{item.desc}</p>
                </div>
              </motion.div>
            ))}
          </div>
        </div>

        <ClickReveal title="⚡ Speed Matters!" color="yellow">
          <p>YOLO (You Only Look Once) can process 45 frames per second — faster than your eyes can blink!</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 Object Detection</p>
        </div>

        <div className="bg-gradient-to-br from-blue-500/20 to-cyan-500/20 rounded-3xl p-10 border border-cyan-500/30">
          <h3 className="text-2xl font-bold text-white mb-6 flex items-center gap-3">
            <CheckCircle2 className="w-8 h-8 text-cyan-400" />
            What You Learned
          </h3>
          <div className="grid gap-4">
            {[
              { icon: "👁️", text: "Object detection finds and identifies things in images" },
              { icon: "📦", text: "Bounding boxes show where objects are located" },
              { icon: "💯", text: "Confidence scores tell us how sure the AI is" },
              { icon: "🚗", text: "This technology powers cars, robots, and phones!" }
            ].map((item, i) => (
              <motion.div
                key={i}
                initial={{ opacity: 0, x: -20 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: 0.3 + 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-cyan-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-blue-400">80+</div>
            <div className="text-white/60">Object Classes</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-purple-400">45</div>
            <div className="text-white/60">FPS Speed</div>
          </div>
        </div>
      </div>
    )
  }
];