import React, { useState, useEffect, useMemo } from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, Area, ComposedChart } from 'recharts';
import { TrendingDown, TrendingUp, Flame, DollarSign, Users, AlertTriangle, ArrowRight, ArrowLeft, Play, Pause, RotateCcw } from 'lucide-react';

const XRPDeflationParadox = () => {
  const [currentStep, setCurrentStep] = useState(0);
  const [simulationData, setSimulationData] = useState([]);
  const [isSimulating, setIsSimulating] = useState(false);
  const [isAnimating, setIsAnimating] = useState(false);
  const [animationFrame, setAnimationFrame] = useState(0);
  const [parameters, setParameters] = useState({
    initialPrice: 0.50,
    burnRate: 0.00001,
    demandMultiplier: 1.2,
    volatility: 0.15,
    adoptionRate: 0.05
  });

  // Real-world events that affect simulation over 100 years
  const realWorldEvents = [
    { month: 6, title: "Regulatory Clarity", impact: 1.4, description: "Positive regulatory decision boosts confidence" },
    { month: 18, title: "Major Bank Adoption", impact: 1.8, description: "Top 3 global bank implements XRP for cross-border payments" },
    { month: 36, title: "CBDC Competition", impact: 0.6, description: "Central bank digital currencies launch" },
    { month: 60, title: "Market Crash", impact: 0.4, description: "Global financial crisis affects all crypto" },
    { month: 120, title: "Mass Adoption Wave", impact: 2.5, description: "100+ banks adopt XRP for settlements" },
    { month: 180, title: "Quantum Computing Threat", impact: 0.3, description: "Security concerns shake crypto markets" },
    { month: 240, title: "Quantum-Resistant Upgrade", impact: 3.0, description: "XRP upgrades to quantum-resistant protocol" },
    { month: 360, title: "Global Economic Reset", impact: 0.2, description: "Traditional financial system overhaul" },
    { month: 480, title: "SWIFT Replacement", impact: 5.0, description: "XRP officially replaces SWIFT globally" },
    { month: 600, title: "Interplanetary Commerce", impact: 1.5, description: "XRP becomes standard for space commerce" },
    { month: 720, title: "AI Economy Integration", impact: 2.0, description: "AI systems adopt XRP for micro-transactions" },
    { month: 840, title: "Climate Crisis Response", impact: 0.7, description: "Energy concerns affect crypto markets" },
    { month: 960, title: "Fusion Energy Breakthrough", impact: 1.8, description: "Unlimited clean energy boosts tech adoption" },
    { month: 1080, title: "Post-Scarcity Economics", impact: 10.0, description: "XRP becomes foundation of new economy" }
  ];

  const paradoxSteps = [
    {
      title: "The Deflation Paradox",
      description: "Conventional wisdom says price drops lead to panic selling. With XRP's burn mechanism, the opposite may occur.",
      icon: <AlertTriangle className="w-5 h-5" />,
      realWorld: "Actual burn rate: 0.00001 XRP/tx (≈ $0.000005 at current prices)",
      color: "from-red-500 to-orange-500"
    },
    {
      title: "Phase 1: Price Decline",
      description: "XRP price drops → Transactions become cheaper → Network activity increases",
      icon: <TrendingDown className="w-5 h-5" />,
      realWorld: "Historical example: XRP dropped 90% in 2020 but ODL volume increased 500%",
      color: "from-red-500 to-pink-500"
    },
    {
      title: "Phase 2: Burn Mechanism Activates",
      description: "More transactions → More XRP burned → Supply gradually decreases",
      icon: <Flame className="w-5 h-5" />,
      realWorld: "14M XRP burned to date - only 0.025% of total supply",
      color: "from-orange-500 to-red-500"
    },
    {
      title: "Phase 3: Scarcity Emerges",
      description: "Reduced supply → Investors notice scarcity → Long-term demand increases",
      icon: <Users className="w-5 h-5" />,
      realWorld: "Requires massive volume: 1B XRP burn needs 100T transactions",
      color: "from-blue-500 to-purple-500"
    },
    {
      title: "Phase 4: Price Reversal",
      description: "Higher demand + reduced supply → Price enters growth phase",
      icon: <TrendingUp className="w-5 h-5" />,
      realWorld: "Only sustainable with real-world utility (SWIFT replacement potential)",
      color: "from-green-500 to-emerald-500"
    }
  ];

  // Calculate real-world burn requirements
  const burnCalculations = useMemo(() => {
    const dailyTxFor1Burn = 1 / parameters.burnRate;
    const yearsFor1PBurn = (1e9 / parameters.burnRate) / (1e7 * 365);
    return { dailyTxFor1Burn, yearsFor1PBurn };
  }, [parameters.burnRate]);

  const generateSimulationData = () => {
    const data = [];
    let price = parameters.initialPrice;
    let supply = 100;
    let transactions = 1;
    let demand = 1;
    let burnedTotal = 0;

    for (let month = 0; month <= 1200; month++) {
      const event = realWorldEvents.find(e => e.month === month);
      let eventImpact = 1;
      if (event) {
        eventImpact = event.impact;
        price *= eventImpact;
      }

      const burnAmount = transactions * parameters.burnRate;
      burnedTotal += burnAmount;
      supply = Math.max(100 - (burnedTotal * 100 / 55e9), 99.95);
      
      demand = demand * (1 + parameters.adoptionRate + (100 - supply) * 0.0001 * parameters.demandMultiplier);
      
      const supplyDemandRatio = demand / (supply / 100);
      price = price * (0.97 + Math.log1p(supplyDemandRatio) * 0.03);
      
      transactions = transactions * (1 + parameters.adoptionRate + (2 - price) * 0.05);
      
      price = price * (1 + (Math.random() - 0.5) * parameters.volatility);
      
      data.push({
        month,
        price: Math.max(0.01, Math.round(price * 100) / 100),
        supply: Math.round(supply * 1000) / 1000,
        demand: Math.round(demand * 10) / 10,
        transactions: Math.round(transactions * 10) / 10,
        burned: Math.round(burnedTotal * 100) / 100,
        burnedPercent: Math.round((burnedTotal / 55e9) * 100 * 10000) / 10000, // More precise percentage
        year: Math.floor(month / 12),
        event: event ? event.title : null,
        eventDescription: event ? event.description : null
      });
    }
    
    return data;
  };

  const runSimulation = () => {
    setIsSimulating(true);
    setAnimationFrame(0);
    const data = generateSimulationData();
    setSimulationData(data);
    setTimeout(() => setIsSimulating(false), 1000);
  };

  const startAnimation = () => {
    setIsAnimating(true);
    setAnimationFrame(0);
  };

  const stopAnimation = () => {
    setIsAnimating(false);
  };

  const resetAnimation = () => {
    setIsAnimating(false);
    setAnimationFrame(0);
  };

  useEffect(() => {
    runSimulation();
  }, [parameters]);

  useEffect(() => {
    if (isAnimating && animationFrame < simulationData.length - 1) {
      const timer = setTimeout(() => {
        setAnimationFrame(prev => prev + 1);
      }, 50); // Faster animation for 100 years
      return () => clearTimeout(timer);
    } else if (animationFrame >= simulationData.length - 1) {
      setIsAnimating(false);
    }
  }, [isAnimating, animationFrame, simulationData.length]);

  const currentPhase = simulationData.length > 0 ? 
    (simulationData[simulationData.length - 1].price > parameters.initialPrice * 2 ? 
      "Exponential Growth" : 
      simulationData[simulationData.length - 1].price < parameters.initialPrice * 0.7 ? 
        "Deflation Phase" : "Stabilization") : "";

  const realWorldComparisons = [
    { metric: "Daily TX for 1 XRP Burn", value: Math.round(burnCalculations.dailyTxFor1Burn).toLocaleString() },
    { metric: "Years to Burn 1B XRP", value: Math.round(burnCalculations.yearsFor1PBurn * 10) / 10 },
    { metric: "SWIFT Daily Messages", value: "42M" },
    { metric: "Required TX for 1% Scarcity", value: "55T" }
  ];

  const getVisibleData = () => {
    if (isAnimating) {
      return simulationData.slice(0, animationFrame + 1);
    }
    return simulationData;
  };

  const currentEvent = simulationData[animationFrame]?.event;

  return (
    <div className="w-full max-w-7xl mx-auto p-4 bg-gradient-to-br from-slate-50 via-blue-50 to-purple-50 min-h-screen">
      <div className="text-center mb-8">
        <h1 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent mb-4">
          XRP Deflation Paradox Simulator
        </h1>
        <p className="text-lg text-gray-600 max-w-3xl mx-auto leading-relaxed">
          Exploring how XRP's token burn mechanism could theoretically transform price declines into long-term growth through economic paradox
        </p>
      </div>

      {/* Real-World Context Bar */}
      <div className="bg-gradient-to-r from-indigo-500 to-purple-600 p-6 rounded-2xl mb-6 text-white shadow-lg">
        <h3 className="font-semibold text-lg mb-4 flex items-center gap-2">
          <AlertTriangle className="w-5 h-5" /> Real-World Context
        </h3>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          {realWorldComparisons.map((item, i) => (
            <div key={i} className="bg-white/20 backdrop-blur-sm p-4 rounded-xl border border-white/30">
              <div className="text-indigo-100 text-sm">{item.metric}</div>
              <div className="font-bold text-xl mt-1">{item.value}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Parameter Controls */}
      <div className="bg-white/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg mb-6 border border-white/50">
        <div className="flex flex-wrap justify-between items-center mb-6 gap-4">
          <h2 className="text-2xl font-bold text-gray-800">Simulation Parameters</h2>
          <div className="flex gap-3">
            <button 
              onClick={runSimulation}
              disabled={isSimulating}
              className={`px-5 py-2.5 rounded-xl flex items-center gap-2 font-medium transition-all ${
                isSimulating 
                  ? 'bg-gray-300 text-gray-500 cursor-not-allowed' 
                  : 'bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white shadow-lg hover:shadow-xl transform hover:-translate-y-0.5'
              }`}
            >
              <RotateCcw className="w-4 h-4" />
              {isSimulating ? 'Simulating...' : 'Run New Simulation'}
            </button>
          </div>
        </div>
        
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {[
            { id: 'initialPrice', label: 'Initial Price ($)', min: 0.1, max: 2, step: 0.1, format: v => `$${v.toFixed(2)}` },
            { id: 'burnRate', label: 'Burn Rate (XRP/tx)', min: 0.00001, max: 0.0001, step: 0.00001, format: v => v.toFixed(5) },
            { id: 'demandMultiplier', label: 'Demand Sensitivity', min: 0.5, max: 2, step: 0.1, format: v => `${v.toFixed(1)}x` },
            { id: 'adoptionRate', label: 'Monthly Adoption', min: 0.01, max: 0.1, step: 0.01, format: v => `${(v*100).toFixed(1)}%` }
          ].map((param) => (
            <div key={param.id} className="space-y-3">
              <div className="flex justify-between items-center">
                <label className="block text-sm font-semibold text-gray-700">{param.label}</label>
                <span className="text-sm font-bold text-blue-600 bg-blue-50 px-2 py-1 rounded-lg">
                  {param.format(parameters[param.id])}
                </span>
              </div>
              <input
                type="range"
                min={param.min}
                max={param.max}
                step={param.step}
                value={parameters[param.id]}
                onChange={(e) => setParameters({...parameters, [param.id]: parseFloat(e.target.value)})}
                className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider"
                style={{
                  background: `linear-gradient(to right, #3b82f6 0%, #3b82f6 ${((parameters[param.id] - param.min) / (param.max - param.min)) * 100}%, #e5e7eb ${((parameters[param.id] - param.min) / (param.max - param.min)) * 100}%, #e5e7eb 100%)`
                }}
              />
              <div className="flex justify-between text-xs text-gray-500">
                <span>{param.format(param.min)}</span>
                <span>{param.format(param.max)}</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Paradox Mechanism */}
      <div className="bg-white/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg mb-6 border border-white/50">
        <div className="flex justify-between items-center mb-6">
          <h2 className="text-2xl font-bold text-gray-800">Paradox Mechanism</h2>
          <div className="flex gap-2">
            <button 
              onClick={() => setCurrentStep(prev => Math.max(0, prev-1))}
              disabled={currentStep === 0}
              className="p-3 rounded-xl disabled:opacity-30 bg-gray-100 hover:bg-gray-200 transition-colors"
            >
              <ArrowLeft className="w-5 h-5" />
            </button>
            <button 
              onClick={() => setCurrentStep(prev => Math.min(paradoxSteps.length-1, prev+1))}
              disabled={currentStep === paradoxSteps.length-1}
              className="p-3 rounded-xl disabled:opacity-30 bg-gray-100 hover:bg-gray-200 transition-colors"
            >
              <ArrowRight className="w-5 h-5" />
            </button>
          </div>
        </div>
        
        <div className="flex flex-col lg:flex-row gap-6">
          <div className={`bg-gradient-to-br ${paradoxSteps[currentStep].color} p-6 rounded-2xl text-white shadow-lg lg:w-1/2`}>
            <div className="flex items-start gap-4 mb-4">
              <div className="p-3 bg-white/20 backdrop-blur-sm rounded-xl">
                {paradoxSteps[currentStep].icon}
              </div>
              <div className="flex-1">
                <h3 className="font-bold text-xl mb-2">{paradoxSteps[currentStep].title}</h3>
                <p className="text-white/90 leading-relaxed">{paradoxSteps[currentStep].description}</p>
              </div>
            </div>
            <div className="mt-4 p-4 bg-white/20 backdrop-blur-sm rounded-xl border border-white/30">
              <div className="text-white/80 text-sm mb-1 font-medium">Real-World Context</div>
              <div className="text-white/95">{paradoxSteps[currentStep].realWorld}</div>
            </div>
          </div>
          
          <div className="lg:w-1/2">
            <div className="aspect-video bg-gradient-to-br from-gray-100 to-gray-200 border-2 border-dashed border-gray-300 rounded-2xl flex items-center justify-center">
              <div className="text-center">
                <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white">
                  {paradoxSteps[currentStep].icon}
                </div>
                <div className="text-gray-600 font-medium">Phase {currentStep + 1} Visualization</div>
                <div className="text-sm text-gray-500 mt-1">Interactive diagram placeholder</div>
              </div>
            </div>
          </div>
        </div>
        
        <div className="flex flex-wrap gap-2 mt-6">
          {paradoxSteps.map((step, index) => (
            <button
              key={index}
              onClick={() => setCurrentStep(index)}
              className={`px-4 py-2 rounded-xl flex items-center gap-2 text-sm font-medium transition-all ${
                currentStep === index
                  ? 'bg-gradient-to-r from-blue-500 to-purple-600 text-white shadow-lg'
                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
              }`}
            >
              {step.icon}
              Phase {index + 1}
            </button>
          ))}
        </div>
      </div>

      {/* Simulation Results */}
      {simulationData.length > 0 && (
        <div className="bg-white/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg mb-6 border border-white/50">
          <div className="flex flex-wrap justify-between items-center mb-6 gap-4">
            <div>
              <h2 className="text-2xl font-bold text-gray-800">Simulation Results</h2>
              <div className="flex items-center gap-3 mt-2">
                <span className="text-sm text-gray-600">Current phase:</span>
                <span className={`px-3 py-1 rounded-full text-sm font-medium ${
                  currentPhase.includes("Growth") ? "bg-green-100 text-green-800" :
                  currentPhase.includes("Deflation") ? "bg-red-100 text-red-800" :
                  "bg-yellow-100 text-yellow-800"
                }`}>
                  {currentPhase}
                </span>
                {currentEvent && (
                  <span className="px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
                    Event: {currentEvent}
                  </span>
                )}
              </div>
            </div>
            <div className="flex items-center gap-3">
              <div className="text-sm bg-gray-100 px-3 py-2 rounded-lg">
                <span className="text-gray-600">Period:</span>{' '}
                <span className="font-medium">100 years</span>
              </div>
              <div className="flex gap-2">
                <button
                  onClick={isAnimating ? stopAnimation : startAnimation}
                  className="px-4 py-2 rounded-xl bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white font-medium flex items-center gap-2 transition-all"
                >
                  {isAnimating ? <Pause className="w-4 h-4" /> : <Play className="w-4 h-4" />}
                  {isAnimating ? 'Pause' : 'Animate'}
                </button>
                <button
                  onClick={resetAnimation}
                  className="px-4 py-2 rounded-xl bg-gray-500 hover:bg-gray-600 text-white font-medium flex items-center gap-2 transition-all"
                >
                  <RotateCcw className="w-4 h-4" />
                  Reset
                </button>
              </div>
            </div>
          </div>
          
          <div className="h-96 mb-8">
            <ResponsiveContainer width="100%" height="100%">
              <ComposedChart data={getVisibleData()}>
                <CartesianGrid strokeDasharray="3 3" stroke="#e0e4e7" />
                <XAxis 
                  dataKey="month" 
                  label={{ value: 'Months (100 Years)', position: 'insideBottom', offset: -5 }}
                  tick={{ fontSize: 12 }}
                  tickFormatter={(value) => `${Math.floor(value/12)}Y`}
                />
                <YAxis 
                  yAxisId="left"
                  label={{ value: 'Price ($)', angle: -90, position: 'insideLeft' }}
                  tick={{ fontSize: 12 }}
                />
                <YAxis 
                  yAxisId="right" 
                  orientation="right"
                  label={{ value: 'Supply (%)', angle: 90, position: 'insideRight' }}
                  domain={[99.8, 100]}
                  tick={{ fontSize: 12 }}
                />
                <Tooltip 
                  formatter={(value, name) => [
                    typeof value === 'number' ? value.toFixed(name === 'price' ? 4 : 2) : value,
                    name === 'price' ? 'Price ($)' : 
                    name === 'supply' ? 'Supply (%)' :
                    name === 'demand' ? 'Demand (Index)' : name
                  ]}
                  contentStyle={{ 
                    borderRadius: '12px', 
                    border: 'none',
                    boxShadow: '0 10px 25px rgba(0,0,0,0.1)',
                    backgroundColor: 'rgba(255,255,255,0.95)',
                    backdropFilter: 'blur(10px)'
                  }}
                />
                <Legend />
                <Line 
                  yAxisId="left"
                  type="monotone" 
                  dataKey="price" 
                  stroke="#3b82f6" 
                  strokeWidth={3}
                  name="Price"
                  dot={{ r: 2, fill: '#3b82f6' }}
                  activeDot={{ r: 6, fill: '#3b82f6' }}
                />
                <Line 
                  yAxisId="right"
                  type="monotone" 
                  dataKey="supply" 
                  stroke="#ef4444" 
                  strokeWidth={2}
                  strokeDasharray="5 5"
                  name="Remaining Supply"
                  dot={false}
                />
                <Area 
                  yAxisId="left"
                  type="monotone" 
                  dataKey="demand" 
                  fill="url(#demandGradient)"
                  fillOpacity={0.2}
                  stroke="#22c55e"
                  strokeWidth={2}
                  name="Demand"
                />
                <defs>
                  <linearGradient id="demandGradient" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="5%" stopColor="#22c55e" stopOpacity={0.3}/>
                    <stop offset="95%" stopColor="#22c55e" stopOpacity={0}/>
                  </linearGradient>
                </defs>
              </ComposedChart>
            </ResponsiveContainer>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            {[
              { 
                key: 'price', 
                label: 'Final Price', 
                value: `$${simulationData[simulationData.length - 1]?.price.toFixed(4)}`, 
                change: ((simulationData[simulationData.length - 1]?.price / parameters.initialPrice - 1) * 100).toFixed(1),
                icon: <DollarSign className="w-5 h-5" />,
                color: 'from-blue-500 to-cyan-500'
              },
              { 
                key: 'burned', 
                label: 'Total Burned', 
                value: `${((100 - simulationData[simulationData.length - 1]?.supply) * 55e9 / 1e6).toFixed(2)}M XRP`, 
                change: null,
                icon: <Flame className="w-5 h-5" />,
                color: 'from-red-500 to-orange-500'
              },
              { 
                key: 'demand', 
                label: 'Demand Growth', 
                value: `${simulationData[simulationData.length - 1]?.demand.toFixed(1)}x`, 
                change: null,
                icon: <Users className="w-5 h-5" />,
                color: 'from-green-500 to-emerald-500'
              },
              { 
                key: 'supply', 
                label: 'Supply Reduction', 
                value: `${(100 - simulationData[simulationData.length - 1]?.supply).toFixed(4)}%`, 
                change: null,
                icon: <TrendingUp className="w-5 h-5" />,
                color: 'from-purple-500 to-pink-500'
              }
            ].map((metric, idx) => (
              <div key={idx} className={`p-5 rounded-2xl bg-gradient-to-br ${metric.color} text-white shadow-lg`}>
                <div className="flex items-center gap-3 mb-3">
                  <div className="p-2 bg-white/20 backdrop-blur-sm rounded-lg">
                    {metric.icon}
                  </div>
                  <span className="font-semibold">{metric.label}</span>
                </div>
                <div className="text-2xl font-bold mb-1">{metric.value}</div>
                {metric.change !== null && (
                  <div className="text-sm text-white/80">
                    {parseFloat(metric.change) >= 0 ? '+' : ''}{metric.change}% from start
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Realistic Assessment */}
      <div className="bg-white/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-white/50">
        <h2 className="text-2xl font-bold text-gray-800 mb-6">Reality Check: Theoretical vs. Actual</h2>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <div className="bg-gradient-to-br from-green-50 to-emerald-50 border-2 border-green-200 rounded-2xl p-6">
            <h3 className="font-bold text-lg flex items-center gap-2 text-green-700 mb-4">
              <TrendingUp className="w-6 h-6" /> Potential Upside
            </h3>
            <ul className="space-y-3">
              {[
                "Institutional adoption could accelerate burn rate",
                "SWIFT replacement scenario changes fundamentals completely",
                "Network effects could create demand beyond pure scarcity",
                "Deflationary pressure could stabilize long-term value",
                "Cross-border payment dominance creates constant burn stream"
              ].map((item, i) => (
                <li key={i} className="flex items-start gap-3">
                  <div className="w-2 h-2 rounded-full bg-green-500 mt-2 flex-shrink-0"></div>
                  <span className="text-gray-700">{item}</span>
                </li>
              ))}
            </ul>
          </div>
          
          <div className="bg-gradient-to-br from-red-50 to-pink-50 border-2 border-red-200 rounded-2xl p-6">
            <h3 className="font-bold text-lg flex items-center gap-2 text-red-700 mb-4">
              <AlertTriangle className="w-6 h-6" /> Practical Limitations
            </h3>
            <ul className="space-y-3">
              {[
                "Current burn rate is economically insignificant (0.00001 XRP/tx)",
                "Requires massive transaction volume to impact supply",
                "Price crashes destroy demand faster than burns create scarcity",
                "Competition from CBDCs and stablecoins",
                "Regulatory uncertainty remains a major factor",
                "Network must achieve critical adoption before deflation matters"
              ].map((item, i) => (
                <li key={i} className="flex items-start gap-3">
                  <div className="w-2 h-2 rounded-full bg-red-500 mt-2 flex-shrink-0"></div>
                  <span className="text-gray-700">{item}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
        
        <div className="mt-8 p-6 bg-gradient-to-r from-blue-500 to-purple-600 rounded-2xl text-white shadow-lg">
          <h3 className="font-bold text-lg flex items-center gap-2 mb-3">
            <AlertTriangle className="w-6 h-6" /> Key Insight
          </h3>
          <p className="text-white/95 leading-relaxed">
            The deflation paradox is theoretically possible but requires unprecedented adoption levels. 
            At current burn rates, it would take <span className="font-bold bg-white/20 px-2 py-1 rounded">55,000 years</span> to burn 1% of XRP supply. 
            Real-world value will come from utility, not artificial scarcity.
          </p>
        </div>
      </div>
    </div>
  );
};

export default XRPDeflationParadox;