import React, { useState, useEffect } from 'react';
import { Github, Twitter, Linkedin, Mail, ArrowUpRight, Code, Palette, Zap } from 'lucide-react';

// --- DATA ---
const PROJECTS = [
  {
    id: 1,
    title: "NEO-BANK UI",
    category: "Product Design",
    image: "https://images.unsplash.com/photo-1563986768609-322da13575f3?auto=format&fit=crop&q=80&w=1200&h=800",
    year: "2025"
  },
  {
    id: 2,
    title: "ECHO COMMERCE",
    category: "Fullstack Development",
    image: "https://images.unsplash.com/photo-1555421689-491a97ff2040?auto=format&fit=crop&q=80&w=1200&h=800",
    year: "2024"
  },
  {
    id: 3,
    title: "VANGUARD AI",
    category: "Frontend & WebGL",
    image: "https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?auto=format&fit=crop&q=80&w=1200&h=800",
    year: "2026"
  }
];

const GALLERY = [
  "https://images.unsplash.com/photo-1600607686527-6fb886090705?auto=format&fit=crop&q=80&w=800&h=800",
  "https://images.unsplash.com/photo-1550745165-9bc0b252726f?auto=format&fit=crop&q=80&w=800&h=800",
  "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?auto=format&fit=crop&q=80&w=800&h=800",
  "https://images.unsplash.com/photo-1558591710-4b4a1ae0f04d?auto=format&fit=crop&q=80&w=800&h=800",
  "https://images.unsplash.com/photo-1604871000636-074fa5117945?auto=format&fit=crop&q=80&w=800&h=800",
  "https://images.unsplash.com/photo-1574169208507-84376144848b?auto=format&fit=crop&q=80&w=800&h=800"
];

const NAV_LINKS = [
  { name: 'Index', href: '#home' },
  { name: 'About', href: '#about' },
  { name: 'Work', href: '#work' },
  { name: 'Gallery', href: '#gallery' },
  { name: 'Contact', href: '#contact' }
];

export default function App() {
  const [activeSection, setActiveSection] = useState('home');
  const [isScrolled, setIsScrolled] = useState(false);

  // Handle scroll spy and header background
  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 50);

      const sections = NAV_LINKS.map(link => link.href.substring(1));
      let current = '';
      
      for (const section of sections) {
        const element = document.getElementById(section);
        if (element && window.scrollY >= element.offsetTop - 200) {
          current = section;
        }
      }
      
      if (current !== activeSection) {
        setActiveSection(current);
      }
    };

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

  return (
    <div className="bg-zinc-950 text-zinc-50 min-h-screen font-sans selection:bg-lime-400 selection:text-zinc-950">
      <style dangerouslySetInnerHTML={{__html: `
        html { scroll-behavior: smooth; }
        .hide-scrollbar::-webkit-scrollbar { display: none; }
        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        
        /* Custom image filter transitions */
        .img-hover-color { filter: grayscale(100%) contrast(1.2); transition: filter 0.5s ease; }
        .img-hover-color:hover { filter: grayscale(0%) contrast(1); }
      `}} />

      {/* Floating Navigation */}
      <nav className={`fixed top-6 left-1/2 -translate-x-1/2 z-50 transition-all duration-300 ${isScrolled ? 'w-[90%] md:w-auto' : 'w-auto'}`}>
        <div className="bg-zinc-900/80 backdrop-blur-md border border-zinc-800 rounded-full px-4 py-2 flex items-center gap-1 md:gap-4 overflow-x-auto hide-scrollbar">
          {NAV_LINKS.map((link) => (
            <a
              key={link.name}
              href={link.href}
              className={`text-xs md:text-sm uppercase tracking-widest font-medium px-4 py-2 rounded-full transition-all duration-300 whitespace-nowrap ${
                activeSection === link.href.substring(1) 
                  ? 'bg-lime-400 text-zinc-950' 
                  : 'text-zinc-400 hover:text-zinc-50 hover:bg-zinc-800'
              }`}
            >
              {link.name}
            </a>
          ))}
        </div>
      </nav>

      <main>
        {/* HERO SECTION */}
        <section id="home" className="min-h-screen flex flex-col justify-center items-center pt-20 px-6 relative overflow-hidden">
          {/* Abstract background blobs */}
          <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-lime-400/10 rounded-full blur-[120px] -z-10 mix-blend-screen" />
          <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-blue-500/10 rounded-full blur-[120px] -z-10 mix-blend-screen" />

          <div className="w-full max-w-7xl mx-auto flex flex-col items-start gap-4">
            <p className="text-lime-400 uppercase tracking-[0.2em] font-mono text-sm border border-lime-400/30 px-4 py-1.5 rounded-full">
              Available for new projects
            </p>
            <h1 className="text-[12vw] leading-[0.85] font-black tracking-tighter uppercase text-transparent bg-clip-text bg-gradient-to-br from-zinc-100 to-zinc-500">
              Creative<br/>
              <span className="text-zinc-100">Engineer.</span>
            </h1>
            <p className="max-w-xl text-zinc-400 text-lg md:text-xl mt-8 font-light leading-relaxed">
              I build digital experiences that live at the intersection of bold design and rigorous engineering. Opinionated aesthetics, uncompromising performance.
            </p>
            
            <a href="#work" className="mt-12 group flex items-center gap-4 text-sm uppercase tracking-widest font-bold">
              <span className="w-12 h-[2px] bg-lime-400 group-hover:w-24 transition-all duration-300"></span>
              Explore the archive
            </a>
          </div>
        </section>

        {/* ABOUT SECTION */}
        <section id="about" className="py-32 px-6 border-t border-zinc-900 bg-zinc-950/50">
          <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-16">
            <div className="lg:col-span-5">
              <h2 className="text-4xl md:text-6xl font-black tracking-tighter uppercase mb-8">
                The <span className="text-lime-400">Philosophy.</span>
              </h2>
              <p className="text-zinc-400 text-lg leading-relaxed mb-6">
                Design shouldn't just be pretty; it should have an opinion. I believe in creating interfaces that demand attention, utilizing stark contrasts, bold typography, and micro-interactions that feel alive.
              </p>
              <p className="text-zinc-400 text-lg leading-relaxed">
                With a background in both visual design and systems architecture, I bridge the gap between how a product looks and how it fundamentally operates.
              </p>
            </div>
            
            <div className="lg:col-span-7 grid grid-cols-1 sm:grid-cols-2 gap-6">
              <div className="bg-zinc-900 border border-zinc-800 p-8 rounded-2xl hover:border-lime-400/50 transition-colors">
                <Palette className="text-lime-400 w-10 h-10 mb-6" />
                <h3 className="text-xl font-bold uppercase tracking-wide mb-3">Visual Design</h3>
                <p className="text-zinc-500">Brutalist aesthetics, typography systems, and interaction design that breaks the mold.</p>
              </div>
              <div className="bg-zinc-900 border border-zinc-800 p-8 rounded-2xl hover:border-lime-400/50 transition-colors">
                <Code className="text-lime-400 w-10 h-10 mb-6" />
                <h3 className="text-xl font-bold uppercase tracking-wide mb-3">Engineering</h3>
                <p className="text-zinc-500">React, WebGL, Tailwind, and performant architectures that scale gracefully.</p>
              </div>
              <div className="bg-zinc-900 border border-zinc-800 p-8 rounded-2xl hover:border-lime-400/50 transition-colors sm:col-span-2">
                <Zap className="text-lime-400 w-10 h-10 mb-6" />
                <h3 className="text-xl font-bold uppercase tracking-wide mb-3">Optimization</h3>
                <p className="text-zinc-500">Every image lazy-loaded. Every asset compressed. Form follows function, and function must be fast.</p>
              </div>
            </div>
          </div>
        </section>

        {/* WORK/PROJECTS SECTION */}
        <section id="work" className="py-32 px-6 border-t border-zinc-900">
          <div className="max-w-7xl mx-auto">
            <div className="flex flex-col md:flex-row md:items-end justify-between mb-16 gap-6">
              <h2 className="text-5xl md:text-7xl font-black tracking-tighter uppercase">
                Selected <br className="hidden md:block" />
                <span className="text-zinc-600">Works.</span>
              </h2>
              <p className="text-zinc-500 max-w-sm">A curated selection of recent projects, showcasing the synthesis of design and code.</p>
            </div>

            <div className="flex flex-col gap-8">
              {PROJECTS.map((project, index) => (
                <div key={project.id} className="group relative block overflow-hidden rounded-3xl bg-zinc-900 border border-zinc-800">
                  <div className="grid grid-cols-1 lg:grid-cols-12 items-center">
                    {/* Project Info */}
                    <div className="p-8 lg:p-16 lg:col-span-5 flex flex-col justify-between h-full order-2 lg:order-1 relative z-10">
                      <div>
                        <div className="flex items-center gap-4 mb-6">
                          <span className="text-lime-400 font-mono text-sm">0{index + 1}</span>
                          <span className="h-px w-12 bg-zinc-800"></span>
                          <span className="text-zinc-400 uppercase tracking-widest text-xs">{project.category}</span>
                        </div>
                        <h3 className="text-3xl md:text-5xl font-black tracking-tighter uppercase mb-6 group-hover:text-lime-400 transition-colors duration-500">
                          {project.title}
                        </h3>
                      </div>
                      
                      <div className="mt-12 flex items-center gap-4">
                        <button className="flex items-center justify-center w-14 h-14 rounded-full bg-zinc-800 text-zinc-50 group-hover:bg-lime-400 group-hover:text-zinc-950 transition-all duration-300">
                          <ArrowUpRight className="w-6 h-6" />
                        </button>
                        <span className="text-sm font-bold uppercase tracking-widest text-zinc-500 group-hover:text-zinc-50 transition-colors">
                          View Case Study
                        </span>
                      </div>
                    </div>
                    
                    {/* Project Image */}
                    <div className="lg:col-span-7 h-[400px] lg:h-[600px] overflow-hidden order-1 lg:order-2">
                      <img 
                        src={project.image} 
                        alt={project.title} 
                        loading="lazy"
                        className="w-full h-full object-cover img-hover-color scale-105 group-hover:scale-100 transition-transform duration-700 ease-out"
                      />
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* GALLERY SECTION (Optimized Images) */}
        <section id="gallery" className="py-32 px-6 border-t border-zinc-900 bg-zinc-950">
          <div className="max-w-7xl mx-auto">
            <h2 className="text-4xl md:text-6xl font-black tracking-tighter uppercase mb-16 text-center">
              Visual <span className="text-lime-400">Explorations</span>
            </h2>
            
            {/* Masonry-esque Grid */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {GALLERY.map((imgUrl, index) => (
                <div 
                  key={index} 
                  className={`relative overflow-hidden rounded-xl bg-zinc-900 group ${
                    index === 0 || index === 3 ? 'md:col-span-2 lg:col-span-2 aspect-video' : 'aspect-square'
                  }`}
                >
                  <img 
                    src={imgUrl} 
                    alt={`Gallery aesthetic ${index + 1}`}
                    loading="lazy"
                    // Adding decoding="async" for further optimization
                    decoding="async" 
                    className="w-full h-full object-cover img-hover-color transform group-hover:scale-105 transition-all duration-700"
                  />
                  {/* Overlay on hover */}
                  <div className="absolute inset-0 bg-zinc-950/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex items-center justify-center">
                    <span className="bg-lime-400 text-zinc-950 px-4 py-2 rounded-full font-bold uppercase tracking-widest text-xs translate-y-4 group-hover:translate-y-0 transition-transform duration-500">
                      Expand
                    </span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* CONTACT SECTION */}
        <section id="contact" className="py-32 px-6 border-t border-zinc-900 relative overflow-hidden">
          <div className="absolute top-0 right-0 w-full h-full bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-lime-900/20 via-zinc-950 to-zinc-950 -z-10"></div>
          
          <div className="max-w-7xl mx-auto flex flex-col items-center text-center">
            <p className="text-lime-400 font-mono text-sm uppercase tracking-widest mb-8">What's Next?</p>
            <h2 className="text-[10vw] md:text-[8vw] leading-none font-black tracking-tighter uppercase mb-12 hover:text-lime-400 transition-colors duration-500 cursor-pointer">
              Let's Talk.
            </h2>
            
            <a 
              href="mailto:hello@example.com" 
              className="inline-flex items-center justify-center gap-3 bg-zinc-50 text-zinc-950 px-8 py-4 rounded-full font-bold uppercase tracking-widest hover:bg-lime-400 transition-colors duration-300"
            >
              <Mail className="w-5 h-5" />
              hello@example.com
            </a>

            <div className="mt-32 w-full grid grid-cols-2 md:grid-cols-4 gap-4 border-t border-zinc-900 pt-12">
              <a href="#" className="flex flex-col items-center justify-center gap-4 p-8 border border-zinc-900 rounded-2xl hover:border-lime-400 hover:text-lime-400 transition-all group">
                <Github className="w-8 h-8 text-zinc-600 group-hover:text-lime-400 transition-colors" />
                <span className="uppercase text-xs font-bold tracking-widest">Github</span>
              </a>
              <a href="#" className="flex flex-col items-center justify-center gap-4 p-8 border border-zinc-900 rounded-2xl hover:border-lime-400 hover:text-lime-400 transition-all group">
                <Twitter className="w-8 h-8 text-zinc-600 group-hover:text-lime-400 transition-colors" />
                <span className="uppercase text-xs font-bold tracking-widest">Twitter</span>
              </a>
              <a href="#" className="flex flex-col items-center justify-center gap-4 p-8 border border-zinc-900 rounded-2xl hover:border-lime-400 hover:text-lime-400 transition-all group">
                <Linkedin className="w-8 h-8 text-zinc-600 group-hover:text-lime-400 transition-colors" />
                <span className="uppercase text-xs font-bold tracking-widest">LinkedIn</span>
              </a>
              <div className="flex flex-col items-center justify-center gap-4 p-8 border border-zinc-900 rounded-2xl bg-zinc-900/50">
                <span className="text-zinc-500 text-sm">Llanelli, Wales</span>
                <span className="uppercase text-xs font-bold tracking-widest text-zinc-600">Current Base</span>
              </div>
            </div>
          </div>
        </section>
      </main>

      <footer className="py-8 text-center border-t border-zinc-900 text-zinc-600 text-xs uppercase tracking-widest">
        <p>© 2026 Creative Engineer. All Rights Reserved.</p>
      </footer>
    </div>
  );
}