import React, { useState } from 'react';
import { Menu, X, Github, Linkedin, Mail, ExternalLink, Code, Briefcase, User } from 'lucide-react';

export default function Portfolio() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  const projects = [
    {
      title: "E-Commerce Platform",
      description: "A full-stack e-commerce solution with payment integration and real-time inventory management.",
      tech: ["React", "Node.js", "MongoDB"],
      link: "#"
    },
    {
      title: "Task Management App",
      description: "Collaborative task management tool with drag-and-drop functionality and team features.",
      tech: ["React", "Firebase", "Tailwind"],
      link: "#"
    },
    {
      title: "Weather Dashboard",
      description: "Real-time weather application with forecasts, maps, and location-based alerts.",
      tech: ["JavaScript", "API", "CSS"],
      link: "#"
    }
  ];

  const skills = [
    "JavaScript", "React", "Node.js", "Python", "HTML/CSS",
    "MongoDB", "Git", "REST APIs", "Tailwind CSS", "TypeScript"
  ];

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 text-white">
      {/* Navigation */}
      <nav className="fixed w-full bg-slate-900/80 backdrop-blur-md z-50 border-b border-purple-500/20">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="text-2xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
              Portfolio
            </div>
            
            {/* Desktop Menu */}
            <div className="hidden md:flex space-x-8">
              <a href="#about" className="hover:text-purple-400 transition">About</a>
              <a href="#skills" className="hover:text-purple-400 transition">Skills</a>
              <a href="#projects" className="hover:text-purple-400 transition">Projects</a>
              <a href="#contact" className="hover:text-purple-400 transition">Contact</a>
            </div>

          {/* Mobile Menu */}
          {mobileMenuOpen && (
            <div className="md:hidden py-4 space-y-3">
              <a href="#about" className="block hover:text-purple-400 transition">About</a>
              <a href="#skills" className="block hover:text-purple-400 transition">Skills</a>
              <a href="#projects" className="block hover:text-purple-400 transition">Projects</a>
              <a href="#contact" className="block hover:text-purple-400 transition">Contact</a>
            </div>
          )}
        </div>
      </nav>

      {/* Hero Section */}
      <section className="pt-32 pb-20 px-4">
        <div className="max-w-6xl mx-auto text-center">
          <div className="mb-8">
            <div className="w-32 h-32 mx-auto bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center text-6xl mb-6">
              👋
            </div>
          </div>
          <h1 className="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-purple-400 via-pink-400 to-purple-400 bg-clip-text text-transparent">
            Hi, I'm Your Name
          </h1>
          <p className="text-xl md:text-2xl text-gray-300 mb-8">
            Full Stack Developer | Creative Problem Solver
          </p>
          <div className="flex justify-center gap-4">
            <a href="#contact" className="bg-purple-600 hover:bg-purple-700 px-8 py-3 rounded-full font-semibold transition transform hover:scale-105">
              Get In Touch
            </a>
            <a href="#projects" className="border border-purple-400 hover:bg-purple-400/10 px-8 py-3 rounded-full font-semibold transition">
              View Work
            </a>
          </div>
        </div>
      </section>

      {/* About Section */}
      <section id="about" className="py-20 px-4 bg-slate-900/50">
        <div className="max-w-6xl mx-auto">
          <div className="flex items-center gap-3 mb-8">
            <User className="text-purple-400" size={32} />
            <h2 className="text-4xl font-bold">About Me</h2>
          </div>
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div>
              <p className="text-gray-300 text-lg leading-relaxed mb-4">
                I'm a passionate developer with a love for creating beautiful and functional web applications. 
                With several years of experience in modern web technologies, I specialize in building responsive, 
                user-friendly interfaces and robust backend systems.
              </p>
              <p className="text-gray-300 text-lg leading-relaxed">
                When I'm not coding, you can find me exploring new technologies, contributing to open source, 
                or sharing knowledge with the developer community.
              </p>
            </div>
            <div className="bg-gradient-to-br from-purple-600/20 to-pink-600/20 p-8 rounded-2xl border border-purple-500/30">
              <h3 className="text-2xl font-semibold mb-4">Quick Facts</h3>
              <ul className="space-y-3 text-gray-300">
                <li>📍 Based in Your City</li>
                <li>💼 5+ Years Experience</li>
                <li>🎓 Computer Science Graduate</li>
                <li>🚀 10+ Projects Completed</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Skills Section */}
      <section id="skills" className="py-20 px-4">
        <div className="max-w-6xl mx-auto">
          <div className="flex items-center gap-3 mb-8">
            <Code className="text-purple-400" size={32} />
            <h2 className="text-4xl font-bold">Skills</h2>
          </div>
          <div className="flex flex-wrap gap-4">
            {skills.map((skill, index) => (
              <span 
                key={index}
                className="bg-purple-600/20 border border-purple-500/50 px-6 py-3 rounded-full text-lg hover:bg-purple-600/30 transition transform hover:scale-105"
              >
                {skill}
              </span>
            ))}
          </div>
        </div>
      </section>

      {/* Projects Section */}
      <section id="projects" className="py-20 px-4 bg-slate-900/50">
        <div className="max-w-6xl mx-auto">
          <div className="flex items-center gap-3 mb-8">
            <Briefcase className="text-purple-400" size={32} />
            <h2 className="text-4xl font-bold">Projects</h2>
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {projects.map((project, index) => (
              <div 
                key={index}
                className="bg-gradient-to-br from-slate-800 to-slate-900 p-6 rounded-xl border border-purple-500/30 hover:border-purple-500 transition transform hover:scale-105"
              >
                <h3 className="text-2xl font-semibold mb-3">{project.title}</h3>
                <p className="text-gray-400 mb-4">{project.description}</p>
                <div className="flex flex-wrap gap-2 mb-4">
                  {project.tech.map((tech, i) => (
                    <span key={i} className="bg-purple-600/30 px-3 py-1 rounded-full text-sm">
                      {tech}
                    </span>
                  ))}
                </div>
                <a 
                  href={project.link}
                  className="inline-flex items-center gap-2 text-purple-400 hover:text-purple-300 transition"
                >
                  View Project <ExternalLink size={16} />
                </a>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="py-20 px-4">
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="text-4xl font-bold mb-6">Let's Connect</h2>
          <p className="text-xl text-gray-300 mb-8">
            I'm always open to new opportunities and collaborations
          </p>
          <div className="flex justify-center gap-6 mb-8">
            <a 
              href="https://github.com" 
              target="_blank"
              rel="noopener noreferrer"
              className="bg-slate-800 hover:bg-slate-700 p-4 rounded-full transition transform hover:scale-110"
            >
              <Github size={28} />
            </a>
            <a 
              href="https://linkedin.com"
              target="_blank"
              rel="noopener noreferrer"
              className="bg-slate-800 hover:bg-slate-700 p-4 rounded-full transition transform hover:scale-110"
            >
              <Linkedin size={28} />
            </a>
            <a 
              href="mailto:your.email@example.com"
              className="bg-slate-800 hover:bg-slate-700 p-4 rounded-full transition transform hover:scale-110"
            >
              <Mail size={28} />
            </a>
          </div>
          <a 
            href="mailto:your.email@example.com"
            className="inline-block bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 px-10 py-4 rounded-full font-semibold text-lg transition transform hover:scale-105"
          >
            Send Me an Email
          </a>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-8 px-4 border-t border-purple-500/20 bg-slate-900">
        <div className="max-w-6xl mx-auto text-center text-gray-400">
          <p>© 2024 Your Name. Built with React & Tailwind CSS</p>
        </div>
      </footer>
    </div>