import React, { useState, useEffect, useRef } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { 
  Code2, 
  Cpu, 
  Github, 
  Linkedin, 
  Mail,
  ArrowRight,
  ExternalLink,
  Plus,
  X,
  Sparkles,
  Brain,
  Rocket
} from 'lucide-react';

/**
 * Button Component
 */
const Button = ({
  children,
  variant = 'default',
  size = 'md',
  className = '',
  ...props
}) => {
  const baseStyles = "inline-flex items-center justify-center border rounded focus:outline-none transition";

  const variantStyles = {
    default: "bg-gray-700 text-white border-gray-700 hover:bg-gray-600",
    outline: "bg-transparent border-gray-700 text-gray-400 hover:bg-gray-700 hover:text-white",
    ghost: "bg-transparent border-none text-gray-400 hover:bg-gray-700 hover:text-white",
  };

  const sizeStyles = {
    sm: "px-3 py-1.5 text-sm",
    md: "px-4 py-2 text-base",
    lg: "px-5 py-3 text-lg",
    icon: "p-2",
  };

  return (
    <button
      className={`${baseStyles} ${variantStyles[variant]} ${sizeStyles[size]} ${className}`}
      {...props}
    >
      {children}
    </button>
  );
};

/**
 * Card Component
 */
const Card = ({ children, className = '', ...props }) => {
  const baseStyles = "rounded-lg shadow-md";
  return (
    <div className={`${baseStyles} ${className}`} {...props}>
      {children}
    </div>
  );
};

/**
 * CardContent Component
 */
const CardContent = ({ children, className = '', ...props }) => {
  const baseStyles = "p-4";
  return (
    <div className={`${baseStyles} ${className}`} {...props}>
      {children}
    </div>
  );
};

/**
 * ScrollArea Component
 */
const ScrollArea = ({ children, className = '', ...props }) => {
  const baseStyles = "overflow-auto";
  return (
    <div className={`${baseStyles} ${className}`} {...props}>
      {children}
    </div>
  );
};

/**
 * Badge Component
 */
const Badge = ({ children, variant = 'default', className = '', ...props }) => {
  const baseStyles = "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium";

  const variantStyles = {
    default: "bg-gray-800 text-gray-400",
    secondary: "bg-blue-600 text-white",
  };

  return (
    <span className={`${baseStyles} ${variantStyles[variant]} ${className}`} {...props}>
      {children}
    </span>
  );
};

/**
 * InnovativePortfolio Component
 */
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);

  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 text-white" />
    },
    {
      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 text-white" />
    },
    {
      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 text-white" />
    }
  ];

  const skills = [
    { 
      name: "Innovation",
      icon: <Rocket className="w-6 h-6 text-white" />,
      description: "Pushing boundaries with cutting-edge tech",
      projects: 15,
      color: "from-blue-400 to-indigo-500"
    },
    {
      name: "Architecture",
      icon: <Code2 className="w-6 h-6 text-white" />,
      description: "Scalable system design",
      projects: 12,
      color: "from-emerald-400 to-teal-500"
    },
    {
      name: "AI/ML",
      icon: <Brain className="w-6 h-6 text-white" />,
      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,
      display: 'flex',
    },
    project: {
      width: 80,
      height: 80,
      backgroundColor: "rgba(255, 255, 255, 0.2)",
      border: "none",
      x: mousePosition.x - 40,
      y: mousePosition.y - 40,
      display: 'flex',
    },
    text: {
      width: 120,
      height: 120,
      backgroundColor: "rgba(255, 255, 255, 0.1)",
      border: "2px solid #fff",
      x: mousePosition.x - 60,
      y: mousePosition.y - 60,
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
    }
  };

  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 bg-gradient-to-r from-emerald-400 to-cyan-500 hover:opacity-90 flex items-center justify-center"
              onMouseEnter={() => {
                setCursorVariant('text');
                setCursorText('Live Demo');
              }}
              onMouseLeave={() => {
                setCursorVariant('default');
                setCursorText('');
              }}
              href="#"
            >
              View Live Demo <ExternalLink className="ml-2 w-4 h-4" />
            </Button>
          </div>
          <div className="bg-gray-800 rounded-xl aspect-video flex items-center justify-center">
            {/* Placeholder for video or image */}
            <span className="text-gray-400">Project Screenshot or Video</span>
          </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 text-center"
        variants={cursorVariants}
        animate={cursorVariant}
        transition={{ type: "spring", damping: 30, stiffness: 500 }}
        style={{
          width: cursorVariants[cursorVariant].width,
          height: cursorVariants[cursorVariant].height,
          backgroundColor: cursorVariants[cursorVariant].backgroundColor,
          border: cursorVariants[cursorVariant].border,
          transform: `translate(${cursorVariants[cursorVariant].x}px, ${cursorVariants[cursorVariant].y}px)`,
        }}
      >
        {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 }}
              transition={{ duration: 0.8 }}
              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 flex-wrap gap-4">
                <Button 
                  size="lg"
                  className="bg-gradient-to-r from-emerald-400 to-cyan-500 hover:opacity-90 flex items-center"
                  onMouseEnter={() => {
                    setCursorVariant('text');
                    setCursorText("Let's Talk");
                  }}
                  onMouseLeave={() => {
                    setCursorVariant('default');
                    setCursorText('');
                  }}
                >
                  Start a Project <ArrowRight className="ml-2" />
                </Button>
                <Button 
                  variant="outline" 
                  size="lg"
                  onMouseEnter={() => {
                    setCursorVariant('text');
                    setCursorText("View Portfolio");
                  }}
                  onMouseLeave={() => {
                    setCursorVariant('default');
                    setCursorText('');
                  }}
                >
                  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 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 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" className="flex items-center">
                          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 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 flex-wrap">
                  <Button 
                    className="bg-gradient-to-r from-emerald-400 to-cyan-500 hover:opacity-90 flex items-center"
                    onMouseEnter={() => {
                      setCursorVariant('text');
                      setCursorText("Start Conversation");
                    }}
                    onMouseLeave={() => {
                      setCursorVariant('default');
                      setCursorText('');
                    }}
                  >
                    Start a Conversation <ArrowRight className="ml-2" />
                  </Button>
                  <Button 
                    variant="outline" 
                    className="flex items-center"
                    onMouseEnter={() => {
                      setCursorVariant('text');
                      setCursorText("View Resume");
                    }}
                    onMouseLeave={() => {
                      setCursorVariant('default');
                      setCursorText('');
                    }}
                  >
                    View Resume
                  </Button>
                </div>
              </CardContent>
            </Card>
          </section>
        </main>
      </ScrollArea>

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

export default InnovativePortfolio;

completely redisgn this page make su re to use one file this design is not working