import React, { useState, useEffect, useMemo } from 'react';
import { useNavigate } from 'react-router-dom';
import { 
  Cpu, Sparkles, ArrowRight, Loader2, X, Terminal, Mic, Zap, MessageSquare, ChevronDown, 
  ShieldCheck, Globe, Activity, Layers, Database, Lock, Eye, Building2, BarChart3, Radio, RefreshCw,
  BrainCircuit, Network, Server, Fingerprint, Key, Wallet, Briefcase, FileText, Smartphone,
  Shield, Infinity, Waves, Thermometer, FlaskConical, Gavel, Scale, Hammer, UserPlus, Heart,
  // Added missing imports Code and ChevronRight
  ShieldAlert, Repeat, ChevronLeft, GitPullRequest, Box, Code, ChevronRight
} from 'lucide-react';
import { apiClient } from '../services/api';

const FEATURE_CARDS = [
  { id: 1, title: "Neural Parity", desc: "Real-time ledger consensus across 1,200 nodes with zero-drift synchronization.", icon: Fingerprint, color: "blue", img: "https://images.unsplash.com/photo-1639762681485-074b7f938ba0?q=80&w=2832&auto=format&fit=crop" },
  { id: 2, title: "Quantum Oracle", desc: "Predictive treasury drift detection using qubit-stabilized neural forecasting models.", icon: Cpu, color: "purple", img: "https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2872&auto=format&fit=crop" },
  { id: 3, title: "Liquidity Mesh", desc: "High-velocity disbursement fabrics optimized for sub-millisecond M2M settlement.", icon: Waves, color: "emerald", img: "https://images.unsplash.com/photo-1614850523296-d8c1af93d400?q=80&w=2570&auto=format&fit=crop" },
  { id: 4, title: "Sovereign ID", desc: "Encapsulated identity vault utilizing RSA-OAEP-4096 and rotating high-entropy seeds.", icon: Lock, color: "rose", img: "https://images.unsplash.com/photo-1558494949-ef010cbdcc51?q=80&w=2546&auto=format&fit=crop" },
  { id: 5, title: "Forge Foundry", desc: "Synthesis of high-fidelity digital relics from transaction heat-maps and block-states.", icon: Hammer, color: "amber", img: "https://images.unsplash.com/photo-1639322537228-f710d846310a?q=80&w=2560&auto=format&fit=crop" },
  { id: 2, title: "Edge Routing", desc: "Global distribution node Map with proximity-optimized gateway handshakes.", icon: Globe, color: "cyan", img: "https://images.unsplash.com/photo-1484417894907-623942c8ee29?q=80&w=2832&auto=format&fit=crop" }
];

const Landing: React.FC = () => {
  const navigate = useNavigate();
  const [isDemoLoading, setIsDemoLoading] = useState(false);
  const [scrollY, setScrollY] = useState(0);
  
  // Feature Shuffle State
  const [activeFeatureIndex, setActiveFeatureIndex] = useState(0);

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

  const handleDemoAccess = async () => {
    if (isDemoLoading) return;
    setIsDemoLoading(true);
    try {
      const { success } = await apiClient.auth.login('alex', 'password123');
      if (success) {
        window.dispatchEvent(new Event('auth-update'));
        navigate('/overview');
      }
    } catch (err) {
      console.error("Handshake failed.");
    } finally {
      setIsDemoLoading(false);
    }
  };

  const nextFeature = () => setActiveFeatureIndex(p => (p + 1) % FEATURE_CARDS.length);
  const prevFeature = () => setActiveFeatureIndex(p => (p - 1 + FEATURE_CARDS.length) % FEATURE_CARDS.length);

  return (
    <div className="min-h-screen bg-[#020202] text-white font-sans overflow-x-hidden relative selection:bg-blue-600/30 selection:text-white">
      {/* Dynamic Backgrounds */}
      <div className="fixed inset-0 z-0 pointer-events-none">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_0%,_#1e1b4b_0%,_transparent_60%)] opacity-40"></div>
        <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808008_1px,transparent_1px),linear-gradient(to_bottom,#80808008_1px,transparent_1px)] bg-[size:60px_60px]"></div>
      </div>

      {/* FORTUNE 1200 MEGA HEADER */}
      <nav className={`fixed top-0 left-0 w-full z-[100] px-10 py-8 flex justify-between items-center transition-all duration-700 ${scrollY > 50 ? 'backdrop-blur-3xl bg-black/80 border-b border-white/5 py-6' : 'bg-transparent'}`}>
        <div className="flex items-center gap-12">
          <div className="flex items-center gap-6 group cursor-pointer" onClick={() => window.scrollTo({top: 0, behavior: 'smooth'})}>
            <div className="w-14 h-14 bg-white rounded-[1.8rem] flex items-center justify-center group-hover:rotate-12 transition-transform duration-700 shadow-2xl border-2 border-zinc-900">
              <Cpu size={32} className="text-black" />
            </div>
            <div>
              <h1 className="text-2xl font-black italic tracking-tighter text-white uppercase leading-none">AIBanking<span className="text-blue-500 not-italic">.dev</span></h1>
              <p className="text-[10px] uppercase tracking-[0.8em] font-black text-zinc-600 mt-1.5">Consensus Registry</p>
            </div>
          </div>

          <div className="hidden xl:flex items-center gap-10">
            <div className="group relative py-4">
               <button className="text-[11px] font-black uppercase tracking-[0.4em] text-zinc-400 group-hover:text-white transition-colors flex items-center gap-2">Protocol Tiers <ChevronDown size={10} /></button>
               <div className="absolute top-full left-0 w-[700px] bg-zinc-950 border border-zinc-900 rounded-[3.5rem] p-12 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:translate-y-2 transition-all shadow-[0_40px_80px_rgba(0,0,0,0.8)] grid grid-cols-2 gap-10">
                  <MegaLink icon={Zap} title="Enterprise Core" desc="Authenticated via paid Google API nodes. 100% SLA." />
                  <MegaLink icon={Globe} title="Regular Mesh" desc="Public access tier for regional node exploration." />
                  <MegaLink icon={Code} title="SDK Import" desc="NPM-ready modules for M2M treasury automation." />
                  <MegaLink icon={ShieldCheck} title="Compliance Hub" desc="FDX v6.5 verified long-term archival registry." />
               </div>
            </div>
            <div className="group relative py-4">
               <button className="text-[11px] font-black uppercase tracking-[0.4em] text-zinc-400 group-hover:text-white transition-colors flex items-center gap-2">Resources <ChevronDown size={10} /></button>
               <div className="absolute top-full left-0 w-[500px] bg-zinc-950 border border-zinc-900 rounded-[3rem] p-10 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:translate-y-2 transition-all shadow-2xl space-y-6">
                  <MegaLink icon={FileText} title="Whitepaper Genesis" desc="The mathematical proof of neural banking." />
                  <MegaLink icon={Fingerprint} title="Security Manifesto" desc="Zero-persistence shredding protocol v1.2." />
               </div>
            </div>
            <a href="#developers" className="text-[11px] font-black uppercase tracking-[0.4em] text-zinc-400 hover:text-white transition-colors">Developer Core</a>
          </div>
        </div>

        <div className="flex items-center gap-10">
          <button onClick={() => navigate('/documentation')} className="hidden md:block text-[11px] font-black uppercase tracking-[0.4em] text-zinc-500 hover:text-white transition-colors">Manual Registry</button>
          <button onClick={handleDemoAccess} className="px-12 py-5 bg-blue-600 text-white rounded-full font-black text-[11px] uppercase tracking-[0.5em] hover:bg-blue-500 transition-all flex items-center gap-4 shadow-[0_0_40px_rgba(37,99,235,0.4)] group">
            {isDemoLoading ? <Loader2 size={16} className="animate-spin" /> : <Sparkles size={16} className="group-hover:scale-125 transition-transform" />}
            Initialize Handshake
          </button>
        </div>
      </nav>

      {/* HERO HERO SECTION */}
      <section className="relative z-10 min-h-screen flex flex-col justify-center items-center px-10 pt-40 pb-20 text-center overflow-hidden">
        <div className="absolute inset-0 z-0 opacity-30">
           <img src="https://images.unsplash.com/photo-1639322537228-f710d846310a?q=80&w=2832&auto=format&fit=crop" className="w-full h-full object-cover blur-[140px] scale-110" alt="Liquid Space" />
        </div>

        <div className="relative z-10 space-y-16">
          <div className="inline-flex items-center gap-4 px-10 py-4 bg-blue-600/10 border border-blue-600/20 rounded-full animate-in zoom-in-95 duration-1000 relative overflow-hidden group">
            <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent animate-[shimmer_2s_infinite]"></div>
            <Activity size={18} className="text-blue-500" />
            <span className="text-[12px] font-black uppercase tracking-[0.8em] text-blue-500">Subspace_Handshake_Stabilized</span>
          </div>

          <h1 className="text-[10rem] lg:text-[16rem] font-black italic tracking-tighter uppercase leading-[0.7] mb-12 drop-shadow-2xl">
            Global <br /><span className="text-blue-600 not-italic decoration-blue-900/40 underline-offset-[40px] underline decoration-[30px]">Standard</span>
          </h1>

          <p className="text-zinc-500 text-3xl lg:text-4xl font-bold italic max-w-6xl mx-auto mb-16 leading-relaxed">
            "The definitive interface for <span className="text-white">high-velocity institutional assets</span>. Route neural signals through the mesh with absolute parity."
          </p>

          <div className="flex flex-wrap justify-center gap-12 pt-10">
            <button 
              onClick={handleDemoAccess} 
              className="px-20 py-10 bg-white text-black rounded-[3rem] font-black text-sm uppercase tracking-[0.8em] flex items-center gap-10 hover:bg-blue-600 hover:text-white transition-all shadow-[0_50px_100px_rgba(255,255,255,0.1)] group active:scale-95"
            >
              {isDemoLoading ? <Loader2 size={32} className="animate-spin" /> : <span>Start Session</span>}
              <ArrowRight size={32} className="group-hover:translate-x-6 transition-transform duration-700" />
            </button>
            <button className="px-20 py-10 bg-zinc-950 border-2 border-zinc-900 text-white rounded-[3rem] font-black text-sm uppercase tracking-[0.8em] flex items-center gap-10 hover:border-blue-600 transition-all shadow-2xl group active:scale-95">
              <Database size={32} className="text-blue-500" />
              Whitepaper Genesis
            </button>
          </div>
        </div>
        <div className="mt-40 animate-bounce opacity-20"><ChevronDown size={64} /></div>
      </section>

      {/* ENDLESS TINDER SHUFFLE SECTION */}
      <section className="relative z-10 py-60 px-10 bg-zinc-950/20">
         <div className="max-w-[1400px] mx-auto grid grid-cols-1 lg:grid-cols-2 gap-32 items-center">
            <div className="space-y-16">
               <div className="space-y-6">
                  <h3 className="text-blue-500 font-black text-xs uppercase tracking-[0.8em]">Deep Feature Stack</h3>
                  <h2 className="text-8xl lg:text-[10rem] font-black italic text-white tracking-tighter uppercase leading-[0.85]">Endless <br /> <span className="text-blue-600 not-italic">Optimization</span></h2>
               </div>
               <p className="text-zinc-500 text-2xl font-bold leading-relaxed italic max-w-2xl">
                 "Our architectural layers are infinite. Swipe through the core protocols that define the future of sovereign digital wealth management."
               </p>
               <div className="flex gap-8">
                  <button onClick={prevFeature} className="p-8 bg-zinc-900 border border-zinc-800 rounded-3xl hover:bg-zinc-800 text-zinc-500 hover:text-white transition-all"><ChevronLeft size={32} /></button>
                  <button onClick={nextFeature} className="p-8 bg-zinc-900 border border-zinc-800 rounded-3xl hover:bg-zinc-800 text-zinc-500 hover:text-white transition-all"><ChevronRight size={32} /></button>
               </div>
            </div>

            <div className="relative h-[800px] flex items-center justify-center">
               {FEATURE_CARDS.map((card, i) => {
                 const isActive = activeFeatureIndex === i;
                 const isPrev = (activeFeatureIndex - 1 + FEATURE_CARDS.length) % FEATURE_CARDS.length === i;
                 const isNext = (activeFeatureIndex + 1) % FEATURE_CARDS.length === i;
                 
                 let offset = 0;
                 let opacity = 0;
                 let scale = 0.8;
                 let rotate = 0;
                 let zIndex = 0;

                 if (isActive) { offset = 0; opacity = 1; scale = 1; rotate = 0; zIndex = 50; }
                 else if (isNext) { offset = 60; opacity = 0.4; scale = 0.9; rotate = 5; zIndex = 40; }
                 else if (isPrev) { offset = -60; opacity = 0; scale = 0.9; rotate = -5; zIndex = 30; }
                 else { opacity = 0; offset = 100; scale = 0.7; zIndex = 0; }

                 return (
                   <div 
                     key={card.id}
                     className="absolute inset-0 transition-all duration-1000 ease-[cubic-bezier(0.23,1,0.32,1)]"
                     style={{ 
                       transform: `translateX(${offset}px) scale(${scale}) rotate(${rotate}deg)`,
                       opacity,
                       zIndex
                     }}
                   >
                     <div className="w-full h-full bg-zinc-950 border border-zinc-900 rounded-[5rem] overflow-hidden shadow-[0_100px_200px_rgba(0,0,0,0.8)] relative group">
                        <img src={card.img} className="absolute inset-0 w-full h-full object-cover opacity-40 group-hover:opacity-60 group-hover:scale-110 transition-all duration-[3s]" alt={card.title} />
                        <div className="absolute inset-0 bg-gradient-to-t from-black via-black/20 to-transparent"></div>
                        <div className="absolute bottom-16 left-16 right-16 space-y-8">
                           <div className={`w-20 h-20 bg-${card.color}-600/20 text-${card.color}-500 rounded-[2rem] flex items-center justify-center border border-${card.color}-500/30 shadow-2xl backdrop-blur-xl`}>
                              <card.icon size={40} />
                           </div>
                           <div className="space-y-4">
                              <h4 className="text-6xl font-black italic uppercase tracking-tighter text-white leading-none">{card.title}</h4>
                              <p className="text-zinc-400 text-xl font-bold leading-relaxed italic pr-10">"{card.desc}"</p>
                           </div>
                           <button className="flex items-center gap-4 text-[11px] font-black uppercase tracking-[0.5em] text-blue-500 hover:text-white transition-colors group/link">
                              Deploy Protocol <ArrowRight size={16} className="group-hover/link:translate-x-3 transition-transform" />
                           </button>
                        </div>
                     </div>
                   </div>
                 );
               })}
            </div>
         </div>
      </section>

      {/* DEVELOPER CORE SECTION (REGULAR API) */}
      <section id="developers" className="relative z-10 py-60 px-10 border-y border-white/5 bg-black">
         <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-40 items-center">
            <div className="space-y-16">
               <div className="space-y-6">
                  <h3 className="text-emerald-500 font-black text-xs uppercase tracking-[0.8em]">Open Source Registry</h3>
                  <h2 className="text-8xl lg:text-[10rem] font-black italic text-white tracking-tighter uppercase leading-[0.85]">The Free <br /> <span className="text-emerald-500 not-italic">Import</span></h2>
               </div>
               <p className="text-zinc-500 text-2xl font-bold leading-relaxed italic">
                 "Our Regular Tier API is accessible to any verified node globally. Initialize your treasury mesh with a single command line. Zero friction, total parity."
               </p>
               <div className="grid grid-cols-2 gap-10">
                  <div className="space-y-3">
                     <p className="text-[10px] font-black text-emerald-500 uppercase tracking-widest">Rate Limit</p>
                     <p className="text-xl font-black italic uppercase text-white">100 Req / Sec</p>
                  </div>
                  <div className="space-y-3">
                     <p className="text-[10px] font-black text-emerald-500 uppercase tracking-widest">Latency Hub</p>
                     <p className="text-xl font-black italic uppercase text-white">Global Nodes</p>
                  </div>
               </div>
            </div>

            <div className="bg-zinc-950 border border-zinc-900 rounded-[4rem] p-12 shadow-2xl relative overflow-hidden group">
               <div className="absolute top-0 right-0 p-10 opacity-5">
                  <Code size={120} className="text-emerald-500" />
               </div>
               <div className="flex items-center gap-6 mb-12">
                  <div className="w-4 h-4 bg-emerald-500 rounded-full animate-pulse shadow-[0_0_12px_#10b981]"></div>
                  <span className="text-[11px] font-black uppercase text-zinc-500 tracking-[0.5em]">Terminal Instance Active</span>
               </div>
               <div className="bg-black/80 rounded-[2.5rem] border border-zinc-900 p-10 font-mono text-sm space-y-6">
                  <p className="text-zinc-600 italic">// Initialize Lumina Regular Mesh</p>
                  <p className="text-emerald-500">npm install @aibanking/core</p>
                  <div className="text-zinc-400 space-y-2">
                     <p><span className="text-blue-500">import</span> &#123; <span className="text-amber-500">LuminaNode</span> &#125; <span className="text-blue-500">from</span> <span className="text-emerald-400">'@aibanking/core'</span>;</p>
                     <p><span className="text-zinc-500 italic">// Establish regular node handshake</span></p>
                     <p><span className="text-blue-500">const</span> node = <span className="text-blue-500">await</span> <span className="text-amber-500">LuminaNode</span>.<span className="text-white">initialize</span>(&#123;</p>
                     <p className="pl-6">tier: <span className="text-emerald-400">'regular'</span>,</p>
                     <p className="pl-6">region: <span className="text-emerald-400">'US-EAST'</span></p>
                     <p>&#125;);</p>
                  </div>
                  <button className="flex items-center gap-3 text-zinc-500 hover:text-white transition-colors group/copy">
                     <Smartphone size={16} />
                     <span className="text-[10px] font-black uppercase tracking-widest">Copy Connection String</span>
                  </button>
               </div>
            </div>
         </div>
      </section>

      {/* MASSIVE CONTENT SLAM SECTIONS */}
      <section className="relative z-10 py-60 px-10 border-t border-white/5">
        <div className="max-w-7xl mx-auto space-y-40">
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-40 items-center">
              <div className="relative aspect-square rounded-[6rem] overflow-hidden shadow-2xl border border-zinc-900 group">
                 <img src="https://images.unsplash.com/photo-1639762681485-074b7f938ba0?q=80&w=2832&auto=format&fit=crop" className="w-full h-full object-cover opacity-50 group-hover:opacity-100 group-hover:scale-110 transition-all duration-[3s]" alt="Neural Fabric" />
              </div>
              <div className="space-y-10">
                 <h2 className="text-8xl font-black italic text-white uppercase tracking-tighter leading-[0.9]">The Neural <br /> <span className="text-blue-500">Subspace</span></h2>
                 <p className="text-zinc-500 text-2xl font-bold italic leading-relaxed">
                    "Interconnecting 80+ financial protocols through a singular, high-entropy neural gateway. We don't just route; we synthesize consensus."
                 </p>
                 <div className="grid grid-cols-2 gap-8">
                    <HeritageCard icon={GitPullRequest} title="Requests" val="1.4M / sec" />
                    <HeritageCard icon={Box} title="Parity Blocks" val="Synced" />
                 </div>
              </div>
           </div>
        </div>
      </section>

      {/* JAM-PACKED FAT FOOTER */}
      <footer className="relative z-10 bg-black pt-80 pb-40 px-10 border-t border-zinc-900">
         <div className="max-w-[1600px] mx-auto">
            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-20 mb-60">
               <div className="col-span-2 space-y-12">
                  <div className="flex items-center gap-6">
                    <div className="w-16 h-16 bg-white rounded-3xl flex items-center justify-center border-4 border-zinc-900 shadow-2xl">
                      <Cpu size={40} className="text-black" />
                    </div>
                    <h2 className="text-4xl font-black italic tracking-tighter uppercase leading-none">AIBanking<span className="text-blue-500 not-italic">.dev</span></h2>
                  </div>
                  <p className="text-zinc-500 text-xl font-bold italic leading-relaxed max-w-md">
                    "The undisputed leader in neural treasury automation and institutional mesh fabrics. Building the future of sovereign digital assets."
                  </p>
                  <div className="flex gap-8">
                     <SocialIcon icon={Globe} /><SocialIcon icon={Shield} /><SocialIcon icon={Zap} /><SocialIcon icon={MessageSquare} />
                  </div>
               </div>
               
               <FooterColumn title="Protocols" links={['FDX v6.5 Registry', 'RSA-OAEP-4096', 'Subspace Handshake', 'M2M Consensus', 'SHA-256 Shredding', 'Neural Entanglement', 'Zero-Knowledge Vaults', 'Layer 2 Settlement', 'Cross-Node Parity', 'Entropy Rotation']} />
               <FooterColumn title="Intelligence" links={['Lumina Oracle', 'Predictive Alpha', 'Drift Detection', 'Machine Sentiment', 'HFT Neural Pathing', 'Simulation Core', 'Risk Analysis v4', 'Treasury Logic', 'Sentiment Polling', 'Market Biasing']} />
               <FooterColumn title="Network" links={['Global Node Map', 'US-EAST Cluster', 'EU-WEST Parity', 'APAC Dispersal', 'Latency Hubs', 'Bare Metal Clusters', 'Sub-millisecond Routing', 'Edge Distribution', 'Sub-Space Tunneling', 'Node Health Polling']} />
               <FooterColumn title="Institutional" links={['Vault Registry', 'Disbursements', 'Collections', 'Registry Settlement', 'Partner CRM', 'KYC Handshake', 'Compliance Node', 'Audit Trail Genesis', 'Asset Custody', 'Corporate Ledger']} />
            </div>

            <div className="pt-20 border-t border-zinc-900 flex flex-col md:flex-row justify-between items-center gap-12">
               <div className="flex flex-wrap justify-center md:justify-start gap-12">
                  <FooterPolicyLink to="/manifesto" label="Honest Manifesto" />
                  <FooterPolicyLink to="/documentation" label="System Manual" />
                  <FooterPolicyLink to="/documentation" label="API Registry" />
                  <FooterPolicyLink to="/airdrop" label="Genesis Airdrop" />
                  <FooterPolicyLink to="/documentation" label="Cookie Protocol" />
                  <FooterPolicyLink to="/documentation" label="SLA Standard" />
               </div>
               <p className="text-[11px] font-black uppercase tracking-[1em] text-zinc-800">Verified 2025 • Citibank Demo Business Inc • aibanking.dev Protocol</p>
            </div>
         </div>
      </footer>
    </div>
  );
};

const MegaLink = ({ icon: Icon, title, desc }: any) => (
  <div className="group/mega flex gap-8 cursor-pointer hover:translate-x-2 transition-transform">
     <div className="p-5 bg-zinc-900 rounded-[2rem] text-zinc-600 group-hover/mega:text-blue-500 transition-colors border border-zinc-800 shadow-xl group-hover/mega:border-blue-500/20">
        <Icon size={32} />
     </div>
     <div>
        <h4 className="text-base font-black text-white uppercase italic tracking-widest mb-1">{title}</h4>
        <p className="text-xs text-zinc-500 font-bold leading-relaxed">{desc}</p>
     </div>
  </div>
);

const HeritageCard = ({ icon: Icon, title, val }: any) => (
  <div className="p-10 bg-zinc-900/30 border border-zinc-800 rounded-[3rem] hover:border-blue-500/20 transition-all shadow-xl group">
     <Icon size={36} className="text-blue-500 mb-8 group-hover:scale-110 transition-transform" />
     <p className="text-[11px] font-black text-zinc-600 uppercase tracking-widest mb-2">{title}</p>
     <p className="text-3xl font-black italic uppercase tracking-tighter text-white leading-none">{val}</p>
  </div>
);

const FooterColumn = ({ title, links }: any) => (
  <div className="space-y-12">
     <h4 className="text-[12px] font-black uppercase tracking-[0.6em] text-white italic">{title}</h4>
     <ul className="space-y-6">
        {links.map((link: string, i: number) => (
          <li key={i}>
            <a href="#" className="text-[10px] font-bold text-zinc-600 hover:text-blue-400 transition-colors uppercase tracking-widest">{link}</a>
          </li>
        ))}
     </ul>
  </div>
);

const SocialIcon = ({ icon: Icon }: any) => (
  <div className="p-6 bg-zinc-900 border border-zinc-800 rounded-3xl text-zinc-500 hover:text-white hover:border-blue-500 transition-all cursor-pointer shadow-xl">
    <Icon size={32} />
  </div>
);

const FooterPolicyLink = ({ to, label }: any) => {
  const navigate = useNavigate();
  return (
    <button onClick={() => navigate(to)} className="text-[10px] font-black uppercase tracking-[0.4em] text-zinc-600 hover:text-white transition-colors">{label}</button>
  );
};

export default Landing;