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

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

export const MobileServicesSection: React.FC<MobileServicesSectionProps> = ({ onClose }) => {
  const [isLoaded, setIsLoaded] = useState(false);
  const [expandedId, setExpandedId] = useState<string | null>(null);

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

  const services = [
    {
      id: "WEB",
      title: "Web Engineering",
      desc: "We build digital cathedrals. High-performance frontends.",
      tech: "Next.js / WebGL / Edge",
      humor: ">> LOG: We promise 100% Lighthouse scores until marketing asks for that third tracking pixel.",
      icon: "⚡"
    },
    {
      id: "MOB",
      title: "Mobile Synthesis",
      desc: "Cross-platform architectures that feel native.",
      tech: "React Native / Swift",
      humor: ">> LOG: Yes, it works on Android. No, we won't test it on a 2014 Samsung J5.",
      icon: "📱"
    },
    {
      id: "R&D",
      title: "R&D / Deep Tech",
      desc: "Turning whitepapers into profitable code.",
      tech: "LLM / Vision / AI",
      humor: ">> LOG: We spend 90% of our time reading arXiv papers and 10% praying the code compiles.",
      icon: "🔬"
    },
    {
      id: "MKT",
      title: "Social Warfare",
      desc: "Algorithmic marketing & growth hacking.",
      tech: "Viral Loops / Sentiment",
      humor: ">> LOG: We can make you famous, or at least get you a cease and desist order.",
      icon: "📢"
    }
  ];

  const toggleExpand = (id: string) => {
    setExpandedId(expandedId === id ? null : id);
  };

  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-emerald-500 text-xs animate-pulse">■</span>
            <span className="font-mono text-xs text-white/90 tracking-widest uppercase">Services</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>

      <div className="flex-1 overflow-y-auto overflow-x-hidden p-6 pb-32 no-scrollbar">
         <div className={`mb-8 transition-all duration-700 ${isLoaded ? 'translate-y-0 opacity-100' : 'translate-y-8 opacity-0'}`}>
            <h1 className="text-5xl font-light text-white leading-tight">System</h1>
            <h1 className="text-5xl font-serif italic text-emerald-500/50 leading-tight">Capabilities.</h1>
         </div>

         <div className="space-y-4">
            {services.map((s) => {
               const isOpen = expandedId === s.id;
               return (
                  <div 
                    key={s.id} 
                    onClick={() => toggleExpand(s.id)}
                    className={`border border-white/10 rounded-lg overflow-hidden transition-all duration-300 ${isOpen ? 'bg-emerald-900/10 border-emerald-500/30' : 'bg-white/5'}`}
                  >
                     <div className="p-6 flex items-start justify-between">
                        <div className="flex gap-4">
                           <span className="text-2xl pt-1">{s.icon}</span>
                           <div>
                              <h3 className={`text-xl font-light ${isOpen ? 'text-emerald-400' : 'text-white'}`}>{s.title}</h3>
                              <p className="text-white/50 text-xs mt-1 leading-relaxed pr-4">{s.desc}</p>
                           </div>
                        </div>
                        <span className={`text-white/30 transform transition-transform duration-300 ${isOpen ? 'rotate-180' : 'rotate-0'}`}>▼</span>
                     </div>
                     
                     {/* Expanded Content */}
                     <div className={`overflow-hidden transition-all duration-300 ${isOpen ? 'max-h-64' : 'max-h-0'}`}>
                        <div className="px-6 pb-6 pt-0">
                           <div className="h-[1px] w-full bg-white/5 mb-4"></div>
                           <p className="text-[10px] font-mono uppercase text-emerald-500/70 mb-1">Stack:</p>
                           <p className="text-xs text-white/60 font-mono mb-4">{s.tech}</p>
                           <div className="bg-black/20 p-3 rounded border border-dashed border-white/10">
                              <p className="text-[10px] text-white/40 font-mono italic leading-relaxed">{s.humor}</p>
                           </div>
                        </div>
                     </div>
                  </div>
               );
            })}
         </div>
         
         <div className="mt-12 text-center">
             <p className="text-white/20 font-mono text-[10px] uppercase">
                Tap modules for system logs
             </p>
         </div>

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