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

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

export const MobileResearchSection: React.FC<MobileResearchSectionProps> = ({ onClose }) => {
  const [isLoaded, setIsLoaded] = useState(false);
  const [role, setRole] = useState<'passenger' | 'rider'>('passenger');

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

  const blogs = [
    { title: "Journey of MCP", date: "Apr 12", category: "Arch", url: "https://medium.com/@devarshia5/the-incredible-journey-of-mcp-unleashing-ais-true-potential-f386161c65e8" },
    { title: "Plato Predicted AI", date: "Jul 20", category: "Phil", url: "https://medium.com/@devarshia5/when-i-discovered-that-plato-predicted-ai-a-weekend-deep-dive-872e9421e280" },
    { title: "Time Is Universal", date: "Jul 05", category: "Entropy", url: "https://medium.com/@devarshia5/time-is-universal-burns-relentlessly-7f5ecfbc606f" }
  ];

  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-cyan-400 text-xs animate-pulse">◈</span>
            <span className="font-mono text-xs text-white/90 tracking-widest uppercase">R&D_Lab</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">
         {/* Title */}
         <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">Experimental</h1>
            <h1 className="text-5xl font-serif italic text-cyan-500/50 leading-tight">Protocols.</h1>
         </div>

         {/* Antaram Feature Card */}
         <div className="bg-gradient-to-b from-white/10 to-black/20 border border-white/10 rounded-xl p-6 mb-8 relative overflow-hidden">
            <div className="absolute -top-12 -right-12 w-32 h-32 bg-cyan-500/20 rounded-full blur-3xl"></div>
            
            <div className="flex items-center gap-2 mb-4">
               <span className="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-pulse"></span>
               <span className="text-[10px] font-mono uppercase text-cyan-300 tracking-widest">Live Beta</span>
            </div>
            
            <h2 className="text-3xl font-light text-white mb-2">Antaram</h2>
            <p className="text-white/60 text-sm mb-6">Open-source last-mile logistics. No middlemen.</p>
            
            {/* Interactive Toggle */}
            <div className="bg-black/30 rounded-lg p-4 border border-white/5 mb-4">
               <div className="flex bg-white/10 rounded-full p-1 mb-4 relative h-10">
                  <div className={`absolute top-1 bottom-1 w-[calc(50%-4px)] rounded-full bg-cyan-600 transition-all duration-300 ${role === 'rider' ? 'translate-x-[100%] ml-1' : 'translate-x-0'}`}></div>
                  <button onClick={() => setRole('passenger')} className="flex-1 z-10 text-[10px] font-mono uppercase text-white text-center flex items-center justify-center">Passenger</button>
                  <button onClick={() => setRole('rider')} className="flex-1 z-10 text-[10px] font-mono uppercase text-white text-center flex items-center justify-center">Rider</button>
               </div>
               <p className="text-center text-xs font-mono text-cyan-400 animate-pulse">
                  {role === 'passenger' ? "Searching for drivers..." : "Scanning route..."}
               </p>
            </div>

            <a href="https://www.antaram.org" target="_blank" rel="noreferrer" className="block w-full py-3 text-center border border-cyan-500/30 text-cyan-400 text-xs font-mono uppercase tracking-widest hover:bg-cyan-500/10 rounded-lg transition-all">
               Launch Antaram
            </a>
         </div>

         {/* Field Notes (Blogs) */}
         <div className="mt-12">
            <h3 className="text-xl font-light text-white mb-6 flex items-center gap-2">
               Field Notes <span className="text-white/20 text-xs font-mono mt-1">/ Blogs</span>
            </h3>
            <div className="space-y-4">
               {blogs.map((blog, i) => (
                  <a key={i} href={blog.url} target="_blank" rel="noreferrer" className="block bg-white/5 border border-white/5 p-4 rounded-lg active:bg-white/10">
                     <div className="flex justify-between items-center mb-2">
                        <span className="text-[10px] font-mono text-cyan-500 border border-cyan-500/20 px-1.5 rounded">{blog.category}</span>
                        <span className="text-[10px] text-white/30">{blog.date}</span>
                     </div>
                     <h4 className="text-white/90 font-light leading-snug">{blog.title}</h4>
                  </a>
               ))}
            </div>
         </div>

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