src/components/lessons/Chapter2Slides.jsx

import React from 'react';
import { motion } from 'framer-motion';
import { Activity, Dumbbell, Gamepad2, Stethoscope, Play, CheckCircle2 } from 'lucide-react';
import ClickReveal from './ClickReveal';
import KeyTermBadge from './KeyTermBadge';
import { PoseSkeletonDemo } from './AnimatedDiagram';

export const chapter2Slides = [
  // Slide 1: What is Pose Estimation?
  {
    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-purple-500 to-pink-500 flex items-center justify-center shadow-2xl shadow-purple-500/30"

        >

          <Activity 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 Pose Estimation?

          </h1>

          <p className="text-xl text-white/70">Chapter 2 • 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="Pose Estimation" definition="Technology that detects human body positions by identifying key body points" color="purple" /> is like teaching a computer to understand <span className="text-purple-400 font-semibold">body language</span>!

          </p>

          

          <p className="text-lg text-white/70 leading-relaxed">

            It finds important points on your body — like your nose, shoulders, elbows, and knees — and connects them to create a "skeleton" that shows how you're moving.

          </p>

        </motion.div>



        <ClickReveal title="🎮 Cool Connection!" color="purple">

          <p>Video games like Just Dance use pose estimation to track your dance moves in real-time!</p>

        </ClickReveal>

      </div>
    )
  },

  // Slide 2: Keypoints and Skeleton Lines
  {
    content: (
      <div className="space-y-8">

        <div className="text-center">

          <h1 className="text-4xl md:text-5xl font-black text-white mb-4">

            Keypoints & Skeleton

          </h1>

          <p className="text-xl text-white/70">Building a digital body map</p>

        </div>



        <div className="grid md:grid-cols-2 gap-6">

          <motion.div

            initial={{ opacity: 0, y: 20 }}

            animate={{ opacity: 1, y: 0 }}

            transition={{ delay: 0.3 }}

          >

            <PoseSkeletonDemo />

          </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 flex items-center gap-2">

                <span className="w-3 h-3 rounded-full bg-pink-500" />

                Keypoints

              </h3>

              <p className="text-white/80">

                <KeyTermBadge term="Keypoints" definition="Specific body locations like joints that the AI tracks" color="pink" /> are the important spots on your body that the AI tracks — typically 17 points including your nose, eyes, shoulders, elbows, wrists, hips, knees, and ankles.

              </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 flex items-center gap-2">

                <div className="w-8 h-0.5 bg-gradient-to-r from-purple-500 to-pink-500" />

                Skeleton Lines

              </h3>

              <p className="text-white/80">

                Lines connect the keypoints to show your body structure — like a stick figure that moves exactly like you!

              </p>

            </motion.div>



            <motion.div

              initial={{ opacity: 0, x: 20 }}

              animate={{ opacity: 1, x: 0 }}

              transition={{ delay: 0.6 }}

              className="bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-2xl p-5 border border-purple-500/30"

            >

              <p className="text-white/90 font-medium">

                💡 Each keypoint has X, Y coordinates (position) and sometimes a confidence score!

              </p>

            </motion.div>

          </div>

        </div>

      </div>
    )
  },

  // Slide 3: 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 Uses

          </h1>

          <p className="text-xl text-white/70">Pose estimation helps everywhere!</p>

        </div>



        <div className="grid gap-6">

          {[

            {

              icon: Dumbbell,

              title: "Sports & Fitness",

              description: "Coaches analyze athlete movements to improve technique. Fitness apps check if you're doing exercises correctly!",

              color: "from-purple-500 to-pink-500"

            },

            {

              icon: Gamepad2,

              title: "Gaming & VR",

              description: "Motion-controlled games track your body to make you the controller. Dance games know exactly how you move!",

              color: "from-blue-500 to-purple-500"

            },

            {

              icon: Stethoscope,

              title: "Healthcare",

              description: "Physical therapists use it to track patient recovery. It can even help detect early signs of movement disorders.",

              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="🏃 Amazing Fact!" color="purple">

          <p>Olympic coaches use pose estimation to analyze athletes frame-by-frame, finding improvements invisible to the human eye!</p>

        </ClickReveal>

      </div>
    )
  },

  // Slide 4: Animated Stick Figure
  {
    content: (
      <div className="space-y-8">

        <div className="text-center">

          <h1 className="text-4xl md:text-5xl font-black text-white mb-4">

            See It Move!

          </h1>

          <p className="text-xl text-white/70">Watch pose estimation in action</p>

        </div>



        <AnimatedStickFigure />



        <div className="grid md:grid-cols-3 gap-4">

          {[

            { label: "Real-time Tracking", icon: "⚡" },

            { label: "17 Keypoints", icon: "📍" },

            { label: "Smooth Motion", icon: "🌊" }

          ].map((item, i) => (

            <motion.div

              key={i}

              initial={{ opacity: 0, y: 20 }}

              animate={{ opacity: 1, y: 0 }}

              transition={{ delay: 0.5 + i * 0.1 }}

              className="bg-white/5 rounded-xl p-4 border border-white/10 text-center"

            >

              <span className="text-2xl">{item.icon}</span>

              <p className="text-white/80 mt-2 font-medium">{item.label}</p>

            </motion.div>

          ))}

        </div>

      </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 Pose Estimation</p>

        </div>



        <div className="bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-3xl p-10 border border-purple-500/30">

          <h3 className="text-2xl font-bold text-white mb-6 flex items-center gap-3">

            <CheckCircle2 className="w-8 h-8 text-purple-400" />

            Key Takeaways

          </h3>

          <div className="grid gap-4">

            {[

              { icon: "🎯", text: "Pose estimation tracks body movements using keypoints" },

              { icon: "🦴", text: "17 keypoints create a full body skeleton" },

              { icon: "⚽", text: "Used in sports, gaming, healthcare, and more" },

              { icon: "⚡", text: "Works in real-time for interactive applications" }

            ].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-purple-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-pink-400">17</div>

            <div className="text-white/60">Body Keypoints</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-violet-400">Multi</div>

            <div className="text-white/60">Person Tracking</div>

          </div>

        </div>

      </div>
    )
  }
];

function AnimatedStickFigure() {
  const [pose, setPose] = React.useState(0);
  const poses = ['standing', 'waving'];

  React.useEffect(() => {
    const interval = setInterval(() => {
      setPose(p => (p + 1) % poses.length);
    }, 2000);
    return () => clearInterval(interval);
  }, []);

  const poseConfigs = {
    standing: {
      head: { x: 50, y: 15 },
      neck: { x: 50, y: 22 },
      lshoulder: { x: 38, y: 25 },
      rshoulder: { x: 62, y: 25 },
      lelbow: { x: 32, y: 38 },
      relbow: { x: 68, y: 38 },
      lwrist: { x: 30, y: 50 },
      rwrist: { x: 70, y: 50 },
      hip: { x: 50, y: 50 },
      lhip: { x: 42, y: 52 },
      rhip: { x: 58, y: 52 },
      lknee: { x: 42, y: 70 },
      rknee: { x: 58, y: 70 },
      lankle: { x: 42, y: 88 },
      rankle: { x: 58, y: 88 }
    },
    waving: {
      head: { x: 50, y: 15 },
      neck: { x: 50, y: 22 },
      lshoulder: { x: 38, y: 25 },
      rshoulder: { x: 62, y: 25 },
      lelbow: { x: 32, y: 38 },
      relbow: { x: 75, y: 15 },
      lwrist: { x: 30, y: 50 },
      rwrist: { x: 85, y: 8 },
      hip: { x: 50, y: 50 },
      lhip: { x: 42, y: 52 },
      rhip: { x: 58, y: 52 },
      lknee: { x: 42, y: 70 },
      rknee: { x: 58, y: 70 },
      lankle: { x: 42, y: 88 },
      rankle: { x: 58, y: 88 }
    }
  };

  const currentPose = poseConfigs[poses[pose]];
  const bones = [
    ['head', 'neck'],
    ['neck', 'lshoulder'],
    ['neck', 'rshoulder'],
    ['lshoulder', 'lelbow'],
    ['rshoulder', 'relbow'],
    ['lelbow', 'lwrist'],
    ['relbow', 'rwrist'],
    ['neck', 'hip'],
    ['hip', 'lhip'],
    ['hip', 'rhip'],
    ['lhip', 'lknee'],
    ['rhip', 'rknee'],
    ['lknee', 'lankle'],
    ['rknee', 'rankle'],
  ];

  return (
    <div className="relative max-w-md mx-auto">

      <div className="aspect-[3/4] bg-gradient-to-br from-purple-900/50 to-pink-900/50 rounded-3xl overflow-hidden border border-white/10">

        <svg className="w-full h-full" viewBox="0 0 100 100">

          {/* Bones */}

          {bones.map(([from, to], i) => (

            <motion.line

              key={i}

              x1={currentPose[from].x}

              y1={currentPose[from].y}

              x2={currentPose[to].x}

              y2={currentPose[to].y}

              stroke="url(#poseGradient)"

              strokeWidth="3"

              strokeLinecap="round"

              initial={false}

              animate={{

                x1: currentPose[from].x,

                y1: currentPose[from].y,

                x2: currentPose[to].x,

                y2: currentPose[to].y

              }}

              transition={{ type: "spring", stiffness: 100, damping: 15 }}

            />

          ))}



          {/* Keypoints */}

          {Object.entries(currentPose).map(([key, pos], i) => (

            <motion.circle

              key={key}

              r="4"

              fill="#EC4899"

              initial={false}

              animate={{ cx: pos.x, cy: pos.y }}

              transition={{ type: "spring", stiffness: 100, damping: 15 }}

            />

          ))}



          <defs>

            <linearGradient id="poseGradient" x1="0%" y1="0%" x2="100%" y2="100%">

              <stop offset="0%" stopColor="#8B5CF6" />

              <stop offset="100%" stopColor="#EC4899" />

            </linearGradient>

          </defs>

        </svg>

      </div>



      {/* Pose Label */}

      <motion.div

        key={pose}

        initial={{ opacity: 0, y: 10 }}

        animate={{ opacity: 1, y: 0 }}

        className="mt-4 text-center"

      >

        <span className="px-6 py-2 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 text-white font-bold text-lg">

          {poses[pose].charAt(0).toUpperCase() + poses[pose].slice(1)}

        </span>

      </motion.div>

    </div>
  );
}