import React, { useState, useEffect } from 'react';
import { Cpu, Zap, Activity, Thermometer, ShieldAlert, Layers, Infinity } from 'lucide-react';

const QuantumCompute: React.FC = () => {
  const [qubits, setQubits] = useState(2048);
  const [temp, setTemp] = useState(0.001);

  useEffect(() => {
    const interval = setInterval(() => {
      setQubits(prev => Math.max(2000, Math.min(2048, prev + (Math.random() > 0.8 ? -1 : 1))));
      setTemp(prev => Math.max(0.001, Math.min(0.005, prev + (Math.random() - 0.5) * 0.001)));
    }, 2000);
    return () => clearInterval(interval);
  }, []);

  return (
    <section className="py-40 border-b border-zinc-900 bg-zinc-950/40 relative">
      <div className="max-w-7xl mx-auto px-10 text-center">
        <div className="space-y-6 mb-16">
          <div className="inline-flex items-center gap-3 px-4 py-1.5 bg-cyan-500/10 border border-cyan-500/20 rounded-full mx-auto">
            <div className="w-1.5 h-1.5 rounded-full bg-cyan-500 animate-pulse"></div>
            <span className="text-[9px] font-black uppercase tracking-[0.3em] text-cyan-500">Forecast_Node</span>
          </div>
          <h2 className="text-7xl lg:text-9xl font-black italic text-white uppercase tracking-tighter leading-none">
            Quantum <br /> <span className="text-cyan-500 not-italic">Compute</span>
          </h2>
        </div>

        <p className="text-zinc-500 text-3xl max-w-5xl mx-auto leading-relaxed font-bold italic mb-32">
          "Harnessing the power of <span className="text-white">qubit stabilization</span> to forecast complex market shocks. Our compute nodes are cooled to absolute zero to maintain the <span className="text-cyan-500">integrity</span> of our neural forecasting."
        </p>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          {[
            { label: 'Stable Qubits', val: qubits, sub: 'Error Correction High', icon: Cpu },
            { label: 'Entropy', val: `${temp.toFixed(3)}%`, sub: 'Thermal Shield Active', icon: Thermometer },
            { label: 'Shocks', val: 'SIMULATED', sub: 'Hyper-Inflation Q3', icon: ShieldAlert },
            { label: 'Drift', val: 'CORRECTED', sub: 'Sub-Space Alignment', icon: Activity },
          ].map((q, i) => (
            <div key={i} className="p-12 border border-zinc-900 rounded-[4rem] bg-black group hover:border-cyan-500/30 transition-all shadow-2xl relative overflow-hidden text-left">
               <div className="absolute top-0 right-0 p-8 opacity-5 group-hover:opacity-10 transition-opacity">
                  <q.icon size={120} />
               </div>
               <div className="w-14 h-14 bg-cyan-500/10 text-cyan-500 rounded-3xl flex items-center justify-center mb-10 group-hover:scale-110 transition-transform shadow-2xl">
                  <q.icon size={28} />
               </div>
               <p className="text-[10px] font-black text-zinc-600 uppercase tracking-widest mb-2 flex items-center gap-2">
                 <span className="w-1 h-1 rounded-full bg-cyan-500"></span>
                 {q.label}
               </p>
               <h4 className="text-4xl font-black text-white uppercase italic tracking-tighter mb-2">{q.val}</h4>
               <p className="text-[9px] font-bold text-cyan-500 uppercase tracking-[0.3em]">{q.sub}</p>
            </div>
          ))}
        </div>

        <div className="mt-40 p-16 bg-zinc-950 border border-zinc-900 rounded-[5rem] flex flex-col md:flex-row items-center justify-between gap-16 shadow-inner relative overflow-hidden">
           <div className="absolute inset-0 opacity-[0.03] pointer-events-none bg-[size:20px_20px] bg-[radial-gradient(#3b82f6_1px,transparent_1px)]"></div>
           <div className="flex items-center gap-10 relative z-10 text-left">
              <div className="w-24 h-24 bg-cyan-500/5 rounded-[3rem] border border-cyan-500/10 flex items-center justify-center text-cyan-500">
                 <Infinity size={48} />
              </div>
              <div className="space-y-2">
                 <h5 className="text-2xl font-black text-white italic uppercase tracking-tighter">Sub-Space Link</h5>
                 <p className="text-zinc-500 text-sm font-medium leading-relaxed max-w-lg">Persistent entanglement verified across all 24 sub-space clusters. Forecasting latency: <span className="text-cyan-500 mono">0.0004ns</span>.</p>
              </div>
           </div>
           <div className="flex gap-4 relative z-10">
              <div className="h-12 w-48 bg-zinc-900 border border-zinc-800 rounded-2xl flex items-center px-6 gap-4">
                 <div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></div>
                 <span className="text-[9px] font-black text-zinc-500 uppercase tracking-widest">Coherence: 99%</span>
              </div>
           </div>
        </div>
      </div>
    </section>
  );
};

export default QuantumCompute;