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

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

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

  useEffect(() => {
    const t = setTimeout(() => setIsLoaded(true), 100);
    return () => clearTimeout(t);
  }, []);

  const projects = [
    {
      id: "01",
      title: "Neural Lattice",
      description: "Self-optimizing infrastructure layer for distributed inference.",
      tech: "Python, Rust",
      year: "2024"
    },
    {
      id: "02",
      title: "Echo Protocol",
      description: "Real-time voice modulation with sub-20ms latency.",
      tech: "C++, WASM",
      year: "2023"
    },
    {
      id: "03",
      title: "Vantablack UI",
      description: "Experimental depth-based interface design system.",
      tech: "WebGL, R3F",
      year: "2025"
    }
  ];

  return (
    <div className={`fixed inset-0 z-50 flex flex-col bg-black/85 backdrop-blur-xl transition-opacity duration-500 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}>
      
      {/* Mobile Header */}
      <div className="flex justify-between items-center px-6 py-6 border-b border-white/10 bg-black/40 backdrop-blur-md z-10 shrink-0">
         <div className="flex items-center gap-2">
            <span className="text-red-500 text-xs animate-pulse">●</span>
            <span className="font-mono text-xs text-white/90 tracking-widest uppercase">Work_Index</span>
         </div>
         <button onClick={onClose} className="p-2 -mr-2 text-white/50 hover:text-white">
            <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>

      {/* Scrollable Content */}
      <div className="flex-1 overflow-y-auto overflow-x-hidden p-6 pb-32 no-scrollbar">
        <div className={`transition-all duration-700 ease-out ${isLoaded ? 'translate-y-0 opacity-100' : 'translate-y-8 opacity-0'}`}>
          <h1 className="text-5xl font-light text-white leading-tight mb-2">
            Selected
          </h1>
          <h1 className="text-5xl font-serif italic text-white/30 leading-tight mb-8">
            Works.
          </h1>
        </div>

        <div className="space-y-6">
          {projects.map((project, index) => (
            <div 
              key={project.id}
              className="bg-white/5 border border-white/10 rounded-lg p-6 active:scale-[0.98] transition-transform duration-300"
              style={{ transitionDelay: `${100 + index * 100}ms` }}
            >
              <div className="flex justify-between items-start mb-3">
                 <span className="text-red-500/80 font-mono text-xs">/{project.id}</span>
                 <span className="text-white/20 font-mono text-xs">{project.year}</span>
              </div>
              <h2 className="text-2xl font-light text-white mb-2">{project.title}</h2>
              <p className="text-white/60 text-sm leading-relaxed mb-4">{project.description}</p>
              <div className="flex flex-wrap gap-2">
                {project.tech.split(',').map(t => (
                  <span key={t} className="px-2 py-1 bg-white/5 border border-white/10 rounded text-[10px] uppercase text-white/40 tracking-wider">
                    {t.trim()}
                  </span>
                ))}
              </div>
            </div>
          ))}
        </div>

        {/* Footer Memo */}
        <div className="mt-12 p-4 border-l-2 border-red-500/30 bg-white/5 rounded-r-lg">
           <p className="text-[10px] font-mono text-white/40 uppercase mb-2">Internal Memo</p>
           <p className="text-white/60 text-xs font-mono italic">
             "Our code is heavy, but our spirits are light. Unless the server crashes."
           </p>
        </div>
      </div>
    </div>
  );
};