import React from 'react';
import { BookOpen, Search, Code, LayoutDashboard, Building2, Cpu, ShieldCheck, Zap, Bitcoin, Terminal, ArrowRight, ChevronRight } from 'lucide-react';

const DocSection: React.FC<{ icon: any, title: string, description: string, details: string[] }> = ({ icon: Icon, title, description, details }) => (
  <div className="group bg-zinc-950 border border-zinc-900 p-10 rounded-[3rem] hover:border-blue-500/30 transition-all shadow-2xl">
    <div className="flex items-center gap-6 mb-8">
      <div className="p-4 bg-zinc-900 rounded-2xl text-blue-500 group-hover:scale-110 transition-transform duration-500 border border-zinc-800">
        <Icon size={24} />
      </div>
      <div>
        <h3 className="text-xl font-black text-white italic tracking-tighter uppercase">{title}</h3>
        <p className="text-[10px] font-black text-zinc-600 uppercase tracking-widest">Protocol Segment v6.0</p>
      </div>
    </div>
    <p className="text-zinc-400 text-sm leading-relaxed mb-8 font-medium italic">"{description}"</p>
    <div className="space-y-4 border-t border-zinc-900 pt-8">
      <h4 className="text-[9px] font-black text-zinc-500 uppercase tracking-widest mb-4">Core Functions</h4>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {details.map((d, i) => (
          <div key={i} className="flex items-center gap-3 text-xs font-bold text-zinc-300">
            <div className="w-1.5 h-1.5 rounded-full bg-blue-500"></div>
            {d}
          </div>
        ))}
      </div>
    </div>
  </div>
);

const Documentation: React.FC = () => {
  return (
    <div className="max-w-6xl mx-auto py-20 animate-in slide-in-from-bottom-6 duration-1000">
      <div className="flex flex-col md:flex-row justify-between items-end mb-20 gap-10">
        <div>
          <div className="inline-flex items-center space-x-3 px-4 py-2 bg-blue-500/10 border border-blue-500/20 rounded-full text-[10px] font-black text-blue-500 uppercase tracking-widest mb-6">
            <BookOpen size={12} />
            <span>Lumina System Manual</span>
          </div>
          <h1 className="text-6xl font-black italic text-white uppercase tracking-tighter leading-none">
            Documentation <br /> <span className="text-blue-500 not-italic">Core</span>
          </h1>
        </div>
        <div className="relative w-full md:w-96">
          <Search className="absolute left-6 top-1/2 -translate-y-1/2 text-zinc-600" size={18} />
          <input 
            placeholder="Search Protocol Map..."
            className="w-full bg-zinc-950 border-2 border-zinc-900 focus:border-blue-500/50 rounded-[2rem] py-6 pl-16 pr-8 text-white font-bold outline-none transition-all"
          />
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
        <DocSection 
          icon={LayoutDashboard}
          title="Command Overview"
          description="The central nervous system of the Lumina Quantum Ledger. Aggregates live data from multiple institutional nodes into a singular dashboard."
          details={["Real-time Cash Curve Monitoring", "AI-Driven Liquidity Alerts", "Carbon Deficit Tracking", "Node Health Verification"]}
        />
        <DocSection 
          icon={Building2}
          title="Bank Registry"
          description="Managed corporate treasury nodes connecting directly to tier-1 banks via the FDX v6 protocol. Secure, read-write access to institutional vaults."
          details={["FDX Native Handshakes", "Multi-Institution Syncing", "Available Balance Polling", "Real-time Node Status"]}
        />
        <DocSection 
          icon={Cpu}
          title="Quantum Oracle"
          description="Neural financial forecasting engine. Runs complex 'What-If' simulations using high-fidelity economic models and predictive drift analysis."
          details={["Inflation Spike Modeling", "Compute Cost Forecasting", "Market Volatility Stress Testing", "Resilience AA- Ratings"]}
        />
        <DocSection 
          icon={ShieldCheck}
          title="Record Vault"
          description="Encrypted long-term storage for audit compliance. Every document is cryptographically signed and stored with sha256 checksum integrity."
          details={["Institutional Archive Export", "Cryptographic Metadata Storage", "Compliance Audit Trails", "Multi-format Ledger Support"]}
        />
        <DocSection 
          icon={Bitcoin}
          title="Asset Terminal"
          description="Decentralized finance gateway for corporate treasuries. High-frequency trading (HFT) interface with neural-enhanced depth analysis."
          details={["Real-time Global Market Data", "AI Sentiment Monitoring", "High-Frequency Tick Visualization", "Subspace Signal Parity"]}
        />
        <DocSection 
          icon={Zap}
          title="Onboarding Flows"
          description="Low-friction institutional integration layer. Dynamically generate secure handshakes for account collection and payment authorization."
          details={["AI SDK Code Architect", "RTP Payment Triggering", "Dynamic Client Registration", "Secure Token Issuance"]}
        />
      </div>

      <div className="mt-20 p-12 bg-blue-600 rounded-[3.5rem] flex flex-col md:flex-row justify-between items-center gap-10 shadow-[0_30px_60px_rgba(37,99,235,0.2)]">
        <div className="flex items-center gap-8">
          <div className="w-20 h-20 bg-white/20 rounded-3xl flex items-center justify-center text-white backdrop-blur-md">
            <Terminal size={40} />
          </div>
          <div>
            <h4 className="text-2xl font-black text-white italic tracking-tighter uppercase mb-2">Need Direct Handshake?</h4>
            <p className="text-blue-100 text-sm max-w-lg font-bold leading-relaxed">Our AI Terminal architects are online 24/7 to help you deploy custom node integrations and quantum-resistant treasury flows.</p>
          </div>
        </div>
        <button onClick={() => window.history.back()} className="px-10 py-5 bg-white text-blue-600 rounded-2xl font-black text-xs uppercase tracking-widest hover:scale-105 transition-all shadow-xl">
           Open AI Advisor
        </button>
      </div>
    </div>
  );
};

export default Documentation;