env.example

import React from 'react';
import { motion } from 'motion/react';
import { Zap, TrendingUp, TrendingDown, Globe, Shield, Activity, BarChart3 } from 'lucide-react';

export const Futures = () => {
  return (
    <div className="space-y-6">
      <div className="flex items-center gap-3">
        <div className="w-10 h-10 bg-neon-green rounded-lg flex items-center justify-center shadow-[0_0_20px_rgba(57,255,20,0.5)]">
          <Zap className="text-cyber-dark" />
        </div>
        <h2 className="text-2xl font-bold tracking-tight neon-text-green">DERIVATIVES_COMMAND</h2>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {/* Funding Rates */}
        <div className="glass-panel p-6 border-white/5">
          <h3 className="text-sm font-bold uppercase tracking-widest text-white/60 mb-6 flex items-center gap-2">
            <Activity size={16} className="text-neon-blue" /> Funding Rates
          </h3>
          <div className="space-y-4">
            {[
              { coin: 'BTC', rate: '+0.0100%', status: 'Neutral' },
              { coin: 'ETH', rate: '+0.0342%', status: 'Bullish' },
              { coin: 'SOL', rate: '+0.0821%', status: 'Overheated' },
              { coin: 'DOGE', rate: '-0.0050%', status: 'Bearish' },
            ].map((f, i) => (
              <div key={i} className="flex justify-between items-center p-3 bg-white/5 rounded-lg">
                <span className="font-bold">{f.coin}</span>
                <div className="text-right">
                  <p className={`text-sm font-mono ${f.rate.startsWith('+') ? 'text-neon-green' : 'text-red-500'}`}>{f.rate}</p>
                  <p className="text-[10px] text-white/30 uppercase">{f.status}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Liquidation Heatmap */}
        <div className="glass-panel p-6 border-white/5 lg:col-span-2">
          <h3 className="text-sm font-bold uppercase tracking-widest text-white/60 mb-6 flex items-center gap-2">
            <BarChart3 size={16} className="text-neon-purple" /> Liquidation Heatmap (24h)
          </h3>
          <div className="h-64 relative bg-white/5 rounded-xl overflow-hidden p-4">
            <div className="grid grid-cols-12 gap-1 h-full">
              {Array.from({ length: 144 }).map((_, i) => (
                <div 
                  key={i} 
                  className="rounded-sm"
                  style={{ 
                    backgroundColor: i % 15 === 0 ? '#ff4444' : i % 20 === 0 ? '#39ff14' : '#1a1a1a',
                    opacity: 0.1 + (Math.random() * 0.9)
                  }}
                />
              ))}
            </div>
            <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
              <div className="bg-cyber-dark/80 px-4 py-2 rounded border border-white/10 backdrop-blur-md">
                <p className="text-[10px] font-mono text-neon-blue">SCANNING_ORDER_BOOKS...</p>
              </div>
            </div>
          </div>
          <div className="flex justify-between mt-4 text-[10px] text-white/30 uppercase tracking-widest">
            <span>Low Liquidity</span>
            <div className="flex gap-1">
              <div className="w-3 h-3 bg-[#1a1a1a]" />
              <div className="w-3 h-3 bg-neon-blue/40" />
              <div className="w-3 h-3 bg-neon-purple/60" />
              <div className="w-3 h-3 bg-neon-green" />
            </div>
            <span>High Liquidity</span>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {/* Long/Short Ratio */}
        <div className="glass-panel p-6 border-white/5">
          <h3 className="text-sm font-bold uppercase tracking-widest text-white/60 mb-6">Long/Short Ratio (Global)</h3>
          <div className="space-y-6">
            {[
              { coin: 'BTC', long: 52.4, short: 47.6 },
              { coin: 'ETH', long: 48.2, short: 51.8 },
              { coin: 'SOL', long: 61.5, short: 38.5 },
            ].map((r, i) => (
              <div key={i} className="space-y-2">
                <div className="flex justify-between text-xs font-bold">
                  <span>{r.coin}</span>
                  <span className="text-neon-green">{r.long}% Long</span>
                </div>
                <div className="w-full h-3 bg-red-500/20 rounded-full overflow-hidden flex">
                  <motion.div 
                    initial={{ width: 0 }}
                    animate={{ width: `${r.long}%` }}
                    className="h-full bg-neon-green shadow-[0_0_10px_rgba(57,255,20,0.5)]"
                  />
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Whale Flow */}
        <div className="glass-panel p-6 border-white/5">
          <h3 className="text-sm font-bold uppercase tracking-widest text-white/60 mb-6">Exchange Net Flow</h3>
          <div className="space-y-4">
            {[
              { exchange: 'Binance', flow: '+$420M', type: 'Inflow' },
              { exchange: 'Coinbase', flow: '-$125M', type: 'Outflow' },
              { exchange: 'Kraken', flow: '+$12M', type: 'Inflow' },
              { exchange: 'OKX', flow: '-$84M', type: 'Outflow' },
            ].map((e, i) => (
              <div key={i} className="flex justify-between items-center">
                <div className="flex items-center gap-3">
                  <div className={`w-1.5 h-1.5 rounded-full ${e.type === 'Inflow' ? 'bg-neon-green' : 'text-red-500'}`} />
                  <span className="text-sm font-bold">{e.exchange}</span>
                </div>
                <div className="text-right">
                  <p className={`text-sm font-mono ${e.flow.startsWith('+') ? 'text-neon-green' : 'text-red-500'}`}>{e.flow}</p>
                  <p className="text-[10px] text-white/30 uppercase">{e.type}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};