import React, { useState, useEffect, useMemo } from 'react';
import { 
  AlertTriangle, 
  TrendingDown, 
  TrendingUp, 
  Activity, 
  Info, 
  ExternalLink, 
  Database,
  ArrowUpDown,
  Clock,
  Gauge,
  Flame,
  Zap
} from 'lucide-react';

// --- EXPANDED 2026 MACRO ESTIMATES ---
// Represents a >$2.3 Trillion capex cycle driven by gigawatt-scale data centers, 
// sovereign AI initiatives, and continuous foundation model scaling.
const AI_COMPANIES = [
  {
    id: 'msft',
    name: 'Microsoft',
    category: 'Big Tech / Cloud',
    annualSpend: 450000000000, // $450B (Stargate, Nuclear energy deals, Azure AI)
    annualRev: 45000000000,    // $45B (Copilot enterprise + Azure AI API)
    confidence: 'High',
    source: 'Azure AI CapEx / Earnings Projections',
    url: '#'
  },
  {
    id: 'goog',
    name: 'Alphabet (Google)',
    category: 'Big Tech / Models',
    annualSpend: 400000000000, // $400B (GCP expansion, TPUs, DeepMind)
    annualRev: 38000000000,    // $38B (Gemini Advanced, GCP AI services)
    confidence: 'High',
    source: '10-Q Infrastructure Breakdown',
    url: '#'
  },
  {
    id: 'amzn',
    name: 'Amazon (AWS)',
    category: 'Big Tech / Cloud',
    annualSpend: 380000000000, // $380B (Bedrock, Trainium/Inferentia clusters)
    annualRev: 32000000000,    // $32B (AWS AI workload run-rate)
    confidence: 'High',
    source: 'AWS CapEx Guidance',
    url: '#'
  },
  {
    id: 'meta',
    name: 'Meta',
    category: 'Big Tech / Open Source',
    annualSpend: 300000000000, // $300B (Llama 4/5 clusters, 1M+ H100/B200 equivalents)
    annualRev: 6000000000,     // $6B (Direct AI ad-lift & smart glasses)
    confidence: 'Medium',
    source: 'Earnings Call / GPU Supply Chain',
    url: '#'
  },
  {
    id: 'sovereign',
    name: 'Sovereign AI (Global)',
    category: 'Nation-State',
    annualSpend: 250000000000, // $250B (Middle East, EU, Asia national clusters)
    annualRev: 0,              // Pre-revenue / strategic non-commercial
    confidence: 'Low',
    source: 'Geopolitical Tracking Estimates',
    url: '#'
  },
  {
    id: 'openai',
    name: 'OpenAI',
    category: 'Pure Play AI',
    annualSpend: 150000000000, // $150B (Compute, massive talent, data licensing)
    annualRev: 18000000000,    // $18B (ChatGPT Plus, Enterprise API)
    confidence: 'Medium',
    source: 'Private Market Leaks',
    url: '#'
  },
  {
    id: 'xai',
    name: 'xAI',
    category: 'Pure Play AI',
    annualSpend: 120000000000, // $120B (Memphis Gigafactory V2/V3 scaling)
    annualRev: 3000000000,     // $3B (Grok API, X Premium tier)
    confidence: 'Medium',
    source: 'Hardware Order Volumes',
    url: '#'
  },
  {
    id: 'apple',
    name: 'Apple',
    category: 'Big Tech / Consumer',
    annualSpend: 100000000000, // $100B (Private Cloud Compute, Edge AI hardware)
    annualRev: 12000000000,    // $12B (Service upgrades attributed to Apple Intelligence)
    confidence: 'Low',
    source: 'Supply Chain Analytics',
    url: '#'
  },
  {
    id: 'oracle',
    name: 'Oracle',
    category: 'Cloud Infrastructure',
    annualSpend: 80000000000,  // $80B (OCI GPU clusters, nuclear-powered datacenters)
    annualRev: 14000000000,    // $14B (AI workload contracts)
    confidence: 'High',
    source: 'Quarterly Earnings Report',
    url: '#'
  },
  {
    id: 'anthropic',
    name: 'Anthropic',
    category: 'Pure Play AI',
    annualSpend: 60000000000,  // $60B (Claude 3.5/4 training compute)
    annualRev: 4000000000,     // $4B (API & Claude Pro)
    confidence: 'Medium',
    source: 'Venture Capital Disclosures',
    url: '#'
  },
  {
    id: 'tesla',
    name: 'Tesla (FSD/Optimus)',
    category: 'Robotics / Auto',
    annualSpend: 40000000000,  // $40B (Dojo, H100 clusters for video training)
    annualRev: 8000000000,     // $8B (FSD software uptake)
    confidence: 'Low',
    source: 'Q4 AI Infrastructure Update',
    url: '#'
  }
];

const ANALOGS = [
  {
    id: 'dotcom',
    name: 'Dot-Com Bubble (1999)',
    metric: 'Infrastructure Overbuild',
    peak: 'Telecoms laid 80M miles of fiber; used < 5%.',
    trough: '$5 Trillion wiped out from NASDAQ.',
    similarity: 'High. "Build it and they will come" capex cycle. Fiber optic glut parallels current GPU clustering glut.',
    color: 'border-blue-500/40 from-blue-500/10'
  },
  {
    id: 'housing',
    name: 'Housing Crash (2008)',
    metric: 'Mispriced Risk',
    peak: 'Subprime MBS rated AAA by agencies.',
    trough: 'Global financial crisis, trillions in bailouts.',
    similarity: 'Medium. AI valuations assume perpetual monopoly margins, ignoring commoditization of foundation models.',
    color: 'border-orange-500/40 from-orange-500/10'
  },
  {
    id: 'crypto',
    name: 'Crypto & Web3 (2021)',
    metric: 'Speculative Mania',
    peak: 'Bitcoin $69k, JPEGs trading for millions.',
    trough: 'Exchanges collapsed, 70%+ drawdowns.',
    similarity: 'Low-to-Medium. Crypto lacked core utility; AI has massive utility, but the unit economics are structurally inverted.',
    color: 'border-purple-500/40 from-purple-500/10'
  }
];

// Hook to extrapolate annualized numbers into a high-frequency "live" YTD ticker
const useYTDExtrapolation = (annualAmount) => {
  const [current, setCurrent] = useState(0);

  useEffect(() => {
    // We use the start of the current year as our baseline
    const startOfYear = new Date(new Date().getFullYear(), 0, 1).getTime();
    const msInYear = 365.25 * 24 * 60 * 60 * 1000;
    const ratePerMs = annualAmount / msInYear;

    let animationFrameId;
    const update = () => {
      const now = Date.now();
      const elapsed = now - startOfYear;
      setCurrent(elapsed * ratePerMs);
      animationFrameId = requestAnimationFrame(update);
    };

    update();
    return () => cancelAnimationFrame(animationFrameId);
  }, [annualAmount]);

  return current;
};

// Formatters
const formatCurrencyLive = (value) => {
  return new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    minimumFractionDigits: 0,
    maximumFractionDigits: 0,
  }).format(value);
};

const formatCompact = (num) => {
  return new Intl.NumberFormat('en-US', {
    notation: "compact",
    compactDisplay: "short",
    maximumFractionDigits: 2
  }).format(num);
};

const calculateBurnPerSecond = (annualSpend) => {
  return annualSpend / (365.25 * 24 * 60 * 60);
};

const BubblePressureGauge = ({ spend, revenue }) => {
  // Formula: Spend vs Revenue. If Spend is 10x Revenue, risk is extreme.
  const ratio = spend > 0 ? spend / revenue : 100;
  
  // Logarithmic scale normalized to 0-100
  let pressure = 0;
  if (ratio > 1) {
    pressure = Math.min(100, Math.max(0, (Math.log10(ratio) / Math.log10(15)) * 100));
  }

  const getStatus = (p) => {
    if (p > 85) return { color: 'text-rose-500', stroke: 'stroke-rose-500', shadow: 'drop-shadow-[0_0_20px_rgba(225,29,72,0.8)]', label: 'CRITICAL BUBBLE' };
    if (p > 65) return { color: 'text-orange-500', stroke: 'stroke-orange-500', shadow: 'drop-shadow-[0_0_20px_rgba(249,115,22,0.8)]', label: 'ELEVATED RISK' };
    return { color: 'text-emerald-500', stroke: 'stroke-emerald-500', shadow: 'drop-shadow-[0_0_20px_rgba(16,185,129,0.8)]', label: 'SUSTAINABLE' };
  };

  const status = getStatus(pressure);
  const circumference = 2 * Math.PI * 45; // r=45
  const strokeDashoffset = circumference - (pressure / 100) * circumference;

  return (
    <div className="flex flex-col items-center justify-center p-6 bg-slate-950/80 rounded-2xl border border-slate-800 shadow-2xl relative overflow-hidden group">
      <div className={`absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-${status.color.split('-')[1]}-500 to-transparent opacity-50`}></div>
      
      <div className="flex justify-between w-full mb-6">
        <h3 className="text-slate-400 font-mono text-sm uppercase tracking-widest flex items-center gap-2">
          <Gauge size={16} /> Pressure Index
        </h3>
        <span className={`text-xs font-mono font-bold animate-pulse ${status.color}`}>
          {status.label}
        </span>
      </div>
      
      <div className="relative w-56 h-56 flex items-center justify-center">
        {/* Background track */}
        <svg className="absolute w-full h-full transform -rotate-90" viewBox="0 0 100 100">
          <circle cx="50" cy="50" r="45" className="stroke-slate-800" strokeWidth="8" fill="none" />
          {/* Animated Pressure Ring */}
          <circle
            cx="50" cy="50" r="45"
            className={`transition-all duration-1000 ease-out ${status.stroke} ${status.shadow}`}
            strokeWidth="8"
            strokeLinecap="round"
            fill="none"
            strokeDasharray={circumference}
            strokeDashoffset={strokeDashoffset}
          />
        </svg>
        
        <div className="absolute flex flex-col items-center justify-center z-10">
          <span className={`text-5xl font-black font-mono tracking-tighter ${status.color} ${status.shadow}`}>
            {pressure.toFixed(1)}<span className="text-2xl">%</span>
          </span>
          <span className="text-xs text-slate-500 font-mono mt-2 uppercase tracking-widest">
            System Risk
          </span>
        </div>
      </div>
      
      <div className="mt-6 text-xs font-mono text-slate-500 text-center flex flex-col gap-1">
        <span>Ratio: {ratio.toFixed(2)}x Spend to Revenue</span>
        <span>(Healthy tech infrastructure target: &lt; 2.5x)</span>
      </div>
    </div>
  );
};

const MetricCard = ({ title, value, ytd, type, icon: Icon, subtitle }) => {
  const isDanger = type === 'danger';
  const colorText = isDanger ? 'text-rose-500' : 'text-emerald-400';
  const colorGlow = isDanger ? 'drop-shadow-[0_0_15px_rgba(225,29,72,0.4)]' : 'drop-shadow-[0_0_15px_rgba(52,211,153,0.4)]';
  
  return (
    <div className="p-6 rounded-2xl bg-slate-950/80 border border-slate-800 shadow-2xl flex flex-col justify-between relative overflow-hidden group hover:border-slate-700 transition-colors">
      {/* Subtle background gradient based on type */}
      <div className={`absolute -inset-1 opacity-5 bg-gradient-to-br ${isDanger ? 'from-rose-500 to-transparent' : 'from-emerald-500 to-transparent'} blur-xl transition-opacity group-hover:opacity-10`} />
      
      <div className="flex justify-between items-start mb-6 z-10">
        <h3 className="text-slate-400 font-mono text-sm uppercase tracking-widest">{title}</h3>
        <Icon className={`${colorText} opacity-80`} size={20} />
      </div>
      
      <div className="z-10">
        <div className={`text-4xl lg:text-5xl font-black font-mono tracking-tighter ${colorText} ${colorGlow}`}>
          {formatCurrencyLive(ytd)}
        </div>
        
        <div className="flex items-center gap-2 mt-3">
          <div className={`w-2 h-2 rounded-full ${isDanger ? 'bg-rose-500' : 'bg-emerald-500'} animate-pulse`} />
          <span className="text-slate-300 text-xs font-mono uppercase tracking-wider">Live YTD Tracker</span>
        </div>
        
        <div className="text-slate-500 text-sm font-mono mt-4 pt-4 border-t border-slate-800/50">
          Est. Annual Run Rate: <strong className="text-slate-300">${formatCompact(value)}</strong>
          {subtitle && <div className="mt-1 text-xs text-slate-600">{subtitle}</div>}
        </div>
      </div>
    </div>
  );
};

export default function App() {
  // Aggregate Calculations
  const totalSpendAnnual = useMemo(() => AI_COMPANIES.reduce((acc, c) => acc + c.annualSpend, 0), []);
  const totalRevAnnual = useMemo(() => AI_COMPANIES.reduce((acc, c) => acc + c.annualRev, 0), []);
  const globalBurnPerSec = calculateBurnPerSecond(totalSpendAnnual);
  
  // Real-time hook execution
  const currentYTDSpend = useYTDExtrapolation(totalSpendAnnual);
  const currentYTDRev = useYTDExtrapolation(totalRevAnnual);

  // Sorting State
  const [sortConfig, setSortConfig] = useState({ key: 'annualSpend', direction: 'desc' });

  const sortedCompanies = useMemo(() => {
    let sortableItems = [...AI_COMPANIES];
    sortableItems.sort((a, b) => {
      let aVal = a[sortConfig.key];
      let bVal = b[sortConfig.key];
      
      if (sortConfig.key === 'net') {
        aVal = a.annualRev - a.annualSpend;
        bVal = b.annualRev - b.annualSpend;
      } else if (sortConfig.key === 'burn') {
        aVal = calculateBurnPerSecond(a.annualSpend);
        bVal = calculateBurnPerSecond(b.annualSpend);
      }

      if (aVal < bVal) return sortConfig.direction === 'asc' ? -1 : 1;
      if (aVal > bVal) return sortConfig.direction === 'asc' ? 1 : -1;
      return 0;
    });
    return sortableItems;
  }, [sortConfig]);

  const requestSort = (key) => {
    let direction = 'desc';
    if (sortConfig.key === key && sortConfig.direction === 'desc') {
      direction = 'asc';
    }
    setSortConfig({ key, direction });
  };

  return (
    <div className="min-h-screen bg-[#0a0f1a] text-slate-200 selection:bg-rose-500/30 selection:text-rose-200 font-sans relative">
      {/* Grid Background Effect */}
      <div className="fixed inset-0 pointer-events-none bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMSIgY3k9IjEiIHI9IjEiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4wNSkiLz48L3N2Zz4=')] opacity-50"></div>

      {/* Header */}
      <header className="border-b border-slate-800/80 bg-[#0a0f1a]/80 backdrop-blur-xl sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-rose-600 to-purple-900 flex items-center justify-center shadow-[0_0_15px_rgba(225,29,72,0.5)] border border-rose-500/30">
              <AlertTriangle size={18} className="text-white" />
            </div>
            <span className="font-mono font-black text-xl tracking-tighter bg-clip-text text-transparent bg-gradient-to-r from-white to-slate-400">
              WILL A.I. BURST?
            </span>
          </div>
          <div className="flex items-center gap-4 text-xs font-mono text-slate-400 bg-slate-900/50 px-3 py-1.5 rounded-full border border-slate-800">
            <div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse shadow-[0_0_8px_rgba(16,185,129,0.8)]"></div>
            SYSTEM ONLINE // 2026 CYCLE
          </div>
        </div>
      </header>

      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10 lg:py-16 relative z-10">
        
        {/* Hero Section */}
        <div className="text-center mb-16 space-y-6">
          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-rose-500/10 border border-rose-500/20 text-rose-400 font-mono text-sm mb-4">
            <Flame size={16} /> Global CapEx Run-Rate Surpasses $2.3 Trillion
          </div>
          <h1 className="text-5xl md:text-7xl font-black tracking-tighter text-transparent bg-clip-text bg-gradient-to-b from-white via-slate-200 to-slate-500 pb-2">
            The $2.3 Trillion Gamble.
          </h1>
          <p className="text-lg md:text-xl text-slate-400 max-w-3xl mx-auto font-light leading-relaxed">
            Tracking the largest infrastructure build-out in human history. We compare global AI capital expenditure against explicitly realized software revenue to measure systemic bubble pressure.
          </p>
        </div>

        {/* Global Burn Rate Banner */}
        <div className="w-full bg-slate-900/80 border border-slate-800 rounded-2xl p-6 mb-8 flex flex-col md:flex-row items-center justify-between shadow-2xl backdrop-blur-sm">
          <div className="flex items-center gap-4 mb-4 md:mb-0">
            <div className="p-3 bg-rose-500/10 rounded-xl border border-rose-500/20">
              <Zap className="text-rose-500" size={24} />
            </div>
            <div>
              <h3 className="text-slate-400 font-mono text-sm uppercase tracking-widest">Global AI Burn Rate</h3>
              <p className="text-slate-500 text-xs font-mono mt-1">Total sector spend per second</p>
            </div>
          </div>
          <div className="text-4xl font-black font-mono text-rose-500 drop-shadow-[0_0_10px_rgba(225,29,72,0.5)]">
            ${globalBurnPerSec.toLocaleString(undefined, { maximumFractionDigits: 0 })} <span className="text-xl text-rose-500/50">/ sec</span>
          </div>
        </div>

        {/* Top Dashboards */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-16">
          <MetricCard 
            title="Est. AI Spend YTD"
            value={totalSpendAnnual}
            ytd={currentYTDSpend}
            type="danger"
            icon={TrendingDown}
            subtitle="Datacenters, Energy, Compute, R&D"
          />
          <MetricCard 
            title="Est. AI Revenue YTD"
            value={totalRevAnnual}
            ytd={currentYTDRev}
            type="success"
            icon={TrendingUp}
            subtitle="Software, APIs, Premium Subs"
          />
          <BubblePressureGauge spend={totalSpendAnnual} revenue={totalRevAnnual} />
        </div>

        {/* Detailed Table */}
        <div className="mb-20">
          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-6 gap-4">
            <h2 className="text-2xl font-bold font-mono tracking-tight flex items-center gap-2">
              <Database className="text-blue-500" />
              The Corporate Ledger
            </h2>
            <div className="text-xs font-mono text-slate-400 border border-slate-700/50 px-4 py-2 rounded-md bg-slate-800/30 flex gap-4">
              <span>Total Tracked Entities: <strong className="text-white">{AI_COMPANIES.length}</strong></span>
            </div>
          </div>
          
          <div className="overflow-x-auto rounded-2xl border border-slate-800 bg-[#0a0f1a]/90 shadow-2xl backdrop-blur-xl">
            <table className="w-full text-left text-sm whitespace-nowrap">
              <thead className="bg-slate-900/80 border-b border-slate-800 text-slate-400 font-mono text-xs uppercase tracking-wider">
                <tr>
                  <th className="px-6 py-5 cursor-pointer hover:text-white transition-colors group" onClick={() => requestSort('name')}>
                    <div className="flex items-center gap-1">Entity <ArrowUpDown size={14} className="opacity-50 group-hover:opacity-100"/></div>
                  </th>
                  <th className="px-6 py-5">Classification</th>
                  <th className="px-6 py-5 cursor-pointer hover:text-white transition-colors group" onClick={() => requestSort('annualSpend')}>
                    <div className="flex items-center gap-1 justify-end">Est. Annual Spend <ArrowUpDown size={14} className="opacity-50 group-hover:opacity-100"/></div>
                  </th>
                  <th className="px-6 py-5 cursor-pointer hover:text-white transition-colors group" onClick={() => requestSort('annualRev')}>
                    <div className="flex items-center gap-1 justify-end">Est. Annual Rev <ArrowUpDown size={14} className="opacity-50 group-hover:opacity-100"/></div>
                  </th>
                  <th className="px-6 py-5 cursor-pointer hover:text-white transition-colors group" onClick={() => requestSort('burn')}>
                    <div className="flex items-center gap-1 justify-end">Burn / Sec <ArrowUpDown size={14} className="opacity-50 group-hover:opacity-100"/></div>
                  </th>
                  <th className="px-6 py-5 cursor-pointer hover:text-white transition-colors group" onClick={() => requestSort('net')}>
                    <div className="flex items-center gap-1 justify-end">Net (PnL) <ArrowUpDown size={14} className="opacity-50 group-hover:opacity-100"/></div>
                  </th>
                  <th className="px-6 py-5 text-center">Data Confidence</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-800/50">
                {sortedCompanies.map((company) => {
                  const net = company.annualRev - company.annualSpend;
                  const burn = calculateBurnPerSecond(company.annualSpend);
                  return (
                    <tr key={company.id} className="hover:bg-slate-800/40 transition-colors group">
                      <td className="px-6 py-4 font-bold text-slate-200">
                        <div className="flex flex-col">
                          <span>{company.name}</span>
                          <a href={company.url} className="text-[10px] text-blue-400/70 hover:text-blue-400 flex items-center gap-1 font-mono mt-1 w-max transition-colors">
                            {company.source} <ExternalLink size={10} />
                          </a>
                        </div>
                      </td>
                      <td className="px-6 py-4 text-slate-500 font-mono text-xs">{company.category}</td>
                      <td className="px-6 py-4 text-right font-mono text-rose-400 font-medium">${formatCompact(company.annualSpend)}</td>
                      <td className="px-6 py-4 text-right font-mono text-emerald-400 font-medium">${formatCompact(company.annualRev)}</td>
                      <td className="px-6 py-4 text-right font-mono text-slate-400">
                        ${burn.toLocaleString(undefined, { maximumFractionDigits: 0 })}
                      </td>
                      <td className={`px-6 py-4 text-right font-mono font-bold ${net < 0 ? 'text-rose-500' : 'text-emerald-500'}`}>
                        {net < 0 ? '-' : '+'}${formatCompact(Math.abs(net))}
                      </td>
                      <td className="px-6 py-4 text-center">
                        <span className={`inline-flex items-center px-2.5 py-1 rounded text-xs font-mono font-bold border
                          ${company.confidence === 'High' ? 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20' : 
                            company.confidence === 'Medium' ? 'bg-orange-500/10 text-orange-400 border-orange-500/20' : 
                            'bg-slate-600/20 text-slate-400 border-slate-600/30'}`}>
                          {company.confidence}
                        </span>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>

        {/* Historical Analogs */}
        <div className="mb-20">
          <div className="flex items-center gap-3 mb-8">
            <div className="p-2 bg-slate-800 rounded-lg border border-slate-700">
              <Clock className="text-slate-400" size={20} />
            </div>
            <h2 className="text-2xl font-bold font-mono tracking-tight">Historical Analog Models</h2>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {ANALOGS.map((analog) => (
              <div key={analog.id} className={`p-6 rounded-2xl bg-gradient-to-br ${analog.color} bg-slate-900 border relative overflow-hidden group hover:-translate-y-1 transition-transform duration-300`}>
                <h3 className="text-lg font-black text-slate-200 mb-6 font-mono tracking-tight">{analog.name}</h3>
                
                <div className="space-y-5 text-sm">
                  <div>
                    <span className="text-slate-500 block text-xs uppercase font-mono tracking-widest mb-1.5">Key Metric</span>
                    <span className="text-slate-300 font-medium">{analog.metric}</span>
                  </div>
                  <div>
                    <span className="text-slate-500 block text-xs uppercase font-mono tracking-widest mb-1.5">The Peak</span>
                    <span className="text-slate-300">{analog.peak}</span>
                  </div>
                  <div>
                    <span className="text-slate-500 block text-xs uppercase font-mono tracking-widest mb-1.5">The Trough</span>
                    <span className="text-slate-300">{analog.trough}</span>
                  </div>
                  <div className="pt-5 border-t border-slate-800/80">
                    <span className="text-slate-500 block text-xs uppercase font-mono tracking-widest mb-2">AI Similarity Index</span>
                    <span className="text-slate-400 italic leading-relaxed block">{analog.similarity}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Methodology */}
        <div className="bg-slate-900/60 rounded-2xl border border-slate-800 p-8 shadow-xl backdrop-blur-sm">
          <div className="flex items-center gap-3 mb-6">
            <Info className="text-blue-500" size={24} />
            <h2 className="text-xl font-bold font-mono tracking-tight">Methodology & Transparency</h2>
          </div>
          <div className="prose prose-invert prose-sm max-w-none text-slate-400 space-y-4">
            <p className="text-base text-slate-300 leading-relaxed">
              This dashboard aggregates global capital expenditure (CapEx) and operating expenses (OpEx) dedicated to generative AI infrastructure, contrasting it against the explicitly realized revenue driven by end-user AI products.
            </p>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
              <div className="bg-slate-950/50 p-4 rounded-xl border border-slate-800/50">
                <h4 className="text-white font-mono text-sm mb-2">Data Sources</h4>
                <p className="text-xs leading-relaxed">Spend metrics are derived from SEC EDGAR filings, hardware supply chain analytics (Nvidia/TSMC shipments), sovereign energy contracts, and vetted private market estimates. We strictly filter out legacy cloud revenue.</p>
              </div>
              <div className="bg-slate-950/50 p-4 rounded-xl border border-slate-800/50">
                <h4 className="text-white font-mono text-sm mb-2">Extrapolation Logic</h4>
                <p className="text-xs leading-relaxed">Financial filings occur quarterly. The "Live" counters interpolate the most recently reported annualized run-rates evenly across the year down to the millisecond to visualize the staggering velocity of capital deployment.</p>
              </div>
            </div>
            <div className="mt-6 p-4 border border-rose-500/20 bg-rose-500/5 rounded-xl text-xs text-slate-500 italic">
              <strong>Disclaimer:</strong> This is a macroeconomic analytical tool, not financial advice. High infrastructure spending does not negate technological utility. A "burst" implies a severe valuation correction in hardware and foundational models as supply outstrips end-user software monetization.
            </div>
          </div>
        </div>
      </main>

      {/* Footer */}
      <footer className="border-t border-slate-800/80 py-8 mt-12 bg-[#0a0f1a] relative z-10">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row items-center justify-between gap-4">
          <p className="text-slate-500 text-sm font-mono flex items-center gap-2">
            © {new Date().getFullYear()} WillAIBurst.com <span className="w-1 h-1 rounded-full bg-slate-600"></span> Stay skeptical.
          </p>
          <div className="flex gap-6 text-sm font-mono text-slate-500">
            <a href="#" className="hover:text-white transition-colors">API Docs</a>
            <a href="#" className="hover:text-white transition-colors">Submit Correction</a>
            <a href="#" className="hover:text-white transition-colors flex items-center gap-1">GitHub <ExternalLink size={12}/></a>
          </div>
        </div>
      </footer>
    </div>
  );
}