import React, { useState, useEffect } from 'react';
import { 
  User, 
  Briefcase, 
  GraduationCap, 
  Code, 
  Database, 
  BarChart, 
  Mail, 
  Phone, 
  MapPin, 
  ChevronRight, 
  Github, 
  Linkedin,
  ExternalLink,
  Cpu,
  Server
} from 'lucide-react';

const App = () => {
  const [activeTab, setActiveTab] = useState('all');
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 50);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const stats = [
    { label: 'Years Experience', value: '6+' },
    { label: 'Core Projects', value: '15+' },
    { label: 'Certifications', value: 'NASSCOM' },
    { label: 'Expertise', value: 'AI & Backend' },
  ];

  const skills = {
    analyst: ["Data Analysis", "Data Visualization", "Dashboard Creation", "Data Modeling", "DAX", "Power BI", "Tableau", "Looker"],
    developer: ["Python", "Flask", "Django", "Microservices", "REST APIs", "AWS", "SQL", "MongoDB", "Redis"],
    libraries: ["TensorFlow", "PyTorch", "Scikit-Learn", "Pandas", "NumPy", "OpenCV", "Kafka"]
  };

  const experience = [
    {
      company: "IUCTE, BHU, Varanasi",
      role: "Currently Working",
      period: "Present",
      description: "Inter University Centre for Teacher Education (IUCTE) – focusing on technical integration and data-driven educational systems.",
      icon: <Briefcase className="w-5 h-5" />
    },
    {
      company: "Centre for Vedic Sciences, BHU",
      role: "Data Analyst / Python Developer",
      period: "2019 - 2024",
      description: "Spearheaded data virtualization projects, built Power BI dashboards, and developed robust backend microservices using Flask.",
      icon: <BarChart className="w-5 h-5" />
    }
  ];

  const education = [
    {
      school: "Amity University Uttar Pradesh",
      degree: "Ph.D. (Current Status)",
      period: "Ongoing",
      description: "Advancing research in the intersection of Data Science and Applied Intelligence.",
      icon: <GraduationCap className="w-5 h-5" />
    },
    {
      school: "Banaras Hindu University (BHU)",
      degree: "AI & Data Scientist Certification",
      period: "2023",
      description: "Certified by NASSCOM – Specialized training in advanced AI methodologies.",
      icon: <Cpu className="w-5 h-5" />
    },
    {
      school: "UPRTOU, Varanasi",
      degree: "MCA (Master of Computer Applications)",
      period: "2020 - 2023",
      description: "Masters degree with focus on software engineering and data structures.",
      icon: <GraduationCap className="w-5 h-5" />
    }
  ];

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900 font-sans selection:bg-indigo-100 selection:text-indigo-700">
      {/* Navigation */}
      <nav className={`fixed top-0 w-full z-50 transition-all duration-300 ${scrolled ? 'bg-white/80 backdrop-blur-md shadow-sm py-3' : 'bg-transparent py-5'}`}>
        <div className="max-w-6xl mx-auto px-6 flex justify-between items-center">
          <div className="font-bold text-xl tracking-tighter text-indigo-600">SP.</div>
          <div className="hidden md:flex space-x-8 text-sm font-medium">
            <a href="#about" className="hover:text-indigo-600 transition-colors">About</a>
            <a href="#experience" className="hover:text-indigo-600 transition-colors">Experience</a>
            <a href="#skills" className="hover:text-indigo-600 transition-colors">Skills</a>
            <a href="#projects" className="hover:text-indigo-600 transition-colors">Projects</a>
            <a href="#contact" className="hover:text-indigo-600 transition-colors">Contact</a>
          </div>
          <a href="mailto:shubhamcvs@bhu.ac.in" className="bg-indigo-600 text-white px-5 py-2 rounded-full text-sm font-semibold hover:bg-indigo-700 transition-all hover:shadow-lg hover:shadow-indigo-200">
            Hire Me
          </a>
        </div>
      </nav>

      {/* Hero Section */}
      <header className="pt-32 pb-20 px-6">
        <div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-center">
          <div>
            <div className="inline-flex items-center space-x-2 bg-indigo-50 text-indigo-700 px-3 py-1 rounded-full text-xs font-bold mb-6">
              <span className="relative flex h-2 w-2">
                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"></span>
                <span className="relative inline-flex rounded-full h-2 w-2 bg-indigo-600"></span>
              </span>
              <span>PH.D. SCHOLAR • AMITY UNIVERSITY</span>
            </div>
            <h1 className="text-5xl md:text-7xl font-extrabold text-slate-900 leading-[1.1] mb-6">
              Shubham <span className="text-indigo-600">Prajapati</span>
            </h1>
            <p className="text-xl text-slate-600 mb-8 max-w-lg leading-relaxed">
              AI-Data Scientist & Python Developer at <span className="font-semibold text-slate-900">IUCTE, BHU</span>. 
              Bridging the gap between complex data virtualization and scalable microservice architectures.
            </p>
            <div className="flex flex-wrap gap-4">
              <button className="bg-slate-900 text-white px-8 py-4 rounded-xl font-bold flex items-center space-x-2 hover:bg-slate-800 transition-all">
                <span>View My Work</span>
                <ChevronRight size={18} />
              </button>
              <div className="flex items-center space-x-4">
                <a href="#" className="p-3 bg-white border border-slate-200 rounded-xl hover:border-indigo-400 hover:text-indigo-600 transition-all">
                  <Linkedin size={20} />
                </a>
                <a href="#" className="p-3 bg-white border border-slate-200 rounded-xl hover:border-indigo-400 hover:text-indigo-600 transition-all">
                  <Github size={20} />
                </a>
              </div>
            </div>
          </div>
          <div className="relative">
            <div className="aspect-square bg-indigo-100 rounded-3xl overflow-hidden relative group">
                {/* Fallback pattern since we don't have the real image */}
                <div className="absolute inset-0 bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-white">
                    <User size={120} strokeWidth={1} />
                </div>
                <div className="absolute bottom-6 left-6 right-6 bg-white/90 backdrop-blur p-6 rounded-2xl shadow-xl border border-white/20 transform group-hover:-translate-y-2 transition-transform">
                    <p className="text-xs font-bold text-indigo-600 uppercase tracking-widest mb-1">Top Expertise</p>
                    <p className="text-slate-800 font-semibold">Python Backend • Power BI • Machine Learning</p>
                </div>
            </div>
            {/* Decorative elements */}
            <div className="absolute -top-6 -right-6 w-32 h-32 bg-indigo-200 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
            <div className="absolute -bottom-6 -left-6 w-32 h-32 bg-purple-200 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
          </div>
        </div>
      </header>

      {/* Stats Section */}
      <section className="bg-white border-y border-slate-100 py-12">
        <div className="max-w-6xl mx-auto px-6 grid grid-cols-2 md:grid-cols-4 gap-8">
          {stats.map((stat, idx) => (
            <div key={idx} className="text-center">
              <div className="text-3xl font-black text-slate-900 mb-1">{stat.value}</div>
              <div className="text-xs font-bold text-slate-400 uppercase tracking-widest">{stat.label}</div>
            </div>
          ))}
        </div>
      </section>

      {/* About & Experience */}
      <section id="experience" className="py-24 px-6 max-w-6xl mx-auto">
        <div className="grid md:grid-cols-12 gap-16">
          <div className="md:col-span-5">
            <h2 className="text-3xl font-bold mb-8 flex items-center space-x-3">
              <span className="w-8 h-8 bg-indigo-600 text-white rounded-lg flex items-center justify-center text-sm font-bold">1</span>
              <span>Education & Career</span>
            </h2>
            <div className="space-y-8 relative before:absolute before:left-6 before:top-2 before:bottom-2 before:w-px before:bg-slate-200">
              {experience.map((item, idx) => (
                <div key={idx} className="relative pl-12 group">
                  <div className="absolute left-3 top-0 w-6 h-6 bg-white border-2 border-indigo-600 rounded-full z-10 group-hover:bg-indigo-600 transition-colors"></div>
                  <span className="text-xs font-bold text-indigo-600 mb-1 block">{item.period}</span>
                  <h3 className="text-lg font-bold text-slate-900">{item.company}</h3>
                  <p className="text-sm font-semibold text-slate-500 mb-2">{item.role}</p>
                  <p className="text-sm text-slate-600 leading-relaxed">{item.description}</p>
                </div>
              ))}
              {education.map((item, idx) => (
                <div key={idx} className="relative pl-12 group">
                  <div className="absolute left-3 top-0 w-6 h-6 bg-white border-2 border-slate-300 rounded-full z-10 group-hover:border-indigo-600 transition-colors"></div>
                  <span className="text-xs font-bold text-slate-400 mb-1 block">{item.period}</span>
                  <h3 className="text-lg font-bold text-slate-900">{item.school}</h3>
                  <p className="text-sm font-semibold text-slate-500 mb-2">{item.degree}</p>
                  <p className="text-sm text-slate-600 leading-relaxed">{item.description}</p>
                </div>
              ))}
            </div>
          </div>

          <div className="md:col-span-7">
            <h2 className="text-3xl font-bold mb-8 flex items-center space-x-3" id="skills">
              <span className="w-8 h-8 bg-indigo-600 text-white rounded-lg flex items-center justify-center text-sm font-bold">2</span>
              <span>Technical Arsenal</span>
            </h2>
            <div className="grid sm:grid-cols-2 gap-6">
              <div className="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm hover:shadow-md transition-shadow">
                <div className="w-10 h-10 bg-blue-50 text-blue-600 rounded-xl flex items-center justify-center mb-4">
                  <BarChart size={20} />
                </div>
                <h3 className="font-bold mb-4">Analytics & BI</h3>
                <div className="flex flex-wrap gap-2">
                  {skills.analyst.map(s => <span key={s} className="px-3 py-1 bg-slate-50 text-slate-600 text-xs font-semibold rounded-lg">{s}</span>)}
                </div>
              </div>
              <div className="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm hover:shadow-md transition-shadow">
                <div className="w-10 h-10 bg-green-50 text-green-600 rounded-xl flex items-center justify-center mb-4">
                  <Server size={20} />
                </div>
                <h3 className="font-bold mb-4">Backend & APIs</h3>
                <div className="flex flex-wrap gap-2">
                  {skills.developer.map(s => <span key={s} className="px-3 py-1 bg-slate-50 text-slate-600 text-xs font-semibold rounded-lg">{s}</span>)}
                </div>
              </div>
              <div className="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm hover:shadow-md transition-shadow sm:col-span-2">
                <div className="w-10 h-10 bg-purple-50 text-purple-600 rounded-xl flex items-center justify-center mb-4">
                  <Cpu size={20} />
                </div>
                <h3 className="font-bold mb-4">Libraries & Frameworks</h3>
                <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
                  {skills.libraries.map(s => <span key={s} className="px-3 py-1 bg-slate-50 text-slate-600 text-xs font-semibold rounded-lg text-center">{s}</span>)}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Projects Section */}
      <section id="projects" className="py-24 bg-slate-900 text-white">
        <div className="max-w-6xl mx-auto px-6">
          <div className="flex flex-col md:flex-row md:items-end justify-between mb-12 space-y-4 md:space-y-0">
            <div>
              <p className="text-indigo-400 font-bold text-sm tracking-widest uppercase mb-2">Portfolio</p>
              <h2 className="text-4xl font-bold">Featured Projects</h2>
            </div>
            <div className="flex space-x-4">
              <button onClick={() => setActiveTab('all')} className={`px-4 py-2 rounded-lg text-sm font-bold transition-all ${activeTab === 'all' ? 'bg-indigo-600 text-white' : 'text-slate-400 hover:text-white'}`}>All</button>
              <button onClick={() => setActiveTab('bi')} className={`px-4 py-2 rounded-lg text-sm font-bold transition-all ${activeTab === 'bi' ? 'bg-indigo-600 text-white' : 'text-slate-400 hover:text-white'}`}>Analytics</button>
              <button onClick={() => setActiveTab('ml')} className={`px-4 py-2 rounded-lg text-sm font-bold transition-all ${activeTab === 'ml' ? 'bg-indigo-600 text-white' : 'text-slate-400 hover:text-white'}`}>AI/ML</button>
            </div>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            <div className={`group bg-slate-800/50 rounded-3xl overflow-hidden border border-slate-700 transition-all hover:border-indigo-500 ${(activeTab === 'all' || activeTab === 'bi') ? 'block' : 'hidden'}`}>
              <div className="h-64 bg-slate-700 relative overflow-hidden">
                <div className="absolute inset-0 bg-indigo-600/20 group-hover:bg-indigo-600/10 transition-colors"></div>
                <div className="absolute inset-0 flex items-center justify-center opacity-40">
                    <BarChart size={100} strokeWidth={1} />
                </div>
              </div>
              <div className="p-8">
                <div className="flex items-center space-x-2 text-indigo-400 text-xs font-bold uppercase tracking-widest mb-3">
                  <BarChart size={14} />
                  <span>Business Intelligence</span>
                </div>
                <h3 className="text-2xl font-bold mb-4">Streaming Insights Dashboard</h3>
                <p className="text-slate-400 text-sm leading-relaxed mb-6">
                  Comprehensive Power BI dashboard for Netflix, Amazon Prime, and Hotstar. Features IMDb score tracking, yearly release analytics, and viewer engagement strategies.
                </p>
                <div className="flex items-center space-x-4">
                  <span className="text-xs px-2 py-1 bg-slate-700 rounded border border-slate-600">Power BI</span>
                  <span className="text-xs px-2 py-1 bg-slate-700 rounded border border-slate-600">ETL</span>
                  <span className="text-xs px-2 py-1 bg-slate-700 rounded border border-slate-600">Data Modeling</span>
                </div>
              </div>
            </div>

            <div className={`group bg-slate-800/50 rounded-3xl overflow-hidden border border-slate-700 transition-all hover:border-indigo-500 ${(activeTab === 'all' || activeTab === 'ml') ? 'block' : 'hidden'}`}>
              <div className="h-64 bg-slate-700 relative overflow-hidden">
                <div className="absolute inset-0 bg-purple-600/20 group-hover:bg-purple-600/10 transition-colors"></div>
                <div className="absolute inset-0 flex items-center justify-center opacity-40">
                    <Cpu size={100} strokeWidth={1} />
                </div>
              </div>
              <div className="p-8">
                <div className="flex items-center space-x-2 text-purple-400 text-xs font-bold uppercase tracking-widest mb-3">
                  <Cpu size={14} />
                  <span>Machine Learning</span>
                </div>
                <h3 className="text-2xl font-bold mb-4">Movie Recommendation Engine</h3>
                <p className="text-slate-400 text-sm leading-relaxed mb-6">
                  Sophisticated tool leveraging collaborative and content-based filtering algorithms to predict user preferences based on vast interaction datasets.
                </p>
                <div className="flex items-center space-x-4">
                  <span className="text-xs px-2 py-1 bg-slate-700 rounded border border-slate-600">Python</span>
                  <span className="text-xs px-2 py-1 bg-slate-700 rounded border border-slate-600">Scikit-Learn</span>
                  <span className="text-xs px-2 py-1 bg-slate-700 rounded border border-slate-600">Flask API</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="py-24 px-6">
        <div className="max-w-4xl mx-auto bg-white rounded-[40px] shadow-2xl shadow-indigo-100 border border-slate-50 overflow-hidden">
          <div className="grid md:grid-cols-2">
            <div className="p-12 bg-indigo-600 text-white">
              <h2 className="text-3xl font-bold mb-8">Get in touch</h2>
              <div className="space-y-6">
                <div className="flex items-center space-x-4">
                  <div className="w-12 h-12 bg-indigo-500/50 rounded-xl flex items-center justify-center">
                    <Mail size={24} />
                  </div>
                  <div>
                    <p className="text-indigo-200 text-xs font-bold uppercase">Email</p>
                    <p className="font-semibold">shubhamcvs@bhu.ac.in</p>
                  </div>
                </div>
                <div className="flex items-center space-x-4">
                  <div className="w-12 h-12 bg-indigo-500/50 rounded-xl flex items-center justify-center">
                    <Phone size={24} />
                  </div>
                  <div>
                    <p className="text-indigo-200 text-xs font-bold uppercase">Phone</p>
                    <p className="font-semibold">+91 7007084967</p>
                  </div>
                </div>
                <div className="flex items-center space-x-4">
                  <div className="w-12 h-12 bg-indigo-500/50 rounded-xl flex items-center justify-center">
                    <MapPin size={24} />
                  </div>
                  <div>
                    <p className="text-indigo-200 text-xs font-bold uppercase">Location</p>
                    <p className="font-semibold text-sm">Varanasi, Uttar Pradesh, India</p>
                  </div>
                </div>
              </div>
            </div>
            <div className="p-12">
              <form className="space-y-4" onSubmit={e => e.preventDefault()}>
                <div>
                  <label className="block text-xs font-bold text-slate-400 uppercase mb-2">Name</label>
                  <input type="text" className="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:bg-white transition-all" placeholder="Your Name" />
                </div>
                <div>
                  <label className="block text-xs font-bold text-slate-400 uppercase mb-2">Email</label>
                  <input type="email" className="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:bg-white transition-all" placeholder="your@email.com" />
                </div>
                <div>
                  <label className="block text-xs font-bold text-slate-400 uppercase mb-2">Message</label>
                  <textarea className="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:bg-white transition-all h-32" placeholder="Tell me about your project..."></textarea>
                </div>
                <button className="w-full bg-indigo-600 text-white py-4 rounded-xl font-bold hover:bg-indigo-700 transition-all">Send Message</button>
              </form>
            </div>
          </div>
        </div>
      </section>

      <footer className="py-12 px-6 border-t border-slate-100 bg-white">
        <div className="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center space-y-6 md:space-y-0">
          <div className="text-slate-400 text-sm">
            © 2024 Shubham Prajapati. Built with React & Tailwind.
          </div>
          <div className="flex space-x-6 text-slate-400">
            <a href="#" className="hover:text-indigo-600 transition-colors">LinkedIn</a>
            <a href="#" className="hover:text-indigo-600 transition-colors">GitHub</a>
            <a href="#" className="hover:text-indigo-600 transition-colors">Twitter</a>
          </div>
        </div>
      </footer>

      <style dangerouslySetInnerHTML={{ __html: `
        @keyframes blob {
          0% { transform: translate(0px, 0px) scale(1); }
          33% { transform: translate(30px, -50px) scale(1.1); }
          66% { transform: translate(-20px, 20px) scale(0.9); }
          100% { transform: translate(0px, 0px) scale(1); }
        }
        .animate-blob {
          animation: blob 7s infinite;
        }
        .animation-delay-2000 {
          animation-delay: 2s;
        }
      `}} />
    </div>
  );
};

export default App;