'use client';

import React from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { motion } from 'framer-motion';

export default function Home() {
  return (
    <div className="bg-[#09090B] text-white font-poppins">
      {/* TopNavBar */}
      <nav className="fixed top-0 w-full z-50 pt-8 flex justify-center pointer-events-none">
        <div className="flex justify-between items-center max-w-[90rem] w-full mx-auto px-8">
          {/* Logo */}
          <Link href="/" className="flex items-center gap-3 pointer-events-auto w-[250px] hover:opacity-80 transition-opacity drop-shadow-lg">
            <Image src="/new-logo.png" alt="ThirdEye" width={32} height={32} className="rounded-md" />
            <div className="flex flex-col justify-center">
              <div className="text-2xl font-black tracking-wide text-[#a88cf8] uppercase leading-none mt-1">THIRDEYE</div>
              <div className="text-[9px] font-bold tracking-[0.3em] text-zinc-500 mt-1.5 uppercase">SOVEREIGN_V1</div>
            </div>
          </Link>
          
          {/* Center Pill Navigation */}
          <div className="hidden md:flex items-center gap-8 px-8 py-3 rounded-full border border-white/10 bg-[#09090B]/60 backdrop-blur-xl pointer-events-auto shadow-[0_10px_30px_rgba(0,0,0,0.5)]">
            <Link href="/intelligence" className="text-sm font-medium text-white/70 hover:text-white transition-colors tracking-wide">Intelligence</Link>
            <Link href="/agents" className="text-sm font-medium text-white/70 hover:text-white transition-colors tracking-wide">Agents</Link>
            <Link href="/knowledge-base" className="text-sm font-medium text-white/70 hover:text-white transition-colors tracking-wide">Security</Link>
            <Link href="/logs" className="text-sm font-medium text-white/70 hover:text-white transition-colors tracking-wide">Infrastructure</Link>
            <Link href="#pricing" className="text-sm font-medium text-white/70 hover:text-white transition-colors tracking-wide">Pricing</Link>
          </div>

          {/* Right Actions */}
          <div className="flex items-center justify-end pointer-events-auto w-[200px]">
            <Link href="/mission" className="bg-primary/10 hover:bg-primary/20 text-white/90 px-5 py-2.5 rounded-full text-sm font-semibold transition-colors border border-primary/20 tracking-wide shadow-[0_0_15px_rgba(167,139,250,0.15)]">
              Launch Control
            </Link>
          </div>
        </div>
      </nav>

      <main className="relative overflow-hidden">
        {/* Fixed Futuristic Background */}
        <div className="fixed inset-0 z-0 pointer-events-none tech-bg-base">
          <div className="absolute inset-0 tech-grid"></div>
          <div className="absolute inset-0 tech-lights opacity-50"></div>
          <div className="absolute inset-0 bg-gradient-to-b from-transparent via-[#09090B]/50 to-[#09090B] pointer-events-none"></div>
        </div>

        {/* Hero Section */}
        <section className="relative pt-32 pb-0 px-8 z-10 min-h-screen flex flex-col items-center justify-start overflow-hidden" id="hero">
          
          {/* Fading Background concentric circles */}
          <div className="absolute top-[40%] left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-[800px] -z-10 mask-radial-fade">
            <div className="orbit-ring w-[40vw] h-[40vw] max-w-[600px] max-h-[600px]"></div>
            <div className="orbit-ring w-[60vw] h-[60vw] max-w-[800px] max-h-[800px]"></div>
            <div className="orbit-ring w-[80vw] h-[80vw] max-w-[1000px] max-h-[1000px]"></div>
          </div>
          
          {/* Header Content */}
          <div className="max-w-6xl mx-auto text-center relative z-20 mt-4">
            {/* Pill Badge */}
            <motion.div 
              initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6 }}
              className="inline-flex items-center gap-2 px-5 py-2 rounded-full border border-white/10 bg-white/[0.03] backdrop-blur-md mb-6 hover:bg-white/[0.05] transition-colors cursor-pointer"
            >
              <span className="text-white">✨</span>
              <span className="text-xs font-semibold text-white/90 tracking-wide">New: ThirdEye Core v2.4 Active</span>
            </motion.div>
            
            {/* Title */}
            <motion.h1 
              initial={{ opacity: 0, scale: 0.98 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 0.7, delay: 0.1 }}
              className="text-6xl md:text-8xl lg:text-[7rem] font-semibold tracking-tight text-white mb-6 leading-tight"
            >
              Think better with <br className="hidden md:block" />ThirdEye
            </motion.h1>
            
            {/* Subtitle */}
            <motion.p 
              initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6, delay: 0.2 }}
              className="text-xl md:text-2xl lg:text-3xl text-on-surface-variant font-medium mb-10 max-w-3xl mx-auto leading-relaxed"
            >
              Never miss a note, idea, or connection within your own hardened infrastructure.
            </motion.p>
          </div>

          {/* Black Hole & Flare Layer */}
          <div className="relative w-full flex justify-center mt-4 md:mt-8 h-[280px] pointer-events-none z-10">
            {/* Horizontal flares */}
            <div className="hero-beam"></div>
            <div className="hero-beam-core"></div>
            
            {/* The Ring */}
            <div className="black-hole-ring w-[220px] h-[220px] md:w-[320px] md:h-[320px]"></div>
            <div className="absolute top-[50%] left-[50%] -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] bg-[#a855f7]/20 rounded-full blur-[80px] -z-10"></div>
          </div>

          {/* Mock UI Container */}
          <motion.div 
            initial={{ opacity: 0, y: 40 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8, delay: 0.4 }}
            className="w-full max-w-6xl mx-auto -mt-[140px] md:-mt-[180px] relative z-20 px-4 pb-20"
          >
            <div 
              className="w-full aspect-[16/9] bg-[#0c0a15]/80 backdrop-blur-xl rounded-[1rem] border border-white/10 shadow-[0_40px_100px_rgba(167,139,250,0.15)] overflow-hidden flex flex-col relative"
              style={{ WebkitMaskImage: 'linear-gradient(to bottom, black 60%, transparent 100%)', maskImage: 'linear-gradient(to bottom, black 60%, transparent 100%)' }}
            >
              {/* Fake UI Header */}
              <div className="h-12 border-b border-white/5 flex items-center px-4 gap-4 w-full bg-[#12101c]/90">
                <div className="flex gap-2">
                  <div className="w-2.5 h-2.5 rounded-full bg-white/20"></div>
                  <div className="w-2.5 h-2.5 rounded-full bg-white/20"></div>
                  <div className="w-2.5 h-2.5 rounded-full bg-white/20"></div>
                </div>
                <div className="h-5 w-48 bg-white/5 rounded mx-2"></div>
                <div className="ml-auto h-5 w-8 bg-white/5 rounded"></div>
              </div>
              {/* Fake UI Body */}
              <div className="flex-1 flex w-full h-full text-left overflow-hidden">
                {/* Sidebar - File Tree */}
                <div className="w-56 border-r border-white/5 p-4 flex flex-col gap-1 font-mono text-xs text-zinc-400 bg-black/20">
                  <div className="text-zinc-500 font-bold mb-3 uppercase tracking-widest text-[10px] pl-2 mt-2">Explorer</div>
                  <div className="flex items-center gap-3 text-primary bg-primary/10 px-3 py-2 rounded-md"><span className="material-symbols-outlined text-[16px]">description</span> thirdeye.ts</div>
                  <div className="flex items-center gap-3 hover:bg-white/5 px-3 py-2 rounded-md cursor-pointer transition-colors"><span className="material-symbols-outlined text-[16px]">shield</span> vault.config.json</div>
                  <div className="flex items-center gap-3 hover:bg-white/5 px-3 py-2 rounded-md cursor-pointer transition-colors"><span className="material-symbols-outlined text-[16px]">api</span> neural_routes.ts</div>
                  <div className="flex items-center gap-3 hover:bg-white/5 px-3 py-2 rounded-md cursor-pointer transition-colors"><span className="material-symbols-outlined text-[16px]">database</span> vector_store.ts</div>
                </div>
                
                {/* Content - Code Editor */}
                <div className="flex-1 flex flex-col bg-[#0d0914]/60 relative">
                  <div className="w-full h-10 bg-black/40 border-b border-white/5 flex items-center px-4 shrink-0">
                    <div className="text-xs font-mono text-zinc-300 flex items-center gap-3 bg-white/5 px-4 py-1.5 rounded-t-lg border-b-2 border-primary">
                      <span className="text-primary tracking-widest">thirdeye.ts</span>
                      <span className="w-1.5 h-1.5 rounded-full bg-white/20"></span>
                    </div>
                  </div>
                  <div className="flex-1 p-6 overflow-hidden relative">
                    {/* Line numbers area */}
                    <div className="absolute left-0 top-0 bottom-0 w-12 bg-black/20 border-r border-white/5 pt-6 pb-6 flex flex-col items-end pr-3 font-mono text-xs text-zinc-600 select-none space-y-[0.4rem]">
                      {[...Array(15)].map((_, i) => <div key={i}>{i + 1}</div>)}
                    </div>
                    {/* Code */}
                    <pre className="text-[13px] font-mono text-zinc-300 leading-relaxed ml-10 pl-4 whitespace-pre">
                      <span className="text-pink-400">import</span> {'{'} ThirdEyeAgent, VaultConnection {'}'} <span className="text-pink-400">from</span> <span className="text-emerald-300">'@thirdeye/core'</span>;<br/><br/>
                      <span className="text-slate-500 opacity-60">// Initialize secure intelligence node</span><br/>
                      <span className="text-pink-400">const</span> edgeNode = <span className="text-pink-400">new</span> <span className="text-yellow-200">ThirdEyeAgent</span>({'{'}<br/>
                      &nbsp;&nbsp;model: <span className="text-emerald-300">'neural-synth-v4'</span>,<br/>
                      &nbsp;&nbsp;securityLevel: <span className="text-orange-300">9</span>,<br/>
                      &nbsp;&nbsp;airGapped: <span className="text-indigo-300">true</span><br/>
                      {'}'});<br/><br/>
                      <span className="text-pink-400">async function</span> <span className="text-blue-300">deployIntelligence</span>() {'{'}<br/>
                      &nbsp;&nbsp;<span className="text-pink-400">await</span> VaultConnection.<span className="text-yellow-200">establish</span>();<br/>
                      &nbsp;&nbsp;<span className="text-pink-400">const</span> insights = <span className="text-pink-400">await</span> edgeNode.<span className="text-yellow-200">processStream</span>({'{'}<br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;source: <span className="text-emerald-300">'internal-comms'</span>,<br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;realtime: <span className="text-indigo-300">true</span><br/>
                      &nbsp;&nbsp;{'}'});<br/>
                      &nbsp;&nbsp;<span className="text-indigo-300">console</span>.<span className="text-yellow-200">log</span>(<span className="text-emerald-300">'[SYSTEM] Intelligence active: '</span>, insights);<br/>
                      {'}'}<br/><br/>
                      <span className="text-yellow-200">deployIntelligence</span>();
                    </pre>
                  </div>
                </div>

                {/* Right Panel - Terminal Output */}
                <div className="w-72 p-5 flex flex-col bg-black/60 border-l border-white/5 font-mono text-[11px] leading-loose">
                  <div className="flex items-center justify-between mb-4 border-b border-white/10 pb-3">
                    <div className="text-zinc-500 font-bold uppercase tracking-widest text-[10px]">Terminal</div>
                    <div className="flex gap-2 text-zinc-600">
                       <span className="w-2.5 h-2.5 rounded-full border border-zinc-500 cursor-pointer hover:border-white"></span>
                       <span className="w-2.5 h-2.5 rounded-full border border-zinc-500 cursor-pointer hover:border-white"></span>
                    </div>
                  </div>
                  <div className="text-zinc-400 truncate"><span className="text-emerald-400 mr-2">➜</span><span className="text-cyan-400">~</span> pnpm run deploy</div>
                  <div className="text-zinc-500 mt-2 truncate">[14:02:01] Starting ThirdEye v2.4...</div>
                  <div className="text-zinc-500 truncate">[14:02:02] Establishing Vault... <span className="text-emerald-400 ml-1">OK</span></div>
                  <div className="text-zinc-500 truncate">[14:02:03] Binding to Edge Nodes... <span className="text-emerald-400 ml-1">OK</span></div>
                  <div className="text-amber-400/80 mt-2 bg-amber-400/10 px-2 border-l border-amber-400 text-[10px] leading-relaxed">WARN: Semantic drift detected in Node 4. Compensating...</div>
                  <div className="text-primary mt-4 flex items-center gap-2 animate-pulse bg-primary/10 px-2 py-1 rounded w-max">
                    <span className="w-2 h-2 bg-primary rounded-full block shadow-[0_0_8px_rgba(167,139,250,1)]"></span> <span className="font-semibold text-[10px]">Awaiting stream</span>
                  </div>
                  
                  {/* Visual grid representing active nodes */}
                  <div className="mt-auto mb-2 text-zinc-500 font-bold uppercase tracking-widest text-[9px] flex items-center gap-2">
                    Node Matrix <span className="w-full h-px bg-white/5 flex-1"></span>
                  </div>
                  <div className="grid grid-cols-6 xl:grid-cols-8 gap-1.5 mt-2">
                    {[...Array(24)].map((_, i) => (
                      <div key={i} className={`aspect-square rounded-[2px] ${i === 12 || i === 18 ? 'bg-primary animate-pulse shadow-[0_0_5px_rgba(167,139,250,0.8)]' : i % 7 === 0 ? 'bg-emerald-400/60' : 'bg-white/5'}`}></div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </motion.div>
        </section>

        {/* The Lens (Architecture) */}
        <section className="pt-48 pb-32 px-8 relative z-10" id="architecture">
          {/* Smooth Section Transition & Grid Background */}
          <div className="absolute inset-0 bg-gradient-to-b from-transparent via-[#050408] to-transparent -z-10"></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:48px_48px] [mask-image:linear-gradient(to_bottom,transparent_0%,black_20%,black_80%,transparent_100%)] -z-10"></div>
          <div className="max-w-[85rem] mx-auto relative z-10">
            <motion.div 
              initial={{ opacity: 0, y: 30 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, margin: "-100px" }} transition={{ duration: 0.7 }}
              className="mb-20"
            >
              <h2 className="text-zinc-500 font-mono text-[11px] tracking-[0.3em] uppercase mb-4 font-bold">The Lens</h2>
              <h3 className="text-4xl md:text-5xl font-black text-white/90 tracking-tight">Technical Architecture</h3>
            </motion.div>
            
            <motion.div 
              initial={{ opacity: 0 }} whileInView={{ opacity: 1 }} viewport={{ once: true }} transition={{ duration: 1 }}
              className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 border-l border-t border-white/[0.05]"
            >
              {[
                { icon: "speed", title: "Built for throughput", desc: "Instantly sync agent telemetry across local nodes." },
                { icon: "hub", title: "Networked nodes", desc: "Form a robust graph of capabilities with semantic routing." },
                { icon: "memory", title: "Edge deployment", desc: "Run natively on endpoint devices, online or air-gapped." },
                { icon: "lock", title: "End-to-end encryption", desc: "Only you and authorized personnel can access military-grade Vaults." },
                { icon: "event", title: "Orchestration timeline", desc: "Keep track of active multi-agent cycles and agendas." },
                { icon: "wifi_tethering", title: "Live broadcasting", desc: "Push logic updates to all running swarms with one click." },
                { icon: "save", title: "Instant snapshots", desc: "Save contextual states from ongoing browser or API sessions." },
                { icon: "search", title: "Frictionless recall", desc: "Easily retrieve and index past agent decisions at lightning speed." }
              ].map((item, i) => (
                <div key={i} className="border-r border-b border-white/[0.05] p-10 hover:bg-white/[0.02] transition-colors flex flex-col justify-start">
                  <div className="w-10 h-10 rounded-lg bg-white/[0.02] border border-white/10 flex items-center justify-center mb-10 shadow-sm">
                     <span className="material-symbols-outlined text-zinc-300 text-[20px]">{item.icon}</span>
                  </div>
                  <h4 className="text-[15px] font-semibold text-white/90 mb-3 tracking-wide">{item.title}</h4>
                  <p className="text-[14px] text-zinc-500/90 leading-relaxed font-medium">{item.desc}</p>
                </div>
              ))}
            </motion.div>
          </div>
        </section>

        {/* Mission Control Dashboard Preview */}
        <section className="py-32 px-8 overflow-hidden relative z-10" id="dashboard">
          <div className="max-w-7xl mx-auto">
            <motion.div 
              initial={{ opacity: 0, scale: 0.98, y: 40 }} whileInView={{ opacity: 1, scale: 1, y: 0 }} viewport={{ once: true, margin: "-100px" }} transition={{ duration: 0.8, ease: "easeOut" }}
              className="w-full bg-[#121115] rounded-xl border border-violet-500/20 shadow-[0_30px_100px_rgba(0,0,0,0.9),0_0_80px_rgba(167,139,250,0.25)] overflow-hidden relative ring-1 ring-violet-500/10"
            >
              {/* Top Bar */}
              <div className="h-12 border-b border-[#2a2833] flex items-center px-4 gap-2">
                 <div className="flex gap-1.5 opacity-80 pl-2">
                   <div className="w-3 h-3 rounded-full bg-red-500/80"></div>
                   <div className="w-3 h-3 rounded-full bg-amber-500/80"></div>
                   <div className="w-3 h-3 rounded-full bg-green-500/80"></div>
                 </div>
                 <div className="ml-6 font-mono text-[10px] text-zinc-400 tracking-widest font-bold">THIRDEYE_ADMIN_DASHBOARD_V4.0</div>
              </div>

              {/* Grid content */}
              <div className="p-6 md:p-8 grid grid-cols-1 lg:grid-cols-12 gap-6 relative bg-[radial-gradient(#ffffff04_1px,transparent_1px)] [background-size:24px_24px]">

                 <div className="lg:col-span-8 flex flex-col gap-6 relative z-10">
                    {/* Main Chart */}
                    <motion.div 
                      initial={{ opacity: 0, y: 10 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.2 }}
                      className="h-[280px] bg-[#0c0b0f] rounded-xl border border-[#2a2833] p-8 flex flex-col relative shadow-inner shadow-white/[0.01]"
                    >
                       <div className="flex justify-between items-center mb-10">
                         <h5 className="font-bold text-white uppercase tracking-[0.2em] text-xs">Global Intelligence Stream</h5>
                         <div className="text-[10px] font-mono text-zinc-400 border border-[#333] bg-[#1a1820] px-3 py-1.5 rounded">LIVE UPDATES</div>
                       </div>

                       <div className="flex-1 flex items-end justify-between gap-1.5 md:gap-3 px-2">
                         {[40, 65, 25, 60, 45, 100, 35, 60, 40].map((h, i) => (
                           <div key={i} className="flex-1 flex flex-col justify-end items-center group relative h-full">
                              <div 
                                className={`w-full rounded-t-sm transition-all duration-300 ${i === 5 ? 'bg-[#9d8bbd] shadow-[0_0_15px_rgba(157,139,189,0.2)]' : 'bg-[#4a4657]'}`}
                                style={{ height: `${h}%` }}
                              ></div>
                           </div>
                         ))}
                       </div>
                    </motion.div>

                    {/* Stats Row */}
                    <div className="grid grid-cols-3 gap-6">
                      {[
                        { label: "NODES_ONLINE", value: "1,204" },
                        { label: "THREAT_MITIGATION", value: "99.9%", glow: true },
                        { label: "LATENCY_MS", value: "0.42" }
                      ].map((stat, i) => (
                        <motion.div 
                          key={i}
                          initial={{ opacity: 0, y: 15 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.3 + (i * 0.1) }}
                          className={`bg-[#0c0b0f] p-6 rounded-xl border border-[#2a2833] flex flex-col justify-between shadow-inner shadow-white/[0.01]`}
                        >
                          <div className="text-[10px] text-zinc-500 font-mono tracking-widest mb-6 uppercase">{stat.label}</div>
                          <div className={`text-4xl font-black font-sans tracking-tight ${stat.glow ? 'text-[#c0aaf2]' : 'text-white'}`}>{stat.value}</div>
                        </motion.div>
                      ))}
                    </div>
                 </div>

                 <motion.div 
                   initial={{ opacity: 0, x: 20 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} transition={{ delay: 0.4 }}
                   className="lg:col-span-4 bg-[#0c0b0f] p-8 rounded-xl border border-[#2a2833] shadow-inner shadow-white/[0.01] flex flex-col relative z-10"
                 >
                   <div className="mb-10 pb-4">
                     <h5 className="font-bold text-white uppercase tracking-[0.2em] text-xs">Mission Log</h5>
                   </div>
                   <div className="space-y-8 font-mono text-[11px] leading-relaxed flex-1 overflow-auto opacity-90 pr-2">
                     {[
                       { time: "12:45", msg: "Agent_Alpha: Summarizing internal memo cluster 4...", type: "normal" },
                       { time: "12:46", msg: "Encryption check complete: All tunnels secure.", type: "normal" },
                       { time: "12:48", msg: "ALERT: New semantic trend identified in Sales.", type: "alert" },
                       { time: "12:50", msg: "Syncing with ThirdEye Vault...", type: "normal" },
                       { time: "12:52", msg: "Agent_Gamma: Optimizing inference pathways.", type: "normal" },
                       { time: "12:55", msg: "Node_Delta: Status green. Processing...", type: "normal" }
                     ].map((log, i) => (
                       <motion.div 
                         key={i}
                         initial={{ opacity: 0, x: -10 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} transition={{ delay: 0.5 + (i * 0.05) }}
                         className={`flex gap-4 items-start`}
                       >
                         <span className="text-zinc-500 shrink-0">[{log.time}]</span>
                         <span className={`${
                           log.type === 'alert' ? 'text-[#c0aaf2] font-bold' : 'text-zinc-300'
                         }`}>{log.msg}</span>
                       </motion.div>
                     ))}
                   </div>
                 </motion.div>
              </div>
            </motion.div>
          </div>
        </section>

        {/* Integrations (Infrastructure replacement) */}
        <section className="py-40 px-8 relative z-10" id="integrations">
          <div className="max-w-[85rem] mx-auto flex flex-col items-center">
            {/* Header */}
            <div className="flex flex-col items-center text-center opacity-90 mb-32">
              <div className="px-5 py-1.5 rounded-full border border-[#a88cf8]/30 bg-[#a88cf8]/5 text-[11px] font-mono tracking-widest text-[#a88cf8] mb-8 shadow-[0_0_20px_rgba(168,140,248,0.15)]">
                Integrations
              </div>
              <h3 className="text-4xl md:text-5xl font-semibold text-white tracking-tight leading-tight">
                Connect ThirdEye <br className="hidden md:block"/>to your infrastructure
              </h3>
            </div>

            {/* Central Hub Layout */}
            <div className="relative w-full max-w-5xl flex flex-col md:flex-row items-center justify-between">
              
              {/* Vertical line mapping and central orb */}
              <div className="absolute left-1/2 top-[10%] bottom-[10%] -translate-x-1/2 w-[1px] bg-gradient-to-b from-transparent via-[#a88cf8]/30 to-transparent z-0 hidden md:block"></div>
              
              <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10 hidden md:flex items-center justify-center">
                <div className="w-16 h-16 rounded-full bg-[#120F1D] border border-[#a88cf8]/20 shadow-[0_0_60px_rgba(168,140,248,0.25)] relative flex items-center justify-center">
                   {/* Inner glow */}
                   <div className="w-8 h-8 rounded-full bg-[#a88cf8] blur-[15px] opacity-40"></div>
                </div>
              </div>

              {/* Left Column */}
              <div className="flex flex-col gap-24 w-full md:w-[40%] items-center relative z-20">
                <div className="flex flex-col items-center text-center">
                  <div className="w-16 h-16 bg-[#0A0A0C] border border-white/[0.08] shadow-lg rounded-2xl flex items-center justify-center mb-6 shadow-[#000]/50">
                    <span className="material-symbols-outlined text-zinc-300 text-3xl">database</span>
                  </div>
                  <h4 className="text-[17px] font-semibold text-zinc-200 mb-3">SQL & NoSQL</h4>
                  <p className="text-[14px] text-zinc-500 leading-relaxed max-w-[280px]">Securely index structured data from Postgres, MySQL, and MongoDB locally.</p>
                </div>
                
                <div className="flex flex-col items-center text-center">
                  <div className="w-16 h-16 bg-[#0A0A0C] border border-white/[0.08] shadow-lg rounded-2xl flex items-center justify-center mb-6 shadow-[#000]/50">
                    <span className="material-symbols-outlined text-zinc-300 text-3xl">terminal</span>
                  </div>
                  <h4 className="text-[17px] font-semibold text-zinc-200 mb-3">Git Providers</h4>
                  <p className="text-[14px] text-zinc-500 leading-relaxed max-w-[280px]">Scan repositories and track PRs to give agents full codebase context.</p>
                </div>
              </div>

              {/* Right Column */}
              <div className="flex flex-col gap-24 w-full md:w-[40%] items-center relative z-20 mt-24 md:mt-0">
                <div className="flex flex-col items-center text-center">
                  <div className="w-16 h-16 bg-[#0A0A0C] border border-white/[0.08] shadow-lg rounded-2xl flex items-center justify-center mb-6 shadow-[#000]/50">
                    <span className="material-symbols-outlined text-zinc-300 text-3xl">forum</span>
                  </div>
                  <h4 className="text-[17px] font-semibold text-zinc-200 mb-3">Communication Streams</h4>
                  <p className="text-[14px] text-zinc-500 leading-relaxed max-w-[280px]">Ingest continuous organizational communication from Slack and Teams safely.</p>
                </div>
                
                <div className="flex flex-col items-center text-center">
                  <div className="w-16 h-16 bg-[#0A0A0C] border border-white/[0.08] shadow-lg rounded-2xl flex items-center justify-center mb-6 shadow-[#000]/50">
                    <span className="material-symbols-outlined text-zinc-300 text-3xl">cloud</span>
                  </div>
                  <h4 className="text-[17px] font-semibold text-zinc-200 mb-3">Cloud Storage</h4>
                  <p className="text-[14px] text-zinc-500 leading-relaxed max-w-[280px]">Direct VPC peering for your high-volume AWS and Azure storage buckets.</p>
                </div>
              </div>

            </div>
          </div>
        </section>

        {/* Pricing (Intelligence Fleet) */}
        <section className="py-40 px-8 relative z-10" id="pricing">
          <div className="max-w-7xl mx-auto">
            <motion.div 
              initial={{ opacity: 0, y: 30 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.6 }}
              className="text-center mb-20 flex flex-col items-center"
            >
              <div className="px-5 py-1.5 rounded-full border border-[#a88cf8]/30 bg-[#a88cf8]/5 text-[11px] font-mono tracking-widest text-[#a88cf8] mb-6 shadow-[0_0_20px_rgba(168,140,248,0.15)] uppercase">
                Fleet Access
              </div>
              <h3 className="text-4xl md:text-5xl font-bold text-white tracking-tight">Intelligence Fleet</h3>
            </motion.div>
            
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
              {/* Sentry */}
              <motion.div 
                initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5, delay: 0.1 }}
                className="bg-[#050505] border border-white/[0.05] p-10 rounded-3xl flex flex-col transition-all duration-500 hover:border-white/10 hover:bg-[#080808]"
              >
                <h4 className="text-[18px] font-semibold text-zinc-100 mb-2">Sentry</h4>
                <div className="text-4xl font-bold text-white mb-8">$2,490<span className="text-sm font-medium text-zinc-500 ml-1">/mo</span></div>
                <ul className="space-y-4 mb-12 flex-grow">
                  {["10 Specialized Agents", "50k Inference Tokens/Day", "Cloud Isolation"].map((item, i) => (
                    <li key={i} className="flex items-center gap-3 text-zinc-400 text-[14px]">
                      <span className="material-symbols-outlined text-white/20 text-[16px]">check</span>
                      {item}
                    </li>
                  ))}
                </ul>
                <button className="w-full py-3.5 rounded-xl border border-white/10 text-zinc-300 font-semibold text-[14px] hover:bg-white/[0.04] hover:text-white transition-all">Select Fleet</button>
              </motion.div>

              {/* Commander */}
              <motion.div 
                initial={{ opacity: 0, y: 30 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5, delay: 0.2 }}
                className="bg-[#0b0814] border border-[#a88cf8]/40 p-10 rounded-3xl relative flex flex-col z-10 transition-all duration-500 shadow-[0_0_80px_rgba(168,140,248,0.12)] md:-mt-4 md:mb-4"
              >
                <div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-[#1A1528] border border-[#a88cf8]/50 text-[#a88cf8] px-4 py-1 rounded-full text-[9px] font-mono font-bold uppercase tracking-[0.2em] shadow-[0_0_20px_rgba(168,140,248,0.2)]">Recommended</div>
                <h4 className="text-[18px] font-semibold text-[#a88cf8] mb-2">Commander</h4>
                <div className="text-4xl font-bold text-white mb-8">$8,900<span className="text-sm font-medium text-zinc-500 ml-1">/mo</span></div>
                <ul className="space-y-4 mb-12 flex-grow">
                  {["50 Specialized Agents", "500k Inference Tokens/Day", "On-Prem Hybrid Deployment", "24/7 Priority Support"].map((item, i) => (
                    <li key={i} className="flex items-center gap-3 text-zinc-200 text-[14px]">
                      <span className="material-symbols-outlined text-[#a88cf8] text-[16px]">check</span>
                      {item}
                    </li>
                  ))}
                </ul>
                <button className="w-full py-3.5 rounded-xl bg-[#a88cf8] text-[#050505] font-bold text-[14px] shadow-[0_0_30px_rgba(168,140,248,0.25)] hover:shadow-[0_0_40px_rgba(168,140,248,0.4)] transition-all">Initiate Fleet</button>
              </motion.div>

              {/* Enterprise */}
              <motion.div 
                initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5, delay: 0.3 }}
                className="bg-[#050505] border border-white/[0.05] p-10 rounded-3xl flex flex-col transition-all duration-500 hover:border-white/10 hover:bg-[#080808]"
              >
                <h4 className="text-[18px] font-semibold text-zinc-100 mb-2">Enterprise</h4>
                <div className="text-4xl font-bold text-white mb-8">Custom</div>
                <ul className="space-y-4 mb-12 flex-grow">
                  {["Unlimited Agents", "Dedicated Compute Fleet", "Full Air-Gapped Install"].map((item, i) => (
                    <li key={i} className="flex items-center gap-3 text-zinc-400 text-[14px]">
                      <span className="material-symbols-outlined text-white/20 text-[16px]">check</span>
                      {item}
                    </li>
                  ))}
                </ul>
                <button className="w-full py-3.5 rounded-xl border border-white/10 text-zinc-300 font-semibold text-[14px] hover:bg-white/[0.04] hover:text-white transition-all">Contact Command</button>
              </motion.div>
            </div>
          </div>
        </section>

        {/* Final CTA */}
        <section className="py-40 px-8 relative z-10" id="cta">
          <div className="absolute inset-0 bg-primary-container/10 -z-10 blur-[180px] alive-glow"></div>
          <div className="max-w-5xl mx-auto text-center">
            <h2 className="text-6xl md:text-8xl font-black text-white tracking-tighter mb-10 leading-[1.1]">Assemble your<br />intelligence fleet</h2>
            <p className="text-on-surface-variant/90 text-xl mb-16 max-w-2xl mx-auto leading-relaxed">The era of generic AI is over. Deploy a secure, local intelligence layer that actually understands your organization.</p>
            <Link href="/mission" className="inline-block px-16 py-8 bg-primary-container text-on-primary-container text-2xl font-black rounded-3xl shadow-[0_0_80px_rgba(167,139,250,0.4)] hover:scale-105 active:scale-95 transition-all duration-500">
              Initiate Deployment
            </Link>
          </div>
        </section>
      </main>

      {/* Footer */}
      <footer className="bg-zinc-950/80 backdrop-blur-3xl w-full py-20 border-t border-white/5">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-12 max-w-7xl mx-auto px-8">
          <div className="col-span-1 md:col-span-1">
            <div className="flex items-center gap-3 mb-6">
              <Image src="/new-logo.png" alt="ThirdEye" width={32} height={32} className="rounded-md" />
              <div className="text-2xl font-black text-white">THIRDEYE</div>
            </div>
            <div className="font-mono text-[10px] uppercase tracking-[0.3em] text-zinc-500 leading-loose">© 2024 THIRDEYE.<br />ALL SYSTEMS OPERATIONAL.</div>
          </div>
          <div className="flex flex-col gap-4">
            <span className="text-white font-bold text-sm mb-2">Technical</span>
            <Link href="/logs" className="font-mono text-[10px] uppercase tracking-[0.3em] text-zinc-500 hover:text-primary transition-colors font-bold">Documentation</Link>
            <Link href="/intelligence" className="font-mono text-[10px] uppercase tracking-[0.3em] text-zinc-500 hover:text-primary transition-colors font-bold">API Reference</Link>
          </div>
          <div className="flex flex-col gap-4">
            <span className="text-white font-bold text-sm mb-2">Company</span>
            <Link href="/mission" className="font-mono text-[10px] uppercase tracking-[0.3em] text-zinc-500 hover:text-primary transition-colors font-bold">About</Link>
            <Link href="/knowledge-base" className="font-mono text-[10px] uppercase tracking-[0.3em] text-zinc-500 hover:text-primary transition-colors font-bold">Security</Link>
          </div>
          <div className="flex flex-col gap-4">
            <span className="text-white font-bold text-sm mb-2">Legal</span>
            <a href="#" className="font-mono text-[10px] uppercase tracking-[0.3em] text-zinc-500 hover:text-primary transition-colors font-bold">Status</a>
            <a href="#" className="font-mono text-[10px] uppercase tracking-[0.3em] text-zinc-500 hover:text-primary transition-colors font-bold">Privacy</a>
          </div>
        </div>
      </footer>
    </div>
  );
}