import React, { useEffect, useState } from 'react';

interface WorkSectionProps {
  onClose: () => void;
}

export const WorkSection: React.FC<WorkSectionProps> = ({ onClose }) => {
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    // Trigger animation on mount
    const t = setTimeout(() => setIsLoaded(true), 100);
    return () => clearTimeout(t);
  }, []);

  const projects = [
    {
      id: "01",
      title: "Neural Lattice",
      description: "A self-optimizing infrastructure layer for distributed inference. Reduces latency by 40% via predictive node hopping.",
      tech: "Python, Rust, CUDA",
      year: "2024"
    },
    {
      id: "02",
      title: "Echo Protocol",
      description: "Generative audio synthesis pipeline capable of real-time voice modulation with sub-20ms latency.",
      tech: "C++, WebAssembly",
      year: "2023"
    },
    {
      id: "03",
      title: "Vantablack UI",
      description: "An experimental interface design system focusing on light manipulation and depth-based hierarchy.",
      tech: "WebGL, React Three Fiber",
      year: "2025"
    }
  ];

  return (
    <div className={`fixed inset-0 z-50 flex flex-col bg-black/80 backdrop-blur-md overflow-hidden transition-opacity duration-700 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}>
      
      {/* Top Bar / Navigation */}
      <div className="w-full max-w-[1400px] mx-auto px-6 py-6 md:px-12 flex justify-between items-center z-10">
        <div className="flex items-center gap-4">
           <span className="text-red-500 font-mono text-xs animate-pulse">●</span>
           <span className="text-white/80 font-mono text-xs uppercase tracking-widest">Work Index_v2.0</span>
        </div>
        <button 
          onClick={onClose}
          className="group flex items-center gap-3 text-white/50 hover:text-white transition-colors"
        >
          <span className="text-[10px] uppercase tracking-widest group-hover:tracking-[0.2em] transition-all duration-300">Close Terminal</span>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
             <line x1="18" y1="6" x2="6" y2="18"></line>
             <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </button>
      </div>

      {/* Main Content Area - Scrollable */}
      <div className="flex-1 w-full overflow-y-auto overflow-x-hidden scroll-smooth custom-scrollbar">
        <div className="w-full max-w-[1400px] mx-auto px-6 md:px-12 pt-12 pb-32">
          
          {/* Header */}
          <div className={`mb-24 transition-all duration-1000 delay-100 ease-out ${isLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-12'}`}>
            <h1 className="text-6xl md:text-8xl lg:text-9xl font-light text-white tracking-tight leading-none">
              Selected <br />
              <span className="text-white/20 font-serif italic">Works.</span>
            </h1>
          </div>

          {/* Project List */}
          <div className="border-t border-white/10">
            {projects.map((project, index) => (
              <div 
                key={project.id}
                className={`group border-b border-white/10 py-12 md:py-16 grid grid-cols-1 md:grid-cols-12 gap-8 items-start transition-all duration-700 ease-out hover:bg-white/5 px-4 -mx-4`}
                style={{ transitionDelay: `${200 + index * 100}ms` }}
              >
                <div className="md:col-span-2">
                   <span className="font-mono text-xs text-red-500/80">/{project.id}</span>
                </div>
                <div className="md:col-span-4">
                  <h2 className="text-3xl md:text-4xl font-light text-white group-hover:text-red-500 transition-colors duration-300">
                    {project.title}
                  </h2>
                </div>
                <div className="md:col-span-4">
                  <p className="text-white/60 text-lg font-light leading-relaxed">
                    {project.description}
                  </p>
                  <div className="mt-4 flex gap-2">
                    {project.tech.split(',').map(t => (
                      <span key={t} className="px-2 py-1 border border-white/10 rounded-full text-[10px] uppercase tracking-wider text-white/40">
                        {t}
                      </span>
                    ))}
                  </div>
                </div>
                <div className="md:col-span-2 text-right md:text-right">
                  <span className="font-mono text-xs text-white/30">{project.year}</span>
                </div>
              </div>
            ))}
          </div>

          {/* Footer / Humor */}
          <div className={`mt-32 flex flex-col md:flex-row justify-between items-end gap-8 transition-all duration-1000 delay-500 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}>
            <div className="max-w-md">
              <div className="flex items-center gap-2 mb-4">
                <span className="w-1.5 h-1.5 bg-red-500 rounded-full"></span>
                <span className="text-[10px] font-mono uppercase text-white/40 tracking-widest">Internal Memo</span>
              </div>
              <p className="text-white/60 text-sm font-mono leading-relaxed border-l-2 border-white/10 pl-4">
                "We train models, but we don't skip leg day. Our code is heavy, but our spirits are light. Unless the server crashes. Then it's panic."
              </p>
            </div>
            
            <div className="text-right">
               <p className="text-[10px] font-mono text-white/20 uppercase tracking-widest">End of Stream</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};