
import React, { useEffect, useState, useRef } from 'react';
import { 
  ArrowLeft, Shield, Lock, Eye, Server, Cpu, Globe, 
  ChevronRight, PlayCircle, Fingerprint, Scan, Activity, 
  Radio, Terminal, Box, Building2, Users, MapPin, 
  Menu, X, Zap, ShieldCheck, AlertCircle, Cpu as Chip,
  Network, Database, HardDrive, ShieldAlert, Key,
  ArrowRight, ShieldCheck as Verified, Loader2
} from 'lucide-react';
import { Link } from 'react-router-dom';

export const Steelguard: React.FC = () => {
  const [scrolled, setScrolled] = useState(false);
  const [activePage, setActivePage] = useState<'home' | 'solutions' | 'hardware' | 'security'>('home');
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  
  // Hero Scanner State
  const [isHovered, setIsHovered] = useState(false);
  const [isIdentified, setIsIdentified] = useState(false);
  const [randomData, setRandomData] = useState({ temp: '32.4', loss: '0.00', nodes: '1248' });
  // Fix: Use ReturnType<typeof setTimeout> instead of NodeJS.Timeout to avoid namespace errors in browser environment
  const scanTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  // Fix: Use ReturnType<typeof setInterval> instead of NodeJS.Timeout to avoid namespace errors in browser environment
  const dataIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);

  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // Handle Scanning Logic
  useEffect(() => {
    if (isHovered) {
      // Start randomizing data
      dataIntervalRef.current = setInterval(() => {
        setRandomData({
          temp: (Math.random() * 5 + 30).toFixed(1),
          loss: (Math.random() * 0.5).toFixed(2),
          nodes: Math.floor(Math.random() * 50 + 1200).toString()
        });
      }, 80);

      // Set identification timeout
      scanTimerRef.current = setTimeout(() => {
        setIsIdentified(true);
        if (dataIntervalRef.current) clearInterval(dataIntervalRef.current);
      }, 1000);
    } else {
      // Reset
      if (scanTimerRef.current) clearTimeout(scanTimerRef.current);
      if (dataIntervalRef.current) clearInterval(dataIntervalRef.current);
      setIsIdentified(false);
      setRandomData({ temp: '32.4', loss: '0.00', nodes: '1248' });
    }

    return () => {
      if (scanTimerRef.current) clearTimeout(scanTimerRef.current);
      if (dataIntervalRef.current) clearInterval(dataIntervalRef.current);
    };
  }, [isHovered]);

  const navItems = [
    { id: 'home', label: 'Rendszer' },
    { id: 'solutions', label: 'Megoldások' },
    { id: 'hardware', label: 'Hardver' },
    { id: 'security', label: 'Biztonság' }
  ];

  return (
    <div className="font-sans bg-[#020205] text-gray-100 min-h-screen selection:bg-cyan-500 selection:text-black overflow-x-hidden relative">
       
       <style>{`
        @keyframes grid-move {
          0% { transform: perspective(800px) rotateX(60deg) translateY(0); }
          100% { transform: perspective(800px) rotateX(60deg) translateY(50px); }
        }
        @keyframes scanline {
          0% { transform: translateY(-100%); opacity: 0; }
          50% { opacity: 1; }
          100% { transform: translateY(100%); opacity: 0; }
        }
        @keyframes pulse-slow {
          0%, 100% { opacity: 0.3; transform: scale(1); }
          50% { opacity: 0.6; transform: scale(1.05); }
        }
        .cyber-grid {
          background-image: 
            linear-gradient(to right, rgba(6, 182, 212, 0.1) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(6, 182, 212, 0.1) 1px, transparent 1px);
          background-size: 50px 50px;
          mask-image: radial-gradient(circle, black, transparent 80%);
        }
        .glass-card {
          background: rgba(10, 15, 30, 0.4);
          backdrop-filter: blur(15px);
          border: 1px solid rgba(6, 182, 212, 0.15);
          box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
        }
        .text-glow {
          text-shadow: 0 0 15px rgba(34, 211, 238, 0.8), 0 0 30px rgba(34, 211, 238, 0.4);
        }
        .neon-glow-btn:hover {
          box-shadow: 0 0 25px rgba(34, 211, 238, 0.6), 0 0 50px rgba(34, 211, 238, 0.2);
          transform: translateY(-2px);
        }
        .button-clip {
          clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%);
        }
       `}</style>

       {/* Back to Reality Button */}
       <div className="fixed bottom-4 right-4 md:bottom-8 md:right-8 z-[60]">
        <Link to="/#references">
          <button className="bg-white/10 backdrop-blur-xl border border-white/20 text-white px-5 py-2.5 rounded-full text-[10px] font-black tracking-[0.2em] hover:bg-white hover:text-black transition-all flex items-center shadow-2xl group">
            <ArrowLeft className="w-4 h-4 mr-2 group-hover:-translate-x-1 transition-transform" /> VISSZA A PORTFÓLIÓHOZ
          </button>
        </Link>
      </div>

      {/* Animated Background */}
      <div className="fixed inset-0 z-0 pointer-events-none">
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-[1000px] cyber-grid animate-[grid-move_10s_linear_infinite]"></div>
        <div className="absolute top-[10%] left-[20%] w-[500px] h-[500px] bg-cyan-900/20 blur-[120px] rounded-full animate-pulse-slow"></div>
        <div className="absolute bottom-[10%] right-[10%] w-[600px] h-[600px] bg-blue-900/10 blur-[150px] rounded-full animate-pulse-slow" style={{ animationDelay: '2s' }}></div>
      </div>

      {/* Navbar */}
      <nav className={`fixed w-full z-50 transition-all duration-700 border-b ${scrolled ? 'bg-[#020205]/90 backdrop-blur-2xl border-cyan-500/20 py-2 shadow-[0_10px_30px_rgba(0,0,0,0.5)]' : 'bg-transparent border-transparent py-6'}`}>
        <div className="max-w-[1400px] mx-auto px-6 md:px-12 flex items-center justify-between">
          <div className="flex items-center gap-4 cursor-pointer group" onClick={() => setActivePage('home')}>
            <div className="relative">
              <div className="absolute inset-0 bg-cyan-500 blur-lg opacity-30 group-hover:opacity-80 transition-opacity"></div>
              <div className="w-10 h-10 md:w-12 md:h-12 bg-gray-900 border border-cyan-500/50 flex items-center justify-center relative z-10 rounded-xl overflow-hidden group-hover:shadow-[0_0_20px_rgba(34,211,238,0.5)] transition-shadow">
                <Shield className="text-cyan-400 w-5 h-5 md:w-6 md:h-6" />
                <div className="absolute inset-0 bg-gradient-to-t from-cyan-500/20 to-transparent"></div>
              </div>
            </div>
            <div className="flex flex-col">
              <span className="text-xl md:text-2xl font-black tracking-tighter text-white font-mono uppercase">Steelguard</span>
              <span className="text-[8px] text-cyan-600 tracking-[0.4em] uppercase font-bold">Enterprise Defense</span>
            </div>
          </div>
          
          <div className="hidden lg:flex items-center space-x-2 font-mono">
             {navItems.map((item) => (
               <button 
                 key={item.id} 
                 onClick={() => setActivePage(item.id as any)}
                 className={`px-5 py-2 rounded-lg text-[11px] font-black tracking-widest uppercase transition-all ${activePage === item.id ? 'text-cyan-400 bg-cyan-400/5 shadow-[0_0_20px_rgba(34,211,238,0.2)]' : 'text-gray-500 hover:text-gray-200'}`}
               >
                 {item.label}
               </button>
             ))}
             <div className="h-4 w-px bg-gray-800 mx-4"></div>
             <button className="bg-cyan-600 hover:bg-cyan-500 text-black px-6 py-2.5 rounded-lg text-[10px] font-black uppercase tracking-widest transition-all shadow-lg shadow-cyan-900/20 active:scale-95 hover:shadow-[0_0_30px_rgba(34,211,238,0.7)]">
                Rendszer Belépés
             </button>
          </div>

          <button onClick={() => setMobileMenuOpen(!mobileMenuOpen)} className="lg:hidden p-2 text-cyan-400">
             {mobileMenuOpen ? <X /> : <Menu />}
          </button>
        </div>
      </nav>

      {/* Main Content */}
      <main className="relative z-10 pt-20">
        
        {activePage === 'home' && (
          <>
            {/* Hero Section */}
            <header className="min-h-screen flex items-center px-6 md:px-12 max-w-[1400px] mx-auto pt-10">
               <div className="grid lg:grid-cols-2 gap-16 items-center">
                 <div className="text-center lg:text-left space-y-8">
                   <div className="inline-flex items-center gap-3 px-4 py-1.5 border border-cyan-500/30 bg-cyan-950/20 text-cyan-400 text-[10px] font-bold tracking-[0.3em] uppercase rounded-full backdrop-blur-md">
                     <Terminal className="w-3 h-3" />
                     <span className="animate-pulse">Rendszer állapota: Aktív</span>
                   </div>
                   
                   <h1 className="text-5xl md:text-8xl font-black text-white leading-[0.85] tracking-tighter uppercase font-mono italic">
                     Abszolút <br/>
                     <span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-600 drop-shadow-2xl">Digitális</span> <br/>
                     Pajzs
                   </h1>
                   
                   <p className="text-sm md:text-xl text-gray-400 max-w-xl mx-auto lg:mx-0 font-medium leading-relaxed">
                     Kvantumszintű titkosítás és mesterséges intelligencia alapú fenyegetés-elemzés nagyvállalati környezetre tervezve. <span className="text-cyan-400 font-bold text-glow">Zero-Trust</span> architektúra a teljes biztonságért.
                   </p>
                   
                   <div className="flex flex-col sm:flex-row justify-center lg:justify-start gap-5">
                     <button className="bg-white text-black px-10 py-5 font-black uppercase tracking-[0.2em] text-xs button-clip hover:bg-cyan-400 transition-all shadow-xl shadow-white/10 neon-glow-btn">
                       Rendszer Indítása
                     </button>
                     <button className="border border-cyan-500/30 bg-cyan-500/5 text-cyan-400 px-10 py-5 font-black uppercase tracking-[0.2em] text-xs button-clip hover:bg-cyan-500/20 transition-all hover:shadow-[0_0_20px_rgba(34,211,238,0.3)]">
                       Technikai Specifikáció
                     </button>
                   </div>

                   <div className="pt-10 flex flex-wrap justify-center lg:justify-start gap-8 opacity-40">
                      <div className="flex items-center gap-2 font-mono text-[10px] font-bold uppercase tracking-widest"><ShieldCheck className="w-4 h-4" /> ISO 27001 Certified</div>
                      <div className="flex items-center gap-2 font-mono text-[10px] font-bold uppercase tracking-widest"><Lock className="w-4 h-4" /> 256-bit AES</div>
                      <div className="flex items-center gap-2 font-mono text-[10px] font-bold uppercase tracking-widest"><Chip className="w-4 h-4" /> hardware-Encrypted</div>
                   </div>
                 </div>

                 {/* HERO INTERACTIVE SCANNER */}
                 <div className="relative hidden lg:block group/hero" 
                      onMouseEnter={() => setIsHovered(true)} 
                      onMouseLeave={() => setIsHovered(false)}>
                   <div className={`glass-card rounded-[40px] aspect-square flex items-center justify-center p-12 relative overflow-hidden transition-all duration-700 border-2 ${isIdentified ? 'border-green-500 shadow-[0_0_60px_rgba(34,197,94,0.3)]' : 'border-cyan-500/20 shadow-[0_0_30px_rgba(34,211,238,0.05)]'}`}>
                      
                      <div className={`absolute inset-0 bg-gradient-to-br transition-colors duration-700 ${isIdentified ? 'from-green-500/10' : 'from-cyan-500/10'} to-transparent`}></div>
                      
                      {/* Interactive Scanning Line */}
                      <div className={`absolute top-0 left-0 w-full h-[3px] shadow-2xl transition-all duration-300 z-20 ${isIdentified ? 'bg-green-400 shadow-green-500 opacity-0' : isHovered ? 'bg-cyan-400 shadow-cyan-400 animate-[scanline_1s_linear_infinite]' : 'bg-cyan-500/50 shadow-cyan-500/20 animate-[scanline_4s_linear_infinite]'}`}></div>
                      
                      {/* Center Module */}
                      <div className="relative z-10 w-full h-full flex items-center justify-center">
                         {/* Orbiting Rings */}
                         <div className={`absolute w-[120%] h-[120%] border rounded-full transition-all duration-700 ${isIdentified ? 'border-green-500/30 animate-[spin_5s_linear_infinite]' : 'border-cyan-500/5 animate-[spin_30s_linear_infinite]'}`}></div>
                         <div className={`absolute w-[80%] h-[80%] border rounded-full transition-all duration-700 ${isIdentified ? 'border-green-500/50 animate-[spin_3s_linear_infinite_reverse]' : 'border-cyan-500/10 animate-[spin_20s_linear_infinite_reverse]'}`}></div>
                         
                         {/* Core Fingerprint Circle */}
                         <div className={`w-64 h-64 rounded-full border flex items-center justify-center transition-all duration-700 relative bg-gray-900 ${isIdentified ? 'border-green-400 shadow-[0_0_150px_rgba(34,197,94,0.4)] scale-110' : 'border-cyan-500/30 shadow-[0_0_100px_rgba(6,182,212,0.2)]'}`}>
                            
                            {/* Scanning Pulse Overlay */}
                            {isHovered && !isIdentified && (
                              <div className="absolute inset-0 rounded-full bg-cyan-400/20 animate-pulse"></div>
                            )}

                            <Fingerprint className={`w-32 h-32 transition-all duration-700 ${isIdentified ? 'text-green-400' : isHovered ? 'text-cyan-300 scale-105' : 'text-cyan-400'}`} />
                            
                            {/* Verification Badge */}
                            <div className={`absolute -bottom-4 bg-gray-900 border px-4 py-1.5 rounded-full transition-all duration-700 transform ${isIdentified ? 'scale-100 opacity-100 border-green-500 translate-y-0' : 'scale-50 opacity-0 border-cyan-500 translate-y-4'}`}>
                               <div className="flex items-center gap-2">
                                  <Verified className="w-4 h-4 text-green-400" />
                                  <span className="text-[10px] font-black text-white uppercase tracking-widest">Access Granted</span>
                               </div>
                            </div>
                         </div>
                      </div>

                      {/* Dynamic Data Readouts */}
                      <div className={`absolute top-10 left-10 font-mono text-[9px] leading-tight transition-colors duration-700 ${isIdentified ? 'text-green-400' : isHovered ? 'text-cyan-400' : 'text-cyan-500/60'}`}>
                         CORE_TEMP: {randomData.temp}C<br/>
                         ENCRYPT_MODE: RSA_4096<br/>
                         SEC_LAYER: {isIdentified ? 'V5_ULTRA' : 'V4_ACTIVE'}<br/>
                         {isHovered && <span className={`font-bold ${isIdentified ? 'text-green-300' : 'text-cyan-300'}`}>BIO_AUTH: {isIdentified ? 'VERIFIED' : 'SCANNING...'}</span>}
                      </div>

                      <div className={`absolute bottom-10 right-10 font-mono text-[9px] text-right transition-colors duration-700 ${isIdentified ? 'text-green-400' : isHovered ? 'text-cyan-400' : 'text-cyan-500/60'}`}>
                         PACKET_LOSS: {randomData.loss}%<br/>
                         LATENCY: 0.04ms<br/>
                         NODES: {randomData.nodes}/1248<br/>
                         {isHovered && <span className={`font-bold ${isIdentified ? 'text-green-300 animate-pulse' : 'text-cyan-300'}`}>{isIdentified ? 'ENCRYPTION: MAX' : 'HANDSHAKE...'}</span>}
                      </div>
                   </div>
                 </div>
               </div>
            </header>

            {/* Feature Grid */}
            <section className="py-24 bg-transparent px-6">
              <div className="max-w-[1400px] mx-auto">
                 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                    {[
                      { icon: ShieldAlert, title: 'AI Védelem', desc: 'Öntanuló algoritmusok, melyek felismerik a nulladik napi támadásokat is.' },
                      { icon: Network, title: 'Mesh Hálózat', desc: 'Decentralizált adatforgalom, amely garantálja a 100%-os rendelkezésre állást.' },
                      { icon: HardDrive, title: 'Adatszéf', desc: 'Fizikailag elkülönített, titkosított adattárolási központok világszerte.' },
                      { icon: Key, title: 'Biometrikus Auth', desc: 'Többtényezős azonosítás retina, ujjlenyomat és hangalapú validációval.' }
                    ].map((f, i) => (
                      <div key={i} className="glass-card p-8 rounded-[32px] hover:border-cyan-400/50 transition-all group cursor-pointer hover:-translate-y-2 hover:shadow-[0_0_35px_rgba(34,211,238,0.2)]">
                         <div className="w-14 h-14 bg-cyan-950/30 rounded-2xl flex items-center justify-center text-cyan-400 mb-6 group-hover:bg-cyan-500 group-hover:text-black transition-all group-hover:shadow-[0_0_20px_rgba(34,211,238,0.6)]">
                            <f.icon className="w-7 h-7" />
                         </div>
                         <h3 className="text-lg font-bold text-white mb-3 uppercase font-mono tracking-tighter group-hover:text-cyan-300 transition-colors">{f.title}</h3>
                         <p className="text-gray-400 text-xs leading-relaxed">{f.desc}</p>
                      </div>
                    ))}
                 </div>
              </div>
            </section>
          </>
        )}

        {/* --- SOLUTIONS PAGE --- */}
        {activePage === 'solutions' && (
           <div className="py-24 px-6 max-w-[1400px] mx-auto min-h-screen">
              <div className="flex flex-col md:flex-row justify-between items-end mb-16 gap-8 text-glow">
                 <div className="max-w-2xl">
                    <h2 className="text-sm font-black text-cyan-500 uppercase tracking-[0.5em] mb-4">Megoldásaink</h2>
                    <p className="text-4xl md:text-6xl font-black text-white leading-none tracking-tighter uppercase font-mono">Ipari szintű <br/>biztonsági stack</p>
                 </div>
                 <div className="text-gray-500 font-mono text-xs uppercase tracking-widest border-l border-gray-800 pl-6 hidden md:block">
                    Full Spectrum <br/>Protection Suite v.8.2
                 </div>
              </div>

              <div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
                 <div className="glass-card rounded-[48px] overflow-hidden group border-cyan-500/10 hover:shadow-[0_0_40px_rgba(34,211,238,0.1)] transition-all">
                    <div className="h-[400px] relative overflow-hidden">
                       <img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc51?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80" alt="Server" className="w-full h-full object-cover grayscale opacity-50 group-hover:scale-110 group-hover:opacity-80 transition-all duration-1000" />
                       <div className="absolute inset-0 bg-gradient-to-t from-[#020205] via-transparent to-transparent"></div>
                       <div className="absolute top-10 right-10 bg-cyan-500 text-black px-4 py-1.5 rounded-full text-[10px] font-black uppercase tracking-widest group-hover:shadow-[0_0_20px_rgba(34,211,238,0.6)] transition-all">Kritikus Infrastruktúra</div>
                    </div>
                    <div className="p-10 md:p-12">
                       <h3 className="text-3xl font-black text-white mb-6 uppercase tracking-tighter font-mono italic group-hover:text-glow transition-all">Kormányzati Szintű Titkosítás</h3>
                       <p className="text-gray-400 mb-10 leading-relaxed">Megoldásaink a legmagasabb szintű állami és katonai sztenderdeknek felelnek meg. Biztonságos adatcsere, védett kommunikációs csatornák és zéró hozzáférésű adattárolás.</p>
                       <button className="flex items-center gap-2 text-cyan-400 font-black text-xs uppercase tracking-[0.3em] hover:text-white transition-colors group/btn hover:text-glow">
                          Részletes specifikáció <ChevronRight className="w-4 h-4 group-hover/btn:translate-x-1 transition-transform" />
                       </button>
                    </div>
                 </div>

                 <div className="glass-card rounded-[48px] overflow-hidden group border-cyan-500/10 hover:shadow-[0_0_40px_rgba(34,211,238,0.1)] transition-all">
                    <div className="h-[400px] relative overflow-hidden">
                       <img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80" alt="Control Room" className="w-full h-full object-cover grayscale opacity-50 group-hover:scale-110 group-hover:opacity-80 transition-all duration-1000" />
                       <div className="absolute inset-0 bg-gradient-to-t from-[#020205] via-transparent to-transparent"></div>
                       <div className="absolute top-10 right-10 bg-cyan-500 text-black px-4 py-1.5 rounded-full text-[10px] font-black uppercase tracking-widest group-hover:shadow-[0_0_20px_rgba(34,211,238,0.6)] transition-all">Global Monitoring</div>
                    </div>
                    <div className="p-10 md:p-12">
                       <h3 className="text-3xl font-black text-white mb-6 uppercase tracking-tighter font-mono italic group-hover:text-glow transition-all">24/7 AI Felügyeleti Központ</h3>
                       <p className="text-gray-400 mb-10 leading-relaxed">Globális SOC (Security Operations Center) hálózatunk folyamatosan figyeli a gyanús aktivitásokat. Az incidensek kezelése automatizált, az emberi beavatkozás csak validálásra szolgál.</p>
                       <button className="flex items-center gap-2 text-cyan-400 font-black text-xs uppercase tracking-[0.3em] hover:text-white transition-colors group/btn hover:text-glow">
                          Részletes specifikáció <ChevronRight className="w-4 h-4 group-hover/btn:translate-x-1 transition-transform" />
                       </button>
                    </div>
                 </div>
              </div>
           </div>
        )}

        {/* --- HARDWARE PAGE --- */}
        {activePage === 'hardware' && (
          <div className="py-24 px-6 max-w-[1400px] mx-auto min-h-screen">
             <div className="text-center mb-20">
                <h2 className="text-4xl md:text-7xl font-black text-white uppercase tracking-tighter italic font-mono mb-6 text-glow">Fizikai Biztonság</h2>
                <p className="text-gray-400 max-w-2xl mx-auto font-medium">Saját fejlesztésű hardvereszközök, melyek a digitális védelmet fizikai réteggel egészítik ki.</p>
             </div>

             <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                {[
                  { name: 'S-Core Node', type: 'Hardveres tűzfal', desc: 'Optikai izolációs technológia, 100Gbps átviteli sebesség mellett is észrevehetetlen késleltetés.' },
                  { name: 'Retina-X', type: 'Biometrikus szkenner', desc: 'Infravörös érhálózat-vizsgálat, melyet lehetetlen másolni vagy kijátszani.' },
                  { name: 'Vault One', type: 'Kvantum tároló', desc: 'Hardware Security Module (HSM), mely önmegsemmisítő mechanizmussal rendelkezik behatolás esetén.' }
                ].map((h, i) => (
                  <div key={i} className="glass-card p-10 rounded-[40px] flex flex-col items-center text-center group border-cyan-500/5 hover:border-cyan-400/40 transition-all hover:shadow-[0_0_40px_rgba(34,211,238,0.15)]">
                     <div className="w-32 h-32 bg-gray-900 border border-gray-800 rounded-full flex items-center justify-center mb-8 relative group-hover:scale-110 transition-transform">
                        <div className="absolute inset-0 bg-cyan-500/10 rounded-full blur-xl group-hover:bg-cyan-500/30 transition-all"></div>
                        <Chip className="w-16 h-16 text-cyan-400 group-hover:drop-shadow-[0_0_12px_rgba(34,211,238,0.8)] transition-all" />
                     </div>
                     <span className="text-[10px] font-black text-cyan-500 uppercase tracking-widest mb-2 group-hover:text-glow transition-all">{h.type}</span>
                     <h3 className="text-2xl font-black text-white mb-6 uppercase tracking-tighter font-mono group-hover:text-cyan-300 transition-colors">{h.name}</h3>
                     <p className="text-gray-500 text-sm leading-relaxed">{h.desc}</p>
                  </div>
                ))}
             </div>
          </div>
        )}

      </main>

      {/* Stats & CTA */}
      <footer className="py-24 relative overflow-hidden bg-transparent">
        <div className="max-w-[1400px] mx-auto px-6">
           <div className="grid grid-cols-2 md:grid-cols-4 gap-10 md:gap-0 divide-x divide-gray-900 text-center border-y border-gray-900 py-16 mb-24">
              {[
                  { val: '14 PB', label: 'Védett adat' },
                  { val: '0.00ms', label: 'Esemény válaszidő' },
                  { val: '256k+', label: 'Napi hárítás' },
                  { val: 'ZERO', label: 'Biztonsági rés' }
              ].map((s, i) => (
                  <div key={i} className="px-4">
                     <div className="text-3xl md:text-6xl font-black text-white mb-2 font-mono tracking-tighter text-glow italic">{s.val}</div>
                     <div className="text-cyan-900 text-[9px] font-black uppercase tracking-[0.3em]">{s.label}</div>
                  </div>
              ))}
           </div>

           <div className="max-w-4xl mx-auto text-center space-y-12">
              <div className="relative inline-block group">
                <div className="absolute inset-0 bg-cyan-500 blur-3xl opacity-30 animate-pulse group-hover:opacity-60 transition-opacity"></div>
                <div className="w-20 h-20 md:w-24 md:h-24 bg-gray-900 border border-cyan-500/30 rounded-[32px] flex items-center justify-center relative z-10 mx-auto transform -rotate-12 group-hover:rotate-0 transition-transform duration-500 shadow-[0_0_40px_rgba(34,211,238,0.2)] group-hover:shadow-[0_0_60px_rgba(34,211,238,0.5)] group-hover:border-cyan-400">
                  <ShieldCheck className="w-10 h-10 md:w-12 md:h-12 text-cyan-400 group-hover:drop-shadow-[0_0_8px_rgba(34,211,238,1)]" />
                </div>
              </div>

              <h2 className="text-4xl md:text-7xl font-black text-white uppercase tracking-tighter font-mono leading-none italic text-glow">
                Ahol a <span className="text-cyan-500 underline decoration-cyan-500/30 underline-offset-8">bizalom</span> <br/>nem kérdés.
              </h2>
              
              <p className="text-gray-400 text-lg max-w-xl mx-auto font-medium">
                Kérje szakértőink konzultációját az Enterprise Security Protocol implementálásához.
              </p>

              <div className="flex flex-col sm:flex-row justify-center gap-6 pt-10">
                 <button className="bg-cyan-600 text-black px-12 py-6 font-black uppercase tracking-widest text-sm button-clip hover:bg-white transition-all shadow-[0_0_30px_rgba(34,211,238,0.4)] hover:shadow-[0_0_50px_rgba(34,211,238,0.8)] neon-glow-btn">
                   Szakértői Konzultáció
                 </button>
                 <button className="border border-gray-800 text-gray-500 px-12 py-6 font-black uppercase tracking-widest text-sm button-clip hover:border-cyan-500 hover:text-cyan-400 transition-all hover:shadow-[0_0_20px_rgba(34,211,238,0.2)]">
                   Rendszerbemutató (PDF)
                 </button>
              </div>

              <div className="pt-32 border-t border-gray-900 flex flex-col md:flex-row justify-between items-center gap-8 text-gray-600 font-mono text-[9px] uppercase tracking-[0.3em]">
                 <div>&copy; 2024 STEELGUARD DEFENSE SYSTEMS. ALL RIGHTS RESERVED.</div>
                 <div className="flex gap-10">
                    <span className="hover:text-cyan-400 cursor-pointer transition-colors hover:text-glow">ADATVÉDELEM</span>
                    <span className="hover:text-cyan-400 cursor-pointer transition-colors hover:text-glow">ÁSZF</span>
                    <span className="text-cyan-900">SYSTEM_ID: CORE-X88-HU</span>
                 </div>
              </div>
           </div>
        </div>
      </footer>
    </div>
  );
};
