import React, { useState, useEffect } from 'react';
import { 
  Github, 
  Linkedin, 
  Mail, 
  ExternalLink, 
  Code2, 
  User, 
  Briefcase, 
  Cpu, 
  ChevronRight,
  Menu,
  X,
  FileText,
  Sparkles
} from 'lucide-react';

/**
 * Professional Portfolio Component
 * Emphasis: Ultra-noticeable Glowing Buttons & Premium Interactions
 * Palette: Indigo-600, Slate-900, White
 */
const App = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);

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

  const navLinks = [
    { name: 'About', href: '#about', icon: <User size={18} /> },
    { name: 'Skills', href: '#skills', icon: <Cpu size={18} /> },
    { name: 'Projects', href: '#projects', icon: <Briefcase size={18} /> },
    { name: 'Contact', href: '#contact', icon: <Mail size={18} /> },
  ];

  const skills = [
    { category: "Frontend", items: ["React", "TypeScript", "Tailwind CSS", "Next.js"] },
    { category: "Backend", items: ["Node.js", "Python", "PostgreSQL", "Supabase"] },
    { category: "Design", items: ["Figma", "UI/UX", "Adobe Suite", "Prototyping"] },
  ];

  const projects = [
    {
      title: "AI Productivity Suite",
      description: "Automating student workflows using LLMs to synthesize lecture notes and schedule tasks efficiently across platforms.",
      tags: ["React", "Node.js", "AI"],
      link: "#"
    },
    {
      title: "FinTech Dashboard",
      description: "Real-time analytics for personal finance tracking with high-precision data visualization and automated categorization.",
      tags: ["TypeScript", "Next.js", "D3"],
      link: "#"
    },
    {
      title: "Community Platform",
      description: "A collaborative workspace for open-source contributors to manage distributed sprints and coordinate documentation.",
      tags: ["PostgreSQL", "React", "Docker"],
      link: "#"
    }
  ];

  return (
    <div className="min-h-screen bg-white text-slate-900 font-sans selection:bg-indigo-100 selection:text-indigo-700 antialiased">
      <style>{`
        @keyframes intense-glow {
          0%, 100% { 
            box-shadow: 0 0 20px rgba(79, 70, 229, 0.4), 0 0 40px rgba(79, 70, 229, 0.2); 
            transform: scale(1);
          }
          50% { 
            box-shadow: 0 0 40px rgba(79, 70, 229, 0.7), 0 0 70px rgba(79, 70, 229, 0.3); 
            transform: scale(1.02);
          }
        }
        
        .hero-glow-button {
          animation: intense-glow 3s ease-in-out infinite;
        }

        .shimmer-effect {
          position: relative;
          overflow: hidden;
        }

        .shimmer-effect::after {
          content: '';
          position: absolute;
          top: -50%;
          left: -150%;
          width: 200%;
          height: 200%;
          background: linear-gradient(
            to right,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent
          );
          transform: rotate(45deg);
          transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
        }

        .shimmer-effect:hover::after {
          left: 150%;
        }

        .glass-card {
          backdrop-filter: blur(10px);
          background: rgba(255, 255, 255, 0.05);
        }
      `}</style>
      
      {/* Navigation */}
      <nav className={`fixed w-full z-50 transition-all duration-500 ${scrolled ? 'bg-white/90 backdrop-blur-md border-b border-slate-100 py-4 shadow-sm' : 'bg-transparent py-8'}`}>
        <div className="max-w-7xl mx-auto px-8 flex justify-between items-center">
          <div className="text-2xl font-black tracking-tighter text-indigo-600 group cursor-pointer">
            STRATOS<span className="text-slate-900 group-hover:text-indigo-600 transition-colors">.</span>
          </div>

          <div className="hidden md:flex gap-12 items-center">
            {navLinks.map((link) => (
              <a 
                key={link.name} 
                href={link.href} 
                className="relative text-[11px] font-black text-slate-400 hover:text-indigo-600 transition-colors uppercase tracking-[0.2em] group"
              >
                {link.name}
                <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-indigo-600 transition-all group-hover:w-full"></span>
              </a>
            ))}
            <button className="bg-indigo-600 text-white px-8 py-3 rounded-xl text-xs font-black tracking-widest hover:bg-indigo-700 transition-all shadow-[0_0_15px_rgba(79,70,229,0.3)] hover:shadow-[0_0_25px_rgba(79,70,229,0.5)] active:scale-95 uppercase shimmer-effect">
              Resume
            </button>
          </div>

          <button className="md:hidden text-slate-900" onClick={() => setIsMenuOpen(!isMenuOpen)}>
            {isMenuOpen ? <X size={28} /> : <Menu size={28} />}
          </button>
        </div>

        {/* Mobile Nav */}
        {isMenuOpen && (
          <div className="md:hidden absolute top-full left-0 w-full bg-white border-b border-slate-100 p-12 flex flex-col gap-8 animate-in slide-in-from-top-4">
            {navLinks.map((link) => (
              <a 
                key={link.name} 
                href={link.href} 
                onClick={() => setIsMenuOpen(false)}
                className="flex items-center gap-6 text-2xl font-black text-slate-900"
              >
                <span className="text-indigo-600">{link.icon}</span> {link.name}
              </a>
            ))}
          </div>
        )}
      </nav>

      {/* Hero Section */}
      <header className="pt-64 pb-48 px-8 overflow-visible">
        <div className="max-w-7xl mx-auto">
          <div className="inline-flex items-center gap-3 px-5 py-2 rounded-full bg-indigo-50 text-indigo-600 text-xs font-black tracking-widest mb-12 border border-indigo-100 uppercase">
            <Sparkles size={14} className="animate-pulse" /> Available for 2025 Roles
          </div>
          <div className="grid lg:grid-cols-[1.2fr_0.8fr] gap-24 items-center">
            <div>
              <h1 className="text-7xl md:text-9xl font-black tracking-tighter text-slate-900 mb-12 leading-[0.85]">
                Digital <br />
                <span className="text-indigo-600">Architect.</span>
              </h1>
              <p className="text-xl md:text-2xl text-slate-500 max-w-xl mb-16 leading-relaxed font-medium">
                I build scalable web systems with a focus on minimalist aesthetics and robust engineering.
              </p>
              <div className="flex flex-wrap gap-8 items-center">
                
                {/* EXPLORE WORK BUTTON - THE GLOWING CTA */}
                <a 
                  href="#projects" 
                  className="hero-glow-button shimmer-effect relative bg-indigo-700 text-white px-12 py-6 rounded-2xl font-black tracking-wider flex items-center gap-4 hover:bg-indigo-800 transition-all text-xl active:scale-95 z-10"
                >
                  <span className="relative z-10">Explore Work</span>
                  <ChevronRight size={24} className="relative z-10 group-hover:translate-x-2 transition-transform duration-300" />
                </a>
                
                <div className="flex gap-6">
                  <a href="#" className="p-5 rounded-2xl bg-slate-50 text-slate-400 hover:text-indigo-600 hover:bg-indigo-50 transition-all border border-slate-100 shadow-sm hover:border-indigo-200 hover:scale-110 active:scale-90">
                    <Github size={28} />
                  </a>
                  <a href="#" className="p-5 rounded-2xl bg-slate-50 text-slate-400 hover:text-indigo-600 hover:bg-indigo-50 transition-all border border-slate-100 shadow-sm hover:border-indigo-200 hover:scale-110 active:scale-90">
                    <Linkedin size={28} />
                  </a>
                </div>
              </div>
            </div>
            <div className="hidden lg:block relative justify-self-center">
                <div className="w-96 h-96 bg-slate-900 rounded-[4rem] -rotate-6 shadow-[40px_40px_80px_rgba(0,0,0,0.15)] flex items-center justify-center group overflow-hidden cursor-pointer relative">
                    <div className="absolute inset-0 bg-indigo-600 opacity-0 group-hover:opacity-20 transition-all duration-700"></div>
                    <span className="text-white font-black text-[12rem] select-none group-hover:scale-110 group-hover:-rotate-6 transition-transform duration-700">S</span>
                    <div className="absolute -inset-1 border border-white/0 group-hover:border-white/10 rounded-[4rem] transition-all"></div>
                </div>
                <div className="absolute -bottom-10 -right-10 w-40 h-40 bg-indigo-50 border border-indigo-100 rounded-3xl -z-10 animate-bounce transition-all duration-[3000ms]"></div>
            </div>
          </div>
        </div>
      </header>

      {/* About Section */}
      <section id="about" className="py-48 bg-slate-50 px-8 border-y border-slate-100">
        <div className="max-w-6xl mx-auto">
          <div className="grid md:grid-cols-[0.8fr_1.2fr] gap-32 items-start">
            <div className="sticky top-40">
                <h2 className="text-xs font-black uppercase tracking-[0.4em] text-indigo-600 mb-8">The Philosophy</h2>
                <h3 className="text-5xl font-bold text-slate-900 mb-10 leading-tight">Complexity <br />made simple.</h3>
                <div className="w-20 h-1.5 bg-indigo-600 rounded-full shadow-[0_0_15px_rgba(79,70,229,0.4)]"></div>
            </div>
            <div className="space-y-12 text-xl text-slate-600 leading-[1.8]">
              <p className="font-medium">
                I believe that every line of code is an opportunity to solve a human problem. My process bridges the gap between technical constraints and user desires.
              </p>
              <p>
                Currently specializing in full-stack development, I focus on creating systems that are performant, accessible, and delightful to interact with.
              </p>
              <div className="pt-16 grid grid-cols-2 gap-12 border-t border-slate-200">
                <div className="group">
                    <h4 className="text-4xl font-black text-slate-900 mb-3 tracking-tighter group-hover:text-indigo-600 transition-colors">02+</h4>
                    <p className="text-xs text-slate-400 uppercase font-black tracking-widest">Industry Roles</p>
                </div>
                <div className="group">
                    <h4 className="text-4xl font-black text-slate-900 mb-3 tracking-tighter group-hover:text-indigo-600 transition-colors">20+</h4>
                    <p className="text-xs text-slate-400 uppercase font-black tracking-widest">Digital Products</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Skills Section */}
      <section id="skills" className="py-48 px-8 bg-white text-center sm:text-left">
        <div className="max-w-7xl mx-auto">
          <div className="flex flex-col md:flex-row gap-24">
            <div className="md:w-1/3">
              <h2 className="text-5xl font-black tracking-tighter mb-10 text-slate-900">Technical <br />Arsenal</h2>
              <p className="text-slate-500 text-lg leading-relaxed">
                A constantly evolving stack built on modern standards and industry best practices.
              </p>
            </div>
            <div className="md:w-2/3 grid sm:grid-cols-3 gap-12">
                {skills.map((skillGroup) => (
                    <div key={skillGroup.category} className="group p-8 rounded-3xl bg-slate-50 border border-transparent hover:border-indigo-100 hover:bg-white hover:shadow-xl transition-all duration-500">
                        <h3 className="text-[10px] font-black uppercase tracking-[0.3em] text-indigo-600 mb-10 pb-4 border-b border-slate-200 group-hover:border-indigo-600 transition-colors">
                          {skillGroup.category}
                        </h3>
                        <ul className="space-y-6">
                            {skillGroup.items.map(item => (
                                <li key={item} className="text-slate-900 font-bold text-lg hover:text-indigo-600 hover:translate-x-2 transition-all cursor-default">
                                    {item}
                                </li>
                            ))}
                        </ul>
                    </div>
                ))}
            </div>
          </div>
        </div>
      </section>

      {/* Projects Section */}
      <section id="projects" className="py-48 px-8 bg-slate-900 text-white relative overflow-hidden">
        <div className="absolute top-0 right-0 w-96 h-96 bg-indigo-600 opacity-[0.03] blur-[120px] pointer-events-none"></div>
        <div className="absolute bottom-0 left-0 w-96 h-96 bg-indigo-600 opacity-[0.03] blur-[120px] pointer-events-none"></div>
        
        <div className="max-w-7xl mx-auto relative z-10">
          <div className="flex flex-col md:flex-row justify-between items-end gap-12 mb-32">
            <div>
              <h2 className="text-6xl font-black tracking-tighter mb-8 italic">Work.</h2>
              <p className="text-slate-400 text-xl font-medium max-w-md">Highlighting the intersection of design and logic.</p>
            </div>
            <div className="h-px flex-1 bg-slate-800 hidden md:block mx-12 mb-4"></div>
            <a href="#" className="group flex items-center gap-3 text-indigo-400 font-black tracking-widest uppercase text-xs hover:text-white transition-colors">
              View Github <ExternalLink size={16} className="group-hover:-translate-y-1 group-hover:translate-x-1 transition-transform" />
            </a>
          </div>
          
          <div className="grid md:grid-cols-3 gap-16">
            {projects.map((project, index) => (
              <div key={index} className="group cursor-pointer">
                <div className="aspect-[3/4] bg-slate-800/30 rounded-[3rem] mb-10 overflow-hidden relative border border-slate-800 group-hover:border-indigo-500/50 group-hover:bg-slate-800/50 transition-all duration-700 shadow-lg">
                  <div className="absolute inset-0 flex items-center justify-center opacity-10 group-hover:opacity-40 transition-all duration-1000 group-hover:scale-110">
                    <Briefcase size={120} />
                  </div>
                  <div className="absolute top-10 right-10">
                    <div className="w-14 h-14 rounded-full bg-white/5 backdrop-blur-md flex items-center justify-center border border-white/10 group-hover:bg-indigo-600 group-hover:border-indigo-500 group-hover:shadow-[0_0_20px_rgba(79,70,229,0.6)] transition-all duration-500">
                      <ExternalLink size={24} />
                    </div>
                  </div>
                  <div className="absolute bottom-10 left-10 flex flex-wrap gap-2">
                    {project.tags.map(tag => (
                      <span key={tag} className="text-[10px] font-black tracking-tighter px-4 py-2 bg-slate-900/90 backdrop-blur-md rounded-xl uppercase border border-white/5 group-hover:border-indigo-500/30 transition-colors">
                        {tag}
                      </span>
                    ))}
                  </div>
                </div>
                <h3 className="text-3xl font-bold mb-6 group-hover:text-indigo-400 transition-all tracking-tight group-hover:translate-x-2">{project.title}</h3>
                <p className="text-slate-400 text-lg leading-loose mb-10 line-clamp-3 group-hover:text-slate-300 transition-colors">
                  {project.description}
                </p>
                <div className="h-1.5 w-0 group-hover:w-1/3 bg-indigo-600 transition-all duration-700 rounded-full shadow-[0_0_15px_rgba(79,70,229,0.8)]"></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="py-64 px-8 bg-white text-center">
        <div className="max-w-4xl mx-auto">
            <div className="inline-block p-10 bg-slate-50 rounded-[4rem] mb-16 shadow-inner border border-slate-100 relative group overflow-hidden">
                <div className="absolute inset-0 bg-indigo-600/5 translate-y-full group-hover:translate-y-0 transition-transform duration-500"></div>
                <Mail size={56} className="text-indigo-600 relative z-10 group-hover:scale-110 transition-transform" />
            </div>
            <h2 className="text-6xl md:text-8xl font-black text-slate-900 mb-10 tracking-tighter leading-tight">
              Let's build <br /><span className="text-indigo-600">Together.</span>
            </h2>
            <p className="text-slate-500 text-2xl mb-20 font-medium leading-relaxed max-w-2xl mx-auto">
              I'm ready to bring my technical skills and creative eye to your next mission.
            </p>
            <div className="flex flex-col sm:flex-row justify-center gap-10">
                <a href="mailto:hello@example.com" className="bg-slate-900 text-white px-16 py-7 rounded-[2.5rem] font-black text-xl hover:scale-105 transition-all shadow-[0_30px_60px_-15px_rgba(0,0,0,0.3)] hover:shadow-[0_40px_80px_-20px_rgba(0,0,0,0.4)] active:scale-95 shimmer-effect">
                    Contact Me
                </a>
                <a href="#" className="bg-white text-indigo-600 border-2 border-indigo-600 px-16 py-7 rounded-[2.5rem] font-black text-xl hover:bg-indigo-600 hover:text-white transition-all shadow-xl shadow-indigo-100/50 active:scale-95 shimmer-effect">
                    Get Resume
                </a>
            </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="pt-32 pb-16 px-8 bg-white border-t border-slate-50">
        <div className="max-w-7xl mx-auto">
          <div className="flex flex-col md:flex-row justify-between items-center gap-12 mb-20">
            <div className="text-3xl font-black tracking-tighter hover:text-indigo-600 transition-colors cursor-pointer">
              STRATOS<span className="text-indigo-600">.</span>
            </div>
            <div className="flex flex-wrap justify-center gap-12">
              {['Github', 'LinkedIn', 'Twitter', 'Dribbble'].map(social => (
                <a key={social} href="#" className="text-slate-400 hover:text-indigo-600 font-black transition-all hover:scale-110 text-[11px] tracking-[0.3em] uppercase">
                  {social}
                </a>
              ))}
            </div>
          </div>
          <div className="text-center text-slate-300 text-[10px] font-black tracking-[0.5em] uppercase">
            © 2024 Design & Code by Stratos Studio
          </div>
        </div>
      </footer>

    </div>
  );
};

export default App;