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

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

export const ServicesSection: React.FC<ServicesSectionProps> = ({ onClose }) => {
  const [isLoaded, setIsLoaded] = useState(false);
  const [hoveredIdx, setHoveredIdx] = useState<number | null>(null);

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

  const services = [
    {
      id: "SYS_WEB_01",
      title: "Web Engineering",
      desc: "We build digital cathedrals, not just websites. High-performance frontends that defy browser limitations.",
      technical: "Next.js / WebGL / WASM / Edge Rendering",
      humor: ">> LOG: We promise 100% Lighthouse scores until marketing asks for that third tracking pixel.",
      icon: "⚡"
    },
    {
      id: "SYS_MOB_02",
      title: "Mobile Synthesis",
      desc: "Cross-platform architectures that feel native. Smooth 120hz scrolling or we delete the repository.",
      technical: "React Native / Swift / Kotlin / Bridgeless Architecture",
      humor: ">> LOG: Yes, it works on Android. No, we won't test it on a 2014 Samsung J5.",
      icon: "📱"
    },
    {
      id: "SYS_RES_03",
      title: "R&D / Deep Tech",
      desc: "The core of our existence. Turning whitepapers into profitable, deployable code.",
      technical: "LLM Fine-tuning / Computer Vision / Predictive Models",
      humor: ">> LOG: We spend 90% of our time reading arXiv papers and 10% praying the code compiles.",
      icon: "🔬"
    },
    {
      id: "SYS_MKT_04",
      title: "Social Warfare",
      desc: "Algorithmic marketing. We position your brand exactly where the attention economy is bleeding.",
      technical: "Growth Hacking / Viral Loops / Sentiment Analysis",
      humor: ">> LOG: We can make you famous, or at least get you a cease and desist order.",
      icon: "📢"
    }
  ];

  return (
    <div className={`fixed inset-0 z-50 flex flex-col bg-[#050000]/95 backdrop-blur-xl overflow-hidden transition-opacity duration-700 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}>
      
      {/* Top Bar */}
      <div className="w-full max-w-[1400px] mx-auto px-6 py-6 md:px-12 flex justify-between items-center z-10 border-b border-white/5">
        <div className="flex items-center gap-4">
           <span className="text-emerald-500 font-mono text-xs animate-pulse">■</span>
           <span className="text-white/80 font-mono text-xs uppercase tracking-widest">Service Protocols</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">Terminate</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 */}
      <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-16 transition-all duration-1000 delay-100 ease-out ${isLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-12'}`}>
            <h1 className="text-5xl md:text-7xl lg:text-8xl font-light text-white tracking-tight leading-none">
              System <br />
              <span className="text-emerald-500/50 font-serif italic">Capabilities.</span>
            </h1>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
            
            {/* Left Column: Services Grid */}
            <div className="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-6">
              {services.map((service, idx) => (
                <div 
                  key={service.id}
                  onMouseEnter={() => setHoveredIdx(idx)}
                  onMouseLeave={() => setHoveredIdx(null)}
                  className={`group p-8 border border-white/10 bg-white/5 hover:bg-emerald-900/10 hover:border-emerald-500/30 transition-all duration-500 cursor-none-ish
                    ${isLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-12'}
                  `}
                  style={{ transitionDelay: `${200 + idx * 100}ms` }}
                >
                  <div className="flex justify-between items-start mb-6">
                    <span className="text-2xl">{service.icon}</span>
                    <span className="text-[10px] font-mono text-white/20 group-hover:text-emerald-500/50 transition-colors">{service.id}</span>
                  </div>
                  <h3 className="text-2xl font-light text-white mb-3 group-hover:text-emerald-400 transition-colors">{service.title}</h3>
                  <p className="text-white/50 text-sm leading-relaxed mb-6 group-hover:text-white/70 transition-colors">
                    {service.desc}
                  </p>
                  
                  <div className="w-full h-[1px] bg-white/10 group-hover:bg-emerald-500/30 transition-colors mb-4"></div>
                  
                  <div className="flex flex-wrap gap-2">
                     {service.technical.split('/').map((tag, i) => (
                       <span key={i} className="text-[9px] uppercase tracking-wider text-white/30 font-mono border border-white/5 px-2 py-1 rounded-sm">
                         {tag.trim()}
                       </span>
                     ))}
                  </div>
                </div>
              ))}
            </div>

            {/* Right Column: Interactive Monitor */}
            <div className={`hidden lg:block lg:col-span-4 transition-all duration-1000 delay-500 ${isLoaded ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-12'}`}>
              <div className="sticky top-8 border border-white/10 bg-black/40 p-6 min-h-[400px] flex flex-col">
                 <div className="flex justify-between items-center mb-6 border-b border-white/10 pb-4">
                    <span className="text-[10px] font-mono uppercase tracking-widest text-emerald-500">Monitor_Output</span>
                    <div className="flex gap-1">
                      <div className="w-1.5 h-1.5 bg-emerald-500 rounded-full animate-ping"></div>
                    </div>
                 </div>

                 <div className="flex-1 font-mono text-xs leading-loose">
                    {hoveredIdx !== null ? (
                      <>
                        <div className="text-white/40 mb-2">
                           <span className="text-emerald-500 mr-2">➜</span>
                           Target Identified: <span className="text-white">{services[hoveredIdx].title.toUpperCase()}</span>
                        </div>
                        <div className="text-white/40 mb-4">
                           <span className="text-emerald-500 mr-2">➜</span>
                           ID: {services[hoveredIdx].id}
                        </div>
                        <div className="text-white/40 mb-4">
                           <span className="text-emerald-500 mr-2">➜</span>
                           Stack Allocation:
                           <div className="pl-6 text-emerald-400/80 mt-1">
                              {services[hoveredIdx].technical}
                           </div>
                        </div>
                        <div className="mt-8 pt-4 border-t border-dashed border-white/10 text-white/60 italic">
                           {services[hoveredIdx].humor}
                        </div>
                      </>
                    ) : (
                      <div className="h-full flex flex-col justify-center items-center text-white/20">
                         <span className="text-4xl mb-4 opacity-20">⌬</span>
                         <p>System Idle.</p>
                         <p>Hover over a module to inspect.</p>
                      </div>
                    )}
                 </div>
                 
                 <div className="mt-6 pt-4 border-t border-white/10 flex justify-between text-[9px] text-white/20 font-mono uppercase">
                    <span>Mem: 40TB</span>
                    <span>Cpu: 12%</span>
                 </div>
              </div>
            </div>
            
          </div>

          {/* Mobile Humor for Services (since sidebar is hidden on mobile) */}
          <div className="lg:hidden mt-12 border-t border-white/5 pt-8">
             <div className="bg-white/5 p-4 rounded-sm border border-emerald-500/20">
                <p className="text-[10px] font-mono text-emerald-500 mb-2">{">>> SYSTEM MESSAGE"}</p>
                <p className="text-white/60 text-xs italic">
                  "We construct things with love and passion. And lots of caffeine. Mostly caffeine actually."
                </p>
             </div>
          </div>

          {/* Footer */}
          <div className="mt-32 border-t border-white/5 pt-8 text-center">
             <p className="text-white/30 font-mono text-xs">
                "We break things so you don't have to."
             </p>
          </div>

        </div>
      </div>
    </div>
  );
};