import React, { useState, useEffect, useRef } from 'react';
import { motion } from 'framer-motion';
import { 
  Terminal, 
  Code2, 
  Cpu, 
  Radio, 
  Folder, 
  Github, 
  Linkedin, 
  Mail,
  ArrowRight,
  ExternalLink
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { ScrollArea } from '@/components/ui/scroll-area';

const PortfolioV2 = () => {
  const [activeSection, setActiveSection] = useState('intro');
  const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 });
  const [scrollProgress, setScrollProgress] = useState(0);
  const mainRef = useRef(null);

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

  // Scroll progress
  useEffect(() => {
    const handleScroll = () => {
      if (mainRef.current) {
        const scrolled = mainRef.current.scrollTop;
        const maxScroll = mainRef.current.scrollHeight - mainRef.current.clientHeight;
        setScrollProgress(scrolled / maxScroll);
      }
    };
    mainRef.current?.addEventListener('scroll', handleScroll);
    return () => mainRef.current?.removeEventListener('scroll', handleScroll);
  }, []);

  const projects = [
    {
      title: "AI-Powered Analytics Platform",
      description: "Real-time data visualization using machine learning",
      tech: ["React", "Python", "TensorFlow"],
      color: "bg-blue-500"
    },
    {
      title: "Blockchain Trading System",
      description: "Decentralized exchange with smart contracts",
      tech: ["Solidity", "Web3.js", "Node.js"],
      color: "bg-purple-500"
    },
    {
      title: "IoT Device Management",
      description: "Enterprise IoT monitoring dashboard",
      tech: ["React", "GraphQL", "AWS"],
      color: "bg-green-500"
    }
  ];

  const skills = [
    { name: "Frontend", icon: <Code2 />, level: 90 },
    { name: "Backend", icon: <Terminal />, level: 85 },
    { name: "AI/ML", icon: <Cpu />, level: 80 },
    { name: "DevOps", icon: <Radio />, level: 75 }
  ];

  return (
    <div className="h-screen w-full bg-black text-white overflow-hidden relative">
      {/* Custom Cursor */}
      <motion.div
        className="fixed w-8 h-8 border-2 border-white rounded-full pointer-events-none z-50 mix-blend-difference"
        animate={{
          x: cursorPosition.x - 16,
          y: cursorPosition.y - 16,
          scale: activeSection === 'projects' ? 1.5 : 1
        }}
        transition={{ type: "spring", damping: 30 }}
      />

      {/* Navigation Dots */}
      <div className="fixed right-8 top-1/2 -translate-y-1/2 flex flex-col gap-4 z-40">
        {['intro', 'projects', 'skills', 'contact'].map((section) => (
          <button
            key={section}
            onClick={() => setActiveSection(section)}
            className={`w-3 h-3 rounded-full transition-all duration-300 ${
              activeSection === section ? 'bg-white scale-150' : 'bg-gray-500'
            }`}
          />
        ))}
      </div>

      {/* Progress Bar */}
      <div className="fixed top-0 left-0 w-full h-1 bg-gray-800 z-40">
        <motion.div
          className="h-full bg-white"
          animate={{ width: `${scrollProgress * 100}%` }}
        />
      </div>

      {/* Main Content */}
      <ScrollArea ref={mainRef} className="h-full">
        <main className="container mx-auto px-8">
          {/* Intro Section */}
          <section className="h-screen flex items-center relative">
            <div className="max-w-4xl">
              <motion.h1 
                className="text-6xl font-bold mb-6"
                initial={{ opacity: 0, y: 50 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8 }}
              >
                Creative Developer
                <br />
                <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-purple-500">
                  Building Digital Experiences
                </span>
              </motion.h1>
              <motion.p 
                className="text-xl text-gray-400 mb-8"
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ delay: 0.4 }}
              >
                Crafting innovative solutions at the intersection of design and technology
              </motion.p>
              <motion.div 
                className="flex gap-4"
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ delay: 0.6 }}
              >
                <Button variant="outline" size="lg">
                  View Projects <ArrowRight className="ml-2" />
                </Button>
                <Button variant="ghost" size="lg">
                  Contact Me
                </Button>
              </motion.div>
            </div>
          </section>

          {/* Projects Section */}
          <section className="min-h-screen py-20">
            <h2 className="text-4xl font-bold mb-12">Featured Projects</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              {projects.map((project, index) => (
                <motion.div
                  key={project.title}
                  initial={{ opacity: 0, y: 50 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ delay: index * 0.2 }}
                >
                  <Card className="group relative overflow-hidden bg-gray-900 border-gray-800">
                    <CardContent className="p-6">
                      <div className={`absolute top-0 right-0 w-32 h-32 rounded-full blur-3xl opacity-20 group-hover:opacity-40 transition-opacity ${project.color}`} />
                      <h3 className="text-2xl font-bold mb-3">{project.title}</h3>
                      <p className="text-gray-400 mb-4">{project.description}</p>
                      <div className="flex gap-2 mb-4">
                        {project.tech.map((tech) => (
                          <span key={tech} className="px-3 py-1 rounded-full bg-gray-800 text-sm">
                            {tech}
                          </span>
                        ))}
                      </div>
                      <Button variant="ghost" size="sm" className="group-hover:translate-x-2 transition-transform">
                        View Project <ExternalLink className="ml-2 w-4 h-4" />
                      </Button>
                    </CardContent>
                  </Card>
                </motion.div>
              ))}
            </div>
          </section>

          {/* Skills Section */}
          <section className="min-h-screen py-20">
            <h2 className="text-4xl font-bold mb-12">Skills & Expertise</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              {skills.map((skill, index) => (
                <motion.div
                  key={skill.name}
                  initial={{ opacity: 0, x: -50 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  transition={{ delay: index * 0.2 }}
                  className="bg-gray-900 p-6 rounded-lg"
                >
                  <div className="flex items-center gap-4 mb-4">
                    {skill.icon}
                    <h3 className="text-xl font-semibold">{skill.name}</h3>
                  </div>
                  <div className="w-full h-2 bg-gray-800 rounded-full">
                    <motion.div
                      className="h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full"
                      initial={{ width: 0 }}
                      whileInView={{ width: `${skill.level}%` }}
                      transition={{ duration: 1, ease: "easeOut" }}
                    />
                  </div>
                </motion.div>
              ))}
            </div>
          </section>

          {/* Contact Section */}
          <section className="min-h-screen py-20">
            <h2 className="text-4xl font-bold mb-12">Let's Connect</h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              {[
                { icon: <Github />, label: "GitHub", link: "#" },
                { icon: <Linkedin />, label: "LinkedIn", link: "#" },
                { icon: <Mail />, label: "Email", link: "#" }
              ].map((contact, index) => (
                <motion.a
                  key={contact.label}
                  href={contact.link}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ delay: index * 0.2 }}
                  className="group bg-gray-900 p-6 rounded-lg flex items-center gap-4 hover:bg-gray-800 transition-colors"
                >
                  {contact.icon}
                  <span className="text-lg">{contact.label}</span>
                  <ArrowRight className="ml-auto opacity-0 group-hover:opacity-100 transition-opacity" />
                </motion.a>
              ))}
            </div>
          </section>
        </main>
      </ScrollArea>
    </div>
  );
};

export default PortfolioV2;

upgrade this the color sections and all