src/components/lessons/AnimatedDiagram.jsx

import React from 'react';
import { motion } from 'framer-motion';

export function BoundingBoxDemo() {
  return (
    <div className="relative w-full max-w-md mx-auto aspect-video bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl overflow-hidden border border-white/10">

      {/* Simulated Image */}

      <div className="absolute inset-0 flex items-center justify-center">

        <div className="text-6xl">🚗</div>

      </div>

      

      {/* Animated Bounding Box */}

      <motion.div

        className="absolute border-4 border-cyan-400 rounded-lg"

        initial={{ opacity: 0, scale: 0.8 }}

        animate={{ 

          opacity: [0, 1, 1, 1],

          scale: [0.8, 1, 1, 1],

        }}

        transition={{ duration: 2, repeat: Infinity, repeatDelay: 1 }}

        style={{

          top: '25%',

          left: '30%',

          width: '40%',

          height: '50%'

        }}

      >

        <motion.div

          className="absolute -top-8 left-0 bg-cyan-400 text-slate-900 px-3 py-1 rounded-lg text-sm font-bold"

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

          animate={{ opacity: [0, 1, 1, 0], y: [10, 0, 0, -10] }}

          transition={{ duration: 2, repeat: Infinity, repeatDelay: 1, delay: 0.3 }}

        >

          Car 98%

        </motion.div>

        

        {/* Corner markers */}

        {[

          { top: -4, left: -4 },

          { top: -4, right: -4 },

          { bottom: -4, left: -4 },

          { bottom: -4, right: -4 }

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

          <motion.div

            key={i}

            className="absolute w-3 h-3 bg-cyan-400 rounded-full"

            style={pos}

            animate={{ scale: [1, 1.3, 1] }}

            transition={{ duration: 1, repeat: Infinity, delay: i * 0.1 }}

          />

        ))}

      </motion.div>

    </div>
  );
}

export function PoseSkeletonDemo() {
  const keypoints = [
    { id: 'head', x: 50, y: 10, label: 'Head' },
    { id: 'neck', x: 50, y: 22 },
    { id: 'lshoulder', x: 35, y: 25 },
    { id: 'rshoulder', x: 65, y: 25 },
    { id: 'lelbow', x: 25, y: 40 },
    { id: 'relbow', x: 75, y: 40 },
    { id: 'lwrist', x: 20, y: 55 },
    { id: 'rwrist', x: 80, y: 55 },
    { id: 'hip', x: 50, y: 50 },
    { id: 'lhip', x: 40, y: 52 },
    { id: 'rhip', x: 60, y: 52 },
    { id: 'lknee', x: 38, y: 70 },
    { id: 'rknee', x: 62, y: 70 },
    { id: 'lankle', x: 35, y: 90 },
    { id: 'rankle', x: 65, y: 90 },
  ];

  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'],
  ];

  const getPoint = (id) => keypoints.find(k => k.id === id);

  return (
    <div className="relative w-full max-w-sm mx-auto aspect-[3/4] bg-gradient-to-br from-purple-900/50 to-pink-900/50 rounded-2xl overflow-hidden border border-white/10">

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

        {/* Bones */}

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

          const p1 = getPoint(from);

          const p2 = getPoint(to);

          return (

            <motion.line

              key={i}

              x1={p1.x}

              y1={p1.y}

              x2={p2.x}

              y2={p2.y}

              stroke="url(#boneGradient)"

              strokeWidth="2"

              strokeLinecap="round"

              initial={{ pathLength: 0, opacity: 0 }}

              animate={{ pathLength: 1, opacity: 1 }}

              transition={{ duration: 0.5, delay: i * 0.05 }}

            />

          );

        })}



        {/* Keypoints */}

        {keypoints.map((point, i) => (

          <motion.circle

            key={point.id}

            cx={point.x}

            cy={point.y}

            r="3"

            fill="#EC4899"

            initial={{ scale: 0 }}

            animate={{ scale: [1, 1.3, 1] }}

            transition={{ 

              scale: { duration: 1, repeat: Infinity, delay: i * 0.1 },

              default: { delay: i * 0.05 }

            }}

          />

        ))}



        <defs>

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

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

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

          </linearGradient>

        </defs>

      </svg>

    </div>
  );
}

export function EmotionFaceDemo() {
  const emotions = [
    { 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: 'Surprise', color: 'from-purple-400 to-pink-400' },
    { emoji: '😐', label: 'Neutral', color: 'from-gray-400 to-slate-400' },
  ];

  const [currentEmotion, setCurrentEmotion] = React.useState(0);

  React.useEffect(() => {
    const interval = setInterval(() => {
      setCurrentEmotion((prev) => (prev + 1) % emotions.length);
    }, 2000);
    return () => clearInterval(interval);
  }, []);

  const emotion = emotions[currentEmotion];

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

      <motion.div

        key={currentEmotion}

        initial={{ scale: 0.8, opacity: 0 }}

        animate={{ scale: 1, opacity: 1 }}

        exit={{ scale: 0.8, opacity: 0 }}

        className="aspect-square bg-gradient-to-br from-slate-800 to-slate-900 rounded-3xl border border-white/10 flex flex-col items-center justify-center"

      >

        <motion.div 

          className="text-8xl mb-4"

          animate={{ scale: [1, 1.1, 1] }}

          transition={{ duration: 1, repeat: Infinity }}

        >

          {emotion.emoji}

        </motion.div>

        

        <motion.div

          className={`px-6 py-2 rounded-full bg-gradient-to-r ${emotion.color} text-white font-bold text-lg`}

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

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

          transition={{ delay: 0.2 }}

        >

          {emotion.label}

        </motion.div>

      </motion.div>



      {/* Confidence Bars */}

      <div className="mt-6 space-y-2">

        {emotions.map((e, i) => (

          <div key={i} className="flex items-center gap-3">

            <span className="text-xl w-8">{e.emoji}</span>

            <div className="flex-1 h-3 bg-white/10 rounded-full overflow-hidden">

              <motion.div

                className={`h-full bg-gradient-to-r ${e.color}`}

                initial={{ width: 0 }}

                animate={{ width: i === currentEmotion ? '95%' : `${Math.random() * 30 + 5}%` }}

                transition={{ duration: 0.5 }}

              />

            </div>

            <span className="text-white/60 text-sm w-12 text-right">

              {i === currentEmotion ? '95%' : `${Math.floor(Math.random() * 20 + 5)}%`}

            </span>

          </div>

        ))}

      </div>

    </div>
  );
}