import React from 'react';
import { Link } from 'react-router-dom';
import { createPageUrl } from '@/utils';
import { motion } from 'framer-motion';
import { Brain, Eye, Smile, Activity, Sparkles, Rocket, ChevronRight } from 'lucide-react';
import { Button } from '@/components/ui/button';

const FloatingIcon = ({ children, delay = 0, className = "" }) => (
  <motion.div
    className={className}
    animate={{
      y: [0, -10, 0],
      rotate: [0, 5, -5, 0],
    }}
    transition={{
      duration: 4,
      repeat: Infinity,
      delay,
      ease: "easeInOut"
    }}
  >
    {children}
  </motion.div>
);

const TopicCard = ({ icon: Icon, title, description, color, delay, href }) => (
  <motion.div
    initial={{ opacity: 0, y: 50 }}
    whileInView={{ opacity: 1, y: 0 }}
    viewport={{ once: true }}
    transition={{ duration: 0.6, delay }}
  >
    <Link to={href}>
      <motion.div
        whileHover={{ scale: 1.03, y: -5 }}
        whileTap={{ scale: 0.98 }}
        className={`relative overflow-hidden rounded-3xl p-8 cursor-pointer group h-full
          bg-gradient-to-br ${color} backdrop-blur-xl border border-white/20 shadow-2xl`}
      >
        <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -translate-y-1/2 translate-x-1/2" />
        <div className="absolute bottom-0 left-0 w-24 h-24 bg-white/5 rounded-full translate-y-1/2 -translate-x-1/2" />
        
        <motion.div 
          className="relative z-10"
          whileHover={{ rotate: [0, -10, 10, 0] }}
          transition={{ duration: 0.5 }}
        >
          <div className="w-16 h-16 rounded-2xl bg-white/20 flex items-center justify-center mb-6 group-hover:bg-white/30 transition-colors">
            <Icon className="w-8 h-8 text-white" />
          </div>
        </motion.div>
        
        <h3 className="text-2xl font-bold text-white mb-3">{title}</h3>
        <p className="text-white/80 text-lg leading-relaxed">{description}</p>
        
        <div className="mt-6 flex items-center gap-2 text-white/90 font-medium group-hover:text-white transition-colors">
          <span>Start Learning</span>
          <ChevronRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
        </div>
      </motion.div>
    </Link>
  </motion.div>
);

export default function Home() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
      {/* Animated Background */}
      <div className="fixed inset-0 overflow-hidden pointer-events-none">
        <div className="absolute top-20 left-10 w-72 h-72 bg-blue-500/20 rounded-full blur-3xl animate-pulse" />
        <div className="absolute bottom-20 right-10 w-96 h-96 bg-purple-500/20 rounded-full blur-3xl animate-pulse" style={{ animationDelay: '1s' }} />
        <div className="absolute top-1/2 left-1/2 w-64 h-64 bg-cyan-500/10 rounded-full blur-3xl animate-pulse" style={{ animationDelay: '2s' }} />
      </div>

      {/* Hero Section */}
      <section className="relative pt--3 pb-32 px-6">
        
        <div className="max-w-6xl mx-auto text-center">
          
          {/* Floating Icons */}
          <div className="relative h-32 mb-8">

          </div>

          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
          >
            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 mb-8">
              <Sparkles className="w-4 h-4 text-yellow-400" />
              <span className="text-white/90 text-sm font-medium">Interactive Learning for Grades 5-8</span>
            </div>

            <h1 className="text-5xl md:text-7xl font-black text-transparent bg-clip-text bg-gradient-to-r from-white via-blue-200 to-purple-200 mb-6 leading-tight">
              Computer Vision Lab
              <br />
              <span className="text-4xl md:text-5xl">for Students</span>
            </h1>

            <p className="text-xl md:text-2xl text-white/70 max-w-3xl mx-auto mb-10 leading-relaxed">
              Discover how computers see and understand the world! Learn about 
              <span className="text-cyan-400 font-semibold"> Object Detection</span>, 
              <span className="text-purple-400 font-semibold"> Pose Estimation</span>, and 
              <span className="text-pink-400 font-semibold"> Emotion Recognition</span>.
            </p>

            <div className="flex flex-col sm:flex-row gap-6 justify-center">
              <Link to={createPageUrl('Lessons')}>
                <Button size="lg" className="text-lg px-10 py-7 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 rounded-2xl shadow-2xl shadow-purple-500/30 text-white font-bold border-0 group transition-all">
                  <Rocket className="w-6 h-6 mr-2 group-hover:rotate-12 transition-transform" />
                  Start Learning
                </Button>
              </Link>
              <Link to={createPageUrl('Quiz')}>
                <Button size="lg" className="text-lg px-10 py-7 rounded-2xl border-2 border-white/30 text-white bg-white/5 hover:bg-white/10 hover:border-white/50 font-bold transition-all">
                  Take the Quiz
                </Button>
              </Link>
            </div>
          </motion.div>
        </div>
      </section>

      {/* Topics Section */}
      <section className="relative px-6 pb-32">
        <div className="max-w-6xl mx-auto">
          <motion.div
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            viewport={{ once: true }}
            className="text-center mb-16"
          >
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
              What You'll Learn
            </h2>
            <p className="text-white/60 text-lg">
              Three amazing AI technologies explained simply
            </p>
          </motion.div>

          <div className="grid md:grid-cols-3 gap-6">
            <TopicCard
              icon={Eye}
              title="Object Detection"
              description="Learn how AI finds and identifies objects in images, just like self-driving cars!"
              color="from-blue-600/90 to-cyan-600/90"
              delay={0.1}
              href={createPageUrl('Lessons') + '?chapter=1'}
            />
            <TopicCard
              icon={Activity}
              title="Pose Estimation"
              description="Discover how computers track body movements and create skeleton maps!"
              color="from-purple-600/90 to-pink-600/90"
              delay={0.2}
              href={createPageUrl('Lessons') + '?chapter=2'}
            />
            <TopicCard
              icon={Smile}
              title="Emotion Recognition"
              description="See how AI can understand facial expressions and detect moods!"
              color="from-emerald-600/90 to-teal-600/90"
              delay={0.3}
              href={createPageUrl('Lessons') + '?chapter=3'}
            />
          </div>
        </div>
      </section>

      {/* Stats Section */}
      <section className="relative px-6 pb-32">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="max-w-4xl mx-auto"
        >
          <div className="rounded-3xl bg-white/5 backdrop-blur-xl border border-white/10 p-8 md:p-12">
            <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
              {[
                { value: "3", label: "AI Topics" },
                { value: "15+", label: "Slides" },
                { value: "12", label: "Quiz Questions" },
                { value: "∞", label: "Fun!" }
              ].map((stat, i) => (
                <motion.div
                  key={i}
                  initial={{ scale: 0 }}
                  whileInView={{ scale: 1 }}
                  viewport={{ once: true }}
                  transition={{ delay: i * 0.1, type: "spring" }}
                >
                  <div className="text-4xl md:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-400">
                    {stat.value}
                  </div>
                  <div className="text-white/60 mt-2">{stat.label}</div>
                </motion.div>
              ))}
            </div>
          </div>
        </motion.div>
      </section>
    </div>
  );
}