import React, { useState, useEffect } from 'react';
import { Moon, Sun, Github, Mail, Linkedin, ExternalLink, Menu, X, Code, Sparkles, Rocket, Award, Send } from 'lucide-react';

export default function Portfolio() {
  const [darkMode, setDarkMode] = useState(true);
  const [activeSection, setActiveSection] = useState('home');
  const [menuOpen, setMenuOpen] = useState(false);
  const [formData, setFormData] = useState({ name: '', email: '', message: '' });
  const [formSubmitted, setFormSubmitted] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      const sections = ['home', 'about', 'projects', 'achievements', 'contact'];
      const scrollPosition = window.scrollY + 100;

      for (const section of sections) {
        const element = document.getElementById(section);
        if (element) {
          const { offsetTop, offsetHeight } = element;
          if (scrollPosition >= offsetTop && scrollPosition < offsetTop + offsetHeight) {
            setActiveSection(section);
            break;
          }
        }
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const scrollToSection = (sectionId) => {
    const element = document.getElementById(sectionId);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
      setMenuOpen(false);
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    setFormSubmitted(true);
    setTimeout(() => setFormSubmitted(false), 3000);
    setFormData({ name: '', email: '', message: '' });
  };

  const projects = [
    {
      title: 'Task Manager',
      description: 'Full-featured task management system with admin controls and user task completion tracking.',
      tech: ['React', 'Node.js', 'MongoDB'],
      github: 'https://github.com/developeranveshraman',
      color: 'from-blue-500 to-cyan-500'
    },
    {
      title: 'YouTube Analytics Dashboard',
      description: 'Comprehensive analytics tool designed for content creators to track performance metrics.',
      tech: ['React', 'YouTube API', 'Chart.js'],
      github: 'https://github.com/developeranveshraman',
      color: 'from-red-500 to-pink-500'
    },
    {
      title: 'Air Mouse Controller',
      description: 'Innovative webcam-based hand-tracking system for touchless computer control.',
      tech: ['Python', 'OpenCV', 'MediaPipe'],
      github: 'https://github.com/developeranveshraman',
      color: 'from-purple-500 to-indigo-500'
    },
    {
      title: 'NameForge',
      description: 'GitHub-powered subdomain registry system for seamless project hosting and management.',
      tech: ['Node.js', 'GitHub API', 'DNS'],
      github: 'https://github.com/developeranveshraman',
      color: 'from-green-500 to-emerald-500'
    },
    {
      title: 'AnveshAI',
      description: 'Advanced AI platform featuring chat capabilities and intelligent image generation.',
      tech: ['React', 'OpenAI API', 'Python'],
      github: 'https://github.com/developeranveshraman',
      color: 'from-orange-500 to-yellow-500'
    },
    {
      title: 'Adult Content Detector',
      description: 'Ethical NSFW detection system using machine learning for content moderation.',
      tech: ['Python', 'TensorFlow', 'Flask'],
      github: 'https://github.com/developeranveshraman',
      color: 'from-pink-500 to-rose-500'
    }
  ];

  const achievements = [
    { icon: <Code className="w-6 h-6" />, title: '15+ Projects', desc: 'Completed across various domains' },
    { icon: <Sparkles className="w-6 h-6" />, title: 'AI Enthusiast', desc: 'Building intelligent solutions' },
    { icon: <Rocket className="w-6 h-6" />, title: 'Web3 Explorer', desc: 'Blockchain experiments' },
    { icon: <Award className="w-6 h-6" />, title: 'Open Source', desc: 'Active GitHub contributor' }
  ];

  return (
    <div className={`min-h-screen transition-colors duration-300 ${darkMode ? 'bg-gray-900 text-white' : 'bg-gray-50 text-gray-900'}`}>
      {/* Animated Background */}
      <div className="fixed inset-0 overflow-hidden pointer-events-none">
        <div className={`absolute -top-40 -right-40 w-80 h-80 rounded-full blur-3xl opacity-20 ${darkMode ? 'bg-purple-500' : 'bg-purple-300'} animate-pulse`}></div>
        <div className={`absolute top-1/2 -left-40 w-80 h-80 rounded-full blur-3xl opacity-20 ${darkMode ? 'bg-blue-500' : 'bg-blue-300'} animate-pulse`} style={{ animationDelay: '1s' }}></div>
        <div className={`absolute -bottom-40 right-1/3 w-80 h-80 rounded-full blur-3xl opacity-20 ${darkMode ? 'bg-pink-500' : 'bg-pink-300'} animate-pulse`} style={{ animationDelay: '2s' }}></div>
      </div>

      {/* Navigation */}
      <nav className={`fixed top-0 w-full z-50 transition-all duration-300 ${darkMode ? 'bg-gray-900/80' : 'bg-white/80'} backdrop-blur-md border-b ${darkMode ? 'border-gray-800' : 'border-gray-200'}`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="font-bold text-2xl bg-gradient-to-r from-purple-500 via-pink-500 to-blue-500 bg-clip-text text-transparent" style={{ fontFamily: 'cursive' }}>
              Anvesh Raman
            </div>

            <div className="hidden md:flex space-x-8">
              {['home', 'about', 'projects', 'achievements', 'contact'].map((section) => (
                <button
                  key={section}
                  onClick={() => scrollToSection(section)}
                  className={`capitalize transition-colors ${activeSection === section ? 'text-purple-500' : darkMode ? 'text-gray-300 hover:text-white' : 'text-gray-600 hover:text-gray-900'}`}
                >
                  {section}
                </button>
              ))}
            </div>

            <div className="flex items-center space-x-4">
              <button
                onClick={() => setDarkMode(!darkMode)}
                className={`p-2 rounded-full ${darkMode ? 'bg-gray-800 hover:bg-gray-700' : 'bg-gray-200 hover:bg-gray-300'} transition-colors`}
              >
                {darkMode ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
              </button>
              <button
                onClick={() => setMenuOpen(!menuOpen)}
                className="md:hidden p-2 rounded-full"
              >
                {menuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
              </button>
            </div>
          </div>
        </div>

        {menuOpen && (
          <div className={`md:hidden ${darkMode ? 'bg-gray-800' : 'bg-white'} border-t ${darkMode ? 'border-gray-700' : 'border-gray-200'}`}>
            <div className="px-4 py-4 space-y-3">
              {['home', 'about', 'projects', 'achievements', 'contact'].map((section) => (
                <button
                  key={section}
                  onClick={() => scrollToSection(section)}
                  className="block w-full text-left capitalize py-2"
                >
                  {section}
                </button>
              ))}
            </div>
          </div>
        )}
      </nav>

      {/* Hero Section */}
      <section id="home" className="min-h-screen flex items-center justify-center px-4 pt-16">
        <div className="max-w-4xl mx-auto text-center">
          <div className="mb-8 animate-bounce">
            <img 
              src="https://portfolio.anveshraman.rf.gd/your-logo.png" 
              alt="Anvesh Raman Logo" 
              className="w-32 h-32 mx-auto rounded-full object-cover shadow-2xl"
            />
          </div>
          <h1 className="text-5xl md:text-7xl font-bold mb-4 bg-gradient-to-r from-purple-500 via-pink-500 to-blue-500 bg-clip-text text-transparent" style={{ fontFamily: 'cursive' }}>
            Anvesh Raman
          </h1>
          <p className="text-xl md:text-2xl mb-8 text-gray-400">
            Game Developer • Full-Stack Developer • AI Enthusiast
          </p>
          <p className="text-lg mb-12 max-w-2xl mx-auto text-gray-500">
            Crafting immersive games and innovative web solutions with a passion for AI and blockchain technology
          </p>
          <div className="flex justify-center space-x-4">
            <a href="https://github.com/developeranveshraman" target="_blank" rel="noopener noreferrer" className="p-3 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full hover:scale-110 transition-transform">
              <Github className="w-6 h-6" />
            </a>
            <a href="https://anveshraman.rf.gd" target="_blank" rel="noopener noreferrer" className="p-3 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full hover:scale-110 transition-transform">
              <ExternalLink className="w-6 h-6" />
            </a>
          </div>
        </div>
      </section>

      {/* About Section */}
      <section id="about" className="py-20 px-4">
        <div className="max-w-4xl mx-auto">
          <h2 className="text-4xl font-bold mb-12 text-center bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent">
            About Me
          </h2>
          <div className={`${darkMode ? 'bg-gray-800' : 'bg-white'} rounded-2xl p-8 shadow-xl`}>
            <p className="text-lg mb-6 leading-relaxed">
              Hey there! I'm Anvesh Raman, a passionate developer from India with a deep love for creating interactive experiences and innovative solutions. My journey in tech spans across game development, full-stack web development, and cutting-edge AI projects.
            </p>
            <p className="text-lg mb-6 leading-relaxed">
              I thrive on building projects that push boundaries—whether it's developing immersive games, crafting intuitive web applications, or experimenting with blockchain technology. Each project is an opportunity to learn, grow, and create something meaningful.
            </p>
            <p className="text-lg leading-relaxed">
              When I'm not coding, you'll find me exploring new AI models, contributing to open-source projects, or brainstorming the next big idea. My goal is to leverage technology to solve real-world problems and create experiences that truly matter.
            </p>
          </div>
        </div>
      </section>

      {/* Projects Section */}
      <section id="projects" className="py-20 px-4">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-4xl font-bold mb-12 text-center bg-gradient-to-r from-blue-500 to-cyan-500 bg-clip-text text-transparent">
            Featured Projects
          </h2>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {projects.map((project, index) => (
              <div
                key={index}
                className={`${darkMode ? 'bg-gray-800' : 'bg-white'} rounded-2xl overflow-hidden shadow-xl hover:scale-105 transition-transform duration-300`}
              >
                <div className={`h-48 bg-gradient-to-br ${project.color} flex items-center justify-center`}>
                  <div className="text-white text-6xl opacity-50">
                    <Code className="w-20 h-20" />
                  </div>
                </div>
                <div className="p-6">
                  <h3 className="text-2xl font-bold mb-2">{project.title}</h3>
                  <p className={`${darkMode ? 'text-gray-400' : 'text-gray-600'} mb-4`}>
                    {project.description}
                  </p>
                  <div className="flex flex-wrap gap-2 mb-4">
                    {project.tech.map((tech, i) => (
                      <span key={i} className={`px-3 py-1 rounded-full text-sm ${darkMode ? 'bg-gray-700' : 'bg-gray-200'}`}>
                        {tech}
                      </span>
                    ))}
                  </div>
                  <a
                    href={project.github}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center space-x-2 text-purple-500 hover:text-purple-400 transition-colors"
                  >
                    <Github className="w-5 h-5" />
                    <span>View on GitHub</span>
                  </a>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Achievements Section */}
      <section id="achievements" className="py-20 px-4">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-4xl font-bold mb-12 text-center bg-gradient-to-r from-green-500 to-emerald-500 bg-clip-text text-transparent">
            Achievements & Skills
          </h2>
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {achievements.map((achievement, index) => (
              <div
                key={index}
                className={`${darkMode ? 'bg-gray-800' : 'bg-white'} rounded-2xl p-6 text-center shadow-xl hover:scale-105 transition-transform duration-300`}
              >
                <div className="inline-flex p-4 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full mb-4">
                  {achievement.icon}
                </div>
                <h3 className="text-xl font-bold mb-2">{achievement.title}</h3>
                <p className={`${darkMode ? 'text-gray-400' : 'text-gray-600'}`}>
                  {achievement.desc}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="py-20 px-4">
        <div className="max-w-2xl mx-auto">
          <h2 className="text-4xl font-bold mb-12 text-center bg-gradient-to-r from-orange-500 to-pink-500 bg-clip-text text-transparent">
            Get In Touch
          </h2>
          <div className={`${darkMode ? 'bg-gray-800' : 'bg-white'} rounded-2xl p-8 shadow-xl`}>
            <div className="space-y-6">
              <div>
                <label className="block mb-2 font-semibold">Name</label>
                <input
                  type="text"
                  value={formData.name}
                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                  className={`w-full px-4 py-3 rounded-lg ${darkMode ? 'bg-gray-700 border-gray-600' : 'bg-gray-100 border-gray-300'} border focus:outline-none focus:ring-2 focus:ring-purple-500`}
                  placeholder="Your name"
                />
              </div>
              <div>
                <label className="block mb-2 font-semibold">Email</label>
                <input
                  type="email"
                  value={formData.email}
                  onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                  className={`w-full px-4 py-3 rounded-lg ${darkMode ? 'bg-gray-700 border-gray-600' : 'bg-gray-100 border-gray-300'} border focus:outline-none focus:ring-2 focus:ring-purple-500`}
                  placeholder="your.email@example.com"
                />
              </div>
              <div>
                <label className="block mb-2 font-semibold">Message</label>
                <textarea
                  rows={5}
                  value={formData.message}
                  onChange={(e) => setFormData({ ...formData, message: e.target.value })}
                  className={`w-full px-4 py-3 rounded-lg ${darkMode ? 'bg-gray-700 border-gray-600' : 'bg-gray-100 border-gray-300'} border focus:outline-none focus:ring-2 focus:ring-purple-500`}
                  placeholder="Your message..."
                ></textarea>
              </div>
              <button
                onClick={handleSubmit}
                className="w-full bg-gradient-to-r from-purple-500 to-pink-500 text-white py-3 rounded-lg font-semibold hover:scale-105 transition-transform duration-300 flex items-center justify-center space-x-2"
              >
                <Send className="w-5 h-5" />
                <span>Send Message</span>
              </button>
              {formSubmitted && (
                <p className="text-center text-green-500 font-semibold">Message sent successfully! ✓</p>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className={`${darkMode ? 'bg-gray-800' : 'bg-gray-100'} py-8 px-4 text-center`}>
        <p className={`${darkMode ? 'text-gray-400' : 'text-gray-600'}`}>
          © 2025 Anvesh Raman. Built with passion using React & Tailwind CSS
        </p>
      </footer>
    </div>
  );
}