MotionWebStudio/pages/demos/Steelguard.tsx

import React, { useEffect, useState } from 'react';
import { ArrowLeft, Shield, Lock, Eye, Server, Cpu, Globe, ChevronDown, PlayCircle, Fingerprint, Scan, Activity, Radio, Terminal, Box, Building2, Users, MapPin } from 'lucide-react';
import { Link } from 'react-router-dom';

export const Steelguard: React.FC = () => {
  const [scrolled, setScrolled] = useState(false);
  const [activeTab, setActiveTab] = useState<'home' | 'solutions' | 'hardware' | 'sectors' | 'company'>('home');
  
  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // Reset scroll when changing tabs
  useEffect(() => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }, [activeTab]);

  return (
    <div className="font-sans bg-[#020205] text-gray-100 min-h-screen selection:bg-cyan-500 selection:text-black overflow-x-hidden relative">
       
       {/* INJECTED STYLES FOR ADVANCED ANIMATIONS */}
       <style>{`
        @keyframes grid-move {
          0% { transform: perspective(500px) rotateX(60deg) translateY(0); }
          100% { transform: perspective(500px) rotateX(60deg) translateY(40px); }
        }
        @keyframes scanline {
          0% { transform: translateY(-100%); }
          100% { transform: translateY(100%); }
        }
        @keyframes blob {
          0% { transform: translate(0px, 0px) scale(1); }
          33% { transform: translate(30px, -50px) scale(1.1); }
          66% { transform: translate(-20px, 20px) scale(0.9); }
          100% { transform: translate(0px, 0px) scale(1); }
        }
        @keyframes pulse-glow {
          0%, 100% { box-shadow: 0 0 10px rgba(6, 182, 212, 0.2); }
          50% { box-shadow: 0 0 25px rgba(6, 182, 212, 0.6); }
        }
        .text-glow:hover {
          text-shadow: 0 0 10px rgba(34, 211, 238, 0.8), 0 0 20px rgba(34, 211, 238, 0.4);
        }
        .animate-grid-move {
          animation: grid-move 2s linear infinite;
        }
        .animate-blob {
          animation: blob 10s infinite;
        }
        .animation-delay-2000 {
          animation-delay: 2s;
        }
        .animation-delay-4000 {
          animation-delay: 4s;
        }
        .glass-panel {
          background: rgba(10, 15, 30, 0.6);
          backdrop-filter: blur(12px);
          border: 1px solid rgba(6, 182, 212, 0.1);
          box-shadow: 0 0 15px rgba(0,0,0,0.5);
        }
        .cyber-button {
          position: relative;
          overflow: hidden;
          transition: all 0.3s;
        }
        .cyber-button::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
          transition: 0.5s;
        }
        .cyber-button:hover::before {
          left: 100%;
        }
        .clip-path-polygon {
          clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%);
        }
       `}</style>

       {/* Return to Main Site */}
       <div className="fixed bottom-6 right-6 z-[60] mix-blend-difference">
        <Link to="/#references">
          <button className="bg-white text-black px-6 py-2 rounded-sm uppercase text-[10px] font-bold tracking-[0.3em] hover:bg-cyan-500 hover:text-white transition-all duration-300 flex items-center group">
            <ArrowLeft className="w-3 h-3 mr-3 group-hover:-translate-x-1 transition-transform" /> BACK TO REALITY
          </button>
        </Link>
      </div>

      {/* Enterprise Navbar */}
      <nav className={`fixed w-full z-40 transition-all duration-500 border-b ${scrolled ? 'bg-[#050505]/80 backdrop-blur-xl border-cyan-900/30 py-2' : 'bg-transparent border-transparent py-6'}`}>
        <div className="max-w-[1600px] mx-auto px-8 flex items-center justify-between">
          <div className="flex items-center gap-4 group cursor-pointer" onClick={() => setActiveTab('home')}>
            <div className="relative">
              <div className="absolute inset-0 bg-cyan-500 blur-md opacity-20 group-hover:opacity-60 transition-opacity duration-500 animate-pulse"></div>
              <div className="w-10 h-10 bg-[#0a0a0a] border border-cyan-500/50 flex items-center justify-center relative z-10 clip-path-polygon group-hover:border-cyan-400 transition-colors">
                <Shield className="text-cyan-400 w-5 h-5" />
              </div>
            </div>
            <div className="flex flex-col text-left">
              <span className="text-2xl font-bold tracking-tighter text-white font-mono group-hover:text-cyan-400 transition-colors">STEELGUARD</span>
              <div className="flex items-center gap-2">
                <div className="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse"></div>
                <span className="text-[9px] text-cyan-600 tracking-[0.4em] uppercase">Systems Online</span>
              </div>
            </div>
          </div>
          
          <div className="hidden lg:flex items-center space-x-12 text-[10px] font-bold tracking-[0.2em] text-gray-500 font-mono">
             {[
               { id: 'solutions', label: 'Solutions' },
               { id: 'hardware', label: 'Hardware' },
               { id: 'sectors', label: 'Sectors' },
               { id: 'company', label: 'Company' }
             ].map((item) => (
               <button 
                 key={item.id} 
                 onClick={() => setActiveTab(item.id as any)}
                 className={`transition-all relative group py-2 uppercase ${activeTab === item.id ? 'text-cyan-400' : 'hover:text-cyan-400'}`}
               >
                 <span className={`text-cyan-800 transition-opacity ${activeTab === item.id ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'} mr-1`}>&lt;</span>
                 {item.label}
                 <span className={`text-cyan-800 transition-opacity ${activeTab === item.id ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'} ml-1`}>/&gt;</span>
                 <span className={`absolute bottom-0 left-0 h-[1px] bg-cyan-500 transition-all duration-300 shadow-[0_0_10px_#06b6d4] ${activeTab === item.id ? 'w-full' : 'w-0 group-hover:w-full'}`}></span>
               </button>
             ))}
          </div>

          <div className="flex items-center gap-6">
            <button onClick={() => setActiveTab('home')} className="text-[10px] font-bold text-gray-500 hover:text-white uppercase tracking-[0.2em] hidden sm:block transition-colors border border-transparent hover:border-gray-800 px-4 py-2">
              Login_Portal
            </button>
            <button className="cyber-button bg-cyan-600 hover:bg-cyan-500 text-black px-8 py-3 text-[10px] font-bold uppercase tracking-[0.2em] transition-all shadow-[0_0_20px_rgba(8,145,178,0.4)] hover:shadow-[0_0_30px_rgba(6,182,212,0.6)]">
              Initialize
            </button>
          </div>
        </div>
      </nav>

      {/* Main Content Router Simulation */}
      <main className="animate-fade-in">
        
        {/* HOME VIEW */}
        {activeTab === 'home' && (
          <>
            <header className="relative h-screen flex items-center justify-center overflow-hidden bg-[#020205]">
               <div className="absolute inset-0 z-0 overflow-hidden pointer-events-none">
                 <div className="absolute top-[-10%] left-[-10%] w-[600px] h-[600px] bg-blue-900/20 rounded-full mix-blend-screen filter blur-[80px] opacity-30 animate-blob"></div>
                 <div className="absolute top-[20%] right-[-20%] w-[500px] h-[500px] bg-cyan-900/20 rounded-full mix-blend-screen filter blur-[80px] opacity-30 animate-blob animation-delay-2000"></div>
                 <div className="absolute bottom-[-20%] left-[20%] w-[600px] h-[600px] bg-purple-900/10 rounded-full mix-blend-screen filter blur-[80px] opacity-30 animate-blob animation-delay-4000"></div>
                 <div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:50px_50px]"></div>
                 <div className="absolute inset-0 bg-gradient-to-t from-[#020205] via-transparent to-transparent"></div>
                 <div className="absolute inset-0 bg-gradient-to-b from-[#020205] via-transparent to-transparent"></div>
               </div>

               <div className="relative z-10 max-w-[1400px] mx-auto px-6 grid lg:grid-cols-2 gap-20 items-center mt-20">
                 <div>
                   <div className="inline-flex items-center gap-3 px-4 py-2 border border-cyan-500/30 bg-cyan-900/10 text-cyan-400 text-[10px] font-bold tracking-[0.3em] mb-10 animate-fade-in-up backdrop-blur-md">
                     <Terminal className="w-3 h-3" />
                     <span className="animate-pulse">ESTABLISHING SECURE CONNECTION...</span>
                   </div>
                   <h1 className="text-6xl lg:text-8xl font-bold text-white leading-[0.9] mb-8 font-mono animate-fade-in-up" style={{animationDelay: '0.1s'}}>
                     TOTAL <br/>
                     <span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-600 drop-shadow-[0_0_15px_rgba(6,182,212,0.5)]">DEFENSE</span>
                   </h1>
                   <p className="text-lg text-gray-400 max-w-lg mb-12 leading-relaxed animate-fade-in-up border-l-2 border-cyan-900/50 pl-6" style={{animationDelay: '0.2s'}}>
                     Advanced AI-driven security architecture for enterprise infrastructure. <span className="text-cyan-400 font-bold">Zero-trust protocols</span> and predictive threat neutralization active.
                   </p>
                   <div className="flex flex-wrap gap-6 animate-fade-in-up" style={{animationDelay: '0.3s'}}>
                     <button onClick={() => setActiveTab('solutions')} className="cyber-button bg-white text-black hover:bg-cyan-50 px-10 py-4 text-xs font-bold uppercase tracking-[0.2em] flex items-center gap-4 transition-all hover:pr-12 group shadow-[0_0_20px_rgba(255,255,255,0.3)]">
                       Execute Protocol <ChevronDown className="w-4 h-4 group-hover:translate-y-1 transition-transform" />
                     </button>
                     <button className="border border-gray-800 hover:border-cyan-500 text-gray-300 hover:text-cyan-400 px-10 py-4 text-xs font-bold uppercase tracking-[0.2em] flex items-center gap-4 transition-all bg-[#0a0a0a]/50 backdrop-blur-sm group hover:shadow-[0_0_15px_rgba(6,182,212,0.3)]">
                       <PlayCircle className="w-4 h-4 group-hover:scale-110 transition-transform" /> Simulation
                     </button>
                   </div>
                 </div>
                 
                 <div className="relative hidden lg:block animate-fade-in perspective-1000" style={{animationDelay: '0.5s'}}>
                   <div className="relative w-full aspect-square flex items-center justify-center transform-style-3d rotate-y-12">
                      <div className="absolute w-[80%] h-[80%] border border-cyan-900/40 rounded-full animate-[spin_20s_linear_infinite] shadow-[0_0_30px_rgba(6,182,212,0.1)]"></div>
                      <div className="absolute w-[60%] h-[60%] border-2 border-dashed border-cyan-500/20 rounded-full animate-[spin_15s_linear_infinite_reverse]"></div>
                      <div className="relative z-10 w-[70%] h-[70%] rounded-2xl overflow-hidden border border-cyan-500/30 group shadow-[0_0_50px_rgba(6,182,212,0.15)]">
                          <img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&w=1000&q=80" alt="Tech Visual" className="w-full h-full object-cover opacity-60 mix-blend-luminosity group-hover:scale-105 transition-transform duration-1000 grayscale" />
                          <div className="absolute inset-0 bg-cyan-900/20 mix-blend-overlay"></div>
                          <div className="absolute top-0 left-0 w-full h-[2px] bg-cyan-400 shadow-[0_0_20px_#22d3ee] animate-[scanline_3s_linear_infinite]"></div>
                      </div>
                      <div className="absolute top-20 -right-10 glass-panel p-4 flex items-center gap-4 animate-[bounce_4s_infinite] border-l-2 border-l-green-500">
                         <Activity className="w-6 h-6 text-green-500 animate-pulse" />
                         <div>
                           <p className="text-[9px] text-gray-400 uppercase tracking-widest font-mono">Status</p>
                           <p className="text-xs font-bold text-green-400 font-mono tracking-wider">OPTIMAL_FLOW</p>
                         </div>
                      </div>
                   </div>
                 </div>
               </div>
            </header>

            <section className="py-32 bg-[#020205]">
              <div className="max-w-[1400px] mx-auto px-6">
                <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                   {[
                     { icon: Eye, title: 'Neural Surveillance', desc: 'Real-time object recognition and behavioral prediction algorithms.' },
                     { icon: Scan, title: 'Retinal Access', desc: '99.999% accuracy biometric entry points with liveness detection.' },
                     { icon: Server, title: 'Core Defense', desc: 'Hardened physical and logical shielding for data centers.' },
                     { icon: Globe, title: 'Global Ops', desc: '24/7 localized threat monitoring from orbit-synced satellites.' },
                     { icon: Cpu, title: 'IoT Mesh', desc: 'Thousands of interconnected sensors forming an unbreakable web.' },
                     { icon: Shield, title: 'Hybrid Firewall', desc: 'Simultaneous protection against kinetic and digital intrusion.' },
                   ].map((item, i) => (
                     <div key={i} className="group relative bg-[#05070a] border border-gray-800 p-10 overflow-hidden hover:border-cyan-500/50 transition-all duration-500">
                       <div className="relative z-10">
                          <div className="w-14 h-14 bg-[#0a0f18] border border-gray-800 group-hover:border-cyan-500 flex items-center justify-center mb-8 transition-all">
                              <item.icon className="w-6 h-6 text-gray-500 group-hover:text-cyan-400 transition-colors" />
                          </div>
                          <h3 className="text-xl font-bold text-white mb-4 font-mono group-hover:text-cyan-300 transition-colors">{item.title}</h3>
                          <p className="text-gray-500 text-xs leading-relaxed group-hover:text-gray-300 transition-colors font-mono">{item.desc}</p>
                       </div>
                     </div>
                   ))}
                </div>
              </div>
            </section>
          </>
        )}

        {/* SOLUTIONS VIEW */}
        {activeTab === 'solutions' && (
          <section className="pt-40 pb-20 px-8">
            <div className="max-w-6xl mx-auto">
              <div className="flex items-center gap-4 mb-10">
                <div className="w-12 h-1 bg-cyan-500"></div>
                <h2 className="text-4xl font-mono font-black uppercase tracking-tighter">Strategic Solutions</h2>
              </div>
              
              <div className="grid lg:grid-cols-2 gap-16 items-center">
                 <div className="space-y-10">
                    <p className="text-xl text-gray-400 font-mono leading-relaxed">
                      We offer a multi-layered security stack designed to neutralize threats before they reach your perimeter. 
                    </p>
                    <div className="space-y-6">
                       {[
                         { title: "Zero Trust Architecture", desc: "Never trust, always verify. Every node is isolated and encrypted." },
                         { title: "Predictive AI Shield", desc: "Our neural networks predict intrusion patterns with 99.8% accuracy." },
                         { title: "Cloud Integration", desc: "Seamless security across AWS, Azure, and private data centers." }
                       ].map((sol, i) => (
                         <div key={i} className="bg-[#05070a] border-l-4 border-l-cyan-500 p-6">
                            <h4 className="font-bold text-cyan-400 mb-2 font-mono uppercase text-sm">{sol.title}</h4>
                            <p className="text-gray-500 text-xs font-mono">{sol.desc}</p>
                         </div>
                       ))}
                    </div>
                 </div>
                 <div className="relative group">
                    <div className="absolute -inset-2 bg-cyan-500 blur-2xl opacity-10 group-hover:opacity-30 transition-opacity"></div>
                    <img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&w=1200&q=80" alt="Solution" className="rounded-2xl border border-cyan-500/20 relative z-10" />
                 </div>
              </div>
            </div>
          </section>
        )}

        {/* HARDWARE VIEW */}
        {activeTab === 'hardware' && (
          <section className="pt-40 pb-20 px-8">
            <div className="max-w-6xl mx-auto">
              <div className="flex items-center gap-4 mb-10">
                <div className="w-12 h-1 bg-cyan-500"></div>
                <h2 className="text-4xl font-mono font-black uppercase tracking-tighter">Hardened Hardware</h2>
              </div>
              
              <div className="grid md:grid-cols-3 gap-8">
                 {[
                   { icon: Box, name: "Node V4 Unit", img: "https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=800&q=80" },
                   { icon: Cpu, name: "Neural Processor", img: "https://images.unsplash.com/photo-1591799264318-7e6ef8ddb7ea?auto=format&fit=crop&w=800&q=80" },
                   { icon: Shield, name: "Quantum Enclosure", img: "https://images.unsplash.com/photo-1544197150-b99a580bb7a8?auto=format&fit=crop&w=800&q=80" }
                 ].map((hw, i) => (
                   <div key={i} className="bg-[#05070a] rounded-2xl overflow-hidden border border-gray-800 hover:border-cyan-500/40 transition-all">
                      <img src={hw.img} alt={hw.name} className="h-48 w-full object-cover grayscale opacity-60 hover:grayscale-0 hover:opacity-100 transition-all" />
                      <div className="p-6">
                         <div className="flex items-center gap-3 mb-4">
                           <hw.icon className="w-5 h-5 text-cyan-500" />
                           <span className="font-mono font-bold uppercase text-xs">{hw.name}</span>
                         </div>
                         <button className="w-full py-2 bg-gray-900 border border-gray-800 text-[10px] font-bold uppercase tracking-widest hover:bg-cyan-600 hover:text-black transition-all">View Specs</button>
                      </div>
                   </div>
                 ))}
              </div>
            </div>
          </section>
        )}

        {/* SECTORS VIEW */}
        {activeTab === 'sectors' && (
          <section className="pt-40 pb-20 px-8 text-center">
            <div className="max-w-5xl mx-auto">
              <h2 className="text-5xl font-mono font-black uppercase tracking-tighter mb-6">Strategic Sectors</h2>
              <p className="text-gray-400 font-mono mb-20">Steelguard protects the infrastructure that power nations.</p>
              
              <div className="grid md:grid-cols-3 gap-12">
                 {[
                   { icon: Building2, label: "Enterprise", count: "400+ Nodes" },
                   { icon: Globe, label: "Government", count: "12 Nations" },
                   { icon: Shield, label: "Defense", count: "Active Mesh" }
                 ].map((sector, i) => (
                   <div key={i} className="flex flex-col items-center group cursor-default">
                      <div className="w-24 h-24 rounded-full border-2 border-gray-800 flex items-center justify-center mb-6 group-hover:border-cyan-500 group-hover:shadow-[0_0_30px_rgba(6,182,212,0.2)] transition-all">
                         <sector.icon className="w-10 h-10 text-gray-500 group-hover:text-cyan-400 transition-colors" />
                      </div>
                      <h3 className="font-mono font-black uppercase text-xl mb-2">{sector.label}</h3>
                      <span className="text-[10px] font-mono text-cyan-600 tracking-widest">{sector.count}</span>
                   </div>
                 ))}
              </div>
            </div>
          </section>
        )}

        {/* COMPANY VIEW */}
        {activeTab === 'company' && (
          <section className="pt-40 pb-20 px-8">
            <div className="max-w-4xl mx-auto">
               <div className="grid md:grid-cols-2 gap-16 items-center">
                  <div className="relative">
                    <div className="absolute -inset-4 bg-cyan-500/5 blur-3xl rounded-full"></div>
                    <img src="https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1000&q=80" alt="Office" className="rounded-3xl relative z-10 opacity-70 grayscale hover:grayscale-0 transition-all" />
                  </div>
                  <div>
                    <span className="text-cyan-500 font-mono text-[10px] tracking-widest block mb-4 uppercase">Origins</span>
                    <h2 className="text-4xl font-mono font-black uppercase mb-8">Engineering <br/>Secured Future</h2>
                    <p className="text-gray-400 font-mono text-sm leading-loose mb-8">
                      Founded in 2042, Steelguard Defense Systems has evolved from a small hardware research lab into a global leader in AI-driven security architecture. Our mission is absolute protection through innovation.
                    </p>
                    <div className="flex items-center gap-8">
                       <div>
                          <p className="text-3xl font-black text-white font-mono">15</p>
                          <p className="text-[9px] text-gray-600 uppercase font-mono tracking-widest">Global Hubs</p>
                       </div>
                       <div>
                          <p className="text-3xl font-black text-white font-mono">850+</p>
                          <p className="text-[9px] text-gray-600 uppercase font-mono tracking-widest">Architects</p>
                       </div>
                    </div>
                  </div>
               </div>
            </div>
          </section>
        )}

        {/* MAP INTEGRATION */}
        {activeTab === 'home' && (
          <section className="py-20 bg-[#050505] relative overflow-hidden">
             <div className="max-w-[1400px] mx-auto px-6">
                <div className="flex items-center gap-4 mb-10">
                   <MapPin className="text-cyan-500 w-6 h-6" />
                   <h2 className="text-2xl font-mono font-black uppercase tracking-widest">Command Center HQ</h2>
                </div>
                <div className="relative w-full h-[500px] rounded-3xl overflow-hidden border border-cyan-900/30 group shadow-[0_0_30px_rgba(0,0,0,0.5)]">
                   <div className="absolute inset-0 z-10 pointer-events-none border-[10px] border-[#020205] opacity-80"></div>
                   <div className="absolute inset-0 z-10 pointer-events-none ring-1 ring-cyan-500/20"></div>
                   <iframe 
                    title="Steelguard HQ Map"
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2695.565377508381!2d19.0354183769188!3d47.49831737118037!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4741dc41c2c8f877%3A0x7292275f0a2072e!2sBudapest%2C%20Szent%20Gy%C3%B6rgy%20t%C3%A9r%2C%201014!5e0!3m2!1shu!2shu!4v1716300000000!5m2!1shu!2shu" 
                    width="100%" 
                    height="100%" 
                    style={{ border: 0, filter: 'grayscale(1) invert(0.9) contrast(1.2)' }} 
                    allowFullScreen 
                    loading="lazy" 
                    referrerPolicy="no-referrer-when-downgrade"
                   ></iframe>
                   <div className="absolute top-0 left-0 w-full h-full bg-cyan-500/5 mix-blend-color pointer-events-none"></div>
                </div>
             </div>
          </section>
        )}

      </main>

      {/* Footer / CTA */}
      <footer className="py-32 bg-[#020205] relative overflow-hidden">
        <div className="max-w-[1400px] mx-auto px-6 grid md:grid-cols-4 gap-0 divide-x divide-gray-900 text-center relative z-10 border-y border-gray-900 mb-20">
            {[
                { val: '500+', label: 'NODES ACTIVE' },
                { val: '0.01ms', label: 'LATENCY' },
                { val: '100%', label: 'UPTIME' },
                { val: 'SECURE', label: 'STATUS' }
            ].map((stat, i) => (
                <div key={i} className="relative py-10 group hover:bg-cyan-900/5 transition-colors cursor-default">
                   <div className="text-5xl font-bold text-gray-700 mb-2 font-mono group-hover:text-cyan-400 group-hover:scale-110 transition-all duration-300 text-glow">{stat.val}</div>
                   <div className="text-cyan-900 text-[10px] font-bold uppercase tracking-[0.3em] group-hover:text-cyan-600">{stat.label}</div>
                </div>
            ))}
        </div>

        <div className="max-w-4xl mx-auto px-6 text-center relative z-10">
           <div className="inline-block mb-10 p-4 border border-cyan-500/30 rounded-full animate-pulse-glow">
              <Shield className="w-12 h-12 text-cyan-500" />
           </div>
           <h2 className="text-4xl md:text-6xl font-bold text-white mb-8 font-mono uppercase">
             SECURE YOUR <span className="text-cyan-500">FUTURE</span>
           </h2>
           <p className="text-gray-400 mb-12 text-lg max-w-xl mx-auto font-mono text-xs leading-loose">
             Initiate contact with our security architects. Design a defense strategy leveraging next-gen technologies.
           </p>
           <div className="flex flex-col sm:flex-row justify-center gap-6">
             <button className="cyber-button bg-cyan-600 hover:bg-cyan-500 text-black px-12 py-5 font-bold uppercase tracking-[0.2em] text-xs transition-all shadow-[0_0_20px_rgba(8,145,178,0.5)]">
               Initialize Sequence
             </button>
             <button className="border border-gray-800 hover:border-white text-gray-400 hover:text-white px-12 py-5 font-bold uppercase tracking-[0.2em] text-xs transition-all hover:bg-white/5 hover:shadow-[0_0_15px_rgba(255,255,255,0.2)]">
               Download Manifest
             </button>
           </div>
           <div className="mt-32 pt-10 border-t border-gray-900 text-gray-600 text-[9px] uppercase tracking-[0.2em] flex flex-col md:flex-row justify-between items-center gap-4 font-mono">
             <div>&copy; 2024 STEELGUARD DEFENSE SYSTEMS.</div> 
             <div className="text-cyan-900">SYSTEM_ID: MW-ENT-8842</div>
           </div>
        </div>
      </footer>
    </div>
  );
};