import React, { useState, useEffect, useRef } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { 
  Code2, 
  Cpu, 
  Radio, 
  Github, 
  Linkedin, 
  Mail,
  ArrowRight,
  ExternalLink,
  Plus,
  X,
  MousePointer2,
  Sparkles,
  Brain,
  Rocket
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Badge } from '@/components/ui/badge';

const InnovativePortfolio = () => {
  const [activeSection, setActiveSection] = useState('intro');
  const [cursorVariant, setCursorVariant] = useState('default');
  const [cursorText, setCursorText] = useState('');
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
  const [selectedProject, setSelectedProject] = useState(null);
  const mainRef = useRef(null);

  useEffect(() => {
    const handleMouseMove = (e) => {
      setMousePosition({ x: e.clientX, y: e.clientY });
    };
    window.addEventListener('mousemove', handleMouseMove);
    return () => window.removeEventListener('mousemove', handleMouseMove);
  }, []);

  const projects = [
    {
      id: 1,
      title: "Neural Network Visualizer",
      description: "Interactive 3D visualization of deep learning architectures",
      tech: ["Three.js", "TensorFlow.js", "WebGL"],
      color: "from-emerald-400 to-cyan-500",
      icon: <Brain className="w-6 h-6" />
    },
    {
      id: 2,
      title: "Quantum Computing Interface",
      description: "Visual programming interface for quantum algorithms",
      tech: ["Qiskit", "React", "Python"],
      color: "from-violet-500 to-purple-600",
      icon: <Cpu className="w-6 h-6" />
    },
    {
      id: 3,
      title: "Augmented Reality Portfolio",
      description: "Web-based AR experience for project showcase",
      tech: ["WebXR", "Three.js", "GSAP"],
      color: "from-rose-400 to-red-500",
      icon: <Sparkles className="w-6 h-6" />
    }
  ];

  const skills = [
    { 
      name: "Innovation",
      icon: <Rocket />,
      description: "Pushing boundaries with cutting-edge tech",
      projects: 15,
      color: "from-blue-400 to-indigo-500"
    },
    {
      name: "Architecture",
      icon: <Code2 />,
      description: "Scalable system design",
      projects: 12,
      color: "from-emerald-400 to-teal-500"
    },
    {
      name: "AI/ML",
      icon: <Brain />,
      description: "Deep learning & neural networks",
      projects: 8,
      color: "from-purple-400 to-pink-500"
    }
  ];

  const cursorVariants = {
    default: {
      width: 32,
      height: 32,
      backgroundColor: "transparent",
      border: "2px solid #fff",
      x: mousePosition.x - 16,
      y: mousePosition.y - 16
    },
    project: {
      width: 80,
      height: 80,
      backgroundColor: "rgba(255, 255, 255, 0.2)",
      border: "none",
      x: mousePosition.x - 40,
      y: mousePosition.y - 40
    },
    text: {
      width: 120,
      height: 120,
      x: mousePosition.x - 60,
      y: mousePosition.y - 60
    }
  };

  const ProjectModal = ({ project, onClose }) => (
    <motion.div 
      className="fixed inset-0 bg-black/80 backdrop-blur-lg z-50 flex items-center justify-center p-4"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    >
      <motion.div 
        className="bg-gray-900 rounded-2xl w-full max-w-4xl p-8 relative"
        initial={{ scale: 0.9, opacity: 0 }}
        animate={{ scale: 1, opacity: 1 }}
        exit={{ scale: 0.9, opacity: 0 }}
      >
        <Button 
          variant="ghost" 
          size="icon" 
          className="absolute right-4 top-4"
          onClick={onClose}
        >
          <X />
        </Button>
        
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          <div>
            <div className={`w-16 h-16 rounded-2xl bg-gradient-to-br ${project.color} flex items-center justify-center mb-6`}>
              {project.icon}
            </div>
            <h2 className="text-3xl font-bold mb-4">{project.title}</h2>
            <p className="text-gray-400 mb-6">{project.description}</p>
            <div className="flex flex-wrap gap-2 mb-6">
              {project.tech.map((tech) => (
                <Badge key={tech} variant="secondary">{tech}</Badge>
              ))}
            </div>
            <Button className="w-full">
              View Live Demo <ExternalLink className="ml-2 w-4 h-4" />
            </Button>
          </div>
          <div className="bg-gray-800 rounded-xl aspect-video"></div>
        </div>
      </motion.div>
    </motion.div>
  );

  return (
    <div className="min-h-screen bg-gray-950 text-white overflow-hidden relative">
      {/* Custom Cursor */}
      <motion.div
        className="fixed rounded-full pointer-events-none z-50 mix-blend-difference flex items-center justify-center"
        variants={cursorVariants}
        animate={cursorVariant}
        transition={{ type: "spring", damping: 30 }}
      >
        {cursorText && (
          <span className="text-white text-sm font-medium">{cursorText}</span>
        )}
      </motion.div>

      {/* Main Content */}
      <ScrollArea className="h-screen">
        <main className="container mx-auto px-4 py-20">
          {/* Hero Section */}
          <section className="min-h-[80vh] flex flex-col justify-center relative">
            <motion.div
              initial={{ opacity: 0, y: 50 }}
              animate={{ opacity: 1, y: 0 }}
              className="max-w-4xl"
            >
              <Badge className="mb-4">Available for Projects</Badge>
              <h1 className="text-6xl font-bold mb-6 leading-tight">
                Crafting Digital
                <span className="block text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-cyan-500">
                  Experiences
                </span>
              </h1>
              <p className="text-xl text-gray-400 mb-8 max-w-2xl">
                Pushing the boundaries of web technology to create immersive and innovative digital solutions.
              </p>
              <div className="flex gap-4">
                <Button 
                  size="lg"
                  className="bg-gradient-to-r from-emerald-400 to-cyan-500 hover:opacity-90"
                  onMouseEnter={() => {
                    setCursorVariant('text');
                    setCursorText('Let's Talk');
                  }}
                  onMouseLeave={() => {
                    setCursorVariant('default');
                    setCursorText('');
                  }}
                >
                  Start a Project <ArrowRight className="ml-2" />
                </Button>
                <Button variant="outline" size="lg">
                  View Portfolio
                </Button>
              </div>
            </motion.div>
          </section>

          {/* Projects Grid */}
          <section className="py-20">
            <h2 className="text-4xl font-bold mb-12">Featured Work</h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              {projects.map((project) => (
                <motion.div
                  key={project.id}
                  whileHover={{ y: -10 }}
                  onMouseEnter={() => {
                    setCursorVariant('project');
                    setCursorText('View Project');
                  }}
                  onMouseLeave={() => {
                    setCursorVariant('default');
                    setCursorText('');
                  }}
                  onClick={() => setSelectedProject(project)}
                >
                  <Card className="bg-gray-900 border-gray-800 overflow-hidden group cursor-pointer">
                    <CardContent className="p-6">
                      <div className={`w-12 h-12 rounded-xl bg-gradient-to-br ${project.color} flex items-center justify-center mb-4`}>
                        {project.icon}
                      </div>
                      <h3 className="text-xl font-bold mb-2 group-hover:text-transparent group-hover:bg-clip-text group-hover:bg-gradient-to-r group-hover:from-emerald-400 group-hover:to-cyan-500">
                        {project.title}
                      </h3>
                      <p className="text-gray-400 mb-4">{project.description}</p>
                      <div className="flex flex-wrap gap-2">
                        {project.tech.map((tech) => (
                          <Badge key={tech} variant="secondary">{tech}</Badge>
                        ))}
                      </div>
                    </CardContent>
                  </Card>
                </motion.div>
              ))}
            </div>
          </section>

          {/* Skills Section */}
          <section className="py-20">
            <h2 className="text-4xl font-bold mb-12">Expertise</h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              {skills.map((skill) => (
                <motion.div
                  key={skill.name}
                  whileHover={{ scale: 1.02 }}
                  className="relative group"
                >
                  <div 
                    className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity blur-xl"
                    style={{ 
                      background: `linear-gradient(to right, ${skill.color.split(' ')[0].replace('from-', '')} , ${skill.color.split(' ')[1].replace('to-', '')})` 
                    }} 
                  />
                  <Card className="bg-gray-900 border-gray-800 relative z-10">
                    <CardContent className="p-6">
                      <div className={`w-12 h-12 rounded-xl bg-gradient-to-br ${skill.color} flex items-center justify-center mb-4`}>
                        {skill.icon}
                      </div>
                      <h3 className="text-xl font-bold mb-2">{skill.name}</h3>
                      <p className="text-gray-400 mb-4">{skill.description}</p>
                      <div className="flex items-center justify-between">
                        <span className="text-sm text-gray-500">{skill.projects} Projects</span>
                        <Button variant="ghost" size="sm">
                          Learn More <ArrowRight className="ml-2 w-4 h-4" />
                        </Button>
                      </div>
                    </CardContent>
                  </Card>
                </motion.div>
              ))}
            </div>
          </section>

          {/* Contact Section */}
          <section className="py-20">
            <Card className="bg-gradient-to-br from-gray-900 to-gray-800 border-gray-800">
              <CardContent className="p-12 text-center">
                <h2 className="text-4xl font-bold mb-4">Ready to Innovate?</h2>
                <p className="text-gray-400 mb-8 max-w-2xl mx-auto">
                  Let's collaborate to create something extraordinary together.
                </p>
                <div className="flex justify-center gap-4">
                  <Button className="bg-gradient-to-r from-emerald-400 to-cyan-500">
                    Start a Conversation <ArrowRight className="ml-2" />
                  </Button>
                  <Button variant="outline">
                    View Resume
                  </Button>
                </div>
              </CardContent>
            </Card>
          </section>
        </main>
      </ScrollArea>

      {/* Project Modal */}
      <AnimatePresence>
        {selectedProject && (
          <ProjectModal 
            project={selectedProject} 
            onClose={() => setSelectedProject(null)} 
          />
        )}
      </AnimatePresence>
    </div>
  );
};

export default InnovativePortfolio;

okay Analyse this make sure import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Badge } from '@/components/ui/badge'; add all this in the exting single file because i dont have this components add all css and everything in one file