import React, { useState } from 'react';

// 🚀 Nitro SSR Visualizer

export default function NitroDemo() {
    const [deployedLocation, setDeployedLocation] = useState('central'); // central (node) or edge

    return (
        <div className="bg-slate-50 dark:bg-slate-950 p-8 rounded-3xl border border-slate-200 dark:border-slate-800 shadow-xl">
             <div className="flex justify-between items-center mb-10">
                <h3 className="text-2xl font-black text-gray-900 dark:text-white flex items-center gap-3">
                    <span className="text-red-500">🧨</span> Nitro Engine
                </h3>
                <div className="flex bg-slate-200 dark:bg-slate-900 p-1 rounded-xl">
                    <button 
                        onClick={() => setDeployedLocation('central')}
                        className={`px-6 py-2 rounded-lg font-bold text-sm transition-all ${deployedLocation === 'central' ? 'bg-white dark:bg-slate-800 shadow text-gray-600' : 'text-slate-500'}`}
                    >
                        Legacy Node (US-East)
                    </button>
                    <button 
                        onClick={() => setDeployedLocation('edge')}
                        className={`px-6 py-2 rounded-lg font-bold text-sm transition-all ${deployedLocation === 'edge' ? 'bg-white dark:bg-slate-800 shadow text-red-500' : 'text-slate-500'}`}
                    >
                        Edge Network (Global)
                    </button>
                </div>
            </div>

            <div className="relative border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-3xl p-8 min-h-[400px] bg-slate-100 dark:bg-black/40 overflow-hidden">
                
                {/* World Map Background (Abstract) */}
                <div className="absolute inset-0 opacity-10 flex items-center justify-center pointer-events-none">
                    <span className="text-[200px] grayscale opacity-20">🌍</span>
                </div>

                {deployedLocation === 'central' ? (
                    <div className="relative h-full flex items-center justify-center">
                         <div className="flex flex-col items-center animate-in zoom-in duration-500">
                             <div className="w-24 h-24 bg-red-600 rounded-full flex items-center justify-center shadow-[0_0_50px_rgba(220,38,38,0.5)] z-10">
                                <span className="text-4xl text-white">🖥️</span>
                             </div>
                             <div className="mt-4 font-bold text-red-600 bg-white dark:bg-slate-900 px-4 py-2 rounded-full border border-red-200 shadow-lg">
                                 Single Origin
                             </div>
                             <div className="text-xs text-gray-500 mt-2">High Latency for Asia/Europe</div>
                             
                             {/* Arrows */}
                             <div className="absolute w-[300px] h-[300px] border border-red-500/30 rounded-full animate-ping"></div>
                         </div>
                    </div>
                ) : (
                    <div className="relative h-full">
                         {/* Distributed Nodes */}
                         {[
                             { top: '20%', left: '20%', name: 'SFO' },
                             { top: '20%', left: '80%', name: 'LHR' },
                             { top: '80%', left: '30%', name: 'GRU' },
                             { top: '70%', left: '70%', name: 'SIN' },
                             { top: '50%', left: '50%', name: 'FRA' },
                         ].map((node, i) => (
                             <div 
                                key={i}
                                className="absolute flex flex-col items-center animate-in zoom-in duration-500"
                                style={{ top: node.top, left: node.left, animationDelay: `${i * 100}ms` }}
                             >
                                <div className="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center shadow-[0_0_30px_rgba(34,197,94,0.5)] z-10">
                                    <span className="text-white">🚀</span>
                                </div>
                                <div className="mt-2 font-bold text-[10px] text-green-600 bg-white dark:bg-slate-900 px-2 py-1 rounded-full border border-green-200 shadow-sm">
                                    {node.name}
                                </div>
                             </div>
                         ))}
                         
                         <div className="absolute bottom-4 left-4 p-4 bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 shadow-lg max-w-xs">
                             <div className="text-xs font-bold text-gray-400 uppercase mb-1">Status</div>
                             <div className="text-green-500 font-bold flex items-center gap-2">
                                 <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
                                 Replicated to 35 Regions
                             </div>
                         </div>
                    </div>
                )}
            </div>
        </div>
    );
}