[V0_FILE]typescriptreact:file="components/ui/glass-card.tsx" isMerged="true" import { cn } from "@/lib/utils" import type { ReactNode } from "react" interface GlassCardProps { children: ReactNode className?: string glow?: boolean variant?: "default" | "highlight" } export function GlassCard({ children, className, glow, variant = "default" }: GlassCardProps) { return (

{children}

) } [V0_FILE]png:file="public/diverse-avatars.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/diverse-avatars-K1qVYge2trPWCNm6kkjY04d7LcErVe.png" isMerged="true" [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "lightweight-charts": "5.1.0", "@react-three/fiber": "9.5.0", "three": "0.182.0", "zustand": "5.0.12", "gsap": "3.14.2" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/trade/trade-header.tsx" isMerged="true" "use client" import Link from "next/link" import { usePathname } from "next/navigation" import { cn } from "@/lib/utils" import { ChevronDown } from "lucide-react" import { Button } from "@/components/ui/button" const navItems = [ { label: "Trade", href: "/trade" }, { label: "Vaults", href: "/vaults" }, { label: "Portfolio", href: "/portfolio" }, { label: "Staking", href: "/" }, { label: "Referrals", href: "/referrals" }, { label: "Leaderboard", href: "/leaderboard" }, ] export function TradeHeader() { const pathname = usePathname() return (

{/* Logo & Nav */}

{/* Right Actions */}

) } [V0_FILE]typescriptreact:file="components/trade/market-selector.tsx" isMerged="true" "use client" import { ChevronDown, Star } from "lucide-react" import { Button } from "@/components/ui/button" interface MarketSelectorProps { symbol: string price: number change24h: number high24h: number low24h: number volume24h: number openInterest: number fundingRate: number } export function MarketSelector({ symbol, price, change24h, high24h, low24h, volume24h, openInterest, fundingRate, }: MarketSelectorProps) { const isPositive = change24h >= 0 return (

{/* Market Selector */} {/* Price */}

${price.toLocaleString(undefined, { minimumFractionDigits: 2 })} {isPositive ? "+" : ""} {change24h.toFixed(2)}%

{/* Stats */}

24h High ${high24h.toLocaleString()}

24h Low ${low24h.toLocaleString()}

24h Volume ${(volume24h / 1e9).toFixed(2)}B

Open Interest ${(openInterest / 1e9).toFixed(2)}B

Funding / Countdown = 0 ? "text-success" : "text-destructive")}> {fundingRate >= 0 ? "+" : ""} {fundingRate.toFixed(4)}%

{/* View Toggle */}

) } function cn(...classes: (string | boolean | undefined)[]) { return classes.filter(Boolean).join(" ") } [V0_FILE]typescriptreact:file="components/trade/recent-trades.tsx" isMerged="true" "use client" interface Trade { price: number size: number time: string side: "buy" | "sell" } interface RecentTradesProps { trades: Trade[] } export function RecentTrades({ trades }: RecentTradesProps) { return (

{/* Header */}

Trades

{/* Column Headers */}

Price Size Time

{/* Trades List */}

{trades.map((trade, i) => (

{trade.price.toFixed(2)} {trade.size.toFixed(4)} {trade.time}

))}

) } [V0_FILE]typescriptreact:file="components/trade/positions-table.tsx" isMerged="true" "use client" import { useState } from "react" import { cn } from "@/lib/utils" import { Filter } from "lucide-react" import { Button } from "@/components/ui/button" import { Checkbox } from "@/components/ui/checkbox" const tabs = ["Balances", "Positions", "Open Orders", "TWAP", "Trade History", "Funding History", "Order History"] interface Position { symbol: string side: "long" | "short" size: number entryPrice: number markPrice: number pnl: number pnlPercent: number leverage: number liquidationPrice: number margin: number } interface PositionsTableProps { positions: Position[] } export function PositionsTable({ positions }: PositionsTableProps) { const [activeTab, setActiveTab] = useState("Positions") const [hideSmall, setHideSmall] = useState(false) return (

{/* Tabs */}

{tabs.map((tab) => ( ))}

setHideSmall(v as boolean)} /> Hide Small Balances

{/* Table Header */} {activeTab === "Positions" && ( <>

Contract Side Size Entry Price Mark Price PNL (ROE %) Leverage Liq. Price Margin

{/* Table Body */}

{positions.length === 0 ? (

No positions yet

) : ( positions.map((position, i) => (

{position.symbol} {position.side.toUpperCase()} {position.size.toFixed(4)} ${position.entryPrice.toLocaleString()} ${position.markPrice.toLocaleString()} = 0 ? "text-success" : "text-destructive")}> ${position.pnl.toFixed(2)} ({position.pnlPercent.toFixed(2)}%) {position.leverage}x ${position.liquidationPrice.toLocaleString()} ${position.margin.toFixed(2)}

)) )}

)} {activeTab === "Balances" && ( <>

Coin Total Balance Available Balance USDC Value PNL (ROE %)

No balances yet

)} {!["Positions", "Balances"].includes(activeTab) && (

)}

) } [V0_FILE]typescriptreact:file="components/ui/mini-chart.tsx" isMerged="true" "use client" import { Area, AreaChart, ResponsiveContainer } from "recharts" interface MiniChartProps { data: { value: number }[] positive?: boolean } export function MiniChart({ data, positive = true }: MiniChartProps) { const chartColor = positive ? "#22c55e" : "#ef4444" const gradientId = positive ? "gradient-positive" : "gradient-negative" return ( ) } [V0_FILE]typescriptreact:file="components/trade/market-bar.tsx" isMerged="true" "use client" import { useState, useEffect, useMemo } from "react" import { Button } from "@/components/ui/button" import { ChevronDown, Star, Info, Activity } from "lucide-react" import { useTradeContext } from "@/lib/trade-context" import { useTradingContext } from "@/lib/trading-context" import { usePriceEngine } from "@/lib/price-engine" import { useFundingRate } from "@/lib/hooks/use-price-sync" import { useMarketStatsSafe, formatVolume, formatPriceChange } from "@/lib/market-stats-engine" import { FundingRatePanel } from "./funding-rate-panel" import { MarketSelectorModal } from "./market-selector-modal" import { GlobalADLIndicator } from "./adl-indicator" import { GlobalRiskBar } from "./global-risk-bar" import { CoinLogo, TradingPairLogo } from "@/components/ui/coin-logo" import { cn } from "@/lib/utils" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip" function formatNumber(num: number): string { if (num >= 1e9) return `$${(num / 1e9).toFixed(2)}B` if (num >= 1e6) return `$${(num / 1e6).toFixed(2)}M` if (num >= 1e3) return `$${(num / 1e3).toFixed(2)}K` return `$${num.toFixed(2)}` } // Funding interval is 8 hours (28800 seconds) const FUNDING_INTERVAL = 8 * 60 * 60 * 1000 // 8 hours in ms function useFundingCountdown() { const [countdown, setCountdown] = useState("") const [nextFundingTime, setNextFundingTime] = useState(null) useEffect(() => { const calculateNextFunding = () => { const now = new Date() const hours = now.getUTCHours() // Funding times are at 00:00, 08:00, 16:00 UTC const fundingHours = [0, 8, 16] let nextHour = fundingHours.find(h => h > hours) if (nextHour === undefined) { // Next funding is tomorrow at 00:00 nextHour = 0 const next = new Date(now) next.setUTCDate(next.getUTCDate() + 1) next.setUTCHours(0, 0, 0, 0) return next } const next = new Date(now) next.setUTCHours(nextHour, 0, 0, 0) return next } const updateCountdown = () => { const next = calculateNextFunding() setNextFundingTime(next) const diff = next.getTime() - Date.now() if (diff <= 0) { setCountdown("00:00:00") return } const hours = Math.floor(diff / (1000 * 60 * 60)) const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)) const seconds = Math.floor((diff % (1000 * 60)) / 1000) setCountdown( `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}` ) } updateCountdown() const interval = setInterval(updateCountdown, 1000) return () => clearInterval(interval) }, []) return { countdown, nextFundingTime } } function calculateEstimatedFunding( positionSize: number, entryPrice: number, fundingRate: number, side: "Long" | "Short" ): number { const notionalValue = positionSize * entryPrice const payment = notionalValue * (fundingRate / 100) // Long pays when positive, Short pays when negative return side === "Long" ? -payment : payment } export function MarketBar() { const { selectedMarket, favorites, toggleFavorite } = useTradeContext() const { positions } = useTradingContext() const [isModalOpen, setIsModalOpen] = useState(false) const { countdown, nextFundingTime } = useFundingCountdown() // Per spec: Use market stats engine for real-time 24H metrics const marketStatsEngine = useMarketStatsSafe() const marketStatsKey = `${selectedMarket.symbol}-${selectedMarket.quote}` const liveStats = marketStatsEngine?.getStats(marketStatsKey) // Section 3 & 4 - Get prices from Price Engine let priceEngine: ReturnType | null = null try { priceEngine = usePriceEngine() } catch { // Price engine not available, use fallback } const priceSymbol = `${selectedMarket.symbol}-${selectedMarket.quote}` const markPriceData = priceEngine?.getMarkPrice(priceSymbol) const indexPriceData = priceEngine?.getIndexPrice(priceSymbol) const premiumData = priceEngine?.getPremiumData(priceSymbol) // Use price engine data if available, fallback to market data const displayMarkPrice = markPriceData?.markPrice || selectedMarket.price const displayIndexPrice = indexPriceData?.indexPrice || selectedMarket.oraclePrice || selectedMarket.price const displayFundingRate = markPriceData?.fundingRate !== undefined ? markPriceData.fundingRate * 100 // Convert to percentage : (selectedMarket.funding8h || 0) const displayPremium = premiumData?.currentPremium || 0 // Keyboard shortcut to open modal useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if ((e.metaKey || e.ctrlKey) && e.key === "k") { e.preventDefault() setIsModalOpen(true) } } window.addEventListener("keydown", handleKeyDown) return () => window.removeEventListener("keydown", handleKeyDown) }, []) const marketKey = `${selectedMarket.symbol}-${selectedMarket.quote}` const isFavorite = favorites.includes(marketKey) // Calculate estimated funding payment for current position const currentPosition = positions.find(p => p.symbol === selectedMarket.symbol) const estimatedFunding = useMemo(() => { if (!currentPosition) return null return calculateEstimatedFunding( currentPosition.size, currentPosition.markPrice, selectedMarket.funding8h || 0, currentPosition.side ) }, [currentPosition, selectedMarket.funding8h]) // Use funding rate from dedicated hook (Section 5 & 6) const fundingRateInfo = useFundingRate(priceSymbol) const fundingRate = fundingRateInfo?.fundingRate !== undefined ? fundingRateInfo.fundingRate * 100 // Convert to percentage : displayFundingRate const annualizedRate = fundingRateInfo?.annualizedRate !== undefined ? fundingRateInfo.annualizedRate * 100 : fundingRate * 3 * 365 return (

{/* Market Selector */}

{selectedMarket.leverage && ( {selectedMarket.leverage}x )} {selectedMarket.quote}

{/* Market Stats - Section 3 & 4: Using Price Engine */}

Mark {displayMarkPrice.toLocaleString()}

Section 4 - Mark Price Engine

Mark Price ${displayMarkPrice.toLocaleString()}

Index Price ${displayIndexPrice.toLocaleString()}

Fair Basis = 0 ? "text-emerald-400" : "text-red-400" )}> ${(markPriceData?.fairBasis || 0).toFixed(4)}

Premium Index = 0 ? "text-emerald-400" : "text-red-400" )}> {(displayPremium * 100).toFixed(4)}%

Mark Price = Index Price + Fair Basis

Index {displayIndexPrice.toLocaleString()}

Section 3 - Index Price Engine

{indexPriceData?.sources && indexPriceData.sources.length > 0 ? ( <>

Exchange Sources:

{indexPriceData.sources.map((source) => (

{source.source} ${source.price.toLocaleString()}

))}

Weighted Average ${displayIndexPrice.toLocaleString()}

Confidence = 0.75 ? "text-emerald-400" : "text-yellow-400" )}> {((indexPriceData.confidence || 0) * 100).toFixed(0)}%

) : (

Using fallback price source

)}

{/* 24H Change - Per spec: Use LAST PRICE from market stats engine */}

24H Change = 0 ? "text-emerald-400" : "text-red-400" }> {liveStats ? formatPriceChange(liveStats.priceChange, liveStats.priceChangePercent) : `${selectedMarket.change24h >= 0 ? "+" : ""}${selectedMarket.changeAmount?.toLocaleString() || "0"} / ${selectedMarket.change24h >= 0 ? "+" : ""}${selectedMarket.change24h}%` }

Last Price ${(liveStats?.lastPrice ?? displayMarkPrice).toLocaleString()}

24H Ago ${(liveStats?.price24hAgo ?? 0).toLocaleString()}

24H High ${(liveStats?.high24h ?? 0).toLocaleString()}

24H Low ${(liveStats?.low24h ?? 0).toLocaleString()}

{/* 24H Volume - Per spec: Rolling 24h from trade stream */}

24H Volume {liveStats ? formatVolume(liveStats.volume24h) : formatNumber(selectedMarket.volume24h)}

Trades {(liveStats?.tradeCount24h ?? 0).toLocaleString()}

{/* Open Interest - Per spec: From position engine, NOT trades */}

Open Interest {liveStats ? formatVolume(liveStats.openInterest) : formatNumber(selectedMarket.openInterest || 0)}

{liveStats && liveStats.openInterestChange24h !== 0 && (

24H Change = 0 ? "text-emerald-400" : "text-red-400" )}> {liveStats.openInterestChange24h >= 0 ? "+" : ""}{formatVolume(liveStats.openInterestChange24h)}

)}

Sum of all open position sizes

{/* Funding Rate Panel - Inline Variant */} {/* Global ADL Risk Indicator - Shows overall ADL risk */} {/* Global Risk Bar - Compact version for quick risk overview */}

{/* Market Selector Modal */} ) } [V0_FILE]typescriptreact:file="components/ui/terms-modal.tsx" isMerged="true" "use client" import { useState } from "react" import { X } from "lucide-react" import Link from "next/link" interface TermsModalProps { isOpen: boolean onAccept: () => void onDecline: () => void walletAddress?: string } export function TermsModal({ isOpen, onAccept, onDecline, walletAddress }: TermsModalProps) { const [termsAccepted, setTermsAccepted] = useState(false) const [cookiesAccepted, setCookiesAccepted] = useState(false) const canAccept = termsAccepted && cookiesAccepted const handleAccept = () => { if (canAccept) { // Store acceptance in localStorage with wallet address if (walletAddress) { localStorage.setItem(`terms_accepted_${walletAddress}`, "true") localStorage.setItem(`terms_accepted_at_${walletAddress}`, new Date().toISOString()) } onAccept() } } if (!isOpen) return null return (

{/* Backdrop */}

{/* Modal */}

{/* Close button */} {/* Title */}

Terms of Use, Privacy Policy, and Cookie Policy

{/* Subtitle */}

To proceed, review and accept the following:

{/* Checkboxes */}

{/* Terms checkbox */}

setTermsAccepted(e.target.checked)} className="sr-only" />

{termsAccepted && ( )}

You acknowledge that you have read, understood, and agreed to the{" "} Terms of Use {" "} and{" "} Privacy Policy . {/* Cookie checkbox */}

setCookiesAccepted(e.target.checked)} className="sr-only" />

{cookiesAccepted && ( )}

This site uses cookies to ensure the best user experience. These cookies are strictly necessary or essential for optimal functionality. By using this site, you agree to the cookie policy.

{/* Buttons */}

{/* Wallet address indicator */} {walletAddress && (

Connecting wallet: {walletAddress.slice(0, 6)}...{walletAddress.slice(-4)}

)}

) } [V0_FILE]typescriptreact:file="components/trade/trade-navbar.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { ChevronDown, Settings, Copy, Globe, Wallet } from "lucide-react" import { SunBitLogo } from "@/components/ui/sunbit-logo" import { TermsModal } from "@/components/ui/terms-modal" import { LatencyIndicator } from "@/components/ui/connection-status" export function TradeNavbar() { const [walletAddress, setWalletAddress] = useState(null) const [isConnecting, setIsConnecting] = useState(false) const [showTermsModal, setShowTermsModal] = useState(false) const [pendingWalletAddress, setPendingWalletAddress] = useState(null) // Check if wallet was previously connected useEffect(() => { const savedWallet = localStorage.getItem("connected_wallet") if (savedWallet) { const termsAccepted = localStorage.getItem(`terms_accepted_${savedWallet}`) if (termsAccepted === "true") { setWalletAddress(savedWallet) } } }, []) // Simulate wallet connection (replace with actual Web3 integration) const connectWallet = async () => { setIsConnecting(true) try { // Simulate getting wallet address from MetaMask/WalletConnect // In real implementation, use ethers.js or web3.js const mockAddress = "0x" + Math.random().toString(16).slice(2, 10) + "..." + Math.random().toString(16).slice(2, 6) const fullAddress = "0x" + Math.random().toString(16).slice(2, 42) // Check if terms already accepted for this wallet const termsAccepted = localStorage.getItem(`terms_accepted_${fullAddress}`) if (termsAccepted === "true") { // Already accepted, connect directly setWalletAddress(fullAddress) localStorage.setItem("connected_wallet", fullAddress) } else { // Show terms modal setPendingWalletAddress(fullAddress) setShowTermsModal(true) } } catch (error) { console.error("Failed to connect wallet:", error) } finally { setIsConnecting(false) } } const handleTermsAccept = () => { if (pendingWalletAddress) { setWalletAddress(pendingWalletAddress) localStorage.setItem("connected_wallet", pendingWalletAddress) setPendingWalletAddress(null) setShowTermsModal(false) } } const handleTermsDecline = () => { setPendingWalletAddress(null) setShowTermsModal(false) } const disconnectWallet = () => { if (walletAddress) { localStorage.removeItem("connected_wallet") setWalletAddress(null) } } const copyAddress = () => { if (walletAddress) { navigator.clipboard.writeText(walletAddress) } } const formatAddress = (address: string) => { return `${address.slice(0, 6)}...${address.slice(-4)}` } return ( <>

{/* Left - Logo & Navigation */}

Trade Portfolio Earn Vaults Staking Referrals Leaderboard More API Docs Stats

{/* Right - Actions */}

{/* Latency Indicator */} {walletAddress ? ( Copy Address Disconnect ) : ( )}

{/* Terms Modal */} ) } [V0_FILE]typescriptreact:file="app/app/assistant/page.tsx" isMerged="true" "use client" import { useState, useRef, useEffect } from "react" import { useWallet } from "@/lib/wallet-context" import { useCapitalFlow } from "@/lib/capital-flow-context" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import Link from "next/link" import { Send, Bot, Wallet, Gift, MessageSquare, Lightbulb, TrendingUp, Zap, Copy, Loader2, ArrowRight, Shield, Activity, AlertTriangle, Target, BarChart3, Coins, ChevronRight, } from "lucide-react" interface Message { id: string role: "user" | "assistant" content: string timestamp: Date } const suggestedQuestions = [ "How do I stake BTC on 963X?", "What are the best yield opportunities?", "Explain USDB Vault and its risks", "How does margin trading work?", "What is ve963X and its benefits?", ] const startChats = [ { question: "What is Bitcoin DeFi?", icon: "btc" }, { question: "How do AI Agents work?", icon: "ai" }, { question: "Getting started guide", icon: "guide" }, ] export default function AIAssistantPage() { const { wallet } = useWallet() const capitalFlow = useCapitalFlow() const [messages, setMessages] = useState([]) const [input, setInput] = useState("") const [isLoading, setIsLoading] = useState(false) const messagesEndRef = useRef(null) const inputRef = useRef(null) const getPriorityColor = (priority: string) => { switch (priority) { case "urgent": return "border-red-500/30 bg-red-500/10" case "high": return "border-[#F7931A]/30 bg-[#F7931A]/10" case "medium": return "border-blue-500/30 bg-blue-500/10" default: return "border-white/10 bg-white/5" } } useEffect(() => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) }, [messages]) const handleSendMessage = async (messageText?: string) => { const text = messageText || input.trim() if (!text) return const userMessage: Message = { id: Date.now().toString(), role: "user", content: text, timestamp: new Date(), } setMessages((prev) => [...prev, userMessage]) setInput("") setIsLoading(true) await new Promise((resolve) => setTimeout(resolve, 1500)) const responses: Record = { stake: `**Staking BTC on 963X**\n\nYou can stake BTC through multiple protocols:\n\n1. **Babylon** - 0.21% APY, Low Risk\n2. **Lombard** - 6.5% APY, Medium Risk\n3. **Karak** - 25% APY, High Risk\n\n**Steps to stake:**\n1. Go to Staking page\n2. Select your preferred protocol\n3. Choose BTC type (WBTC, cbBTC, etc.)\n4. Enter amount and confirm\n\nWould you like me to guide you through the process?`, yield: `**Best Yield Opportunities on 963X**\n\n**Conservative (Low Risk):**\n• USDB Vault: 8.5% APY (auto-compound)\n• USDB/USDC LP: 12.8% APY\n\n**Moderate (Medium Risk):**\n• BTC Staking (Lombard): 6.5% APY\n• Pendle PT-btBTC: 8.1% APY\n\n**Aggressive (High Risk):**\n• 963X/USDB LP: 55.4% APY\n• Pendle YT-LBTC: 52.5% APY\n• Stake 963X (4yr): 30% APY\n\nBased on your risk profile, I recommend starting with USDB Vault.`, usdb: `**USDB Vault Explained**\n\nUSDB is 963X's yield-bearing stablecoin backed by Bitcoin collateral.\n\n**How it works:**\n1. Deposit BTC (btBTC, WBTC, etc.) as collateral\n2. Mint USDB at 150% minimum ratio\n3. Use USDB across DeFi or stake for sUSDB\n\n**Key metrics:**\n• Mint Fee: 0.1%\n• Redeem Fee: 0.5%\n• Interest Rate: 2.5% APR\n• Current TVL: $50M\n\n**Risks:**\n• Liquidation if ratio drops below 150%\n• Smart contract risk\n• BTC price volatility\n\nWould you like to mint some USDB?`, margin: `**Margin Trading on 963X**\n\nMargin trading lets you borrow funds to increase position size.\n\n**Two modes:**\n1. **Cross Margin**: All positions share margin\n2. **Isolated Margin**: Each position has separate margin\n\n**Key features:**\n• Max leverage: 20x (Margin mode)\n• Supported pairs: BTC, ETH, SOL, etc.\n• Liquidation protection\n\n**Risk warning:**\n• Higher leverage = higher risk\n• Monitor liquidation price\n• Use stop-loss orders\n\nStart with low leverage (2-5x) to understand the mechanics.`, ve963x: `**ve963X - Vote-Escrowed 963X**\n\nve963X is received when you lock 963X tokens for governance and boosted rewards.\n\n**Lock periods & benefits:**\n• 1 Year: 1x Boost, 12% APY\n• 2 Years: 1.5x Boost, 18% APY\n• 4 Years: 2.5x Boost, 30% APY\n\n**Benefits:**\n1. **Governance Power**: Vote on proposals\n2. **Boosted Rewards**: Up to 2.5x staking rewards\n3. **Revenue Share**: 30% of protocol fees\n4. **Priority Access**: Early feature access\n\n**Note:** Early unlock incurs 50-75% penalty.\n\nWant to stake 963X for ve963X?`, bitcoin: `**What is Bitcoin DeFi?**\n\nBitcoin DeFi brings decentralized finance capabilities to Bitcoin holders without leaving the BTC ecosystem.\n\n**963X's Bitcoin DeFi products:**\n\n1. **USDB**: Bitcoin-backed stablecoin\n2. **BTC Staking**: Earn yield on BTC\n3. **PerpDEX**: Trade BTC perpetuals\n4. **Yield Vaults**: Auto-optimized returns\n5. **Liquid Staking**: LST tokens (btBTC, LBTC)\n\n**Why Bitcoin DeFi?**\n• Unlock BTC liquidity\n• Earn yield on idle BTC\n• Access leverage without selling\n• Maintain BTC exposure\n\nReady to explore?`, ai: `**AI Agents on 963X**\n\nFAI (Financial AI) agents automate DeFi operations while you maintain control.\n\n**Types of AI products:**\n\n1. **FAI Assistant** (You're using it now!)\n • Portfolio analysis\n • Risk assessment\n • Yield optimization\n\n2. **AI Bot Trading**\n • Automated trading strategies\n • Grid bots, DCA bots\n • Risk-managed execution\n\n3. **Agent Vaults**\n • AI-managed yield strategies\n • Auto-rebalancing\n • Cross-protocol optimization\n\n**Important:** AI provides advice only, you control execution.\n\nWant to try AI Bot Trading?`, guide: `**Getting Started with 963X**\n\n**Step 1: Connect Wallet**\nSupport MetaMask, OKX, Coinbase & more\n\n**Step 2: Deposit Funds**\nDeposit USDT/USDC on Ethereum, Arbitrum, Base, or Optimism\n\n**Step 3: Choose a Product**\n\n• **New to DeFi?** Start with USDB Vault (8.5% APY)\n• **BTC holder?** Try BTC Staking\n• **Want to trade?** Explore PerpDEX\n• **Maximizing yield?** Check Liquidity Farming\n\n**Step 4: Monitor Portfolio**\nTrack everything in Portfolio page\n\n**Need help?** I'm here 24/7!\n\nWhat would you like to start with?`, } let responseContent = "I can help you with 963X's Bitcoin DeFi products. " const lowerText = text.toLowerCase() if (lowerText.includes("stake") || lowerText.includes("staking")) { responseContent = responses.stake } else if (lowerText.includes("yield") || lowerText.includes("apy") || lowerText.includes("earn")) { responseContent = responses.yield } else if (lowerText.includes("usdb") || lowerText.includes("vault") || lowerText.includes("mint")) { responseContent = responses.usdb } else if (lowerText.includes("margin") || lowerText.includes("leverage") || lowerText.includes("trading")) { responseContent = responses.margin } else if (lowerText.includes("ve963x") || lowerText.includes("vesbit") || lowerText.includes("vote") || lowerText.includes("lock")) { responseContent = responses.ve963x } else if (lowerText.includes("bitcoin defi") || lowerText.includes("btc defi")) { responseContent = responses.bitcoin } else if (lowerText.includes("ai") || lowerText.includes("agent") || lowerText.includes("bot")) { responseContent = responses.ai } else if (lowerText.includes("start") || lowerText.includes("guide") || lowerText.includes("begin")) { responseContent = responses.guide } else { responseContent += "Ask me about staking, yield opportunities, USDB, trading, or AI agents. How can I help you today?" } const aiMessage: Message = { id: (Date.now() + 1).toString(), role: "assistant", content: responseContent, timestamp: new Date(), } setMessages((prev) => [...prev, aiMessage]) setIsLoading(false) } return (

{messages.length === 0 ? ( // Initial State - Decision & Routing Layer

{/* Header */}

AI Financial Co-Pilot

Decision & Routing Layer

AI analyzes your capital, risk, and market conditions to recommend optimal actions

{/* Capital Context Banner */} {wallet.isConnected && (

Health Score

= 80 ? "text-emerald-400" : capitalFlow.portfolioHealthScore >= 60 ? "text-[#F7931A]" : "text-red-400" }`}> {capitalFlow.portfolioHealthScore}/100

Available USDB

${capitalFlow.availableUsdb.toLocaleString()}

Deployed

${capitalFlow.deployedUsdb.toLocaleString()}

Positions

{capitalFlow.activePositionsCount} {capitalFlow.atRiskPositionsCount > 0 && ( ({capitalFlow.atRiskPositionsCount} at risk) )}

)} {/* AI Recommendations - Context-Aware Actions */} {capitalFlow.recommendations.length > 0 && (

AI Recommended Actions

{capitalFlow.recommendations.slice(0, 4).map((rec) => (

{rec.type === "mint-usdb" && } {rec.type === "trade-perp" && } {rec.type === "reduce-risk" && } {rec.type === "increase-yield" && } {rec.type === "rebalance" && }

{rec.title} {rec.priority}

{rec.description}

{rec.impact}

))}

)} {/* Search Input */}

{/* Suggested Questions */}

{suggestedQuestions.map((question) => ( ))}

{/* Cards Section */}

{/* Wallet Card */}

Wallet

{wallet.isConnected ? (

Total Balance

{wallet.totalValue.toLocaleString("en-US", { style: "currency", currency: "USD" })}

) : (

Top up balance

Add funds to start using wallet

)}

{/* Rewards Card */}

Rewards

Earn 963X & Get Rewards

Complete tasks, provide liquidity, stake tokens to climb the leaderboard

{/* Bottom Cards */}

{/* Start Chats */}

START FIRST CHAT

{startChats.map((chat) => ( ))}

{/* Suggestion */}

Suggestion for you

Invite now

Every action your friend takes earns you 10% of their 963X.
No cap. No delay. Just pure flow.
The earlier they join, the more you stack. GO!

963X-REF-{wallet.address?.slice(-6).toUpperCase() || "XXXXXX"}

) : ( // Chat State

{/* Messages */}

{messages.map((message) => (

{message.role === "user" ? ( {wallet.address?.slice(2, 4).toUpperCase() || "U"} ) : ( )}

{message.content}

))} {isLoading && (

)}

{/* Input */}

FAI provides advisory insights only. Not financial advice. Always DYOR.

)}

) } [V0_FILE]typescriptreact:file="app/app/referral/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/app/leaderboard/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/app/bots/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/app/points/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/app/terms/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/app/lending/page.tsx" isMerged="true" "use client" import { useState, Suspense, useMemo } from "react" import { useRouter } from "next/navigation" import { useWallet } from "@/lib/wallet-context" import { Button } from "@/components/ui/button" import { CoinLogo } from "@/components/ui/coin-logo" import { Search, Info, ChevronDown, ChevronUp, TrendingUp, AlertTriangle, Shield, Activity } from "lucide-react" import { cn } from "@/lib/utils" import Loading from "./loading" import { useLendingStore, useUserLendingAccount, getHealthFactorColor, formatHealthFactor } from "@/lib/stores/lending-store" type SortField = "asset" | "totalSupply" | "supplyApy" | "totalBorrow" | "borrowApy" | "liquidity" type SortDirection = "asc" | "desc" const lendingAssets = [ { id: "btc", name: "BTC", icon: "/btc-icon.png", color: "#F7931A", totalSupply: "1,245.8 BTC", totalSupplyUsd: "$118.35M", supplyApy: 4.82, supplyApyBoost: 2.1, totalBorrow: "892.4 BTC", totalBorrowUsd: "$84.78M", borrowApy: 6.45, liquidity: "353.4 BTC", liquidityUsd: "$33.57M", ltv: 80, liquidationThreshold: 85, }, { id: "963x", name: "963X", icon: "/963x-icon.png", color: "#F7931A", totalSupply: "45.2M 963X", totalSupplyUsd: "$22.6M", supplyApy: 12.45, supplyApyBoost: 5.2, totalBorrow: "18.5M 963X", totalBorrowUsd: "$9.25M", borrowApy: 18.72, liquidity: "26.7M 963X", liquidityUsd: "$13.35M", ltv: 65, liquidationThreshold: 70, }, { id: "usdb", name: "USDB", icon: "/usdb-icon.png", color: "#F7931A", totalSupply: "89.2M USDB", totalSupplyUsd: "$89.2M", supplyApy: 8.24, supplyApyBoost: 3.5, totalBorrow: "71.8M USDB", totalBorrowUsd: "$71.8M", borrowApy: 11.45, liquidity: "17.4M USDB", liquidityUsd: "$17.4M", ltv: 85, liquidationThreshold: 90, }, { id: "usdt", name: "USDT", icon: "/usdt-icon.png", color: "#26A17B", totalSupply: "289.33M USDT", totalSupplyUsd: "$289M", supplyApy: 3.89, supplyApyBoost: 6.75, totalBorrow: "233.34M USDT", totalBorrowUsd: "$233.07M", borrowApy: 5.4, liquidity: "55.98M USDT", liquidityUsd: "$55.92M", ltv: 85, liquidationThreshold: 90, }, { id: "usdc", name: "USDC", icon: "/usdc-icon.png", color: "#2775CA", totalSupply: "79.49M USDC", totalSupplyUsd: "$79.46M", supplyApy: 2.86, supplyApyBoost: 4.84, totalBorrow: "55.1M USDC", totalBorrowUsd: "$55.08M", borrowApy: 4.62, liquidity: "24.39M USDC", liquidityUsd: "$24.38M", ltv: 85, liquidationThreshold: 90, }, { id: "eth", name: "ETH", icon: "/eth-icon.png", color: "#627EEA", totalSupply: "42.5K ETH", totalSupplyUsd: "$127.5M", supplyApy: 3.24, supplyApyBoost: 1.8, totalBorrow: "28.9K ETH", totalBorrowUsd: "$86.7M", borrowApy: 4.85, liquidity: "13.6K ETH", liquidityUsd: "$40.8M", ltv: 75, liquidationThreshold: 82, }, { id: "wbtc", name: "WBTC", icon: "/wbtc-icon.png", color: "#F7931A", totalSupply: "856.2 WBTC", totalSupplyUsd: "$81.34M", supplyApy: 4.15, supplyApyBoost: 1.5, totalBorrow: "612.8 WBTC", totalBorrowUsd: "$58.22M", borrowApy: 5.92, liquidity: "243.4 WBTC", liquidityUsd: "$23.12M", ltv: 80, liquidationThreshold: 85, }, { id: "btbtc", name: "btBTC", icon: "/btbtc-icon.png", color: "#F7931A", totalSupply: "425.6 btBTC", totalSupplyUsd: "$40.43M", supplyApy: 6.85, supplyApyBoost: 3.2, totalBorrow: "185.2 btBTC", totalBorrowUsd: "$17.59M", borrowApy: 9.45, liquidity: "240.4 btBTC", liquidityUsd: "$22.84M", ltv: 75, liquidationThreshold: 80, }, { id: "lbtc", name: "LBTC", icon: "/lbtc-icon.png", color: "#8B5CF6", totalSupply: "312.8 LBTC", totalSupplyUsd: "$29.72M", supplyApy: 5.92, supplyApyBoost: 2.8, totalBorrow: "142.5 LBTC", totalBorrowUsd: "$13.54M", borrowApy: 8.15, liquidity: "170.3 LBTC", liquidityUsd: "$16.18M", ltv: 75, liquidationThreshold: 80, }, { id: "dai", name: "DAI", icon: "/dai-icon.png", color: "#F5AC37", totalSupply: "2.2M DAI", totalSupplyUsd: "$2.19M", supplyApy: 2.82, totalBorrow: "1.22M DAI", totalBorrowUsd: "$1.22M", borrowApy: 5.71, liquidity: "974.26K DAI", liquidityUsd: "$973.79K", ltv: 80, liquidationThreshold: 85, }, { id: "usde", name: "USDe", icon: "/usde-icon.png", color: "#1E90FF", totalSupply: "156.8M USDe", totalSupplyUsd: "$156.8M", supplyApy: 7.85, supplyApyBoost: 4.2, totalBorrow: "98.5M USDe", totalBorrowUsd: "$98.5M", borrowApy: 10.25, liquidity: "58.3M USDe", liquidityUsd: "$58.3M", ltv: 85, liquidationThreshold: 90, }, { id: "usd1", name: "USD1", icon: "/usd1-icon.png", color: "#00D4AA", totalSupply: "45.2M USD1", totalSupplyUsd: "$45.2M", supplyApy: 6.45, supplyApyBoost: 3.8, totalBorrow: "32.1M USD1", totalBorrowUsd: "$32.1M", borrowApy: 8.92, liquidity: "13.1M USD1", liquidityUsd: "$13.1M", ltv: 85, liquidationThreshold: 90, }, { id: "fusd", name: "FUSD", icon: "/fusd-icon.png", color: "#FF6B35", totalSupply: "28.5M FUSD", totalSupplyUsd: "$28.5M", supplyApy: 5.92, supplyApyBoost: 3.5, totalBorrow: "18.2M FUSD", totalBorrowUsd: "$18.2M", borrowApy: 7.85, liquidity: "10.3M FUSD", liquidityUsd: "$10.3M", ltv: 80, liquidationThreshold: 85, }, { id: "bnb", name: "BNB", icon: "/bnb-icon.png", color: "#F3BA2F", totalSupply: "125.6K BNB", totalSupplyUsd: "$75.36M", supplyApy: 3.45, supplyApyBoost: 2.1, totalBorrow: "82.4K BNB", totalBorrowUsd: "$49.44M", borrowApy: 5.12, liquidity: "43.2K BNB", liquidityUsd: "$25.92M", ltv: 75, liquidationThreshold: 82, }, { id: "btcb", name: "BTCB", icon: "/btcb-icon.png", color: "#F7931A", totalSupply: "1,125.4 BTCB", totalSupplyUsd: "$106.91M", supplyApy: 4.65, supplyApyBoost: 2.0, totalBorrow: "756.2 BTCB", totalBorrowUsd: "$71.84M", borrowApy: 6.28, liquidity: "369.2 BTCB", liquidityUsd: "$35.07M", ltv: 80, liquidationThreshold: 85, }, { id: "wbeth", name: "WBETH", icon: "/wbeth-icon.png", color: "#627EEA", totalSupply: "18.5K WBETH", totalSupplyUsd: "$59.2M", supplyApy: 5.85, supplyApyBoost: 2.8, totalBorrow: "9.2K WBETH", totalBorrowUsd: "$29.44M", borrowApy: 7.45, liquidity: "9.3K WBETH", liquidityUsd: "$29.76M", ltv: 75, liquidationThreshold: 80, }, ] // Mock user positions for "My assets only" filter const userPositions = { btc: { supplied: 0.5, borrowed: 0 }, usdt: { supplied: 5000, borrowed: 2000 }, eth: { supplied: 2.5, borrowed: 0 }, } // Paused assets const pausedAssets = ["lbtc", "btbtc"] const bannerSlides = [ { title: "963X Lending is Live!", description: "Supply assets and earn up to 18% APY with 963X boost rewards!", cta: "Learn More", }, { title: "Borrow USDB at 0% Interest", description: "Limited time promotion - Borrow USDB and share $100,000 in rewards!", cta: "Borrow Now", }, ] export default function LendingPage() { const router = useRouter() const { wallet } = useWallet() const isConnected = wallet.isConnected const [searchQuery, setSearchQuery] = useState("") const [showPausedAssets, setShowPausedAssets] = useState(false) const [showMyAssetsOnly, setShowMyAssetsOnly] = useState(false) const [sortField, setSortField] = useState("totalSupply") const [sortDirection, setSortDirection] = useState("desc") const [currentBanner, setCurrentBanner] = useState(0) const [selectedAsset, setSelectedAsset] = useState(null) const [actionMode, setActionMode] = useState("supply") const [actionAmount, setActionAmount] = useState("") // Use lending store for user account data const userAccount = useUserLendingAccount() const pools = useLendingStore(state => state.pools) const assetConfigs = useLendingStore(state => state.assetConfigs) const handleAssetClick = (assetId: string) => { router.push(`/app/lending/${assetId}`) } // Stats calculations from store const totalSupply = pools.reduce((sum, p) => sum + p.totalSupplyUsd, 0) const totalBorrow = pools.reduce((sum, p) => sum + p.totalBorrowUsd, 0) const availableLiquidity = pools.reduce((sum, p) => sum + p.liquidityUsd, 0) // Health factor status const getHealthStatus = (hf: number) => { if (hf >= 999 || userAccount.totalBorrowedUsd === 0) return { label: 'Safe', color: 'text-emerald-400', bg: 'bg-emerald-400/20' } if (hf > 1.5) return { label: 'Safe', color: 'text-emerald-400', bg: 'bg-emerald-400/20' } if (hf > 1.1) return { label: 'Warning', color: 'text-yellow-400', bg: 'bg-yellow-400/20' } return { label: 'At Risk', color: 'text-red-400', bg: 'bg-red-400/20' } } const healthStatus = getHealthStatus(userAccount.healthFactor) const handleSort = (field: SortField) => { if (sortField === field) { setSortDirection(sortDirection === "asc" ? "desc" : "asc") } else { setSortField(field) setSortDirection("desc") } } const sortedAssets = [...lendingAssets] .filter((asset) => { // Search filter if (!asset.name.toLowerCase().includes(searchQuery.toLowerCase())) return false // Paused assets filter - check from config const config = assetConfigs.find(c => c.id === asset.id) const isPaused = config?.isPaused || pausedAssets.includes(asset.id) if (!showPausedAssets && isPaused) return false // My assets only filter - use store data if (showMyAssetsOnly) { const position = userAccount.positions.find(p => p.assetId === asset.id) if (!position || (position.suppliedBalance === 0 && position.borrowedBalance === 0)) return false } return true }) .sort((a, b) => { let aVal: number, bVal: number switch (sortField) { case "supplyApy": aVal = a.supplyApy bVal = b.supplyApy break case "borrowApy": aVal = a.borrowApy bVal = b.borrowApy break default: aVal = parseFloat(a.totalSupplyUsd.replace(/[$,MK]/g, "")) bVal = parseFloat(b.totalSupplyUsd.replace(/[$,MK]/g, "")) } return sortDirection === "asc" ? aVal - bVal : bVal - aVal }) const SortIcon = ({ field }: { field: SortField }) => ( ) return ( }>

{/* User Dashboard - Per Spec: Show Total Supplied, Total Borrowed, Net APY, Health Factor */} {isConnected && userAccount.totalSuppliedUsd > 0 && (

Your Lending Dashboard

{healthStatus.label}

Total Supplied

${userAccount.totalSuppliedUsd.toLocaleString(undefined, { maximumFractionDigits: 0 })}

Total Borrowed

${userAccount.totalBorrowedUsd.toLocaleString(undefined, { maximumFractionDigits: 0 })}

Borrow Limit

${userAccount.borrowLimit.toLocaleString(undefined, { maximumFractionDigits: 0 })}

80 ? "bg-red-400" : userAccount.borrowLimitUsed > 60 ? "bg-yellow-400" : "bg-emerald-400" )} style={{ width: `${Math.min(100, userAccount.borrowLimitUsed)}%` }} />

{userAccount.borrowLimitUsed.toFixed(1)}% used

Health Factor

{formatHealthFactor(userAccount.healthFactor)}

{userAccount.healthFactor < 1.5 && userAccount.totalBorrowedUsd > 0 && (

Risk of liquidation

)}

Net APY

= 0 ? "text-emerald-400" : "text-red-400")}> {userAccount.netApy >= 0 ? '+' : ''}{userAccount.netApy.toFixed(2)}%

)} {/* Protocol Stats Header */}

Total supply

${(totalSupply / 1e9).toFixed(2)}B

Total borrow

${(totalBorrow / 1e6).toFixed(2)}M

Available liquidity

${(availableLiquidity / 1e6).toFixed(2)}M

Assets

{pools.length}

{/* Banner */}

{bannerSlides[currentBanner].title}

{bannerSlides[currentBanner].description}

{/* Filters */}

setShowPausedAssets(e.target.checked)} className="w-4 h-4 rounded border-white/20 bg-transparent accent-[#F7931A]" /> Paused assets setShowMyAssetsOnly(e.target.checked)} className="w-4 h-4 rounded border-white/20 bg-transparent accent-[#F7931A]" /> My assets only

setSearchQuery(e.target.value)} className="bg-[#12121a] border border-white/10 rounded-lg pl-10 pr-4 py-2 text-sm text-white placeholder-gray-500 focus:outline-none focus:border-[#F7931A]/50 w-64" />

{/* Assets Table - Per Spec: Show wallet/supply/borrow for each token */}

{isConnected && ( <> )} {sortedAssets.map((asset) => { // Get user position from store const position = userAccount.positions.find(p => p.assetId === asset.id) const config = assetConfigs.find(c => c.id === asset.id) const isPaused = config?.isPaused || false return ( handleAssetClick(asset.id)} className={cn( "border-b border-white/5 hover:bg-white/5 cursor-pointer transition-colors", isPaused && "opacity-60" )} > {isConnected && ( <> )} ) })}

Asset	Your Supply	Your Borrow	handleSort("totalSupply")} > Total supply	handleSort("supplyApy")} > Supply APY	handleSort("borrowApy")} > Borrow APY	handleSort("liquidity")} > Liquidity
{asset.name} {isPaused && ( Paused )}	{position && position.suppliedBalance > 0 ? ( <> {position.suppliedBalance.toLocaleString(undefined, { maximumFractionDigits: 4 })} ${position.suppliedValueUsd.toLocaleString(undefined, { maximumFractionDigits: 0 })} ) : ( - )}	{position && position.borrowedBalance > 0 ? ( <> {position.borrowedBalance.toLocaleString(undefined, { maximumFractionDigits: 4 })} ${position.borrowedValueUsd.toLocaleString(undefined, { maximumFractionDigits: 0 })} ) : ( - )}	{asset.totalSupply} {asset.totalSupplyUsd}	{asset.supplyApy}% {asset.supplyApyBoost && ( +{asset.supplyApyBoost}% )}	{asset.borrowApy}%	{asset.liquidity} {asset.liquidityUsd}

Asset

Your Supply

Your Borrow

handleSort("totalSupply")} > Total supply

handleSort("supplyApy")} > Supply APY

handleSort("borrowApy")} > Borrow APY

handleSort("liquidity")} > Liquidity

{asset.name} {isPaused && ( Paused )}

{position && position.suppliedBalance > 0 ? ( <>

{position.suppliedBalance.toLocaleString(undefined, { maximumFractionDigits: 4 })}

${position.suppliedValueUsd.toLocaleString(undefined, { maximumFractionDigits: 0 })}

) : (

)}

{position && position.borrowedBalance > 0 ? ( <>

{position.borrowedBalance.toLocaleString(undefined, { maximumFractionDigits: 4 })}

${position.borrowedValueUsd.toLocaleString(undefined, { maximumFractionDigits: 0 })}

) : (

)}

{asset.totalSupply}

{asset.totalSupplyUsd}

{asset.supplyApy}%

{asset.supplyApyBoost && (

+{asset.supplyApyBoost}%

)}

{asset.borrowApy}%

{asset.liquidity}

{asset.liquidityUsd}

) } [V0_FILE]typescriptreact:file="app/app/lending/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/admin/perpdex/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Plus, Search, Edit2, Trash2, ToggleLeft, ToggleRight, X, Save, } from "lucide-react" import { useSearchParams } from "next/navigation" import Loading from "./loading" const initialPairs = [ { id: 1, symbol: "BTC/USDB", baseAsset: "BTC", quoteAsset: "USDB", maxLeverage: 100, makerFee: 0.02, takerFee: 0.05, minOrderSize: 0.001, maxOrderSize: 100, tickSize: 0.1, status: "active", volume24h: "$45.2M", }, { id: 2, symbol: "ETH/USDB", baseAsset: "ETH", quoteAsset: "USDB", maxLeverage: 75, makerFee: 0.02, takerFee: 0.05, minOrderSize: 0.01, maxOrderSize: 500, tickSize: 0.01, status: "active", volume24h: "$28.5M", }, { id: 3, symbol: "SOL/USDB", baseAsset: "SOL", quoteAsset: "USDB", maxLeverage: 50, makerFee: 0.03, takerFee: 0.06, minOrderSize: 0.1, maxOrderSize: 10000, tickSize: 0.001, status: "active", volume24h: "$12.8M", }, { id: 4, symbol: "963X/USDB", baseAsset: "963X", quoteAsset: "USDB", maxLeverage: 25, makerFee: 0.03, takerFee: 0.06, minOrderSize: 10, maxOrderSize: 100000, tickSize: 0.0001, status: "active", volume24h: "$5.2M", }, ] type TradingPair = typeof initialPairs[0] export default function AdminPerpDEX() { const searchParams = useSearchParams() const [pairs, setPairs] = useState(initialPairs) const [searchQuery, setSearchQuery] = useState("") const [showModal, setShowModal] = useState(false) const [editingPair, setEditingPair] = useState(null) const [formData, setFormData] = useState({ symbol: "", baseAsset: "", quoteAsset: "", maxLeverage: 50, makerFee: 0.02, takerFee: 0.05, minOrderSize: 0.01, maxOrderSize: 1000, tickSize: 0.01, }) const filteredPairs = pairs.filter((pair) => pair.symbol.toLowerCase().includes(searchQuery.toLowerCase()) ) const handleAddNew = () => { setEditingPair(null) setFormData({ symbol: "", baseAsset: "", quoteAsset: "", maxLeverage: 50, makerFee: 0.02, takerFee: 0.05, minOrderSize: 0.01, maxOrderSize: 1000, tickSize: 0.01, }) setShowModal(true) } const handleEdit = (pair: TradingPair) => { setEditingPair(pair) setFormData({ symbol: pair.symbol, baseAsset: pair.baseAsset, quoteAsset: pair.quoteAsset, maxLeverage: pair.maxLeverage, makerFee: pair.makerFee, takerFee: pair.takerFee, minOrderSize: pair.minOrderSize, maxOrderSize: pair.maxOrderSize, tickSize: pair.tickSize, }) setShowModal(true) } const handleSave = () => { if (editingPair) { setPairs(pairs.map((p) => p.id === editingPair.id ? { ...p, ...formData } : p )) } else { setPairs([ ...pairs, { id: Date.now(), ...formData, status: "active", volume24h: "$0", }, ]) } setShowModal(false) } const handleToggleStatus = (id: number) => { setPairs(pairs.map((p) => p.id === id ? { ...p, status: p.status === "active" ? "paused" : "active" } : p )) } const handleDelete = (id: number) => { if (confirm("Are you sure you want to delete this trading pair?")) { setPairs(pairs.filter((p) => p.id !== id)) } } return (

PerpDEX Management

Manage trading pairs, leverage, and fees

{/* Search */}

setSearchQuery(e.target.value)} className="w-full bg-[#12121a] border border-white/10 rounded-lg pl-10 pr-4 py-2 text-sm text-white placeholder-gray-500 focus:outline-none focus:border-[#F7931A]/50" />

{/* Table */}

{filteredPairs.map((pair) => ( ))}

Symbol	Max Leverage	Maker Fee	Taker Fee	24h Volume	Status	Actions
{pair.symbol}	{pair.maxLeverage}x	{pair.makerFee}%	{pair.takerFee}%	{pair.volume24h}	{pair.status}

{/* Modal */} {showModal && (

{editingPair ? "Edit Trading Pair" : "Add Trading Pair"}

Base Asset setFormData({ ...formData, baseAsset: e.target.value.toUpperCase(), symbol: `${e.target.value.toUpperCase()}/${formData.quoteAsset}` })} className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-white" placeholder="BTC" />

Quote Asset setFormData({ ...formData, quoteAsset: e.target.value.toUpperCase(), symbol: `${formData.baseAsset}/${e.target.value.toUpperCase()}` })} className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-white" placeholder="USDB" />

Max Leverage setFormData({ ...formData, maxLeverage: Number(e.target.value) })} className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-white" />

Maker Fee (%) setFormData({ ...formData, makerFee: Number(e.target.value) })} className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-white" />

Taker Fee (%) setFormData({ ...formData, takerFee: Number(e.target.value) })} className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-white" />

Min Order Size setFormData({ ...formData, minOrderSize: Number(e.target.value) })} className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-white" />

Max Order Size setFormData({ ...formData, maxOrderSize: Number(e.target.value) })} className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-white" />

Tick Size setFormData({ ...formData, tickSize: Number(e.target.value) })} className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-white" />

)}

) } [V0_FILE]typescriptreact:file="app/admin/staking/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Plus, Search, Edit2, Trash2, ToggleLeft, ToggleRight, X, Save } from "lucide-react" import { useSearchParams } from "next/navigation" import LoadingComponent from "./loading" const initialPools = [ { id: 1, name: "btBTC Staking", asset: "btBTC", apr: 12.5, tvl: "$45.2M", lockPeriods: "7d, 30d, 90d", minStake: 0.01, status: "active" }, { id: 2, name: "WBTC Staking", asset: "WBTC", apr: 8.2, tvl: "$32.1M", lockPeriods: "7d, 30d", minStake: 0.01, status: "active" }, { id: 3, name: "LBTC Staking", asset: "LBTC", apr: 15.8, tvl: "$18.5M", lockPeriods: "30d, 90d, 365d", minStake: 0.005, status: "active" }, { id: 4, name: "963X Staking", asset: "963X", apr: 25.4, tvl: "$8.2M", lockPeriods: "7d, 30d, 90d, 365d", minStake: 100, status: "active" }, { id: 5, name: "sUSDB Staking", asset: "sUSDB", apr: 18.2, tvl: "$22.8M", lockPeriods: "Flexible", minStake: 100, status: "active" }, ] type Pool = typeof initialPools[0] export default function AdminStaking() { const searchParams = useSearchParams() const [pools, setPools] = useState(initialPools) const [searchQuery, setSearchQuery] = useState("") const [showModal, setShowModal] = useState(false) const [editingPool, setEditingPool] = useState(null) const [formData, setFormData] = useState({ name: "", asset: "", apr: 10, lockPeriods: "7d, 30d", minStake: 0.01 }) const filteredPools = pools.filter((pool) => pool.name.toLowerCase().includes(searchQuery.toLowerCase()) || pool.asset.toLowerCase().includes(searchQuery.toLowerCase()) ) const handleAddNew = () => { setEditingPool(null) setFormData({ name: "", asset: "", apr: 10, lockPeriods: "7d, 30d", minStake: 0.01 }) setShowModal(true) } const handleEdit = (pool: Pool) => { setEditingPool(pool) setFormData({ name: pool.name, asset: pool.asset, apr: pool.apr, lockPeriods: pool.lockPeriods, minStake: pool.minStake }) setShowModal(true) } const handleSave = () => { if (editingPool) { setPools(pools.map((p) => p.id === editingPool.id ? { ...p, ...formData } : p)) } else { setPools([...pools, { id: Date.now(), ...formData, tvl: "$0", status: "active" }]) } setShowModal(false) } const handleToggleStatus = (id: number) => { setPools(pools.map((p) => p.id === id ? { ...p, status: p.status === "active" ? "paused" : "active" } : p)) } const handleDelete = (id: number) => { if (confirm("Are you sure?")) setPools(pools.filter((p) => p.id !== id)) } return (

Staking Management

Manage staking pools, APR, and lock periods

setSearchQuery(e.target.value)} className="w-full bg-[#12121a] border border-white/10 rounded-lg pl-10 pr-4 py-2 text-sm text-white placeholder-gray-500" />

{filteredPools.map((pool) => ( ))}

Pool Name	Asset	APR	TVL	Lock Periods	Status	Actions
{pool.name}	{pool.asset}	{pool.apr}%	{pool.tvl}	{pool.lockPeriods}	{pool.status}

{showModal && (

{editingPool ? "Edit Pool" : "Add Pool"}

Pool Name setFormData({ ...formData, name: e.target.value })} className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-white" />

Asset setFormData({ ...formData, asset: e.target.value })} className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-white" />

APR (%) setFormData({ ...formData, apr: Number(e.target.value) })} className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-white" />

Min Stake setFormData({ ...formData, minStake: Number(e.target.value) })} className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-white" />

Lock Periods (comma separated) setFormData({ ...formData, lockPeriods: e.target.value })} className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-white" placeholder="7d, 30d, 90d" />

)}

) } const Loading = () => { return null } [V0_FILE]typescriptreact:file="app/admin/competitions/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Plus, Search, Edit2, Trash2, ToggleLeft, ToggleRight, X, Save, Trophy } from "lucide-react" import { useSearchParams } from "next/navigation" import { Suspense } from "react" import Loading from "./loading" const initialCompetitions = [ { id: 1, name: "963X Genesis Cup", prizePool: "$25,000", startDate: "2026-01-15", endDate: "2026-01-22", participants: 186, minBalance: "$1,000", status: "active" }, { id: 2, name: "PerpDEX Masters Season 1", prizePool: "$50,000", startDate: "2026-01-08", endDate: "2026-01-15", participants: 2840, minBalance: "$500", status: "ended" }, { id: 3, name: "BTC Yield Championship", prizePool: "$40,000", startDate: "2026-01-01", endDate: "2026-01-10", participants: 3105, minBalance: "$2,000", status: "ended" }, ] const prizeDistributionPresets = [ { name: "Standard", distribution: "21%, 17%, 13%, 10%, 9%, ..." }, { name: "Winner Takes More", distribution: "35%, 20%, 15%, 10%, 5%, ..." }, { name: "Spread Out", distribution: "15%, 12%, 10%, 8%, 7%, ..." }, ] type Competition = typeof initialCompetitions[0] export default function AdminCompetitions() { const searchParams = useSearchParams() const [competitions, setCompetitions] = useState(initialCompetitions) const [searchQuery, setSearchQuery] = useState("") const [showModal, setShowModal] = useState(false) const [editingComp, setEditingComp] = useState(null) const [formData, setFormData] = useState({ name: "", prizePool: "$10,000", startDate: "", endDate: "", minBalance: "$500", prizeDistribution: "Standard", }) const filteredCompetitions = competitions.filter((comp) => comp.name.toLowerCase().includes(searchQuery.toLowerCase()) ) const handleAddNew = () => { setEditingComp(null) setFormData({ name: "", prizePool: "$10,000", startDate: "", endDate: "", minBalance: "$500", prizeDistribution: "Standard" }) setShowModal(true) } const handleEdit = (comp: Competition) => { setEditingComp(comp) setFormData({ name: comp.name, prizePool: comp.prizePool, startDate: comp.startDate, endDate: comp.endDate, minBalance: comp.minBalance, prizeDistribution: "Standard" }) setShowModal(true) } const handleSave = () => { if (editingComp) { setCompetitions(competitions.map((c) => c.id === editingComp.id ? { ...c, ...formData } : c)) } else { setCompetitions([...competitions, { id: Date.now(), ...formData, participants: 0, status: "upcoming" }]) } setShowModal(false) } const handleDelete = (id: number) => { if (confirm("Are you sure you want to delete this competition?")) { setCompetitions(competitions.filter((c) => c.id !== id)) } } return ( }>

Competitions Management

Create and manage trading competitions

setSearchQuery(e.target.value)} className="w-full bg-[#12121a] border border-white/10 rounded-lg pl-10 pr-4 py-2 text-sm text-white placeholder-gray-500" />

{filteredCompetitions.map((comp) => ( ))}

Competition	Prize Pool	Duration	Participants	Min Balance	Status	Actions
{comp.name}	{comp.prizePool}	{comp.startDate} - {comp.endDate}	{comp.participants.toLocaleString()}	{comp.minBalance}	{comp.status}

{showModal && (

{editingComp ? "Edit Competition" : "Create Competition"}

Competition Name setFormData({ ...formData, name: e.target.value })} className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-white" placeholder="Trading Championship" />

Prize Pool setFormData({ ...formData, prizePool: e.target.value })} className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-white" />

Min Balance setFormData({ ...formData, minBalance: e.target.value })} className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-white" />

Start Date setFormData({ ...formData, startDate: e.target.value })} className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-white" />

End Date setFormData({ ...formData, endDate: e.target.value })} className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-white" />

Prize Distribution

)}

) } [V0_FILE]typescriptreact:file="app/admin/lending/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Plus, Search, Edit2, Trash2, ToggleLeft, ToggleRight, X, Save } from "lucide-react" import { useSearchParams } from "next/navigation" import { Suspense } from "react" const Loading = () => null const initialAssets = [ { id: 1, name: "BTC", ltv: 80, liquidationThreshold: 85, supplyApy: 4.82, borrowApy: 6.45, supplyBoost: 2.1, reserveFactor: 10, status: "active" }, { id: 2, name: "963X", ltv: 65, liquidationThreshold: 70, supplyApy: 12.45, borrowApy: 18.72, supplyBoost: 5.2, reserveFactor: 15, status: "active" }, { id: 3, name: "USDB", ltv: 85, liquidationThreshold: 90, supplyApy: 8.24, borrowApy: 11.45, supplyBoost: 3.5, reserveFactor: 10, status: "active" }, { id: 4, name: "USDT", ltv: 85, liquidationThreshold: 90, supplyApy: 3.89, borrowApy: 5.4, supplyBoost: 6.75, reserveFactor: 10, status: "active" }, { id: 5, name: "USDC", ltv: 85, liquidationThreshold: 90, supplyApy: 2.86, borrowApy: 4.62, supplyBoost: 4.84, reserveFactor: 10, status: "active" }, { id: 6, name: "ETH", ltv: 75, liquidationThreshold: 82, supplyApy: 3.24, borrowApy: 4.85, supplyBoost: 1.8, reserveFactor: 10, status: "active" }, { id: 7, name: "WBTC", ltv: 80, liquidationThreshold: 85, supplyApy: 4.15, borrowApy: 5.92, supplyBoost: 1.5, reserveFactor: 10, status: "active" }, { id: 8, name: "btBTC", ltv: 75, liquidationThreshold: 80, supplyApy: 6.85, borrowApy: 9.45, supplyBoost: 3.2, reserveFactor: 15, status: "active" }, ] type Asset = typeof initialAssets[0] export default function AdminLending() { const searchParams = useSearchParams() const [assets, setAssets] = useState(initialAssets) const [searchQuery, setSearchQuery] = useState("") const [showModal, setShowModal] = useState(false) const [editingAsset, setEditingAsset] = useState(null) const [formData, setFormData] = useState({ name: "", ltv: 75, liquidationThreshold: 82, supplyApy: 5, borrowApy: 8, supplyBoost: 2, reserveFactor: 10 }) const filteredAssets = assets.filter((a) => a.name.toLowerCase().includes(searchQuery.toLowerCase())) const handleAddNew = () => { setEditingAsset(null) setFormData({ name: "", ltv: 75, liquidationThreshold: 82, supplyApy: 5, borrowApy: 8, supplyBoost: 2, reserveFactor: 10 }) setShowModal(true) } const handleEdit = (asset: Asset) => { setEditingAsset(asset) setFormData({ name: asset.name, ltv: asset.ltv, liquidationThreshold: asset.liquidationThreshold, supplyApy: asset.supplyApy, borrowApy: asset.borrowApy, supplyBoost: asset.supplyBoost, reserveFactor: asset.reserveFactor }) setShowModal(true) } const handleSave = () => { if (editingAsset) { setAssets(assets.map((a) => a.id === editingAsset.id ? { ...a, ...formData } : a)) } else { setAssets([...assets, { id: Date.now(), ...formData, status: "active" }]) } setShowModal(false) } const handleToggleStatus = (id: number) => { setAssets(assets.map((a) => a.id === id ? { ...a, status: a.status === "active" ? "paused" : "active" } : a)) } const handleDelete = (id: number) => { if (confirm("Are you sure?")) setAssets(assets.filter((a) => a.id !== id)) } return ( }>

Lending Management

Configure lending assets, LTV, and interest rates

setSearchQuery(e.target.value)} className="w-full bg-[#12121a] border border-white/10 rounded-lg pl-10 pr-4 py-2 text-sm text-white placeholder-gray-500" />

{filteredAssets.map((asset) => ( ))}

Asset	LTV	Liq. Threshold	Supply APY	Borrow APY	Boost	Status	Actions
{asset.name}	{asset.ltv}%	{asset.liquidationThreshold}%	{asset.supplyApy}%	{asset.borrowApy}%	+{asset.supplyBoost}%	{asset.status}

{showModal && (

{editingAsset ? "Edit Asset" : "Add Asset"}

Asset Name setFormData({ ...formData, name: e.target.value.toUpperCase() })} className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-white" placeholder="BTC" />

LTV (%) setFormData({ ...formData, ltv: Number(e.target.value) })} className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-white" />

Liquidation Threshold (%) setFormData({ ...formData, liquidationThreshold: Number(e.target.value) })} className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-white" />

Supply APY (%) setFormData({ ...formData, supplyApy: Number(e.target.value) })} className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-white" />

Borrow APY (%) setFormData({ ...formData, borrowApy: Number(e.target.value) })} className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-white" />

963X Boost (%) setFormData({ ...formData, supplyBoost: Number(e.target.value) })} className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-white" />

Reserve Factor (%) setFormData({ ...formData, reserveFactor: Number(e.target.value) })} className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-white" />

)}

) } [V0_FILE]typescriptreact:file="app/admin/settings/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Save, Shield, Bell, Globe, Database, Zap, FileText, Plus, Trash2, ExternalLink } from "lucide-react" interface DocLink { id: string name: string description: string url: string } export default function AdminSettingsPage() { const [settings, setSettings] = useState({ platformFee: 0.1, referralRate: 20, minDeposit: 100, maxLeverage: 100, maintenanceMode: false, emailNotifications: true, slackNotifications: false, }) const [docLinks, setDocLinks] = useState([ { id: "whitepaper", name: "Whitepaper", description: "Technical overview of 963X protocol", url: "" }, { id: "api-docs", name: "API Documentation", description: "Developer API reference", url: "" }, { id: "smart-contracts", name: "Smart Contracts", description: "Contract addresses and ABIs", url: "" }, { id: "security-audits", name: "Security Audits", description: "Third-party audit reports", url: "" }, { id: "brand-assets", name: "Brand Assets", description: "Logos and brand guidelines", url: "" }, ]) const [newLink, setNewLink] = useState({ name: "", description: "", url: "" }) const updateDocLink = (id: string, field: keyof DocLink, value: string) => { setDocLinks(links => links.map(link => link.id === id ? { ...link, [field]: value } : link )) } const addDocLink = () => { if (newLink.name && newLink.url) { setDocLinks([...docLinks, { id: `doc-${Date.now()}`, ...newLink }]) setNewLink({ name: "", description: "", url: "" }) } } const removeDocLink = (id: string) => { setDocLinks(links => links.filter(link => link.id !== id)) } return (

Platform Settings

Configure global platform parameters

{/* Trading Settings */}

Trading Settings

Platform Fee (%) setSettings({...settings, platformFee: parseFloat(e.target.value)})} className="w-full bg-[#1a1a24] border border-white/10 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-[#F7931A]/50" step="0.01" />

Max Leverage (x) setSettings({...settings, maxLeverage: parseInt(e.target.value)})} className="w-full bg-[#1a1a24] border border-white/10 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-[#F7931A]/50" />

Min Deposit ($) setSettings({...settings, minDeposit: parseInt(e.target.value)})} className="w-full bg-[#1a1a24] border border-white/10 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-[#F7931A]/50" />

{/* Referral Settings */}

Referral Settings

Base Referral Rate (%) setSettings({...settings, referralRate: parseInt(e.target.value)})} className="w-full bg-[#1a1a24] border border-white/10 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-[#F7931A]/50" />

Bronze

10%

Silver

20%

Gold

30%

Platinum

40%

Diamond

60%

{/* Notifications */}

Notifications

Email Notifications

Slack Notifications

{/* System */}

System

Maintenance Mode

Disable all trading

{/* Documentation Links Management - Full Width */}

Documentation Links

Manage links shown on /app/docs page

{/* Existing Links */}

{docLinks.map((link) => (

updateDocLink(link.id, "name", e.target.value)} placeholder="Link name" className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-[#F7931A]/50" />

updateDocLink(link.id, "description", e.target.value)} placeholder="Description" className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-[#F7931A]/50" />

updateDocLink(link.id, "url", e.target.value)} placeholder="https://..." className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-[#F7931A]/50" />

{link.url && ( )}

))}

{/* Add New Link */}

Add New Link

setNewLink({...newLink, name: e.target.value})} placeholder="Link name" className="w-full bg-[#1a1a24] border border-white/10 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-[#F7931A]/50" />

setNewLink({...newLink, description: e.target.value})} placeholder="Description" className="w-full bg-[#1a1a24] border border-white/10 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-[#F7931A]/50" />

setNewLink({...newLink, url: e.target.value})} placeholder="https://..." className="w-full bg-[#1a1a24] border border-white/10 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-[#F7931A]/50" />

) } [V0_FILE]typescriptreact:file="app/admin/staking/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/admin/perpdex/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/admin/competitions/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/admin/vaults/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/admin/users/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/admin/lending/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/admin/swap/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/admin/points/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/admin/bots/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/ui/risk-metrics.tsx" isMerged="true" "use client" import { useCapitalFlow } from "@/lib/capital-flow-context" import { AlertTriangle, Shield, TrendingDown, Activity } from "lucide-react" interface RiskMetricsProps { compact?: boolean showPositions?: boolean } export function RiskMetrics({ compact = false, showPositions = false }: RiskMetricsProps) { const capitalFlow = useCapitalFlow() const getHealthColor = (score: number) => { if (score >= 80) return "text-emerald-400" if (score >= 60) return "text-[#F7931A]" return "text-red-400" } const getRiskBgColor = (level: string) => { switch (level) { case "low": return "bg-emerald-500/10 border-emerald-500/20" case "medium": return "bg-[#F7931A]/10 border-[#F7931A]/20" case "high": return "bg-red-500/10 border-red-500/20" case "critical": return "bg-red-500/20 border-red-500/30" default: return "bg-white/5 border-white/10" } } if (compact) { return (

Health: {capitalFlow.portfolioHealthScore}

Liq. Risk: 30 ? "text-red-400" : capitalFlow.liquidationRisk > 15 ? "text-[#F7931A]" : "text-emerald-400"}`}> {capitalFlow.liquidationRisk}%

{capitalFlow.atRiskPositionsCount > 0 && ( <>

{capitalFlow.atRiskPositionsCount} at risk

)}

) } return (

Risk Overview

{capitalFlow.overallRiskLevel.charAt(0).toUpperCase() + capitalFlow.overallRiskLevel.slice(1)} Risk

Portfolio Health

{capitalFlow.portfolioHealthScore}/100

Liquidation Risk

30 ? "text-red-400" : capitalFlow.liquidationRisk > 15 ? "text-[#F7931A]" : "text-emerald-400"}`}> {capitalFlow.liquidationRisk}%

Max Drawdown

{capitalFlow.maxDrawdown}%

Leverage Exposure

50 ? "text-red-400" : capitalFlow.exposure.leverage > 25 ? "text-[#F7931A]" : "text-emerald-400"}`}> {capitalFlow.exposure.leverage}%

{showPositions && capitalFlow.atRiskPositionsCount > 0 && (

{capitalFlow.atRiskPositionsCount} Position{capitalFlow.atRiskPositionsCount > 1 ? 's' : ''} at Risk

{capitalFlow.positions .filter(p => p.riskLevel === "high" || p.riskLevel === "critical") .slice(0, 3) .map(position => (

{position.asset}

{position.type}

${position.sizeUsd.toLocaleString()}

{position.liquidationPrice && (

Liq: ${position.liquidationPrice.toLocaleString()}

)}

))}

)}

) } // Action Impact Preview - Shows how an action affects portfolio health interface ActionImpactProps { action: string currentHealth: number projectedHealth: number riskChange: "increase" | "decrease" | "neutral" } export function ActionImpactPreview({ action, currentHealth, projectedHealth, riskChange }: ActionImpactProps) { const getHealthColor = (score: number) => { if (score >= 80) return "text-emerald-400" if (score >= 60) return "text-[#F7931A]" return "text-red-400" } return (

Impact on Portfolio Health

Current

{currentHealth}

{riskChange === "decrease" ? "→ Lower Risk" : riskChange === "increase" ? "→ Higher Risk" : "→ No Change"}

After

{projectedHealth}

) } [V0_FILE]typescriptreact:file="components/ui/capital-action-router.tsx" isMerged="true" "use client" import Link from "next/link" import { useCapitalFlow, type AIRecommendation } from "@/lib/capital-flow-context" import { Button } from "@/components/ui/button" import { ArrowRight, Coins, TrendingUp, Shield, BarChart3, Zap, ChevronRight, } from "lucide-react" interface CapitalActionRouterProps { variant?: "banner" | "card" | "inline" maxActions?: number showAllLink?: boolean } export function CapitalActionRouter({ variant = "card", maxActions = 3, showAllLink = true }: CapitalActionRouterProps) { const capitalFlow = useCapitalFlow() const recommendations = capitalFlow.recommendations.slice(0, maxActions) const getPriorityColor = (priority: string) => { switch (priority) { case "urgent": return "bg-red-500/20 border-red-500/30 text-red-400" case "high": return "bg-[#F7931A]/20 border-[#F7931A]/30 text-[#F7931A]" case "medium": return "bg-blue-500/20 border-blue-500/30 text-blue-400" default: return "bg-white/5 border-white/10 text-gray-400" } } const getActionIcon = (type: AIRecommendation["type"]) => { switch (type) { case "mint-usdb": return case "trade-perp": return case "reduce-risk": return case "increase-yield": return case "rebalance": return default: return } } if (recommendations.length === 0) return null const nextAction = recommendations[0] // Banner variant - shows the most important action prominently if (variant === "banner") { return (

{getActionIcon(nextAction.type)}

{nextAction.title}

{nextAction.priority}

{nextAction.description}

) } // Inline variant - compact list if (variant === "inline") { return (

{recommendations.map((rec) => (

{getActionIcon(rec.type)}

{rec.title}

))}

) } // Card variant - full details return (

Recommended Actions

{showAllLink && ( View All )}

{recommendations.map((rec) => (

{getActionIcon(rec.type)}

{rec.title} {rec.priority}

{rec.description}

{rec.impact}

))}

All actions require explicit user confirmation

) } // Capital Flow Visual - Shows the BTC → USDB → Deploy flow export function CapitalFlowVisual({ compact = false }: { compact?: boolean }) { const capitalFlow = useCapitalFlow() const stages = [ { label: "BTC", icon: "₿", color: "#F7931A", value: `${capitalFlow.totalBtc.toFixed(4)}`, active: capitalFlow.totalBtc > 0 }, { label: "USDB", icon: "$", color: "#10b981", value: `$${capitalFlow.totalUsdb.toLocaleString()}`, active: capitalFlow.totalUsdb > 0 }, { label: "Deploy", icon: "📊", color: "#8b5cf6", value: `${capitalFlow.activePositionsCount} positions`, active: capitalFlow.activePositionsCount > 0 }, ] if (compact) { return (

{stages.map((stage, i) => (

{stage.icon}

{i < stages.length - 1 && ( )}

))}

) } return (

Capital Flow

{stages.map((stage, i) => (

{stage.icon}

{stage.label}

{stage.value}

{i < stages.length - 1 && ( )}

))}

) } [V0_FILE]typescriptreact:file="app/app/lending/[id]/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/trade/order-book.tsx" isMerged="true" "use client" import { useState, useMemo, useEffect } from "react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuSeparator, DropdownMenuLabel } from "@/components/ui/dropdown-menu" import { MoreVertical, ChevronDown, ExternalLink, Rows3, Columns2, Table2 } from "lucide-react" import { useTrade, useTradeContext } from "@/lib/trade-context" import { generateRecentTrades } from "@/lib/trade-data" import { useOrderBookEngine, useOrderBookSubscription, type TickSize, type AggregatedOrderBook } from "@/lib/orderbook-engine" type ViewMode = "table" | "stacked" | "large" interface OrderBookProps { viewMode?: ViewMode onViewModeChange?: (mode: ViewMode) => void } export function OrderBook({ viewMode: externalViewMode, onViewModeChange }: OrderBookProps = {}) { const [activeTab, setActiveTab] = useState<"orderbook" | "trades">("orderbook") const [internalViewMode, setInternalViewMode] = useState("stacked") const viewMode = externalViewMode ?? internalViewMode const setViewMode = (mode: ViewMode) => { setInternalViewMode(mode) onViewModeChange?.(mode) } const [tickSize, setTickSize] = useState(0.1) const { currentMarket } = useTrade() const { prefillFromOrderbook } = useTradeContext() const [sizeUnit, setSizeUnit] = useState(currentMarket.symbol) // Use OrderBook Engine for real-time data const symbol = `${currentMarket.symbol}-${currentMarket.quote}` const engineOrderBook = useOrderBookSubscription(symbol, tickSize) // Handler for clicking orderbook price - auto fill limit price in trade form const handlePriceClick = (price: number) => { prefillFromOrderbook(price) } // Use engine data if available, otherwise fall back to generated data const { asks: orderBookAsks, bids: orderBookBids } = useMemo(() => { if (engineOrderBook) { // Convert engine data format to component format return { asks: engineOrderBook.asks.map(level => ({ price: level.price, size: level.size, total: level.total, })), bids: engineOrderBook.bids.map(level => ({ price: level.price, size: level.size, total: level.total, })), } } // Fallback to generated data const generateOrderBookFallback = (basePrice: number) => { const asks: { price: number; size: number; total: number }[] = [] const bids: { price: number; size: number; total: number }[] = [] const tickSizeNum = tickSize let askTotal = 0 let bidTotal = 0 for (let i = 0; i < 15; i++) { const askPrice = basePrice + (i + 1) * tickSizeNum * (1 + Math.random() * 0.2) const bidPrice = basePrice - (i + 1) * tickSizeNum * (1 + Math.random() * 0.2) const askSize = (Math.random() * 3 + 0.1) * Math.exp(-i * 0.08) const bidSize = (Math.random() * 3 + 0.1) * Math.exp(-i * 0.08) askTotal += askSize bidTotal += bidSize asks.push({ price: Number(askPrice.toFixed(8)), size: Number(askSize.toFixed(4)), total: Number(askTotal.toFixed(4)) }) bids.push({ price: Number(bidPrice.toFixed(8)), size: Number(bidSize.toFixed(4)), total: Number(bidTotal.toFixed(4)) }) } return { asks, bids } } return generateOrderBookFallback(currentMarket.price) }, [engineOrderBook, currentMarket.price, tickSize]) const recentTrades = useMemo(() => { return generateRecentTrades(currentMarket.price) }, [currentMarket.price]) // Use engine values if available const bestAsk = engineOrderBook?.bestAsk || orderBookAsks[0]?.price || 0 const bestBid = engineOrderBook?.bestBid || orderBookBids[0]?.price || 0 const spread = engineOrderBook?.spread || (bestAsk - bestBid) const spreadPercent = engineOrderBook?.spreadPercent || (bestBid > 0 ? (spread / bestBid) * 100 : 0) const maxTotal = engineOrderBook?.maxDepth || Math.max( ...orderBookAsks.map((a) => a.total), ...orderBookBids.map((b) => b.total), 0.001 // Prevent division by zero ) const formatPrice = (price: number) => { const tick = Number.parseFloat(tickSize) if (tick >= 1) return price.toFixed(1) if (tick >= 0.1) return price.toFixed(1) if (tick >= 0.01) return price.toFixed(2) return price.toFixed(4) } const formatSize = (size: number) => { return size.toLocaleString(undefined, { minimumFractionDigits: 4, maximumFractionDigits: 4 }) } // ---- Shared sub-components ---- // Available tick sizes based on market price const availableTickSizes: TickSize[] = currentMarket.price >= 1000 ? [0.1, 0.5, 1, 5, 10, 50, 100] : currentMarket.price >= 10 ? [0.01, 0.1, 0.5, 1, 5, 10] : [0.01, 0.1, 0.5, 1] const tickSizeDropdown = ( {availableTickSizes.map((ts) => ( setTickSize(ts)} className={cn( "text-[#848e9c] hover:text-white hover:bg-[#2b3139]", ts === tickSize && "text-white bg-[#2b3139]" )} > {ts} ))} ) const sizeUnitDropdown = ( setSizeUnit(currentMarket.symbol)} className="text-[#848e9c] hover:text-white hover:bg-[#2b3139]"> {currentMarket.symbol} setSizeUnit(currentMarket.quote)} className="text-[#848e9c] hover:text-white hover:bg-[#2b3139]"> {currentMarket.quote} ) const viewModeMenu = ( View Mode setViewMode("table")} className={cn("text-[#848e9c] hover:text-white hover:bg-[#2b3139] gap-2", viewMode === "table" && "text-white bg-[#2b3139]")} > Table setViewMode("stacked")} className={cn("text-[#848e9c] hover:text-white hover:bg-[#2b3139] gap-2", viewMode === "stacked" && "text-white bg-[#2b3139]")} > Stacked setViewMode("large")} className={cn("text-[#848e9c] hover:text-white hover:bg-[#2b3139] gap-2", viewMode === "large" && "text-white bg-[#2b3139]")} > Large ) // Render a single orderbook row - clicking fills limit price in trade form const renderAskRow = (order: { price: number; size: number; total: number }, i: number) => (

handlePriceClick(order.price)} className="relative grid grid-cols-3 px-3 py-[3px] text-xs hover:bg-[#1e2329]/50 cursor-pointer transition-colors" title="Click to fill limit price" >

{formatPrice(order.price)} {formatSize(order.size)} {formatSize(order.total)}

) const renderBidRow = (order: { price: number; size: number; total: number }, i: number) => (

handlePriceClick(order.price)} className="relative grid grid-cols-3 px-3 py-[3px] text-xs hover:bg-[#1e2329]/50 cursor-pointer transition-colors" title="Click to fill limit price" >

{formatPrice(order.price)} {formatSize(order.size)} {formatSize(order.total)}

) const spreadRow = (

Spread {spread.toFixed(2)} {spreadPercent.toFixed(3)}%

) const obColumnHeaders = (

Price {"Size (" + sizeUnit + ")"} {"Total (" + sizeUnit + ")"}

) const tradesColumnHeaders = (

Price {"Size (" + sizeUnit + ")"} Time

) const renderTradeRow = (trade: { price: number; size: number; time: string; side: "buy" | "sell" }, i: number) => (

{formatPrice(trade.price)} {trade.size.toFixed(4)} {trade.time}

) // ================================================================= // VIEW MODE: TABLE (original - tabs switch between OB and Trades) // ================================================================= if (viewMode === "table") { return (

{viewModeMenu}

{activeTab === "orderbook" ? ( <>

{tickSizeDropdown} {sizeUnitDropdown}

{obColumnHeaders}

{orderBookAsks.slice().reverse().map(renderAskRow)}

{spreadRow}

{orderBookBids.map(renderBidRow)}

) : ( <> {tradesColumnHeaders}

{recentTrades.map(renderTradeRow)}

)}

) } // ================================================================= // VIEW MODE: STACKED (OB on top, Trades below, both visible) // ================================================================= if (viewMode === "stacked") { return (

{/* Header */}

Order Book

{viewModeMenu}

{/* Tick / Size controls */}

{tickSizeDropdown} {sizeUnitDropdown}

{/* OB Column Headers */} {obColumnHeaders} {/* Asks - reversed (highest at top, lowest near spread) */}

{orderBookAsks.slice().reverse().map(renderAskRow)}

{/* Spread */} {spreadRow} {/* Bids */}

{orderBookBids.map(renderBidRow)}

{/* Trades Section */}

Trades

{tradesColumnHeaders}

{recentTrades.map(renderTradeRow)}

) } // ================================================================= // VIEW MODE: LARGE (OB left, Trades right, side by side) // ================================================================= return (

{/* Left: Order Book */}

{/* Header */}

Order Book

{/* Tick / Size controls */}

{tickSizeDropdown} {sizeUnitDropdown}

{obColumnHeaders} {/* Asks */}

{orderBookAsks.slice().reverse().map(renderAskRow)}

{spreadRow} {/* Bids */}

{orderBookBids.map(renderBidRow)}

{/* Right: Trades */}

Trades

{viewModeMenu}

{tradesColumnHeaders}

{recentTrades.map(renderTradeRow)}

) } [V0_FILE]typescriptreact:file="app/app/docs/page.tsx" isMerged="true" "use client" import { useState } from "react" import { ChevronDown, ChevronRight, Search, FileText, HelpCircle, BookOpen, ExternalLink } from "lucide-react" import Link from "next/link" type DocSection = "overview" | "faq" | "terms" | "guides" | "api" // FAQ Data const faqData = { general: [ { question: "What is 963X?", answer: "963X is a comprehensive DeFi platform built on Bitcoin. It offers perpetual trading (PerpDEX), yield optimization vaults, staking, lending/borrowing, and AI-powered trading bots." }, { question: "How do I get started?", answer: "1. Connect your wallet (MetaMask, WalletConnect, etc.)\n2. Deposit BTC or supported assets\n3. Choose a product: Trade on PerpDEX, stake for rewards, provide liquidity, or set up AI bots\n4. Start earning!" }, { question: "What chains does 963X support?", answer: "963X primarily operates on Ethereum and Bitcoin Layer 2 solutions. We support various BTC-wrapped assets including btBTC, WBTC, cbBTC, LBTC, and tBTC." }, ], trading: [ { question: "What is PerpDEX?", answer: "PerpDEX is 963X's decentralized perpetual futures exchange. Trade BTC, ETH, and other assets with up to 100x leverage." }, { question: "What are the trading fees?", answer: "Maker Fee: 0.02%\nTaker Fee: 0.05%\nFunding rates are calculated every 8 hours." }, ], tokens: [ { question: "What is 963X token?", answer: "963X is the native governance and utility token. Uses include governance voting, fee discounts, staking rewards boost, and revenue sharing." }, { question: "What is USDB?", answer: "USDB is a yield-bearing stablecoin pegged to USD, backed by Bitcoin collateral with minimum 150% collateral ratio." }, ], } // Terms sections const termsSections = [ { id: "acceptance", title: "1. Acceptance of Terms", content: `By accessing or using 963X ("Platform"), you agree to be bound by these Terms of Service. 963X is a decentralized finance (DeFi) platform offering perpetual trading, yield optimization, staking, lending/borrowing, and AI-powered trading bots.` }, { id: "eligibility", title: "2. Eligibility", content: `You must be at least 18 years old and legally able to enter into contracts. You represent that you are not in a restricted jurisdiction and understand the risks associated with cryptocurrency and DeFi protocols.` }, { id: "risks", title: "3. Risk Disclosure", content: `Using 963X involves significant risks including market risk, liquidation risk, smart contract risk, and regulatory risk. You acknowledge that you could lose all funds deposited on the Platform.` }, { id: "fees", title: "4. Fees", content: `Trading Fees: 0.05% - 0.1% per trade\nSwap Fees: 0.01% - 0.5%\nPerformance Fees: Up to 10% on AI Bot profits\nFees are subject to change.` }, { id: "liability", title: "5. Limitation of Liability", content: `963X is provided "AS IS" without warranties. We are not liable for any direct, indirect, incidental, or consequential damages.` }, ] // Doc links - Admin can change these const docLinks = [ { id: "whitepaper", name: "Whitepaper", description: "Technical overview of 963X protocol", url: "", icon: FileText }, { id: "api-docs", name: "API Documentation", description: "Developer API reference", url: "", icon: BookOpen }, { id: "smart-contracts", name: "Smart Contracts", description: "Contract addresses and ABIs", url: "", icon: FileText }, { id: "security-audits", name: "Security Audits", description: "Third-party audit reports", url: "", icon: FileText }, { id: "brand-assets", name: "Brand Assets", description: "Logos and brand guidelines", url: "", icon: FileText }, ] const faqCategories = [ { id: "general", label: "General" }, { id: "trading", label: "Trading" }, { id: "tokens", label: "Tokens" }, ] export default function DocsPage() { const [activeSection, setActiveSection] = useState("overview") const [activeFaqCategory, setActiveFaqCategory] = useState("general") const [expandedQuestions, setExpandedQuestions] = useState>(new Set()) const [searchQuery, setSearchQuery] = useState("") const toggleQuestion = (question: string) => { const newExpanded = new Set(expandedQuestions) if (newExpanded.has(question)) { newExpanded.delete(question) } else { newExpanded.add(question) } setExpandedQuestions(newExpanded) } const sections = [ { id: "overview", label: "Overview", icon: BookOpen }, { id: "faq", label: "FAQ", icon: HelpCircle }, { id: "terms", label: "Terms of Service", icon: FileText }, { id: "guides", label: "Guides & Links", icon: ExternalLink }, ] return (

{/* Header */}

Home Documentation

Documentation

Everything you need to know about 963X.

{/* Search */}

setSearchQuery(e.target.value)} className="w-full bg-[#12121a] border border-white/10 rounded-xl pl-12 pr-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:border-[#F7931A]/50" />

{/* Sidebar Navigation */}

Sections

{sections.map((section) => ( ))}

{/* Main Content */}

{/* Overview Section */} {activeSection === "overview" && (

Welcome to 963X

963X is a comprehensive DeFi platform built on Bitcoin, offering perpetual trading, yield optimization, staking, lending/borrowing, and AI-powered trading bots. Our mission is to unlock Bitcoin's full potential in DeFi.

PerpDEX

Trade perpetual futures with up to 100x leverage

Yield Vaults

AI-optimized strategies for maximum returns

Staking

Stake BTC variants to earn rewards

AI Bots

Automated trading strategies

)} {/* FAQ Section */} {activeSection === "faq" && (

{/* FAQ Category Tabs */}

{faqCategories.map((cat) => ( ))}

{/* FAQ Items */}

{faqData[activeFaqCategory as keyof typeof faqData]?.map((item, index) => (

{expandedQuestions.has(item.question) && (

{item.answer}

)}

))}

)} {/* Terms Section */} {activeSection === "terms" && (

{termsSections.map((section) => (

{section.title}

{section.content}

))}

Last Modified: January 20, 2026

)} {/* Guides & Links Section */} {activeSection === "guides" && (

External Resources

Links to documentation, guides, and resources. These links are managed by the admin.

{docLinks.map((link) => (

{link.name}

{link.description}

{link.url ? ( Open ) : ( Link not set )}

))}

{/* Contact Section */}

Need Help?

Reach out to our support team.

Discord Twitter

)}

) } [V0_FILE]typescriptreact:file="app/app/docs/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/ui/deposit-modal.tsx" isMerged="true" "use client" import React, { useState, useEffect, useRef } from "react" import { X, ChevronDown, Check, Search } from "lucide-react" import { Button } from "@/components/ui/button" import { useWallet } from "@/lib/wallet-context" import { CoinLogo } from "@/components/ui/coin-logo" import { ChainIcon } from "@/components/ui/chain-icon" interface DepositModalProps { isOpen: boolean onClose: () => void initialAsset?: string initialChain?: number } // Deposit assets: Project tokens (USDB, 963X) + Spot trading assets + BNB const ASSETS = [ { symbol: "USDB", name: "963X USD", isPrimary: true, category: "stable", defaultChainId: 42161 }, { symbol: "963X", name: "963X Token", isPrimary: false, category: "native", defaultChainId: 42161 }, { symbol: "xBTC", name: "963X Bitcoin", isPrimary: false, category: "major", defaultChainId: 42161 }, { symbol: "BTC", name: "Bitcoin", isPrimary: false, category: "major", defaultChainId: 1 }, { symbol: "ETH", name: "Ethereum", isPrimary: false, category: "major", defaultChainId: 1 }, { symbol: "SOL", name: "Solana", isPrimary: false, category: "major", defaultChainId: 101 }, { symbol: "BNB", name: "BNB", isPrimary: false, category: "major", defaultChainId: 56 }, { symbol: "USDT", name: "Tether USD", isPrimary: false, category: "stable", defaultChainId: 42161 }, { symbol: "USDC", name: "USD Coin", isPrimary: false, category: "stable", defaultChainId: 42161 }, { symbol: "USDD", name: "Decentralized USD", isPrimary: false, category: "stable", defaultChainId: 728126428 }, { symbol: "USDG", name: "Global Dollar", isPrimary: false, category: "stable", defaultChainId: 42161 }, { symbol: "USDS", name: "Sky Dollar", isPrimary: false, category: "stable", defaultChainId: 42161 }, { symbol: "DAI", name: "Dai Stablecoin", isPrimary: false, category: "stable", defaultChainId: 1 }, { symbol: "WBTC", name: "Wrapped Bitcoin", isPrimary: false, category: "major", defaultChainId: 1 }, { symbol: "ARB", name: "Arbitrum", isPrimary: false, category: "major", defaultChainId: 42161 }, { symbol: "OP", name: "Optimism", isPrimary: false, category: "major", defaultChainId: 10 }, { symbol: "MATIC", name: "Polygon", isPrimary: false, category: "major", defaultChainId: 137 }, { symbol: "AVAX", name: "Avalanche", isPrimary: false, category: "major", defaultChainId: 43114 }, ] // Supported chains with proper identification const CHAINS = [ { id: 42161, name: "Arbitrum One", recommended: true, fee: "~$0.10", time: "~1 min" }, { id: 1, name: "Ethereum", recommended: false, fee: "~$5.00", time: "~5 min" }, { id: 101, name: "Solana", recommended: false, fee: "~$0.01", time: "~30 sec" }, { id: 8453, name: "Base", recommended: false, fee: "~$0.05", time: "~1 min" }, { id: 10, name: "Optimism", recommended: false, fee: "~$0.08", time: "~1 min" }, { id: 137, name: "Polygon", recommended: false, fee: "~$0.02", time: "~2 min" }, { id: 56, name: "BNB Chain", recommended: false, fee: "~$0.15", time: "~30 sec" }, { id: 43114, name: "Avalanche", recommended: false, fee: "~$0.20", time: "~2 min" }, { id: 728126428, name: "TRON", recommended: false, fee: "~$0.50", time: "~1 min" }, ] export function DepositModal({ isOpen, onClose, initialAsset, initialChain }: DepositModalProps) { const { wallet, deposit } = useWallet() // Find initial asset from props or default to USDB const getInitialAsset = () => { if (initialAsset) { const found = ASSETS.find(a => a.symbol.toUpperCase() === initialAsset.toUpperCase()) if (found) return found } return ASSETS[0] } // Find initial chain - use asset's default chain, then initialChain prop, then Arbitrum const getInitialChain = (asset: typeof ASSETS[0]) => { // If initialChain prop is set, use it if (initialChain) { const found = CHAINS.find(c => c.id === initialChain) if (found) return found } // Otherwise use asset's default chain const found = CHAINS.find(c => c.id === asset.defaultChainId) if (found) return found // Fallback to Arbitrum (recommended) return CHAINS[0] } const [selectedAsset, setSelectedAsset] = useState(() => getInitialAsset()) const [selectedChain, setSelectedChain] = useState(() => getInitialChain(getInitialAsset())) const [amount, setAmount] = useState("") const [showAssetDropdown, setShowAssetDropdown] = useState(false) const [showChainDropdown, setShowChainDropdown] = useState(false) const [assetSearch, setAssetSearch] = useState("") // Update selection when modal opens with new initialAsset const prevInitialAssetRef = useRef(initialAsset) useEffect(() => { if (isOpen && initialAsset && initialAsset !== prevInitialAssetRef.current) { const found = ASSETS.find(a => a.symbol.toUpperCase() === initialAsset.toUpperCase()) if (found) { setSelectedAsset(found) const bestChain = CHAINS.find(c => c.id === found.defaultChainId) || CHAINS[0] setSelectedChain(bestChain) } prevInitialAssetRef.current = initialAsset } }, [isOpen, initialAsset]) // When asset changes, update chain to asset's default const handleAssetSelect = (asset: typeof ASSETS[0]) => { setSelectedAsset(asset) // Auto-select the best chain for this asset const bestChain = CHAINS.find(c => c.id === asset.defaultChainId) || CHAINS[0] setSelectedChain(bestChain) setShowAssetDropdown(false) } const filteredAssets = ASSETS.filter( (a) => a.symbol.toLowerCase().includes(assetSearch.toLowerCase()) || a.name.toLowerCase().includes(assetSearch.toLowerCase()) ) const getAssetBalance = (symbol: string) => { const found = wallet.balances.find((b) => b.symbol === symbol) return found ? found.balance : "0.00" } if (!isOpen) return null const currentBalance = getAssetBalance(selectedAsset.symbol) const handleMax = () => { setAmount(currentBalance.replace(/,/g, "")) } const handleDeposit = async () => { const depositAmount = Number.parseFloat(amount) if (Number.isNaN(depositAmount) || depositAmount <= 0) return try { // Call wallet context deposit function await deposit(selectedAsset.symbol, depositAmount) alert(`Successfully deposited ${amount} ${selectedAsset.symbol} via ${selectedChain.name}!`) setAmount("") onClose() } catch (error) { console.error("Deposit failed:", error) alert("Deposit failed. Please try again.") } } return (

{/* Close button */} {/* Header with icon */}

Deposit {selectedAsset.symbol} from {selectedChain.name}

{selectedChain.recommended && (

Recommended network for lower fees

)}

{/* Asset Selection */}

setShowAssetDropdown(!showAssetDropdown)} >

Asset

{selectedAsset.symbol}

{showAssetDropdown && (

setAssetSearch(e.target.value)} onClick={(e) => e.stopPropagation()} placeholder="Search token..." className="w-full bg-white/5 border border-white/5 rounded-lg pl-8 pr-3 py-1.5 text-sm text-white outline-none placeholder:text-gray-600 focus:border-white/10" />

{filteredAssets.map((asset) => (

{ e.stopPropagation() handleAssetSelect(asset) }} >

{asset.symbol} {asset.isPrimary && ( Primary )}

{asset.name}

{getAssetBalance(asset.symbol)} {selectedAsset.symbol === asset.symbol && }

))}

)}

{/* Chain Selection */}

setShowChainDropdown(!showChainDropdown)} >

Deposit Chain

{selectedChain.name}

{showChainDropdown && (

{CHAINS.map((chain) => (

{ e.stopPropagation() setSelectedChain(chain) setShowChainDropdown(false) }} >

{chain.name} {chain.recommended && ( Recommended )}

Fee: {chain.fee} · {chain.time}

{selectedChain.id === chain.id && }

))}

)}

{/* Amount Input */}

Amount

{ const val = e.target.value.replace(/[^0-9.]/g, "") if (val === "" || /^\d*\.?\d*$/.test(val)) setAmount(val) }} placeholder="0.00" className="w-full bg-transparent text-2xl font-semibold text-white outline-none" />

{/* Deposit Button */}

{selectedAsset.symbol === "USDB" ? "USDB deposits via Ethereum or Arbitrum. Lower fees on Arbitrum." : "Deposits are processed instantly. Gas fees apply."}

) } [V0_FILE]typescriptreact:file="app/admin/bots/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Plus, Edit2, Trash2, Search, Bot, Settings, ToggleLeft, ToggleRight, X, Save } from "lucide-react" import { useSearchParams } from "next/navigation" import { Suspense } from "react" import Loading from "./loading" const initialStrategies = [ { id: 1, name: "Grid Trading", aprMin: 15, aprMax: 45, winRate: 72, riskLevel: "Medium", status: "active" }, { id: 2, name: "Perpetual Trading", aprMin: 25, aprMax: 80, winRate: 58, riskLevel: "High", status: "active" }, { id: 3, name: "Arbitrage", aprMin: 8, aprMax: 15, winRate: 95, riskLevel: "Low", status: "active" }, { id: 4, name: "DCA", aprMin: 10, aprMax: 25, winRate: 85, riskLevel: "Low", status: "active" }, { id: 5, name: "Yield Optimizer", aprMin: 12, aprMax: 35, winRate: 90, riskLevel: "Low-Medium", status: "active" }, { id: 6, name: "Dip Entry", aprMin: 20, aprMax: 50, winRate: 68, riskLevel: "Medium", status: "active" }, ] const initialActiveBots = [ { id: 1, user: "0x1a2b...3c4d", strategy: "Grid Trading", pair: "BTC/USDT", profit: "+$1,245.80", status: "running" }, { id: 2, user: "0x5e6f...7g8h", strategy: "DCA", pair: "ETH/USDT", profit: "+$892.40", status: "running" }, { id: 3, user: "0x9i0j...1k2l", strategy: "Arbitrage", pair: "USDT/USDC", profit: "+$156.20", status: "paused" }, ] const riskLevels = ["Low", "Low-Medium", "Medium", "Medium-High", "High"] type Strategy = typeof initialStrategies[0] export default function AdminBotsPage() { const [searchQuery, setSearchQuery] = useState("") const [showModal, setShowModal] = useState(false) const [strategies, setStrategies] = useState(initialStrategies) const [activeBots, setActiveBots] = useState(initialActiveBots) const [editingStrategy, setEditingStrategy] = useState(null) const [formData, setFormData] = useState({ name: "", aprMin: 10, aprMax: 30, winRate: 70, riskLevel: "Medium" }) const searchParams = useSearchParams() const strategiesData = strategies; // Declare strategiesData variable const activeBotsData = activeBots; // Declare activeBotsData variable const [showAddStrategy, setShowAddStrategy] = useState(false); // Declare setShowAddStrategy variable const handleAddNew = () => { setEditingStrategy(null) setFormData({ name: "", aprMin: 10, aprMax: 30, winRate: 70, riskLevel: "Medium" }) setShowModal(true) } const handleEdit = (strategy: Strategy) => { setEditingStrategy(strategy) setFormData({ name: strategy.name, aprMin: strategy.aprMin, aprMax: strategy.aprMax, winRate: strategy.winRate, riskLevel: strategy.riskLevel }) setShowModal(true) } const handleSave = () => { if (editingStrategy) { setStrategies(strategies.map((s) => s.id === editingStrategy.id ? { ...s, ...formData } : s)) } else { setStrategies([...strategies, { id: Date.now(), ...formData, status: "active" }]) } setShowModal(false) } const handleToggleStatus = (id: number) => { setStrategies(strategies.map((s) => s.id === id ? { ...s, status: s.status === "active" ? "paused" : "active" } : s)) } const handleDelete = (id: number) => { if (confirm("Are you sure you want to delete this strategy?")) { setStrategies(strategies.filter((s) => s.id !== id)) } } const handleToggleBotStatus = (id: number) => { setActiveBots(activeBots.map((b) => b.id === id ? { ...b, status: b.status === "running" ? "paused" : "running" } : b)) } return ( }>

Bot Management

Configure trading strategies and monitor active bots

{/* Stats */}

Active Bots

1,245

Total Volume

$45.8M

Avg. Daily Profit

+$125K

Strategies

{strategiesData.length}

{/* Strategies */}

Strategy Templates

{strategies.map((strategy) => ( ))}

Strategy	APR	Win Rate	Risk Level	Status	Actions
{strategy.name}	{strategy.aprMin}-{strategy.aprMax}%	{strategy.winRate}%	{strategy.riskLevel}	{strategy.status}

{/* Active Bots Monitor */}

Active Bots Monitor

setSearchQuery(e.target.value)} className="pl-10 bg-[#0a0a0f] border-white/10 w-64" />

{activeBots.filter(b => b.user.toLowerCase().includes(searchQuery.toLowerCase()) || b.strategy.toLowerCase().includes(searchQuery.toLowerCase())).map((bot) => ( ))}

User	Strategy	Pair	Profit	Status	Actions
{bot.user}	{bot.strategy}	{bot.pair}	{bot.profit}	{bot.status}

{/* Add/Edit Strategy Modal */} {showModal && (

{editingStrategy ? "Edit Strategy" : "Add Strategy"}

Strategy Name setFormData({ ...formData, name: e.target.value })} className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-white" placeholder="Grid Trading" />

APR Min (%) setFormData({ ...formData, aprMin: Number(e.target.value) })} className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-white" />

APR Max (%) setFormData({ ...formData, aprMax: Number(e.target.value) })} className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-white" />

Win Rate (%) setFormData({ ...formData, winRate: Number(e.target.value) })} className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-white" />

Risk Level

)}

) } [V0_FILE]typescriptreact:file="app/admin/analytics/page.tsx" isMerged="true" "use client" import { useState } from "react" import { TrendingUp, TrendingDown, DollarSign, Users, Activity, PieChart, BarChart3, LineChart, ArrowUpRight, ArrowDownRight, Download, Calendar, Filter, Wallet, Coins, Bot, Percent, Target, Clock, Globe, Smartphone, Monitor } from "lucide-react" import { Button } from "@/components/ui/button" // Financial Metrics const financialStats = [ { label: "Total Value Locked", value: "$2.43B", change: "+12.5%", trend: "up", period: "vs last month" }, { label: "Protocol Revenue", value: "$8.2M", change: "+23.4%", trend: "up", period: "this month" }, { label: "Trading Fees Earned", value: "$4.6M", change: "+18.7%", trend: "up", period: "this month" }, { label: "Lending Interest", value: "$2.1M", change: "+15.2%", trend: "up", period: "this month" }, { label: "Bot Subscription", value: "$1.5M", change: "+31.8%", trend: "up", period: "this month" }, { label: "Treasury Balance", value: "$156.8M", change: "+5.2%", trend: "up", period: "vs last month" }, ] // Product Performance const productPerformance = [ { name: "PerpDEX", tvl: "$890M", volume24h: "$78.5M", users: 12450, revenue: "$2.8M", growth: "+18.5%" }, { name: "Swap", tvl: "$456M", volume24h: "$45.2M", users: 28900, revenue: "$1.2M", growth: "+12.3%" }, { name: "Lending", tvl: "$380M", volume24h: "$12.4M", users: 8920, revenue: "$2.1M", growth: "+25.6%" }, { name: "Vaults", tvl: "$520M", volume24h: "$8.9M", users: 15670, revenue: "$1.4M", growth: "+22.1%" }, { name: "Staking", tvl: "$184M", volume24h: "$5.2M", users: 32100, revenue: "$0.7M", growth: "+8.9%" }, ] // User Metrics const userMetrics = [ { label: "Total Users", value: "45,892", change: "+2,340", trend: "up", period: "this month" }, { label: "Active Users (DAU)", value: "12,456", change: "+8.5%", trend: "up", period: "vs yesterday" }, { label: "Monthly Active (MAU)", value: "38,920", change: "+15.2%", trend: "up", period: "vs last month" }, { label: "New Users Today", value: "523", change: "+12.1%", trend: "up", period: "vs yesterday" }, { label: "User Retention", value: "78.5%", change: "+2.3%", trend: "up", period: "30-day" }, { label: "Avg Session Time", value: "18m 32s", change: "+1m 45s", trend: "up", period: "vs last week" }, ] // Token Metrics const tokenMetrics = { token963x: { price: "$2.45", marketCap: "$245M", circulatingSupply: "100M", totalSupply: "1B", holders: "45,892", staked: "65.8%", burned: "12.5M", change24h: "+5.8%" }, usdb: { totalMinted: "$380M", backing: "152%", collateral: "$578M", activeVaults: "8,450", redemptions24h: "$2.3M", mints24h: "$5.6M", peg: "$1.0002", change24h: "+0.02%" } } // Top Trading Pairs const topTradingPairs = [ { pair: "BTC-PERP", volume24h: "$45.2M", openInterest: "$128M", trades: 45200, avgLeverage: "8.5x" }, { pair: "ETH-PERP", volume24h: "$32.1M", openInterest: "$89M", trades: 38900, avgLeverage: "7.2x" }, { pair: "SOL-PERP", volume24h: "$12.8M", openInterest: "$34M", trades: 22100, avgLeverage: "10.1x" }, { pair: "963X-PERP", volume24h: "$8.9M", openInterest: "$21M", trades: 15800, avgLeverage: "5.5x" }, { pair: "BNB-PERP", volume24h: "$6.5M", openInterest: "$18M", trades: 12400, avgLeverage: "6.8x" }, ] // Liquidity Pools Performance const liquidityPools = [ { pool: "BTC/USDB", tvl: "$125M", apr: "12.5%", volume24h: "$18.5M", fees24h: "$55.5K" }, { pool: "ETH/USDB", tvl: "$98M", apr: "15.2%", volume24h: "$14.2M", fees24h: "$42.6K" }, { pool: "963X/USDB", tvl: "$45M", apr: "28.5%", volume24h: "$8.9M", fees24h: "$26.7K" }, { pool: "SOL/USDB", tvl: "$32M", apr: "18.8%", volume24h: "$6.5M", fees24h: "$19.5K" }, ] // Bot Performance const botPerformance = [ { strategy: "Grid Trading", activeUsers: 4520, avgROI: "+18.5%", totalProfit: "$2.8M", winRate: "72%" }, { strategy: "DCA", activeUsers: 8920, avgROI: "+12.3%", totalProfit: "$1.5M", winRate: "85%" }, { strategy: "Arbitrage", activeUsers: 2100, avgROI: "+8.2%", totalProfit: "$890K", winRate: "95%" }, { strategy: "Perpetual", activeUsers: 3450, avgROI: "+25.6%", totalProfit: "$3.2M", winRate: "58%" }, ] // Geographic Distribution const geoDistribution = [ { region: "Asia Pacific", users: "18,450", percentage: "40.2%", volume: "$62.8M" }, { region: "Europe", users: "12,890", percentage: "28.1%", volume: "$43.5M" }, { region: "North America", users: "9,560", percentage: "20.8%", volume: "$38.2M" }, { region: "Latin America", users: "3,240", percentage: "7.1%", volume: "$8.9M" }, { region: "Others", users: "1,752", percentage: "3.8%", volume: "$3.4M" }, ] // Device Distribution const deviceDistribution = [ { device: "Desktop", users: "25,890", percentage: "56.4%", sessions: "145K" }, { device: "Mobile", users: "18,450", percentage: "40.2%", sessions: "98K" }, { device: "Tablet", users: "1,552", percentage: "3.4%", sessions: "8K" }, ] // Revenue Breakdown const revenueBreakdown = [ { source: "Trading Fees", amount: "$4.6M", percentage: "56.1%", color: "bg-[#F7931A]" }, { source: "Lending Interest", amount: "$2.1M", percentage: "25.6%", color: "bg-[#00E0C6]" }, { source: "Bot Subscriptions", amount: "$1.0M", percentage: "12.2%", color: "bg-blue-500" }, { source: "Other Fees", amount: "$0.5M", percentage: "6.1%", color: "bg-purple-500" }, ] export default function AdminAnalyticsPage() { const [timeRange, setTimeRange] = useState("30d") return (

{/* Header */}

Analytics & Statistics

Comprehensive platform data and insights

{["24h", "7d", "30d", "90d", "1y"].map((range) => ( ))}

{/* Financial Stats */}

Financial Overview

{financialStats.map((stat) => (

{stat.label}

{stat.value}

{stat.trend === "up" ? ( ) : ( )} {stat.change} {stat.period}

))}

{/* Product Performance */}

Product Performance

{productPerformance.map((product) => ( ))}

Product	TVL	24h Volume	Users	Revenue	Growth
{product.name}	{product.tvl}	{product.volume24h}	{product.users.toLocaleString()}	{product.revenue}	{product.growth}

{/* User Metrics */}

User Metrics

{userMetrics.map((metric) => (

{metric.label}

{metric.value}

{metric.trend === "up" ? ( ) : ( )} {metric.change}

))}

{/* Token Metrics */}

Token Metrics

{/* 963X */}

963X {tokenMetrics.token963x.change24h}

Price{tokenMetrics.token963x.price}

Market Cap{tokenMetrics.token963x.marketCap}

Holders{tokenMetrics.token963x.holders}

Staked{tokenMetrics.token963x.staked}

Burned{tokenMetrics.token963x.burned}

{/* USDB */}

USDB {tokenMetrics.usdb.change24h}

Peg{tokenMetrics.usdb.peg}

Total Minted{tokenMetrics.usdb.totalMinted}

Backing Ratio{tokenMetrics.usdb.backing}

Active Vaults{tokenMetrics.usdb.activeVaults}

24h Mints{tokenMetrics.usdb.mints24h}

{/* Trading & Liquidity */}

{/* Top Trading Pairs */}

Top Trading Pairs

{topTradingPairs.map((pair) => ( ))}

Pair	Volume	OI	Trades
{pair.pair}	{pair.volume24h}	{pair.openInterest}	{pair.trades.toLocaleString()}

{/* Liquidity Pools */}

Top Liquidity Pools

{liquidityPools.map((pool) => ( ))}

Pool	TVL	APR	Fees 24h
{pool.pool}	{pool.tvl}	{pool.apr}	{pool.fees24h}

{/* Bot Performance & Revenue */}

{/* Bot Performance */}

Bot Strategy Performance

{botPerformance.map((bot) => ( ))}

Strategy	Users	Avg ROI	Win Rate
{bot.strategy}	{bot.activeUsers.toLocaleString()}	{bot.avgROI}	{bot.winRate}

{/* Revenue Breakdown */}

Revenue Breakdown

{revenueBreakdown.map((item) => (

{item.source} {item.amount} ({item.percentage})

))}

Total Revenue $8.2M

{/* Geographic & Device Distribution */}

{/* Geographic */}

Geographic Distribution

{geoDistribution.map((geo) => (

{geo.region}

{geo.users} users {geo.percentage} {geo.volume}

))}

{/* Device Distribution */}

Device Distribution

{deviceDistribution.map((device) => (

{device.device === "Desktop" && } {device.device === "Mobile" && } {device.device === "Tablet" && } {device.device}

{device.users} ({device.percentage})

))}

{/* Key Performance Indicators */}

Key Performance Indicators (KPIs)

CAC

$12.50

-8.5% vs last month

LTV

$485

+12.3% vs last month

LTV:CAC Ratio

38.8x

Excellent

Churn Rate

2.3%

-0.5% vs last month

NPS Score

+5 vs last quarter

) } [V0_FILE]typescriptreact:file="app/admin/analytics/loading.tsx" isMerged="true" export default function Loading() { return (

{[...Array(6)].map((_, i) => (

))}

) } [V0_FILE]typescriptreact:file="app/admin/layout.tsx" isMerged="true" "use client" import React from "react" import { useState } from "react" import Link from "next/link" import { usePathname } from "next/navigation" import { SunBitLogo } from "@/components/ui/sunbit-logo" import { LayoutDashboard, TrendingUp, Layers, Shield, Coins, Trophy, Bot, Users, Settings, ChevronLeft, ChevronRight, Landmark, RefreshCw, Menu, X, LogOut, Bell, BarChart3, Activity, DollarSign, Briefcase, } from "lucide-react" const sidebarItems = [ { href: "/admin", label: "Dashboard", icon: LayoutDashboard, exact: true }, { href: "/admin/analytics", label: "Analytics", icon: BarChart3 }, { href: "/admin/perpdex", label: "PerpDEX", icon: TrendingUp }, { href: "/admin/price-engine", label: "Price Engine", icon: DollarSign }, { href: "/admin/portfolio-margin", label: "Portfolio Margin", icon: Briefcase }, { href: "/admin/engine-sync", label: "Engine Sync", icon: Activity }, { href: "/admin/vaults", label: "Vaults & Yield", icon: Layers }, { href: "/admin/staking", label: "Staking", icon: Shield }, { href: "/admin/lending", label: "Lending", icon: Landmark }, { href: "/admin/swap", label: "Swap Pools", icon: RefreshCw }, { href: "/admin/bots", label: "AI Bots", icon: Bot }, { href: "/admin/competitions", label: "Competitions", icon: Trophy }, { href: "/admin/points", label: "Points & Tiers", icon: Coins }, { href: "/admin/users", label: "Users", icon: Users }, { href: "/admin/settings", label: "Settings", icon: Settings }, ] export default function AdminLayout({ children }: { children: React.ReactNode }) { const pathname = usePathname() const [sidebarCollapsed, setSidebarCollapsed] = useState(false) const [mobileMenuOpen, setMobileMenuOpen] = useState(false) const isActive = (href: string, exact?: boolean) => { if (exact) return pathname === href return pathname.startsWith(href) && href !== "/admin" } return (

{/* Sidebar */}

{/* Logo */}

{!sidebarCollapsed && ( Admin )} {sidebarCollapsed && }

{/* Navigation */} {/* Footer */}

{!sidebarCollapsed && Back to App}

{/* Mobile Overlay */} {mobileMenuOpen && (

setMobileMenuOpen(false)} /> )} {/* Main Content */}

{/* Top Bar */}

Admin

{/* Page Content */}

{children}

) } [V0_FILE]typescriptreact:file="app/admin/points/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Plus, Edit2, Trash2, Search, Zap, Gift, Target, X, Save, ToggleLeft, ToggleRight } from "lucide-react" import { useSearchParams } from "next/navigation" import { Suspense } from "react" const initialTasks = [ { id: 1, name: "Follow on Twitter", category: "social", xpReward: 50, status: "active", description: "Follow our official Twitter account" }, { id: 2, name: "Join Discord", category: "social", xpReward: 100, status: "active", description: "Join and verify on Discord server" }, { id: 3, name: "First Trade", category: "platform", xpReward: 200, status: "active", description: "Complete your first trade on the platform" }, { id: 4, name: "Stake $1000 USDB", category: "platform", xpReward: 500, status: "active", description: "Stake at least $1000 worth of USDB" }, { id: 5, name: "Daily Login Streak", category: "engagement", xpReward: 20, status: "active", description: "Login daily for 7 consecutive days" }, { id: 6, name: "Refer a Friend", category: "engagement", xpReward: 1000, status: "active", description: "Invite a friend who completes KYC" }, ] const initialTiers = [ { id: 1, name: "Bronze", minPoints: 0, multiplier: 1.0, color: "#CD7F32", benefits: "Basic access" }, { id: 2, name: "Silver", minPoints: 1000, multiplier: 1.2, color: "#C0C0C0", benefits: "5% fee discount" }, { id: 3, name: "Gold", minPoints: 5000, multiplier: 1.5, color: "#FFD700", benefits: "10% fee discount, Priority support" }, { id: 4, name: "Platinum", minPoints: 20000, multiplier: 2.0, color: "#E5E4E2", benefits: "15% fee discount, Early access" }, { id: 5, name: "Diamond", minPoints: 100000, multiplier: 3.0, color: "#B9F2FF", benefits: "20% fee discount, VIP support, Exclusive events" }, ] const categories = ["social", "platform", "engagement", "special"] type Task = typeof initialTasks[0] type Tier = typeof initialTiers[0] function Loading() { return null } export default function AdminPointsPage() { const [searchQuery, setSearchQuery] = useState("") const [tasks, setTasks] = useState(initialTasks) const [tiers, setTiers] = useState(initialTiers) const [showTaskModal, setShowTaskModal] = useState(false) const [showTierModal, setShowTierModal] = useState(false) const [editingTask, setEditingTask] = useState(null) const [editingTier, setEditingTier] = useState(null) const [taskForm, setTaskForm] = useState({ name: "", category: "platform", xpReward: 100, description: "" }) const [tierForm, setTierForm] = useState({ name: "", minPoints: 0, multiplier: 1.0, color: "#F7931A", benefits: "" }) const [pointRates, setPointRates] = useState({ trading: 5, staking: 10, liquidity: 8, referral: 1000 }) const [saveSuccess, setSaveSuccess] = useState(false) const searchParams = useSearchParams() const handleAddTask = () => { setEditingTask(null) setTaskForm({ name: "", category: "platform", xpReward: 100, description: "" }) setShowTaskModal(true) } const handleEditTask = (task: Task) => { setEditingTask(task) setTaskForm({ name: task.name, category: task.category, xpReward: task.xpReward, description: task.description }) setShowTaskModal(true) } const handleSaveTask = () => { if (editingTask) { setTasks(tasks.map((t) => t.id === editingTask.id ? { ...t, ...taskForm } : t)) } else { setTasks([...tasks, { id: Date.now(), ...taskForm, status: "active" }]) } setShowTaskModal(false) } const handleToggleTaskStatus = (id: number) => { setTasks(tasks.map((t) => t.id === id ? { ...t, status: t.status === "active" ? "paused" : "active" } : t)) } const handleDeleteTask = (id: number) => { if (confirm("Are you sure you want to delete this task?")) { setTasks(tasks.filter((t) => t.id !== id)) } } const handleAddTier = () => { setEditingTier(null) setTierForm({ name: "", minPoints: 0, multiplier: 1.0, color: "#F7931A", benefits: "" }) setShowTierModal(true) } const handleEditTier = (tier: Tier) => { setEditingTier(tier) setTierForm({ name: tier.name, minPoints: tier.minPoints, multiplier: tier.multiplier, color: tier.color, benefits: tier.benefits }) setShowTierModal(true) } const handleSaveTier = () => { if (editingTier) { setTiers(tiers.map((t) => t.id === editingTier.id ? { ...t, ...tierForm } : t)) } else { setTiers([...tiers, { id: Date.now(), ...tierForm }]) } setShowTierModal(false) } const handleDeleteTier = (id: number) => { if (confirm("Are you sure you want to delete this tier?")) { setTiers(tiers.filter((t) => t.id !== id)) } } const handleSaveRates = () => { setSaveSuccess(true) setTimeout(() => setSaveSuccess(false), 3000) } const tasksData = tasks; // Declaring tasksData variable const tiersData = tiers; // Declaring tiersData variable return ( }>

Points Management

Configure SB points, tasks, and tier system

{/* Point Rates */}

Point Earning Rates

Trading (per $100)

setPointRates({ ...pointRates, trading: Number(e.target.value) })} className="bg-transparent border-white/20" /> SB

Staking (per $100/day)

setPointRates({ ...pointRates, staking: Number(e.target.value) })} className="bg-transparent border-white/20" /> SB

Liquidity (per $100/day)

setPointRates({ ...pointRates, liquidity: Number(e.target.value) })} className="bg-transparent border-white/20" /> SB

Referral (per user)

setPointRates({ ...pointRates, referral: Number(e.target.value) })} className="bg-transparent border-white/20" /> SB

{saveSuccess && Rates saved successfully!}

{/* Tasks Management */}

Tasks Configuration

setSearchQuery(e.target.value)} className="pl-10 bg-[#0a0a0f] border-white/10" />

{tasks.filter(t => t.name.toLowerCase().includes(searchQuery.toLowerCase())).map((task) => ( ))}

Task	Category	XP Reward	Status	Actions
{task.name} {task.description}	{task.category}	{task.xpReward} SB	{task.status}

{/* Tiers Management */}

Tier Configuration

{tiers.map((tier) => (

{tier.name}

{tier.minPoints.toLocaleString()}+ SB

{tier.multiplier}x multiplier

{tier.benefits}

))}

{/* Task Modal */} {showTaskModal && (

{editingTask ? "Edit Task" : "Add Task"}

Task Name setTaskForm({ ...taskForm, name: e.target.value })} className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-white" placeholder="Follow on Twitter" />

Description setTaskForm({ ...taskForm, description: e.target.value })} className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-white" placeholder="Follow our official Twitter account" />

{editingTier ? "Edit Tier" : "Add Tier"}

Tier Name setTierForm({ ...tierForm, name: e.target.value })} className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-white" placeholder="Gold" />

Color setTierForm({ ...tierForm, color: e.target.value })} className="w-full h-10 bg-[#0a0a0f] border border-white/10 rounded-lg cursor-pointer" />

Min Points (SB) setTierForm({ ...tierForm, minPoints: Number(e.target.value) })} className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-white" />

Multiplier setTierForm({ ...tierForm, multiplier: Number(e.target.value) })} className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-white" />

Benefits

setTierForm({ ...tierForm, benefits: e.target.value })} className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-white h-20 resize-none" placeholder="10% fee discount, Priority support" />
                </div>
              </div>
              <div className="flex justify-end gap-3 p-5 border-t border-white/10">
                <Button variant="outline" onClick={() => setShowTierModal(false)} className="bg-transparent">Cancel</Button>
                <Button onClick={handleSaveTier} className="bg-[#F7931A] hover:bg-[#E8850C] text-black"><Save className="w-4 h-4 mr-2" />{editingTier ? "Update" : "Create"}</Button>
              </div>
            </div>
          </div>
        )}
      </div>
    </Suspense>
  )
}
[V0_FILE]typescriptreact:file="app/admin/page.tsx" isMerged="true"
"use client"

import {
  TrendingUp,
  TrendingDown,
  Users,
  DollarSign,
  Activity,
  Layers,
  Bot,
  Trophy,
  ArrowUpRight,
  ArrowDownRight,
  Landmark,
  RefreshCw,
  Shield,
  Coins,
  PieChart,
} from "lucide-react"
import Link from "next/link"

const stats = [
  {
    label: "Total TVL",
    value: "$2.43B",
    change: "+12.5%",
    trend: "up",
    icon: DollarSign,
  },
  {
    label: "24h Volume",
    value: "$156.8M",
    change: "+8.2%",
    trend: "up",
    icon: Activity,
  },
  {
    label: "Total Users",
    value: "45,892",
    change: "+523",
    trend: "up",
    icon: Users,
  },
  {
    label: "Active Bots",
    value: "3,247",
    change: "+156",
    trend: "up",
    icon: Bot,
  },
]

// Product-specific metrics
const productMetrics = [
  {
    name: "PerpDEX",
    icon: TrendingUp,
    color: "#F7931A",
    tvl: "$892.5M",
    volume24h: "$78.2M",
    revenue24h: "$156.4K",
    revenueMonth: "$4.2M",
    users: "12,450",
    activeUsers24h: "3,240",
    trades24h: "45,892",
    avgTradeSize: "$1,704",
    profitShare: 35.2,
  },
  {
    name: "Staking",
    icon: Shield,
    color: "#10B981",
    tvl: "$654.2M",
    volume24h: "$12.5M",
    revenue24h: "$45.2K",
    revenueMonth: "$1.3M",
    users: "8,920",
    activeUsers24h: "1,890",
    trades24h: "2,456",
    avgTradeSize: "$5,089",
    profitShare: 22.8,
  },
  {
    name: "Lending",
    icon: Landmark,
    color: "#3B82F6",
    tvl: "$423.8M",
    volume24h: "$28.4M",
    revenue24h: "$78.5K",
    revenueMonth: "$2.1M",
    users: "6,780",
    activeUsers24h: "1,450",
    trades24h: "8,920",
    avgTradeSize: "$3,184",
    profitShare: 18.5,
  },
  {
    name: "Swap",
    icon: RefreshCw,
    color: "#8B5CF6",
    tvl: "$312.6M",
    volume24h: "$34.2M",
    revenue24h: "$68.4K",
    revenueMonth: "$1.8M",
    users: "15,240",
    activeUsers24h: "4,520",
    trades24h: "68,450",
    avgTradeSize: "$499",
    profitShare: 15.4,
  },
  {
    name: "AI Bots",
    icon: Bot,
    color: "#EC4899",
    tvl: "$89.4M",
    volume24h: "$3.5M",
    revenue24h: "$28.5K",
    revenueMonth: "$856K",
    users: "3,247",
    activeUsers24h: "2,890",
    trades24h: "124,500",
    avgTradeSize: "$28",
    profitShare: 8.1,
  },
  {
    name: "Vaults",
    icon: Layers,
    color: "#F59E0B",
    tvl: "$57.5M",
    volume24h: "N/A",
    revenue24h: "$12.8K",
    revenueMonth: "$385K",
    users: "2,455",
    activeUsers24h: "890",
    trades24h: "456",
    avgTradeSize: "$12,610",
    profitShare: 0,
  },
]

const revenueBreakdown = {
  total24h: "$389.8K",
  totalMonth: "$10.64M",
  totalYear: "$127.7M",
}

// USDB Minting Statistics from Vaults
const usdbMintingStats = {
  totalMinted: "45,892,450",
  totalBurned: "12,458,200",
  circulatingSupply: "33,434,250",
  backingRatio: 152.4,
  mintedToday: "1,245,800",
  burnedToday: "456,200",
  netMintToday: "789,600",
  avgMintSize: "$12,450",
  vaultBreakdown: [
    { collateral: "BTC", minted: "18,250,000", backing: "$28.5M", ratio: 156.2, vaults: 892 },
    { collateral: "ETH", minted: "12,450,000", backing: "$18.2M", ratio: 146.3, vaults: 1245 },
    { collateral: "963X", minted: "8,920,000", backing: "$12.8M", ratio: 143.5, vaults: 2456 },
    { collateral: "Other", minted: "6,272,450", backing: "$9.2M", ratio: 146.7, vaults: 567 },
  ],
  recentMints: [
    { vault: "Vault #12458", collateral: "BTC", amount: "125,000", time: "2 min ago" },
    { vault: "Vault #12457", collateral: "ETH", amount: "45,200", time: "5 min ago" },
    { vault: "Vault #12456", collateral: "963X", amount: "89,500", time: "12 min ago" },
  ],
}

const recentActivity = [
  { type: "user", action: "New user registered", time: "2 min ago", details: "0x1234...5678" },
  { type: "trade", action: "Large trade executed", time: "5 min ago", details: "BTC/USDB $2.5M" },
  { type: "pool", action: "New liquidity added", time: "12 min ago", details: "963X/USDT $500K" },
  { type: "competition", action: "Competition ended", time: "1 hour ago", details: "PerpDEX Masters" },
  { type: "bot", action: "Bot strategy updated", time: "2 hours ago", details: "Grid Bot v2.1" },
]

const quickActions = [
  { label: "Add Trading Pair", href: "/admin/perpdex", icon: TrendingUp },
  { label: "Create Competition", href: "/admin/competitions", icon: Trophy },
  { label: "Manage Vaults", href: "/admin/vaults", icon: Layers },
  { label: "Configure Bots", href: "/admin/bots", icon: Bot },
]

const systemStatus = [
  { name: "PerpDEX Engine", status: "operational", latency: "12ms" },
  { name: "Price Oracle", status: "operational", latency: "45ms" },
  { name: "Liquidation Engine", status: "operational", latency: "8ms" },
  { name: "AI Bot Service", status: "operational", latency: "120ms" },
  { name: "RPC Nodes", status: "degraded", latency: "250ms" },
]

export default function AdminDashboard() {
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold">Admin Dashboard</h1>
          <p className="text-gray-400 text-sm">Overview of platform metrics and management</p>
        </div>
        <div className="text-sm text-gray-400">
          Last updated: {new Date().toLocaleString()}
        </div>
      </div>

{/* USDB Minting Overview */}
      <div className="bg-gradient-to-r from-emerald-500/10 to-[#12121a] border border-emerald-500/20 rounded-xl p-5">
        <div className="flex items-center justify-between mb-4">
          <h2 className="font-semibold flex items-center gap-2">
            <Coins className="w-5 h-5 text-[#00E0C6]" />
            USDB Minting Statistics (from Vaults)
          </h2>
          <Link href="/admin/vaults" className="text-sm text-[#00E0C6] hover:underline">
            Manage Vaults
          </Link>
        </div>
        
        <div className="grid grid-cols-7 gap-4 mb-6">
          <div className="bg-[#0a0a0f] rounded-lg p-4">
            <p className="text-xs text-gray-500 mb-1">Total Minted</p>
            <p className="text-xl font-bold text-[#00E0C6]">{usdbMintingStats.totalMinted}</p>
            <p className="text-xs text-gray-500">USDB</p>
          </div>
          <div className="bg-[#0a0a0f] rounded-lg p-4">
            <p className="text-xs text-gray-500 mb-1">Total Burned</p>
            <p className="text-xl font-bold text-red-400">{usdbMintingStats.totalBurned}</p>
            <p className="text-xs text-gray-500">USDB</p>
          </div>
          <div className="bg-[#0a0a0f] rounded-lg p-4">
            <p className="text-xs text-gray-500 mb-1">Circulating</p>
            <p className="text-xl font-bold text-white">{usdbMintingStats.circulatingSupply}</p>
            <p className="text-xs text-gray-500">USDB</p>
          </div>
          <div className="bg-[#0a0a0f] rounded-lg p-4">
            <p className="text-xs text-gray-500 mb-1">Backing Ratio</p>
            <p className="text-xl font-bold text-[#00E0C6]">{usdbMintingStats.backingRatio}%</p>
            <p className="text-xs text-emerald-500">Healthy</p>
          </div>
          <div className="bg-[#0a0a0f] rounded-lg p-4">
            <p className="text-xs text-gray-500 mb-1">Minted Today</p>
            <p className="text-xl font-bold text-[#00E0C6]">+{usdbMintingStats.mintedToday}</p>
            <p className="text-xs text-gray-500">USDB</p>
          </div>
          <div className="bg-[#0a0a0f] rounded-lg p-4">
            <p className="text-xs text-gray-500 mb-1">Burned Today</p>
            <p className="text-xl font-bold text-red-400">-{usdbMintingStats.burnedToday}</p>
            <p className="text-xs text-gray-500">USDB</p>
          </div>
          <div className="bg-[#0a0a0f] rounded-lg p-4">
            <p className="text-xs text-gray-500 mb-1">Net Mint Today</p>
            <p className="text-xl font-bold text-[#F7931A]">+{usdbMintingStats.netMintToday}</p>
            <p className="text-xs text-gray-500">USDB</p>
          </div>
        </div>

<div className="grid grid-cols-2 gap-6">
          {/* Vault Breakdown */}
          <div>
            <h3 className="text-sm font-medium text-gray-400 mb-3">USDB by Collateral Type</h3>
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-white/10">
                  <th className="text-left text-xs text-gray-500 py-2">Collateral</th>
                  <th className="text-right text-xs text-gray-500 py-2">USDB Minted</th>
                  <th className="text-right text-xs text-gray-500 py-2">Backing Value</th>
                  <th className="text-right text-xs text-gray-500 py-2">Ratio</th>
                  <th className="text-right text-xs text-gray-500 py-2">Vaults</th>
                </tr>
              </thead>
              <tbody>
                {usdbMintingStats.vaultBreakdown.map((item) => (
                  <tr key={item.collateral} className="border-b border-white/5">
                    <td className="py-2 font-medium">{item.collateral}</td>
                    <td className="py-2 text-right text-[#00E0C6]">{item.minted}</td>
                    <td className="py-2 text-right">{item.backing}</td>
                    <td className="py-2 text-right">
                      <span className={item.ratio >= 150 ? "text-[#00E0C6]" : item.ratio >= 130 ? "text-yellow-400" : "text-red-400"}>
                        {item.ratio}%
                      </span>
                    </td>
                    <td className="py-2 text-right text-gray-400">{item.vaults}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

{/* Recent Mints */}
          <div>
            <h3 className="text-sm font-medium text-gray-400 mb-3">Recent USDB Mints</h3>
            <div className="space-y-2">
              {usdbMintingStats.recentMints.map((mint, i) => (
                <div key={i} className="flex items-center justify-between bg-[#0a0a0f] rounded-lg p-3">
                  <div className="flex items-center gap-3">
                    <div className="w-8 h-8 rounded-full bg-emerald-500/20 flex items-center justify-center">
                      <Coins className="w-4 h-4 text-[#00E0C6]" />
                    </div>
                    <div>
                      <p className="text-sm font-medium">{mint.vault}</p>
                      <p className="text-xs text-gray-500">Collateral: {mint.collateral}</p>
                    </div>
                  </div>
                  <div className="text-right">
                    <p className="text-sm font-medium text-[#00E0C6]">+{mint.amount} USDB</p>
                    <p className="text-xs text-gray-500">{mint.time}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

{/* Stats Grid */}
      <div className="grid grid-cols-4 gap-4">
        {stats.map((stat) => (
          <div
            key={stat.label}
            className="bg-[#12121a] border border-white/10 rounded-xl p-5"
          >
            <div className="flex items-center justify-between mb-3">
              <div className="w-10 h-10 rounded-lg bg-[#F7931A]/10 flex items-center justify-center">
                <stat.icon className="w-5 h-5 text-[#F7931A]" />
              </div>
              <div
                className={`flex items-center gap-1 text-sm font-medium ${
                  stat.trend === "up" ? "text-[#00E0C6]" : "text-red-400"
                }`}
              >
                {stat.trend === "up" ? (
                  <ArrowUpRight className="w-4 h-4" />
                ) : (
                  <ArrowDownRight className="w-4 h-4" />
                )}
                {stat.change}
              </div>
            </div>
            <p className="text-2xl font-bold">{stat.value}</p>
            <p className="text-sm text-gray-400">{stat.label}</p>
          </div>
        ))}
      </div>

{/* Product Performance Table */}
      <div className="bg-[#12121a] border border-white/10 rounded-xl p-5">
        <div className="flex items-center justify-between mb-4">
          <h2 className="font-semibold flex items-center gap-2">
            <PieChart className="w-5 h-5 text-[#F7931A]" />
            Product Performance Overview
          </h2>
          <div className="flex items-center gap-4 text-sm">
            <div className="flex items-center gap-2">
              <span className="text-gray-400">24h Revenue:</span>
              <span className="text-[#00E0C6] font-semibold">{revenueBreakdown.total24h}</span>
            </div>
            <div className="flex items-center gap-2">
              <span className="text-gray-400">Monthly:</span>
              <span className="text-[#00E0C6] font-semibold">{revenueBreakdown.totalMonth}</span>
            </div>
          </div>
        </div>
        
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className="border-b border-white/10">
                <th className="text-left text-xs text-gray-400 uppercase py-3 px-2">Product</th>
                <th className="text-right text-xs text-gray-400 uppercase py-3 px-2">TVL</th>
                <th className="text-right text-xs text-gray-400 uppercase py-3 px-2">24h Volume</th>
                <th className="text-right text-xs text-gray-400 uppercase py-3 px-2">24h Revenue</th>
                <th className="text-right text-xs text-gray-400 uppercase py-3 px-2">Monthly Revenue</th>
                <th className="text-right text-xs text-gray-400 uppercase py-3 px-2">Total Users</th>
                <th className="text-right text-xs text-gray-400 uppercase py-3 px-2">24h Active</th>
                <th className="text-right text-xs text-gray-400 uppercase py-3 px-2">24h Txns</th>
                <th className="text-right text-xs text-gray-400 uppercase py-3 px-2">Profit Share</th>
              </tr>
            </thead>
            <tbody>
              {productMetrics.map((product) => (
                <tr key={product.name} className="border-b border-white/5 hover:bg-white/5">
                  <td className="py-3 px-2">
                    <div className="flex items-center gap-2">
                      <div 
                        className="w-8 h-8 rounded-lg flex items-center justify-center"
                        style={{ backgroundColor: `${product.color}20` }}
                      >
                        <product.icon className="w-4 h-4" style={{ color: product.color }} />
                      </div>
                      <span className="font-medium">{product.name}</span>
                    </div>
                  </td>
                  <td className="py-3 px-2 text-right font-medium">{product.tvl}</td>
                  <td className="py-3 px-2 text-right text-gray-300">{product.volume24h}</td>
                  <td className="py-3 px-2 text-right text-[#00E0C6] font-medium">{product.revenue24h}</td>
                  <td className="py-3 px-2 text-right text-[#00E0C6]">{product.revenueMonth}</td>
                  <td className="py-3 px-2 text-right">{product.users}</td>
                  <td className="py-3 px-2 text-right text-blue-400">{product.activeUsers24h}</td>
                  <td className="py-3 px-2 text-right text-gray-400">{product.trades24h}</td>
                  <td className="py-3 px-2 text-right">
                    <div className="flex items-center justify-end gap-2">
                      <div className="w-16 h-2 bg-[#1a1a24] rounded-full overflow-hidden">
                        <div 
                          className="h-full rounded-full"
                          style={{ width: `${product.profitShare}%`, backgroundColor: product.color }}
                        />
                      </div>
                      <span className="text-sm text-gray-400 w-12 text-right">{product.profitShare}%</span>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
            <tfoot>
              <tr className="border-t border-white/10 bg-[#0a0a0f]">
                <td className="py-3 px-2 font-semibold">Total</td>
                <td className="py-3 px-2 text-right font-bold text-[#F7931A]">$2.43B</td>
                <td className="py-3 px-2 text-right font-bold">$156.8M</td>
                <td className="py-3 px-2 text-right font-bold text-[#00E0C6]">{revenueBreakdown.total24h}</td>
                <td className="py-3 px-2 text-right font-bold text-[#00E0C6]">{revenueBreakdown.totalMonth}</td>
                <td className="py-3 px-2 text-right font-bold">45,892</td>
                <td className="py-3 px-2 text-right font-bold text-blue-400">14,880</td>
                <td className="py-3 px-2 text-right font-bold">250,674</td>
                <td className="py-3 px-2 text-right font-bold">100%</td>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>

{/* Product Revenue Cards */}
      <div className="grid grid-cols-6 gap-4">
        {productMetrics.map((product) => (
          <div 
            key={product.name}
            className="bg-[#12121a] border border-white/10 rounded-xl p-4 hover:border-white/20 transition-colors"
          >
            <div className="flex items-center gap-2 mb-3">
              <div 
                className="w-8 h-8 rounded-lg flex items-center justify-center"
                style={{ backgroundColor: `${product.color}20` }}
              >
                <product.icon className="w-4 h-4" style={{ color: product.color }} />
              </div>
              <span className="font-medium text-sm">{product.name}</span>
            </div>
            <div className="space-y-2">
              <div>
                <p className="text-xs text-gray-500">24h Revenue</p>
                <p className="text-lg font-bold text-[#00E0C6]">{product.revenue24h}</p>
              </div>
              <div>
                <p className="text-xs text-gray-500">Avg Trade</p>
                <p className="text-sm font-medium">{product.avgTradeSize}</p>
              </div>
              <div className="pt-2 border-t border-white/5">
                <div className="flex justify-between text-xs">
                  <span className="text-gray-500">Share</span>
                  <span style={{ color: product.color }}>{product.profitShare}%</span>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>

<div className="grid grid-cols-3 gap-6">
        {/* Recent Activity */}
        <div className="col-span-2 bg-[#12121a] border border-white/10 rounded-xl p-5">
          <h2 className="font-semibold mb-4">Recent Activity</h2>
          <div className="space-y-3">
            {recentActivity.map((activity, idx) => (
              <div
                key={idx}
                className="flex items-center justify-between py-3 border-b border-white/5 last:border-0"
              >
                <div>
                  <p className="text-sm font-medium">{activity.action}</p>
                  <p className="text-xs text-gray-500">{activity.details}</p>
                </div>
                <span className="text-xs text-gray-400">{activity.time}</span>
              </div>
            ))}
          </div>
        </div>

{/* Quick Actions */}
        <div className="space-y-6">
          <div className="bg-[#12121a] border border-white/10 rounded-xl p-5">
            <h2 className="font-semibold mb-4">Quick Actions</h2>
            <div className="space-y-2">
              {quickActions.map((action) => (
                <Link
                  key={action.label}
                  href={action.href}
                  className="flex items-center gap-3 p-3 rounded-lg bg-[#1a1a24] hover:bg-white/10 transition-colors group"
                >
                  <action.icon className="w-4 h-4 text-[#F7931A]" />
                  <span className="text-sm font-medium group-hover:text-[#F7931A]">
                    {action.label}
                  </span>
                </Link>
              ))}
            </div>
          </div>

{/* System Status */}
          <div className="bg-[#12121a] border border-white/10 rounded-xl p-5">
            <h2 className="font-semibold mb-4">System Status</h2>
            <div className="space-y-3">
              {systemStatus.map((system) => (
                <div key={system.name} className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <div
                      className={`w-2 h-2 rounded-full ${
                        system.status === "operational"
                          ? "bg-emerald-400"
                          : system.status === "degraded"
                          ? "bg-yellow-400"
                          : "bg-red-400"
                      }`}
                    />
                    <span className="text-sm">{system.name}</span>
                  </div>
                  <span className="text-xs text-gray-400">{system.latency}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]png:file="public/logo-963x.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/963x%20v1-ppG0qYdaXNrJQpaa1x0QZCoBHKf10C.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/login/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { SunBitLogo } from "@/components/ui/sunbit-logo"
import { Wallet, Mail, Key, ChevronRight } from "lucide-react"

export default function LoginPage() {
  const [email, setEmail] = useState("")
  const [showOtherSocials, setShowOtherSocials] = useState(false)

return (
    <div className="min-h-screen flex">
      {/* Left side - Abstract background */}
      <div className="hidden lg:flex lg:w-1/2 relative overflow-hidden bg-[#0a0a0a]">
        {/* Abstract gradient shapes */}
        <div className="absolute inset-0">
          {/* Main gradient blob */}
          <div
            className="absolute top-1/4 left-1/4 w-[500px] h-[500px] rounded-full"
            style={{
              background:
                "radial-gradient(ellipse at center, rgba(220,38,38,0.3) 0%, rgba(220,38,38,0.1) 40%, transparent 70%)",
              filter: "blur(40px)",
              transform: "rotate(-15deg)",
            }}
          />
          {/* Secondary blob */}
          <div
            className="absolute bottom-1/4 right-1/4 w-[400px] h-[400px] rounded-full"
            style={{
              background:
                "radial-gradient(ellipse at center, rgba(255,217,61,0.25) 0%, rgba(220,38,38,0.1) 50%, transparent 70%)",
              filter: "blur(50px)",
              transform: "rotate(20deg)",
            }}
          />
          {/* Accent blob */}
          <div
            className="absolute top-1/2 left-1/3 w-[300px] h-[300px] rounded-full"
            style={{
              background: "radial-gradient(ellipse at center, rgba(232,133,12,0.2) 0%, transparent 60%)",
              filter: "blur(30px)",
            }}
          />
          {/* Flowing lines effect */}
          <svg className="absolute inset-0 w-full h-full opacity-30" viewBox="0 0 800 800">
            <path
              d="M100,400 Q200,200 400,300 T700,400 Q600,600 400,500 T100,400"
              fill="none"
              stroke="url(#lineGradient)"
              strokeWidth="2"
            />
            <path
              d="M150,500 Q250,300 450,400 T750,500 Q650,700 450,600 T150,500"
              fill="none"
              stroke="url(#lineGradient)"
              strokeWidth="1.5"
            />
            <defs>
              <linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stopColor="#F7931A" stopOpacity="0.5" />
                <stop offset="50%" stopColor="#FFD93D" stopOpacity="0.8" />
                <stop offset="100%" stopColor="#F7931A" stopOpacity="0.5" />
              </linearGradient>
            </defs>
          </svg>
        </div>

{/* Logo watermark */}
        <div className="absolute bottom-8 left-8 opacity-50">
          <SunBitLogo height={48} />
        </div>
      </div>

{/* Right side - Login form */}
      <div className="w-full lg:w-1/2 flex items-center justify-center p-8 bg-background">
        <div className="w-full max-w-md space-y-8">
          {/* Logo */}
          <div className="flex justify-center">
            <SunBitLogo height={40} />
          </div>

{/* Heading */}
          <h1 className="text-2xl font-semibold text-center text-foreground">Log in or sign up</h1>

{/* Login options */}
          <div className="space-y-3">
            {/* Google */}
            <Button
              variant="outline"
              className="w-full h-14 justify-start gap-4 bg-muted/50 border-border hover:bg-muted"
            >
              <div className="w-8 h-8 rounded-md bg-white flex items-center justify-center">
                <svg viewBox="0 0 24 24" width="20" height="20">
                  <path
                    fill="#4285F4"
                    d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
                  />
                  <path
                    fill="#34A853"
                    d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
                  />
                  <path
                    fill="#FBBC05"
                    d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
                  />
                  <path
                    fill="#EA4335"
                    d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
                  />
                </svg>
              </div>
              <span className="flex-1 text-left text-foreground">Google</span>
              <span className="px-2 py-1 text-xs bg-background rounded border border-border text-muted-foreground">
                Recent
              </span>
            </Button>

{/* Email */}
            <div className="relative">
              <div className="flex items-center gap-4 h-14 px-4 bg-muted/50 border border-border rounded-md">
                <div className="w-8 h-8 rounded-md bg-muted flex items-center justify-center">
                  <Mail className="w-5 h-5 text-muted-foreground" />
                </div>
                <Input
                  type="email"
                  placeholder="your@email.com"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className="flex-1 border-0 bg-transparent p-0 h-auto focus-visible:ring-0 text-foreground placeholder:text-muted-foreground"
                />
                <Button
                  variant="ghost"
                  size="sm"
                  className="text-muted-foreground hover:text-foreground"
                  disabled={!email}
                >
                  Submit
                </Button>
              </div>
            </div>

{/* Twitter/X */}
            <Button
              variant="outline"
              className="w-full h-14 justify-start gap-4 bg-muted/50 border-border hover:bg-muted"
            >
              <div className="w-8 h-8 rounded-md bg-black flex items-center justify-center">
                <svg viewBox="0 0 24 24" width="16" height="16" fill="white">
                  <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
                </svg>
              </div>
              <span className="flex-1 text-left text-foreground">Twitter</span>
            </Button>

{/* Other socials */}
            <Button
              variant="outline"
              className="w-full h-14 justify-start gap-4 bg-muted/50 border-border hover:bg-muted"
              onClick={() => setShowOtherSocials(!showOtherSocials)}
            >
              <div className="w-8 h-8 rounded-md bg-muted flex items-center justify-center">
                <svg
                  viewBox="0 0 24 24"
                  width="20"
                  height="20"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  className="text-muted-foreground"
                >
                  <circle cx="12" cy="12" r="10" />
                  <circle cx="12" cy="10" r="3" />
                  <path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662" />
                </svg>
              </div>
              <span className="flex-1 text-left text-foreground">Other socials</span>
              <ChevronRight
                className={`w-4 h-4 text-muted-foreground transition-transform ${showOtherSocials ? "rotate-90" : ""}`}
              />
            </Button>

{/* Other socials expanded */}
            {showOtherSocials && (
              <div className="pl-12 space-y-2">
                <Button
                  variant="ghost"
                  className="w-full justify-start gap-3 h-10 text-muted-foreground hover:text-foreground"
                >
                  <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
                    <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" />
                  </svg>
                  Discord
                </Button>
                <Button
                  variant="ghost"
                  className="w-full justify-start gap-3 h-10 text-muted-foreground hover:text-foreground"
                >
                  <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
                    <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
                  </svg>
                  Telegram
                </Button>
                <Button
                  variant="ghost"
                  className="w-full justify-start gap-3 h-10 text-muted-foreground hover:text-foreground"
                >
                  <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
                    <path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z" />
                  </svg>
                  GitHub
                </Button>
                <Button
                  variant="ghost"
                  className="w-full justify-start gap-3 h-10 text-muted-foreground hover:text-foreground"
                >
                  <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
                    <path d="M12.53.02C13.84 0 15.14.01 16.44 0c.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z" />
                  </svg>
                  TikTok
                </Button>
              </div>
            )}

{/* Continue with wallet */}
            <Button
              variant="outline"
              className="w-full h-14 justify-start gap-4 bg-muted/50 border-border hover:bg-muted"
            >
              <div className="w-8 h-8 rounded-md bg-muted flex items-center justify-center">
                <Wallet className="w-5 h-5 text-muted-foreground" />
              </div>
              <span className="flex-1 text-left text-foreground">Continue with a wallet</span>
            </Button>
          </div>

{/* Passkey link */}
          <div className="text-center">
            <button className="text-foreground underline underline-offset-4 hover:text-foreground/80 font-medium">
              I have a passkey
            </button>
          </div>

{/* Terms */}
          <p className="text-center text-sm text-muted-foreground">
            By logging in I agree to the{" "}
            <a href="#" className="text-[#F7931A] hover:underline">
              Terms
            </a>{" "}
            &{" "}
            <a href="#" className="text-[#F7931A] hover:underline">
              Privacy Policy
            </a>
          </p>

{/* Footer */}
          <div className="flex items-center justify-center gap-2 text-sm text-muted-foreground">
            <span>Protected by</span>
            <div className="flex items-center gap-1">
              <Key className="w-4 h-4" />
              <span className="font-semibold">963X</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]xml:file="public/logo-963x.svg" isMerged="true"
<?xml version="1.0" standalone="no"?>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="450" height="100" viewBox="0 0 2000 450"
 preserveAspectRatio="xMidYMid meet">
<g transform="translate(0,400) scale(0.02,-0.02)"
fill="#FFFFFF" stroke="none">
<path d="M10030 11894 c-484 -67 -870 -338 -1126 -790 -308 -544 -370 -1306
-158 -1944 84 -254 191 -440 350 -608 156 -167 360 -294 567 -357 249 -74 617
-85 897 -26 409 86 758 361 929 734 65 141 90 239 111 424 27 251 -59 567
-210 769 -178 238 -441 385 -760 424 -124 15 -390 12 -495 -5 -388 -63 -700
-326 -842 -710 l-18 -50 -6 70 c-18 202 -5 454 32 615 103 447 334 732 694
856 74 26 91 28 245 28 186 1 244 -11 362 -72 80 -41 183 -132 228 -202 18
-27 39 -50 46 -50 8 0 76 12 152 26 75 14 182 34 237 44 254 48 240 44 238 74
-6 83 -142 299 -261 415 -182 177 -402 284 -669 327 -139 23 -413 27 -543 8z
m445 -1794 c348 -98 555 -417 506 -781 -41 -307 -234 -525 -541 -610 -74 -21
-106 -24 -245 -23 -139 1 -173 4 -258 27 -274 73 -466 242 -547 481 -25 75
-25 158 -1 261 77 318 318 574 611 648 100 25 106 26 255 23 108 -3 158 -8
220 -26z"/>
<path d="M13165 11890 c-399 -59 -681 -239 -924 -590 -43 -62 -129 -253 -156
-345 -14 -49 -29 -120 -32 -157 -7 -79 -32 -66 202 -103 88 -14 183 -30 210
-35 28 -6 78 -13 113 -16 l62 -7 0 36 c0 66 22 141 70 242 105 218 272 357
503 417 119 32 354 31 480 0 217 -54 386 -181 463 -347 50 -108 68 -281 40
-396 -38 -162 -182 -280 -401 -330 -28 -6 -189 -14 -360 -18 l-310 -6 -3 -172
-2 -173 257 0 c355 0 469 -20 620 -108 77 -46 153 -116 195 -182 73 -114 91
-303 43 -447 -70 -208 -242 -357 -490 -424 -66 -18 -109 -22 -240 -23 -297 -1
-475 65 -655 244 -82 81 -103 109 -143 190 -56 112 -85 212 -98 334 -5 49 -11
91 -12 93 -2 1 -30 -2 -63 -7 -32 -6 -122 -19 -199 -30 -77 -11 -185 -27 -240
-35 -55 -8 -106 -15 -112 -15 -34 0 2 -316 53 -475 179 -551 714 -874 1445
-875 458 0 836 121 1091 349 223 200 333 497 300 808 -27 264 -152 471 -374
621 -86 59 -251 122 -348 134 -15 2 14 13 77 30 202 53 342 150 444 305 198
303 178 774 -44 1068 -51 68 -168 174 -252 230 -88 59 -158 92 -282 136 -252
88 -641 122 -928 79z"/>
<path d="M6405 11879 c-482 -46 -891 -313 -1095 -716 -170 -335 -172 -739 -8
-1068 55 -108 89 -157 172 -244 170 -178 364 -280 630 -333 161 -32 459 -32
596 -1 205 48 368 135 518 277 120 113 236 283 277 408 26 78 19 -320 -9 -502
-39 -252 -116 -473 -217 -626 -47 -71 -195 -214 -261 -252 -130 -77 -274 -107
-463 -99 -229 10 -394 75 -526 207 -41 41 -86 94 -99 118 -13 23 -30 42 -39
42 -8 0 -146 -29 -306 -65 -161 -36 -300 -65 -309 -65 -22 0 -20 -20 10 -87
35 -80 107 -195 175 -278 179 -221 465 -377 803 -438 176 -32 528 -32 701 0
425 78 728 296 939 674 44 79 120 262 142 339 76 269 109 467 125 740 27 445
-37 840 -187 1158 -171 364 -434 609 -789 736 -206 74 -497 102 -780 75z m387
-544 c173 -31 299 -95 418 -215 70 -70 93 -101 132 -180 64 -132 90 -220 82
-284 -28 -234 -150 -462 -319 -598 -76 -62 -204 -124 -296 -144 -41 -9 -130
-18 -199 -21 -247 -10 -427 53 -576 202 -65 65 -90 98 -124 168 -72 150 -95
317 -66 482 46 252 208 454 441 547 136 54 341 72 507 43z"/>
<path d="M15030 10854 c0 -3 93 -137 208 -296 114 -160 219 -307 233 -327 14
-20 115 -162 225 -316 110 -154 210 -295 223 -313 l23 -33 -28 -42 c-16 -23
-79 -112 -140 -197 -115 -162 -408 -576 -434 -613 -8 -12 -93 -132 -188 -267
l-174 -245 354 -5 c194 -3 358 -4 363 -2 6 2 19 17 30 35 25 38 447 665 550
817 40 58 78 105 84 105 7 0 43 -45 81 -100 38 -55 117 -170 175 -255 58 -85
147 -213 196 -285 50 -71 115 -167 146 -213 31 -45 62 -87 68 -92 8 -7 140 -9
369 -8 l358 3 -211 295 c-115 162 -255 358 -310 435 -318 445 -441 621 -441
634 0 13 57 95 400 574 80 111 163 228 185 260 22 31 56 79 75 106 130 180
233 328 237 338 4 11 -66 13 -358 11 l-363 -3 -78 -115 c-42 -63 -177 -265
-300 -447 -123 -183 -226 -333 -230 -333 -3 0 -93 129 -199 288 -106 158 -242
360 -302 450 l-110 162 -358 0 c-198 0 -359 -3 -359 -6z"/>
<path d="M2935 10819 c-340 -49 -646 -306 -756 -635 -41 -121 -52 -209 -46
-359 4 -99 11 -150 30 -212 82 -266 255 -471 502 -596 81 -40 210 -77 318 -89
380 -43 749 152 936 493 88 161 117 296 108 507 -4 112 -10 153 -32 222 -115
357 -392 602 -754 665 -91 16 -211 18 -306 4z"/>
</g>

<circle cx="1821" cy="225" r="50" fill="#DC2626"/>
</svg>
[V0_FILE]typescriptreact:file="app/privacy/page.tsx" isMerged="true"
import Link from "next/link"
import { SunBitLogo } from "@/components/ui/sunbit-logo"
import { ArrowLeft } from "lucide-react"

export default function PrivacyPage() {
  return (
    <div className="min-h-screen bg-[#0a0a0f] text-white">
      {/* Header */}
      <header className="fixed top-0 left-0 right-0 z-50 bg-[#0a0a0f]/90 backdrop-blur-md border-b border-white/5">
        <div className="max-w-4xl mx-auto px-6 py-4 flex items-center gap-4">
          <Link href="/" className="flex items-center gap-2 text-gray-400 hover:text-white transition-colors">
            <ArrowLeft className="w-5 h-5" />
            <span>Back</span>
          </Link>
          <div className="flex-1" />
          <SunBitLogo height={28} />
        </div>
      </header>

{/* Content */}
      <main className="pt-24 pb-16 px-6">
        <div className="max-w-4xl mx-auto">
          <h1 className="text-4xl font-bold mb-2">Privacy Policy</h1>
          <p className="text-gray-400 mb-8">Last updated: January 15, 2026</p>

<div className="prose prose-invert prose-lg max-w-none">
            <section className="mb-8">
              <h2 className="text-2xl font-semibold mb-4 text-[#DC2626]">1. Introduction</h2>
              <p className="text-gray-300 leading-relaxed">
                963X is committed to protecting your privacy. This Privacy Policy explains how we collect, use,
                disclose, and safeguard your information when you use our Bitcoin-native DeFi platform. Please read this
                policy carefully to understand our practices regarding your personal data.
              </p>
            </section>

<section className="mb-8">
              <h2 className="text-2xl font-semibold mb-4 text-[#DC2626]">2. Information We Collect</h2>
              <p className="text-gray-300 leading-relaxed mb-4">We may collect the following types of information:</p>
              <ul className="list-disc list-inside text-gray-300 space-y-2">
                <li>
                  <strong>Wallet Information:</strong> Public wallet addresses you connect to our platform
                </li>
                <li>
                  <strong>Transaction Data:</strong> On-chain transaction history related to platform usage
                </li>
                <li>
                  <strong>Usage Data:</strong> How you interact with our platform, including features used and time
                  spent
                </li>
                <li>
                  <strong>Device Information:</strong> Browser type, operating system, and device identifiers
                </li>
                <li>
                  <strong>Communication Data:</strong> Information you provide when contacting support
                </li>
              </ul>
            </section>

<section className="mb-8">
              <h2 className="text-2xl font-semibold mb-4 text-[#DC2626]">3. How We Use Your Information</h2>
              <p className="text-gray-300 leading-relaxed mb-4">We use collected information to:</p>
              <ul className="list-disc list-inside text-gray-300 space-y-2">
                <li>Provide and maintain our DeFi services</li>
                <li>Process transactions and manage your account</li>
                <li>Improve and optimize our platform</li>
                <li>Communicate with you about updates and support</li>
                <li>Detect and prevent fraud or unauthorized activities</li>
                <li>Comply with legal obligations</li>
              </ul>
            </section>

<section className="mb-8">
              <h2 className="text-2xl font-semibold mb-4 text-[#DC2626]">4. Data Security</h2>
              <p className="text-gray-300 leading-relaxed">
                We implement industry-standard security measures to protect your information, including encryption,
                secure protocols, and regular security audits. However, no method of transmission over the Internet is
                100% secure, and we cannot guarantee absolute security of your data.
              </p>
            </section>

<section className="mb-8">
              <h2 className="text-2xl font-semibold mb-4 text-[#DC2626]">5. Blockchain Data</h2>
              <p className="text-gray-300 leading-relaxed">
                Please note that blockchain transactions are public by nature. Any transactions you make on the
                blockchain, including interactions with 963X smart contracts, are permanently recorded and publicly
                visible. This data cannot be deleted or modified.
              </p>
            </section>

<section className="mb-8">
              <h2 className="text-2xl font-semibold mb-4 text-[#DC2626]">6. Cookies and Tracking</h2>
              <p className="text-gray-300 leading-relaxed">
                We use cookies and similar tracking technologies to enhance your experience on our platform. These help
                us understand how you use our services and allow us to remember your preferences. You can control cookie
                settings through your browser, but disabling cookies may affect platform functionality.
              </p>
            </section>

<section className="mb-8">
              <h2 className="text-2xl font-semibold mb-4 text-[#DC2626]">7. Third-Party Services</h2>
              <p className="text-gray-300 leading-relaxed">
                Our platform may integrate with third-party services such as wallet providers, analytics tools, and
                blockchain networks. These services have their own privacy policies, and we encourage you to review
                them. We are not responsible for the privacy practices of third-party services.
              </p>
            </section>

<section className="mb-8">
              <h2 className="text-2xl font-semibold mb-4 text-[#DC2626]">8. Your Rights</h2>
              <p className="text-gray-300 leading-relaxed mb-4">
                Depending on your jurisdiction, you may have the right to:
              </p>
              <ul className="list-disc list-inside text-gray-300 space-y-2">
                <li>Access the personal data we hold about you</li>
                <li>Request correction of inaccurate data</li>
                <li>Request deletion of your data (where applicable)</li>
                <li>Object to processing of your data</li>
                <li>Data portability</li>
              </ul>
            </section>

<section className="mb-8">
              <h2 className="text-2xl font-semibold mb-4 text-[#DC2626]">9. Changes to This Policy</h2>
              <p className="text-gray-300 leading-relaxed">
                We may update this Privacy Policy from time to time. We will notify you of any changes by posting the
                new Privacy Policy on this page and updating the "Last updated" date. Your continued use of the platform
                after changes constitutes acceptance of the updated policy.
              </p>
            </section>

<section className="mb-8">
              <h2 className="text-2xl font-semibold mb-4 text-[#DC2626]">10. Contact Us</h2>
              <p className="text-gray-300 leading-relaxed">
                If you have questions about this Privacy Policy or our data practices, please contact us at
                privacy@963x.xyz or through our official community channels on Discord and Telegram.
              </p>
            </section>
          </div>
        </div>
      </main>

{/* Footer */}
      <footer className="border-t border-white/5 py-8 px-6">
        <div className="max-w-4xl mx-auto flex items-center justify-between">
          <SunBitLogo height={24} />
          <div className="flex items-center gap-6 text-sm text-gray-500">
            <Link href="/terms" className="hover:text-white transition-colors">
              Terms of Use
            </Link>
            <Link href="/privacy" className="text-[#DC2626]">
              Privacy Policy
            </Link>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/swap/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Plus, Search, Edit2, Trash2, ToggleLeft, ToggleRight, X, Save } from "lucide-react"
import { useSearchParams } from "next/navigation"
import { Suspense } from "react"

const initialPools = [
  { id: 1, pair: "BTC/USDB", fee: 0.3, tvl: "$45.2M", volume24h: "$8.5M", status: "active" },
  { id: 2, pair: "ETH/USDB", fee: 0.3, tvl: "$32.1M", volume24h: "$5.2M", status: "active" },
  { id: 3, pair: "USDT/USDC", fee: 0.01, tvl: "$85.4M", volume24h: "$12.8M", status: "active" },
  { id: 4, pair: "USDB/USDT", fee: 0.05, tvl: "$52.8M", volume24h: "$6.4M", status: "active" },
  { id: 5, pair: "963X/USDB", fee: 0.5, tvl: "$5.1M", volume24h: "$1.2M", status: "active" },
  { id: 6, pair: "WBTC/BTC", fee: 0.05, tvl: "$28.5M", volume24h: "$3.8M", status: "active" },
]

type Pool = typeof initialPools[0]

const Loading = () => null

export default function AdminSwap() {
  const searchParams = useSearchParams()
  const [pools, setPools] = useState(initialPools)
  const [searchQuery, setSearchQuery] = useState("")
  const [showModal, setShowModal] = useState(false)
  const [editingPool, setEditingPool] = useState<Pool | null>(null)
  const [formData, setFormData] = useState({ pair: "", fee: 0.3 })

const filteredPools = pools.filter((p) => p.pair.toLowerCase().includes(searchQuery.toLowerCase()))

const handleAddNew = () => {
    setEditingPool(null)
    setFormData({ pair: "", fee: 0.3 })
    setShowModal(true)
  }

const handleEdit = (pool: Pool) => {
    setEditingPool(pool)
    setFormData({ pair: pool.pair, fee: pool.fee })
    setShowModal(true)
  }

const handleSave = () => {
    if (editingPool) {
      setPools(pools.map((p) => p.id === editingPool.id ? { ...p, ...formData } : p))
    } else {
      setPools([...pools, { id: Date.now(), ...formData, tvl: "$0", volume24h: "$0", status: "active" }])
    }
    setShowModal(false)
  }

const handleToggleStatus = (id: number) => {
    setPools(pools.map((p) => p.id === id ? { ...p, status: p.status === "active" ? "paused" : "active" } : p))
  }

const handleDelete = (id: number) => {
    if (confirm("Are you sure?")) setPools(pools.filter((p) => p.id !== id))
  }

return (
    <Suspense fallback={<Loading />}>
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-2xl font-bold">Swap Pools Management</h1>
            <p className="text-gray-400 text-sm">Configure swap pairs and fees</p>
          </div>
          <Button onClick={handleAddNew} className="bg-[#F7931A] hover:bg-[#E8850C] text-black">
            <Plus className="w-4 h-4 mr-2" />Add Swap Pool
          </Button>
        </div>

<div className="relative max-w-sm">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
          <input type="text" placeholder="Search pools..." value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)}
            className="w-full bg-[#12121a] border border-white/10 rounded-lg pl-10 pr-4 py-2 text-sm text-white placeholder-gray-500" />
        </div>

<div className="bg-[#12121a] border border-white/10 rounded-xl overflow-hidden">
          <table className="w-full">
            <thead>
              <tr className="border-b border-white/10">
                <th className="text-left text-xs font-semibold text-gray-400 uppercase px-4 py-3">Pair</th>
                <th className="text-left text-xs font-semibold text-gray-400 uppercase px-4 py-3">Fee</th>
                <th className="text-left text-xs font-semibold text-gray-400 uppercase px-4 py-3">TVL</th>
                <th className="text-left text-xs font-semibold text-gray-400 uppercase px-4 py-3">24h Volume</th>
                <th className="text-left text-xs font-semibold text-gray-400 uppercase px-4 py-3">Status</th>
                <th className="text-right text-xs font-semibold text-gray-400 uppercase px-4 py-3">Actions</th>
              </tr>
            </thead>
            <tbody>
              {filteredPools.map((pool) => (
                <tr key={pool.id} className="border-b border-white/5 hover:bg-white/5">
                  <td className="px-4 py-4 font-medium">{pool.pair}</td>
                  <td className="px-4 py-4">{pool.fee}%</td>
                  <td className="px-4 py-4">{pool.tvl}</td>
                  <td className="px-4 py-4 text-[#F7931A]">{pool.volume24h}</td>
                  <td className="px-4 py-4">
                    <span className={`px-2 py-1 rounded-full text-xs font-medium ${pool.status === "active" ? "bg-emerald-500/20 text-emerald-400" : "bg-gray-500/20 text-gray-400"}`}>
                      {pool.status}
                    </span>
                  </td>
                  <td className="px-4 py-4">
                    <div className="flex items-center justify-end gap-2">
                      <button onClick={() => handleToggleStatus(pool.id)} className="p-2 rounded-lg hover:bg-white/10">
                        {pool.status === "active" ? <ToggleRight className="w-4 h-4 text-emerald-400" /> : <ToggleLeft className="w-4 h-4 text-gray-400" />}
                      </button>
                      <button onClick={() => handleEdit(pool)} className="p-2 rounded-lg hover:bg-white/10"><Edit2 className="w-4 h-4 text-gray-400" /></button>
                      <button onClick={() => handleDelete(pool.id)} className="p-2 rounded-lg hover:bg-white/10"><Trash2 className="w-4 h-4 text-red-400" /></button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Search, Filter, MoreHorizontal, UserCheck, UserX, Eye, Ban, Download } from "lucide-react"
import { useSearchParams } from "next/navigation"
import { Suspense } from "react"
import Loading from "./loading"

const users = [
  { id: 1, address: "0x1234...5678", username: "trader_mike", tier: "Gold", totalVolume: "$1.2M", referrals: 12, status: "Active", joined: "2025-12-01" },
  { id: 2, address: "0x2345...6789", username: "crypto_jane", tier: "Silver", totalVolume: "$450K", referrals: 5, status: "Active", joined: "2025-12-15" },
  { id: 3, address: "0x3456...7890", username: "btc_holder", tier: "Diamond", totalVolume: "$5.8M", referrals: 45, status: "Active", joined: "2025-11-20" },
  { id: 4, address: "0x4567...8901", username: "defi_master", tier: "Platinum", totalVolume: "$2.1M", referrals: 23, status: "Suspended", joined: "2025-12-10" },
]

export default function AdminUsersPage() {
  const [searchQuery, setSearchQuery] = useState("")
  const searchParams = useSearchParams()

return (
    <Suspense fallback={<Loading />}>
      <div>
        <div className="flex items-center justify-between mb-6">
          <div>
            <h1 className="text-2xl font-bold">User Management</h1>
            <p className="text-sm text-gray-400">Manage all platform users</p>
          </div>
          <Button className="bg-[#F7931A] hover:bg-[#E8850C] text-black">
            <Download className="w-4 h-4 mr-2" />
            Export Users
          </Button>
        </div>

<div className="flex items-center gap-4 mb-6">
          <div className="relative flex-1 max-w-md">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
            <input
              type="text"
              placeholder="Search by address or username..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="w-full bg-[#1a1a24] border border-white/10 rounded-lg pl-10 pr-4 py-2 text-sm focus:outline-none focus:border-[#F7931A]/50"
            />
          </div>
          <Button variant="outline" className="border-white/10 bg-transparent">
            <Filter className="w-4 h-4 mr-2" />
            Filter
          </Button>
        </div>

<div className="bg-[#12121a] border border-white/10 rounded-xl overflow-hidden">
          <table className="w-full">
            <thead>
              <tr className="border-b border-white/10">
                <th className="text-left text-xs font-semibold text-gray-400 uppercase px-4 py-3">User</th>
                <th className="text-left text-xs font-semibold text-gray-400 uppercase px-4 py-3">Tier</th>
                <th className="text-right text-xs font-semibold text-gray-400 uppercase px-4 py-3">Volume</th>
                <th className="text-center text-xs font-semibold text-gray-400 uppercase px-4 py-3">Referrals</th>
                <th className="text-center text-xs font-semibold text-gray-400 uppercase px-4 py-3">Status</th>
                <th className="text-left text-xs font-semibold text-gray-400 uppercase px-4 py-3">Joined</th>
                <th className="text-center text-xs font-semibold text-gray-400 uppercase px-4 py-3">Actions</th>
              </tr>
            </thead>
            <tbody>
              {users.map((user) => (
                <tr key={user.id} className="border-b border-white/5 hover:bg-white/5">
                  <td className="px-4 py-3">
                    <div>
                      <p className="text-sm font-medium">{user.username}</p>
                      <p className="text-xs text-gray-500 font-mono">{user.address}</p>
                    </div>
                  </td>
                  <td className="px-4 py-3">
                    <span className={`px-2 py-1 rounded text-xs font-medium ${
                      user.tier === "Diamond" ? "bg-cyan-500/20 text-cyan-400" :
                      user.tier === "Platinum" ? "bg-gray-400/20 text-gray-300" :
                      user.tier === "Gold" ? "bg-yellow-500/20 text-yellow-400" :
                      "bg-gray-500/20 text-gray-400"
                    }`}>
                      {user.tier}
                    </span>
                  </td>
                  <td className="px-4 py-3 text-right text-sm text-[#F7931A]">{user.totalVolume}</td>
                  <td className="px-4 py-3 text-center text-sm">{user.referrals}</td>
                  <td className="px-4 py-3 text-center">
                    <span className={`px-2 py-1 rounded text-xs font-medium ${
                      user.status === "Active" ? "bg-emerald-500/20 text-emerald-400" : "bg-red-500/20 text-red-400"
                    }`}>
                      {user.status}
                    </span>
                  </td>
                  <td className="px-4 py-3 text-sm text-gray-400">{user.joined}</td>
                  <td className="px-4 py-3">
                    <div className="flex items-center justify-center gap-1">
                      <button className="p-1.5 hover:bg-white/10 rounded"><Eye className="w-4 h-4 text-gray-400" /></button>
                      <button className="p-1.5 hover:bg-white/10 rounded"><Ban className="w-4 h-4 text-gray-400" /></button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </Suspense>
  )
}
[V0_FILE]typescriptreact:file="app/admin/vaults/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import {
  Plus,
  Search,
  Edit2,
  Trash2,
  ToggleLeft,
  ToggleRight,
  X,
  Save,
} from "lucide-react"
import { useSearchParams } from "next/navigation"

const initialVaults = [
  { id: 1, name: "USDB/WBTC", type: "LP Pool", apy: 35.2, tvl: "$45.2M", fee: 0.3, status: "active" },
  { id: 2, name: "USDB/USDT", type: "Stable Pool", apy: 8.5, tvl: "$52.8M", fee: 0.05, status: "active" },
  { id: 3, name: "USDB/ETH", type: "LP Pool", apy: 28.5, tvl: "$32.1M", fee: 0.3, status: "active" },
  { id: 4, name: "USDB/USDC", type: "Stable Pool", apy: 12.8, tvl: "$28.5M", fee: 0.05, status: "active" },
  { id: 5, name: "963X/USDB", type: "Farm", apy: 55.4, tvl: "$5.1M", fee: 0.5, status: "active" },
  { id: 6, name: "963X/USDT", type: "Farm", apy: 48.6, tvl: "$3.8M", fee: 0.5, status: "active" },
  { id: 7, name: "USDT/USDC", type: "Stable Pool", apy: 6.2, tvl: "$85.4M", fee: 0.01, status: "active" },
  { id: 8, name: "btBTC/USDB", type: "Babylon Vault", apy: 42.1, tvl: "$12.8M", fee: 0.3, status: "active" },
]

const vaultTypes = ["LP Pool", "Stable Pool", "Farm", "Babylon Vault", "Lombard Vault", "Pendle", "Optimizer", "Curve"]

type Vault = typeof initialVaults[0]

export default function AdminVaults() {
  const searchParams = useSearchParams()
  const [vaults, setVaults] = useState(initialVaults)
  const [searchQuery, setSearchQuery] = useState("")
  const [showModal, setShowModal] = useState(false)
  const [editingVault, setEditingVault] = useState<Vault | null>(null)
  const [formData, setFormData] = useState({
    name: "",
    type: "LP Pool",
    apy: 10,
    fee: 0.3,
  })

const filteredVaults = vaults.filter((vault) =>
    vault.name.toLowerCase().includes(searchQuery.toLowerCase())
  )

const handleAddNew = () => {
    setEditingVault(null)
    setFormData({ name: "", type: "LP Pool", apy: 10, fee: 0.3 })
    setShowModal(true)
  }

const handleEdit = (vault: Vault) => {
    setEditingVault(vault)
    setFormData({ name: vault.name, type: vault.type, apy: vault.apy, fee: vault.fee })
    setShowModal(true)
  }

const handleSave = () => {
    if (editingVault) {
      setVaults(vaults.map((v) =>
        v.id === editingVault.id ? { ...v, ...formData } : v
      ))
    } else {
      setVaults([...vaults, { id: Date.now(), ...formData, tvl: "$0", status: "active" }])
    }
    setShowModal(false)
  }

const handleToggleStatus = (id: number) => {
    setVaults(vaults.map((v) =>
      v.id === id ? { ...v, status: v.status === "active" ? "paused" : "active" } : v
    ))
  }

const handleDelete = (id: number) => {
    if (confirm("Are you sure you want to delete this vault?")) {
      setVaults(vaults.filter((v) => v.id !== id))
    }
  }

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold">Vaults & Yield Management</h1>
          <p className="text-gray-400 text-sm">Manage liquidity pools, farms, and yield strategies</p>
        </div>
        <Button onClick={handleAddNew} className="bg-[#F7931A] hover:bg-[#E8850C] text-black">
          <Plus className="w-4 h-4 mr-2" />
          Add Vault
        </Button>
      </div>

<div className="relative max-w-sm">
        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
        <input
          type="text"
          placeholder="Search vaults..."
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          className="w-full bg-[#12121a] border border-white/10 rounded-lg pl-10 pr-4 py-2 text-sm text-white placeholder-gray-500 focus:outline-none focus:border-[#F7931A]/50"
        />
      </div>

<div className="bg-[#12121a] border border-white/10 rounded-xl overflow-hidden">
        <table className="w-full">
          <thead>
            <tr className="border-b border-white/10">
              <th className="text-left text-xs font-semibold text-gray-400 uppercase px-4 py-3">Name</th>
              <th className="text-left text-xs font-semibold text-gray-400 uppercase px-4 py-3">Type</th>
              <th className="text-left text-xs font-semibold text-gray-400 uppercase px-4 py-3">APY</th>
              <th className="text-left text-xs font-semibold text-gray-400 uppercase px-4 py-3">TVL</th>
              <th className="text-left text-xs font-semibold text-gray-400 uppercase px-4 py-3">Fee</th>
              <th className="text-left text-xs font-semibold text-gray-400 uppercase px-4 py-3">Status</th>
              <th className="text-right text-xs font-semibold text-gray-400 uppercase px-4 py-3">Actions</th>
            </tr>
          </thead>
          <tbody>
            {filteredVaults.map((vault) => (
              <tr key={vault.id} className="border-b border-white/5 hover:bg-white/5">
                <td className="px-4 py-4 font-medium">{vault.name}</td>
                <td className="px-4 py-4">
                  <span className="px-2 py-1 rounded-full text-xs bg-[#F7931A]/20 text-[#F7931A]">
                    {vault.type}
                  </span>
                </td>
                <td className="px-4 py-4 text-emerald-400">{vault.apy}%</td>
                <td className="px-4 py-4">{vault.tvl}</td>
                <td className="px-4 py-4">{vault.fee}%</td>
                <td className="px-4 py-4">
                  <span className={`px-2 py-1 rounded-full text-xs font-medium ${
                    vault.status === "active" ? "bg-emerald-500/20 text-emerald-400" : "bg-gray-500/20 text-gray-400"
                  }`}>
                    {vault.status}
                  </span>
                </td>
                <td className="px-4 py-4">
                  <div className="flex items-center justify-end gap-2">
                    <button onClick={() => handleToggleStatus(vault.id)} className="p-2 rounded-lg hover:bg-white/10">
                      {vault.status === "active" ? (
                        <ToggleRight className="w-4 h-4 text-emerald-400" />
                      ) : (
                        <ToggleLeft className="w-4 h-4 text-gray-400" />
                      )}
                    </button>
                    <button onClick={() => handleEdit(vault)} className="p-2 rounded-lg hover:bg-white/10">
                      <Edit2 className="w-4 h-4 text-gray-400" />
                    </button>
                    <button onClick={() => handleDelete(vault.id)} className="p-2 rounded-lg hover:bg-white/10">
                      <Trash2 className="w-4 h-4 text-red-400" />
                    </button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

{showModal && (
        <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4">
          <div className="bg-[#12121a] border border-white/10 rounded-2xl w-full max-w-md">
            <div className="flex items-center justify-between p-5 border-b border-white/10">
              <h2 className="text-lg font-semibold">{editingVault ? "Edit Vault" : "Add Vault"}</h2>
              <button onClick={() => setShowModal(false)} className="text-gray-400 hover:text-white">
                <X className="w-5 h-5" />
              </button>
            </div>
            <div className="p-5 space-y-4">
              <div>
                <label className="block text-sm text-gray-400 mb-1">Vault Name (Pair)</label>
                <input
                  type="text"
                  value={formData.name}
                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                  className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-white"
                  placeholder="TOKEN1/TOKEN2"
                />
              </div>
              <div>
                <label className="block text-sm text-gray-400 mb-1">Type</label>
                <select
                  value={formData.type}
                  onChange={(e) => setFormData({ ...formData, type: e.target.value })}
                  className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-white"
                >
                  {vaultTypes.map((type) => (
                    <option key={type} value={type}>{type}</option>
                  ))}
                </select>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm text-gray-400 mb-1">APY (%)</label>
                  <input
                    type="number"
                    step="0.1"
                    value={formData.apy}
                    onChange={(e) => setFormData({ ...formData, apy: Number(e.target.value) })}
                    className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-white"
                  />
                </div>
                <div>
                  <label className="block text-sm text-gray-400 mb-1">Fee (%)</label>
                  <input
                    type="number"
                    step="0.01"
                    value={formData.fee}
                    onChange={(e) => setFormData({ ...formData, fee: Number(e.target.value) })}
                    className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-3 py-2 text-white"
                  />
                </div>
              </div>
            </div>
            <div className="flex justify-end gap-3 p-5 border-t border-white/10">
              <Button variant="outline" onClick={() => setShowModal(false)} className="bg-transparent">Cancel</Button>
              <Button onClick={handleSave} className="bg-[#F7931A] hover:bg-[#E8850C] text-black">
                <Save className="w-4 h-4 mr-2" />{editingVault ? "Update" : "Create"}
              </Button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/terms/page.tsx" isMerged="true"
import Link from "next/link"
import { SunBitLogo } from "@/components/ui/sunbit-logo"
import { ArrowLeft } from "lucide-react"

export default function TermsPage() {
  return (
    <div className="min-h-screen bg-[#0a0a0f] text-white">
      {/* Header */}
      <header className="fixed top-0 left-0 right-0 z-50 bg-[#0a0a0f]/90 backdrop-blur-md border-b border-white/5">
        <div className="max-w-4xl mx-auto px-6 py-4 flex items-center gap-4">
          <Link href="/" className="flex items-center gap-2 text-gray-400 hover:text-white transition-colors">
            <ArrowLeft className="w-5 h-5" />
            <span>Back</span>
          </Link>
          <div className="flex-1" />
          <SunBitLogo height={28} />
        </div>
      </header>

{/* Content */}
      <main className="pt-24 pb-16 px-6">
        <div className="max-w-4xl mx-auto">
          <h1 className="text-4xl font-bold mb-2">Terms of Use</h1>
          <p className="text-gray-400 mb-8">Last updated: January 15, 2026</p>

<div className="prose prose-invert prose-lg max-w-none">
            <section className="mb-8">
              <h2 className="text-2xl font-semibold mb-4 text-[#F7931A]">1. Acceptance of Terms</h2>
              <p className="text-gray-300 leading-relaxed">
                By accessing or using 963X platform, you agree to be bound by these Terms of Use. If you do not agree
                to these terms, please do not use our services. 963X reserves the right to modify these terms at any
                time, and your continued use of the platform constitutes acceptance of any changes.
              </p>
            </section>

<section className="mb-8">
              <h2 className="text-2xl font-semibold mb-4 text-[#F7931A]">2. Eligibility</h2>
              <p className="text-gray-300 leading-relaxed">
                You must be at least 18 years old and have the legal capacity to enter into a binding agreement to use
                963X. By using our services, you represent that you meet these requirements and that you are not
                prohibited from using cryptocurrency services under applicable laws in your jurisdiction.
              </p>
            </section>

<section className="mb-8">
              <h2 className="text-2xl font-semibold mb-4 text-[#F7931A]">3. Services Description</h2>
              <p className="text-gray-300 leading-relaxed mb-4">
                963X provides a Bitcoin-native DeFi ecosystem that includes:
              </p>
              <ul className="list-disc list-inside text-gray-300 space-y-2">
                <li>PerpDEX - Perpetual trading with leverage up to 100x</li>
                <li>Lending & Borrowing - Collateralized lending services</li>
                <li>Yield Vaults - AI-optimized yield strategies</li>
                <li>Liquid Staking - BTC staking with liquid derivatives</li>
                <li>AI Trading Bots - Automated trading solutions</li>
                <li>FAI Token - Platform governance and utility token</li>
              </ul>
            </section>

<section className="mb-8">
              <h2 className="text-2xl font-semibold mb-4 text-[#F7931A]">4. Risk Disclosure</h2>
              <p className="text-gray-300 leading-relaxed">
                Trading cryptocurrencies and using DeFi protocols involves substantial risk of loss. You acknowledge
                that: (a) cryptocurrency prices are highly volatile; (b) leverage trading can result in losses exceeding
                your initial investment; (c) smart contracts may contain bugs or vulnerabilities; (d) regulatory changes
                may affect the availability of services. You should only invest funds you can afford to lose.
              </p>
            </section>

<section className="mb-8">
              <h2 className="text-2xl font-semibold mb-4 text-[#F7931A]">5. User Responsibilities</h2>
              <p className="text-gray-300 leading-relaxed">
                You are responsible for: (a) maintaining the security of your wallet and private keys; (b) all
                activities conducted through your account; (c) complying with applicable laws and regulations; (d)
                paying any applicable taxes on your transactions. 963X is not responsible for any losses resulting
                from unauthorized access to your wallet.
              </p>
            </section>

<section className="mb-8">
              <h2 className="text-2xl font-semibold mb-4 text-[#F7931A]">6. Prohibited Activities</h2>
              <p className="text-gray-300 leading-relaxed mb-4">You agree not to:</p>
              <ul className="list-disc list-inside text-gray-300 space-y-2">
                <li>Use the platform for money laundering or terrorist financing</li>
                <li>Manipulate markets or engage in fraudulent trading</li>
                <li>Circumvent any security measures or access restrictions</li>
                <li>Use bots or automated systems in unauthorized ways</li>
                <li>Violate any applicable laws or regulations</li>
              </ul>
            </section>

<section className="mb-8">
              <h2 className="text-2xl font-semibold mb-4 text-[#F7931A]">7. Limitation of Liability</h2>
              <p className="text-gray-300 leading-relaxed">
                To the maximum extent permitted by law, 963X shall not be liable for any indirect, incidental,
                special, consequential, or punitive damages, including loss of profits, data, or other intangible
                losses, resulting from your use of or inability to use the platform.
              </p>
            </section>

<section className="mb-8">
              <h2 className="text-2xl font-semibold mb-4 text-[#F7931A]">8. Contact Information</h2>
              <p className="text-gray-300 leading-relaxed">
                For questions about these Terms of Use, please contact us at legal@963x.xyz or through our official
                Discord and Telegram channels.
              </p>
            </section>
          </div>
        </div>
      </main>

{/* Footer */}
      <footer className="border-t border-white/5 py-8 px-6">
        <div className="max-w-4xl mx-auto flex items-center justify-between">
          <SunBitLogo height={24} />
          <div className="flex items-center gap-6 text-sm text-gray-500">
            <Link href="/terms" className="text-[#F7931A]">
              Terms of Use
            </Link>
            <Link href="/privacy" className="hover:text-white transition-colors">
              Privacy Policy
            </Link>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/app/agents/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import {
  Bot,
  MessageSquare,
  Target,
  Cpu,
  Shield,
  ShieldCheck,
  Lock,
  Zap,
  Clock,
  Gauge,
  Blocks,
  Wallet,
  ArrowRight,
  Check,
  ChevronDown,
  ChevronUp,
  Activity,
  BarChart3,
  Globe,
  Layers,
  Server,
  Database,
  Eye,
  AlertTriangle,
  RefreshCw,
} from "lucide-react"
import { cn } from "@/lib/utils"

// ── Subscription Plans ──
const plans = [
  {
    tier: "Free",
    price: "$0",
    period: "",
    calls: "7 calls / day",
    accent: "text-gray-400",
    border: "border-white/10",
    bg: "bg-white/[0.02]",
    features: [
      "Chat mode only (Q&A)",
      "Market data & simulation",
      "Response caching (<100ms)",
      "No wallet required",
      "Basic market queries",
    ],
  },
  {
    tier: "Pro",
    price: "$20",
    period: "/mo",
    calls: "300 calls / month",
    accent: "text-purple-400",
    border: "border-purple-500/20",
    bg: "bg-purple-500/[0.03]",
    popular: true,
    features: [
      "Auto-execution within limits",
      "Priority queue (<100ms)",
      "Advanced market data",
      "Lower swap fees",
      "Basic advanced orders",
      "Limit, Stop-Loss, Take-Profit",
    ],
  },
  {
    tier: "Developer",
    price: "$99",
    period: "/mo",
    calls: "1,000 API calls / month",
    accent: "text-[#F7931A]",
    border: "border-[#F7931A]/20",
    bg: "bg-[#F7931A]/[0.03]",
    features: [
      "Full REST API access",
      "Webhook notifications",
      "SLA guarantee (200ms)",
      "CEX integration (Binance, OKX, Bybit)",
      "All advanced order types",
      "Bot / trading agent support",
    ],
  },
  {
    tier: "Institutional",
    price: "$999",
    period: "/mo",
    calls: "Unlimited",
    accent: "text-[#00E0C6]",
    border: "border-[#00E0C6]/20",
    bg: "bg-[#00E0C6]/[0.03]",
    features: [
      "Dedicated instance",
      "Custom SLA (50ms)",
      "24/7 priority support",
      "White-label option",
      "Multi-user accounts",
      "Custom integrations",
    ],
  },
]

// ── FAQ ──
const faqs = [
  {
    q: "Does FAI hold my private keys?",
    a: "No. FAI is 100% non-custodial. Your private keys never leave your wallet. AI prepares transaction data, but you sign every transaction. If the AI is compromised, the blast radius is 0-5% based on your permission settings.",
  },
  {
    q: "What is the difference between Chat mode and Agent mode?",
    a: "Chat mode is free Q&A -- ask market questions, simulate trades, get portfolio analysis. No execution happens. Agent mode (paid) can actually execute trades, place orders, and manage positions within the risk limits you define.",
  },
  {
    q: "Which exchanges are supported?",
    a: "DEX: Smart routing across multiple decentralized exchanges. CEX: Binance, OKX, and Bybit with full spot trading, advanced orders, and best-price aggregation across all three.",
  },
  {
    q: "What happens if the AI makes a bad trade?",
    a: "Four security layers protect you: static rules (gas limits, rate limiting), dynamic risk (volatility-based reductions), behavioral analysis (anomaly detection at 3x standard deviation), and a circuit breaker that halts the system on systemic risk. You also set hard limits on max trade size and daily volume.",
  },
  {
    q: "Can I cancel my subscription anytime?",
    a: "Yes. Subscriptions are managed via Stripe. You can cancel anytime and retain access until the end of your billing period. No lock-in contracts.",
  },
]

export default function AgentsPage() {
  const [openFaq, setOpenFaq] = useState<number | null>(null)

return (
    <div className="min-h-screen bg-[#0a0a0f] text-white">
      {/* ── Hero ── */}
      <section className="relative pt-12 pb-20 overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-b from-purple-500/5 via-transparent to-transparent" />
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[900px] h-[400px] bg-purple-500/5 rounded-full blur-[140px]" />
        <div className="relative max-w-5xl mx-auto px-6 text-center">
          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-purple-500/10 border border-purple-500/20 mb-6">
            <Bot className="w-4 h-4 text-purple-400" />
            <span className="text-sm font-medium text-purple-400">FAI Agent Marketplace</span>
            <span className="px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider bg-[#F7931A]/20 text-[#F7931A] rounded-full">Coming Q2 2026</span>
          </div>
          <h1 className="text-4xl md:text-6xl font-bold mb-5 text-balance">
            AI That Executes,{" "}
            <span className="bg-gradient-to-r from-purple-400 to-[#F7931A] bg-clip-text text-transparent">
              Not Just Speculates
            </span>
          </h1>
          <p className="text-gray-400 text-lg max-w-3xl mx-auto mb-8 leading-relaxed text-pretty">
            FAI is the execution layer that turns natural language into onchain financial actions.
            Non-custodial. Permission-based. Auditable. From simple swaps to autonomous DCA strategies,
            all under your strict risk controls.
          </p>
          <div className="flex items-center justify-center gap-4">
            <Link href="/app/trade">
              <button className="px-6 py-3 bg-[#F7931A] hover:bg-[#E8850C] text-black font-semibold rounded-lg transition-colors flex items-center gap-2">
                Trade Now <ArrowRight className="w-4 h-4" />
              </button>
            </Link>
            <a href="#pricing">
              <button className="px-6 py-3 bg-white/5 hover:bg-white/10 text-white font-medium rounded-lg border border-white/10 transition-colors">
                View Pricing
              </button>
            </a>
          </div>
        </div>
      </section>

{/* ── How it Works - User Flow ── */}
      <section className="py-20 border-t border-white/5">
        <div className="max-w-5xl mx-auto px-6">
          <div className="text-center mb-14">
            <h2 className="text-3xl font-bold mb-3">How It Works</h2>
            <p className="text-gray-500">Natural language to onchain execution in 4 steps</p>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            {[
              { step: "01", title: "Connect Wallet", desc: "Link wallet, set permissions and risk limits via iOS-style grants", icon: Wallet, color: "text-purple-400", bg: "bg-purple-500/10" },
              { step: "02", title: "Chat with AI", desc: "\"Swap 20% of my BTC to USDB when funding goes negative\"", icon: MessageSquare, color: "text-[#F7931A]", bg: "bg-[#F7931A]/10" },
              { step: "03", title: "Review & Sign", desc: "AI simulates the action with slippage and fee preview. You approve.", icon: Eye, color: "text-cyan-400", bg: "bg-cyan-500/10" },
              { step: "04", title: "Agent Executes", desc: "Onchain execution with real-time monitoring and risk controls", icon: Cpu, color: "text-[#00E0C6]", bg: "bg-[#00E0C6]/10" },
            ].map((s) => (
              <div key={s.step} className="text-center group">
                <div className={cn("w-16 h-16 mx-auto rounded-2xl flex items-center justify-center mb-5 transition-colors", s.bg, "group-hover:scale-105 transition-transform")}>
                  <s.icon className={cn("w-7 h-7", s.color)} />
                </div>
                <div className={cn("text-xs font-bold mb-1.5 uppercase tracking-wider", s.color)}>Step {s.step}</div>
                <div className="text-sm font-semibold mb-2">{s.title}</div>
                <p className="text-xs text-gray-500 leading-relaxed">{s.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

{/* ── 3 Execution Modes ── */}
      <section className="py-20 bg-[#0d0d12] border-t border-white/5">
        <div className="max-w-5xl mx-auto px-6">
          <div className="text-center mb-14">
            <h2 className="text-3xl font-bold mb-3">Execution Modes</h2>
            <p className="text-gray-500">Choose your level of AI autonomy</p>
          </div>
          <div className="grid md:grid-cols-3 gap-6">
            {/* Chat Mode */}
            <div className="bg-[#12121a] rounded-2xl p-7 border border-purple-500/10 hover:border-purple-500/30 transition-all">
              <div className="w-12 h-12 rounded-xl bg-purple-500/10 flex items-center justify-center mb-5">
                <MessageSquare className="w-6 h-6 text-purple-400" />
              </div>
              <div className="text-xs font-bold text-purple-400 uppercase tracking-wider mb-1">Mode 01</div>
              <h3 className="text-lg font-bold mb-3">Chat Mode</h3>
              <p className="text-sm text-gray-400 leading-relaxed mb-5">
                Ask anything in natural language. Get market data, portfolio analysis, and trade simulations. No execution.
              </p>
              <div className="space-y-2.5 text-xs text-gray-500">
                <div className="flex items-center gap-2"><Check className="w-3.5 h-3.5 text-purple-400/70 shrink-0" /> 7 free queries per day</div>
                <div className="flex items-center gap-2"><Check className="w-3.5 h-3.5 text-purple-400/70 shrink-0" /> Response caching ({'<'}100ms)</div>
                <div className="flex items-center gap-2"><Check className="w-3.5 h-3.5 text-purple-400/70 shrink-0" /> No wallet connection needed</div>
                <div className="flex items-center gap-2"><Check className="w-3.5 h-3.5 text-purple-400/70 shrink-0" /> Intent routing (60% skip LLM)</div>
              </div>
              <div className="mt-5 pt-4 border-t border-white/5">
                <span className="text-xs text-purple-400 font-medium">Free forever</span>
              </div>
            </div>

{/* Assisted Execution */}
            <div className="bg-[#12121a] rounded-2xl p-7 border border-[#F7931A]/10 hover:border-[#F7931A]/30 transition-all">
              <div className="w-12 h-12 rounded-xl bg-[#F7931A]/10 flex items-center justify-center mb-5">
                <Target className="w-6 h-6 text-[#F7931A]" />
              </div>
              <div className="text-xs font-bold text-[#F7931A] uppercase tracking-wider mb-1">Mode 02</div>
              <h3 className="text-lg font-bold mb-3">Assisted Execution</h3>
              <p className="text-sm text-gray-400 leading-relaxed mb-5">
                AI parses your intent, simulates the trade, and prepares the transaction. You review and sign every action.
              </p>
              <div className="space-y-2.5 text-xs text-gray-500">
                <div className="flex items-center gap-2"><Check className="w-3.5 h-3.5 text-[#F7931A]/70 shrink-0" /> Quote + Simulate + Prepare TX</div>
                <div className="flex items-center gap-2"><Check className="w-3.5 h-3.5 text-[#F7931A]/70 shrink-0" /> User signs every transaction</div>
                <div className="flex items-center gap-2"><Check className="w-3.5 h-3.5 text-[#F7931A]/70 shrink-0" /> Slippage & fee preview</div>
                <div className="flex items-center gap-2"><Check className="w-3.5 h-3.5 text-[#F7931A]/70 shrink-0" /> Advanced order types</div>
              </div>
              <div className="mt-5 pt-4 border-t border-white/5">
                <span className="text-xs text-[#F7931A] font-medium">From $20/mo</span>
              </div>
            </div>

{/* Autonomous Agent */}
            <div className="bg-[#12121a] rounded-2xl p-7 border border-emerald-500/10 hover:border-emerald-500/30 transition-all">
              <div className="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-5">
                <Cpu className="w-6 h-6 text-[#00E0C6]" />
              </div>
              <div className="text-xs font-bold text-[#00E0C6] uppercase tracking-wider mb-1">Mode 03</div>
              <h3 className="text-lg font-bold mb-3">Autonomous Agent</h3>
              <p className="text-sm text-gray-400 leading-relaxed mb-5">
                AI executes within your defined parameters: max trade size, daily volume, slippage limits, and action whitelist.
              </p>
              <div className="space-y-2.5 text-xs text-gray-500">
                <div className="flex items-center gap-2"><Check className="w-3.5 h-3.5 text-[#00E0C6]/70 shrink-0" /> Limit, Stop-Loss, DCA, Trailing</div>
                <div className="flex items-center gap-2"><Check className="w-3.5 h-3.5 text-emerald-400/70 shrink-0" /> iOS-style permission grants</div>
                <div className="flex items-center gap-2"><Check className="w-3.5 h-3.5 text-emerald-400/70 shrink-0" /> 0-5% blast radius if compromised</div>
                <div className="flex items-center gap-2"><Check className="w-3.5 h-3.5 text-emerald-400/70 shrink-0" /> CEX aggregation (best price)</div>
              </div>
              <div className="mt-5 pt-4 border-t border-white/5">
                <span className="text-xs text-emerald-400 font-medium">From $99/mo</span>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* ── Core Modules ── */}
      <section className="py-20 border-t border-white/5">
        <div className="max-w-5xl mx-auto px-6">
          <div className="text-center mb-14">
            <h2 className="text-3xl font-bold mb-3">Architecture</h2>
            <p className="text-gray-500">Four production-ready modules powering FAI v4</p>
          </div>
          <div className="grid md:grid-cols-2 gap-6">
            {/* Intent Engine */}
            <div className="bg-[#12121a] rounded-2xl p-7 border border-white/5">
              <div className="flex items-center gap-3 mb-5">
                <div className="w-10 h-10 rounded-lg bg-purple-500/10 flex items-center justify-center">
                  <MessageSquare className="w-5 h-5 text-purple-400" />
                </div>
                <div>
                  <h3 className="text-base font-bold">Intent Engine</h3>
                  <p className="text-xs text-gray-500">Qwen 2.5 3B NLP</p>
                </div>
              </div>
              <div className="space-y-2.5">
                {[
                  "Natural language to structured intent",
                  "7 intent types: BUY, SELL, SWAP, QUERY, SIMULATE, PORTFOLIO, SCHEDULE",
                  "Confidence scoring (0-1) per intent",
                  "60% requests handled rule-based (no LLM cost)",
                  "60% cache hit rate on common queries",
                ].map((f, i) => (
                  <div key={i} className="flex items-start gap-2.5 text-xs text-gray-400">
                    <Check className="w-3.5 h-3.5 text-purple-400/50 shrink-0 mt-0.5" />
                    <span>{f}</span>
                  </div>
                ))}
              </div>
            </div>

{/* Risk & Policy */}
            <div className="bg-[#12121a] rounded-2xl p-7 border border-white/5">
              <div className="flex items-center gap-3 mb-5">
                <div className="w-10 h-10 rounded-lg bg-red-500/10 flex items-center justify-center">
                  <Shield className="w-5 h-5 text-red-400" />
                </div>
                <div>
                  <h3 className="text-base font-bold">Risk & Policy Engine</h3>
                  <p className="text-xs text-gray-500">4-Layer Defense</p>
                </div>
              </div>
              <div className="space-y-2">
                {[
                  { label: "Static Rules", desc: "Gas limits, rate limiting, failure thresholds", color: "text-red-400" },
                  { label: "Dynamic Risk", desc: "Volatility-based limit reduction", color: "text-orange-400" },
                  { label: "Behavioral Analysis", desc: "Anomaly detection (3x std deviation)", color: "text-yellow-400" },
                  { label: "Circuit Breaker", desc: "System-wide halt on systemic risk", color: "text-emerald-400" },
                ].map((layer, i) => (
                  <div key={i} className="flex items-center gap-3 p-2.5 rounded-lg bg-white/[0.02]">
                    <div className={cn("text-xs font-bold w-6 h-6 rounded flex items-center justify-center bg-white/5", layer.color)}>{i + 1}</div>
                    <div>
                      <div className="text-xs font-medium text-white">{layer.label}</div>
                      <div className="text-[11px] text-gray-500">{layer.desc}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

{/* Execution Adapter */}
            <div className="bg-[#12121a] rounded-2xl p-7 border border-white/5">
              <div className="flex items-center gap-3 mb-5">
                <div className="w-10 h-10 rounded-lg bg-cyan-500/10 flex items-center justify-center">
                  <Blocks className="w-5 h-5 text-cyan-400" />
                </div>
                <div>
                  <h3 className="text-base font-bold">Execution Adapter</h3>
                  <p className="text-xs text-gray-500">DEX + CEX Multi-Venue</p>
                </div>
              </div>
              <div className="space-y-2.5 mb-5">
                {[
                  { name: "Binance", detail: "Spot, MARKET/LIMIT/STOP, HMAC-SHA256 auth" },
                  { name: "OKX", detail: "WebSocket feeds, API v5, advanced orders" },
                  { name: "Bybit", detail: "Unified account, derivatives, API v5" },
                  { name: "DEX Router", detail: "Smart routing by success rate, latency, gas" },
                ].map((v, i) => (
                  <div key={i} className="flex items-center gap-2.5 text-xs">
                    <div className="w-1.5 h-1.5 rounded-full bg-cyan-400 shrink-0" />
                    <span className="text-white font-medium">{v.name}</span>
                    <span className="text-gray-600">{v.detail}</span>
                  </div>
                ))}
              </div>
              <div className="border-t border-white/5 pt-4">
                <div className="text-[10px] font-bold text-gray-600 uppercase tracking-wider mb-2.5">Advanced Orders</div>
                <div className="flex flex-wrap gap-1.5">
                  {["Limit", "Stop-Loss", "Take-Profit", "DCA", "Trailing Stop"].map(t => (
                    <span key={t} className="px-2 py-1 text-[11px] rounded bg-white/5 text-gray-400 border border-white/5">{t}</span>
                  ))}
                </div>
              </div>
            </div>

{/* Accounting & Fee */}
            <div className="bg-[#12121a] rounded-2xl p-7 border border-white/5">
              <div className="flex items-center gap-3 mb-5">
                <div className="w-10 h-10 rounded-lg bg-emerald-500/10 flex items-center justify-center">
                  <BarChart3 className="w-5 h-5 text-emerald-400" />
                </div>
                <div>
                  <h3 className="text-base font-bold">Accounting & Fees</h3>
                  <p className="text-xs text-gray-500">Stripe + Onchain Billing</p>
                </div>
              </div>
              <div className="space-y-2.5 mb-5">
                {[
                  "3 revenue models: subscription, per-task, performance-based",
                  "Stripe checkout + auto-renewal + webhooks",
                  "Onchain billing via BillingEngine.sol",
                  "Quota management with burst rate limiting",
                ].map((f, i) => (
                  <div key={i} className="flex items-start gap-2.5 text-xs text-gray-400">
                    <Check className="w-3.5 h-3.5 text-emerald-400/50 shrink-0 mt-0.5" />
                    <span>{f}</span>
                  </div>
                ))}
              </div>
              <div className="border-t border-white/5 pt-4">
                <div className="text-[10px] font-bold text-gray-600 uppercase tracking-wider mb-2.5">Fee Distribution</div>
                <div className="grid grid-cols-2 gap-2">
                  {[
                    { label: "Node operators", pct: "92%" },
                    { label: "Protocol fee", pct: "5%" },
                    { label: "Treasury", pct: "2%" },
                    { label: "Insurance fund", pct: "1%" },
                  ].map(f => (
                    <div key={f.label} className="flex items-center justify-between text-xs p-2 rounded bg-white/[0.02]">
                      <span className="text-gray-500">{f.label}</span>
                      <span className="text-white font-medium">{f.pct}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* ── Security ── */}
      <section className="py-20 bg-[#0d0d12] border-t border-white/5">
        <div className="max-w-5xl mx-auto px-6">
          <div className="text-center mb-14">
            <h2 className="text-3xl font-bold mb-3">Security Architecture</h2>
            <p className="text-gray-500">Non-custodial by design. AI never holds your keys.</p>
          </div>
          <div className="grid md:grid-cols-3 gap-6 mb-10">
            {[
              {
                icon: Lock,
                color: "text-red-400",
                bg: "bg-red-500/10",
                title: "AbilityRegistry",
                subtitle: "618 lines Solidity",
                desc: "iOS-style permissions. Zero default access. Explicit grants for READ_MARKET, EXECUTE_TX, AUTO_EXECUTE. Time-limited and revocable.",
              },
              {
                icon: Globe,
                color: "text-cyan-400",
                bg: "bg-cyan-500/10",
                title: "ContractRegistry",
                subtitle: "545 lines Solidity",
                desc: "3-tier whitelisting: global (protocol), user-specific, and session-scoped contracts. Blacklist override for compromised addresses.",
              },
              {
                icon: ShieldCheck,
                color: "text-emerald-400",
                bg: "bg-emerald-500/10",
                title: "ExecutionGuardV4",
                subtitle: "402 lines Solidity",
                desc: "Multi-layer validation pipeline: Ability -> Policy -> Risk -> Contract Whitelist -> Execute. Blast radius: 0-5% if AI is compromised.",
              },
            ].map((card) => (
              <div key={card.title} className="bg-[#12121a] rounded-2xl p-7 border border-white/5">
                <div className={cn("w-11 h-11 rounded-xl flex items-center justify-center mb-4", card.bg)}>
                  <card.icon className={cn("w-5 h-5", card.color)} />
                </div>
                <h3 className="text-base font-bold mb-1">{card.title}</h3>
                <p className="text-[11px] text-gray-600 mb-3">{card.subtitle}</p>
                <p className="text-xs text-gray-400 leading-relaxed">{card.desc}</p>
              </div>
            ))}
          </div>
          {/* Validation pipeline */}
          <div className="bg-[#12121a] rounded-2xl p-6 border border-white/5">
            <div className="text-xs font-bold text-gray-600 uppercase tracking-wider mb-4 text-center">Execution Validation Pipeline</div>
            <div className="flex items-center justify-center gap-2 flex-wrap">
              {[
                { label: "Ability Check", color: "border-purple-500/30 text-purple-400" },
                { label: "Policy Check", color: "border-[#F7931A]/30 text-[#F7931A]" },
                { label: "Risk Check", color: "border-red-500/30 text-red-400" },
                { label: "Contract Whitelist", color: "border-cyan-500/30 text-cyan-400" },
                { label: "Execute", color: "border-emerald-500/30 text-emerald-400" },
              ].map((step, i) => (
                <div key={step.label} className="flex items-center gap-2">
                  <div className={cn("px-3 py-2 text-xs font-medium rounded-lg border bg-black/20", step.color)}>
                    {step.label}
                  </div>
                  {i < 4 && <ArrowRight className="w-3.5 h-3.5 text-gray-600" />}
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

{/* ── API Endpoints ── */}
      <section className="py-20 border-t border-white/5">
        <div className="max-w-5xl mx-auto px-6">
          <div className="text-center mb-14">
            <h2 className="text-3xl font-bold mb-3">API Reference</h2>
            <p className="text-gray-500">25+ endpoints for full programmatic access</p>
          </div>
          <div className="grid md:grid-cols-2 gap-6">
            {[
              {
                group: "Core",
                color: "text-purple-400",
                endpoints: [
                  { method: "POST", path: "/api/chat", desc: "Chat mode (Q&A)" },
                  { method: "POST", path: "/api/agent", desc: "Agent mode (Financial intent)" },
                  { method: "POST", path: "/api/quote", desc: "Get price quote" },
                  { method: "POST", path: "/api/simulate", desc: "Simulate transaction" },
                  { method: "POST", path: "/api/prepare-tx", desc: "Prepare transaction data" },
                  { method: "GET", path: "/api/status/:wallet", desc: "User status" },
                ],
              },
              {
                group: "CEX Trading",
                color: "text-cyan-400",
                endpoints: [
                  { method: "POST", path: "/api/cex/order", desc: "Place CEX order" },
                  { method: "GET", path: "/api/cex/balance/:wallet", desc: "CEX balance" },
                  { method: "GET", path: "/api/cex/price", desc: "Best CEX price" },
                ],
              },
              {
                group: "Advanced Orders",
                color: "text-[#F7931A]",
                endpoints: [
                  { method: "POST", path: "/api/orders/advanced", desc: "Create limit/stop/DCA" },
                  { method: "GET", path: "/api/orders/:orderId", desc: "Order status" },
                  { method: "DELETE", path: "/api/orders/:orderId", desc: "Cancel order" },
                  { method: "GET", path: "/api/orders/user/:wallet", desc: "User orders" },
                ],
              },
              {
                group: "Payments",
                color: "text-emerald-400",
                endpoints: [
                  { method: "POST", path: "/api/payment/checkout", desc: "Stripe checkout" },
                  { method: "GET", path: "/api/payment/subscription/:wallet", desc: "Get subscription" },
                  { method: "POST", path: "/api/payment/cancel", desc: "Cancel subscription" },
                  { method: "GET", path: "/api/payment/plans", desc: "Subscription plans" },
                ],
              },
            ].map((group) => (
              <div key={group.group} className="bg-[#12121a] rounded-2xl p-6 border border-white/5">
                <h3 className={cn("text-sm font-bold mb-4", group.color)}>{group.group}</h3>
                <div className="space-y-2">
                  {group.endpoints.map((ep) => (
                    <div key={ep.path} className="flex items-center gap-2.5 text-xs font-mono">
                      <span className={cn(
                        "px-1.5 py-0.5 rounded text-[10px] font-bold uppercase",
                        ep.method === "POST" ? "bg-emerald-500/10 text-emerald-400" :
                        ep.method === "GET" ? "bg-blue-500/10 text-blue-400" :
                        "bg-red-500/10 text-red-400"
                      )}>{ep.method}</span>
                      <span className="text-gray-300">{ep.path}</span>
                      <span className="text-gray-600 font-sans ml-auto text-right">{ep.desc}</span>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

{/* ── Pricing ── */}
      <section id="pricing" className="py-20 bg-[#0d0d12] border-t border-white/5">
        <div className="max-w-5xl mx-auto px-6">
          <div className="text-center mb-14">
            <h2 className="text-3xl font-bold mb-3">Pricing</h2>
            <p className="text-gray-500">From free chat to institutional-grade execution</p>
          </div>
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
            {plans.map((plan) => (
              <div key={plan.tier} className={cn(
                "rounded-2xl p-6 border transition-all relative",
                plan.border, plan.bg,
                "hover:scale-[1.02] hover:shadow-lg"
              )}>
                {plan.popular && (
                  <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 text-[10px] font-bold uppercase tracking-wider bg-purple-500 text-white rounded-full">Popular</div>
                )}
                <div className={cn("text-xs font-bold uppercase tracking-wider mb-2", plan.accent)}>{plan.tier}</div>
                <div className="flex items-baseline gap-0.5 mb-1">
                  <span className="text-3xl font-bold text-white">{plan.price}</span>
                  {plan.period && <span className="text-sm text-gray-500">{plan.period}</span>}
                </div>
                <div className="text-xs text-gray-600 mb-5">{plan.calls}</div>
                <ul className="space-y-2.5">
                  {plan.features.map(f => (
                    <li key={f} className="text-xs text-gray-400 flex items-start gap-2">
                      <Check className={cn("w-3.5 h-3.5 shrink-0 mt-0.5", plan.accent.replace("text-", "text-").replace("400", "400/60"))} />
                      {f}
                    </li>
                  ))}
                </ul>
                <button className={cn(
                  "w-full mt-6 py-2.5 rounded-lg text-xs font-semibold transition-colors border",
                  plan.popular
                    ? "bg-purple-500 hover:bg-purple-600 text-white border-purple-500"
                    : "bg-white/5 hover:bg-white/10 text-white border-white/10"
                )}>
                  Coming Soon
                </button>
              </div>
            ))}
          </div>
        </div>
      </section>

{/* ── Performance Stats ── */}
      <section className="py-20 border-t border-white/5">
        <div className="max-w-5xl mx-auto px-6">
          <div className="text-center mb-14">
            <h2 className="text-3xl font-bold mb-3">Performance</h2>
            <p className="text-gray-500">Optimized for speed and cost efficiency</p>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            {[
              { value: "<50ms", label: "Institutional Latency", sub: "Dedicated instance" },
              { value: "60%", label: "Cache Hit Rate", sub: "Common queries cached" },
              { value: "80%", label: "LLM Cost Saved", sub: "Intent routing + cache" },
              { value: "10K", label: "Concurrent Tasks", sub: "Auto-scaling capacity" },
            ].map(s => (
              <div key={s.label} className="bg-[#12121a] rounded-xl p-6 border border-white/5 text-center">
                <div className="text-2xl font-bold text-white mb-1">{s.value}</div>
                <div className="text-xs font-medium text-gray-300 mb-1">{s.label}</div>
                <div className="text-[11px] text-gray-600">{s.sub}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

{/* ── Infrastructure ── */}
      <section className="py-20 bg-[#0d0d12] border-t border-white/5">
        <div className="max-w-5xl mx-auto px-6">
          <div className="text-center mb-14">
            <h2 className="text-3xl font-bold mb-3">Infrastructure</h2>
            <p className="text-gray-500">Production-grade stack from backend to blockchain</p>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
            {[
              { icon: Server, label: "Express.js API", desc: "RESTful + WebSocket" },
              { icon: Database, label: "PostgreSQL", desc: "Persistent storage" },
              { icon: Zap, label: "Redis Cache", desc: "Response caching" },
              { icon: Layers, label: "Kubernetes", desc: "Auto-scaling deployment" },
              { icon: Activity, label: "Prometheus", desc: "Monitoring + Grafana" },
              { icon: RefreshCw, label: "Multi-Chain", desc: "Hardhat + Ethers.js v6" },
            ].map(item => (
              <div key={item.label} className="flex items-center gap-3 p-4 rounded-xl bg-[#12121a] border border-white/5">
                <div className="w-9 h-9 rounded-lg bg-white/5 flex items-center justify-center shrink-0">
                  <item.icon className="w-4 h-4 text-gray-400" />
                </div>
                <div>
                  <div className="text-sm font-medium text-white">{item.label}</div>
                  <div className="text-[11px] text-gray-500">{item.desc}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

{/* ── Treasury Distribution ── */}
      <section className="py-20 border-t border-white/5">
        <div className="max-w-5xl mx-auto px-6">
          <div className="text-center mb-14">
            <h2 className="text-3xl font-bold mb-3">Treasury Allocation</h2>
            <p className="text-gray-500">Transparent fee distribution via TreasuryManager.sol</p>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
            {[
              { pct: "30%", label: "veX963 Holders", color: "text-purple-400", bg: "bg-purple-500/10" },
              { pct: "25%", label: "Protocol Liquidity", color: "text-cyan-400", bg: "bg-cyan-500/10" },
              { pct: "20%", label: "Buyback & Burn", color: "text-[#F7931A]", bg: "bg-[#F7931A]/10" },
              { pct: "15%", label: "Community", color: "text-emerald-400", bg: "bg-emerald-500/10" },
              { pct: "10%", label: "Operations", color: "text-gray-400", bg: "bg-white/5" },
            ].map(item => (
              <div key={item.label} className={cn("rounded-xl p-5 text-center border border-white/5", item.bg)}>
                <div className={cn("text-2xl font-bold mb-1", item.color)}>{item.pct}</div>
                <div className="text-xs text-gray-400">{item.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

{/* ── FAQ ── */}
      <section className="py-20 bg-[#0d0d12] border-t border-white/5">
        <div className="max-w-3xl mx-auto px-6">
          <div className="text-center mb-14">
            <h2 className="text-3xl font-bold mb-3">FAQ</h2>
          </div>
          <div className="space-y-3">
            {faqs.map((faq, i) => (
              <div key={i} className="bg-[#12121a] rounded-xl border border-white/5 overflow-hidden">
                <button
                  onClick={() => setOpenFaq(openFaq === i ? null : i)}
                  className="w-full flex items-center justify-between p-5 text-left"
                >
                  <span className="text-sm font-medium text-white pr-4">{faq.q}</span>
                  {openFaq === i ? (
                    <ChevronUp className="w-4 h-4 text-gray-500 shrink-0" />
                  ) : (
                    <ChevronDown className="w-4 h-4 text-gray-500 shrink-0" />
                  )}
                </button>
                {openFaq === i && (
                  <div className="px-5 pb-5 pt-0">
                    <p className="text-sm text-gray-400 leading-relaxed">{faq.a}</p>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

{/* ── Bottom CTA ── */}
      <section className="py-20 border-t border-white/5">
        <div className="max-w-3xl mx-auto px-6 text-center">
          <div className="inline-flex items-center gap-3 px-5 py-2.5 rounded-full bg-purple-500/10 border border-purple-500/20 mb-6">
            <div className="w-2 h-2 rounded-full bg-purple-400 animate-pulse" />
            <span className="text-sm font-medium text-purple-300">Under active development</span>
          </div>
          <h2 className="text-3xl font-bold mb-4 text-balance">
            Ready to let AI execute for you?
          </h2>
          <p className="text-gray-400 mb-8">
            FAI Agent Marketplace launches Q2 2026. Start trading manually today.
          </p>
          <Link href="/app/trade">
            <button className="px-8 py-3.5 bg-[#F7931A] hover:bg-[#E8850C] text-black font-semibold rounded-lg transition-colors text-sm flex items-center gap-2 mx-auto">
              Launch Trade <ArrowRight className="w-4 h-4" />
            </button>
          </Link>
        </div>
      </section>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/architecture/layout.tsx" isMerged="true"
import type { Metadata } from "next"

export const metadata: Metadata = {
  title: "963x Architecture | The 963x Stack",
  description: "Bitcoin-backed capital executed at machine speed. Explore the 5-layer architecture: Capital, Execution, Agent, Governance, and Integration.",
}

export default function ArchitectureLayout({ children }: { children: React.ReactNode }) {
  return children
}
[V0_FILE]jpg:file="public/assets/3d/texture_mars.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/assets/3d/texture_mars-EyjXyPvAwS2XHaTP8SRszaqXHijpId.jpg" isMerged="true"
[V0_FILE]jpg:file="public/assets/3d/mars_color.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/assets/3d/mars_color-S03wxCgEM1lnQC3COuXTrA2O9FG36T.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="components/mars-globe.tsx" isMerged="true"
"use client"

import { useRef } from "react"
import { Canvas, useFrame, useLoader } from "@react-three/fiber"
import { TextureLoader, AdditiveBlending, BackSide, FrontSide } from "three"
import type { Mesh } from "three"

function Mars() {
  const meshRef = useRef<Mesh>(null)
  const colorMap = useLoader(TextureLoader, "/assets/3d/mars_color.jpg")

useFrame((_, delta) => {
    if (meshRef.current) {
      meshRef.current.rotation.y += delta * 0.05
    }
  })

return (
    <group>
      {/* Mars sphere */}
      <mesh ref={meshRef} rotation={[0.4, 0, 0.1]}>
        <sphereGeometry args={[2, 96, 96]} />
        <meshStandardMaterial
          map={colorMap}
          roughness={0.9}
          metalness={0.05}
        />
      </mesh>

{/* Thin atmosphere rim */}
      <mesh rotation={[0.4, 0, 0.1]}>
        <sphereGeometry args={[2.04, 64, 64]} />
        <meshBasicMaterial
          color="#f0915a"
          transparent
          opacity={0.08}
          side={FrontSide}
          depthWrite={false}
        />
      </mesh>

{/* Outer glow */}
      <mesh rotation={[0.4, 0, 0.1]}>
        <sphereGeometry args={[2.5, 48, 48]} />
        <meshBasicMaterial
          color="#d4683a"
          transparent
          opacity={0.04}
          side={BackSide}
          depthWrite={false}
          blending={AdditiveBlending}
        />
      </mesh>
    </group>
  )
}

export default function MarsGlobe() {
  return (
    <div className="w-full h-full">
      <Canvas
        camera={{ position: [0, 0, 5.2], fov: 38 }}
        gl={{
          antialias: true,
          alpha: true,
          powerPreference: "high-performance",
        }}
        style={{ background: "transparent" }}
        dpr={[1, 2]}
      >
        {/* Soft warm key light */}
        <directionalLight position={[5, 3, 4]} intensity={1.8} color="#fff5e6" />
        {/* Subtle fill */}
        <ambientLight intensity={0.15} color="#8b6040" />
        {/* Rim light from behind */}
        <directionalLight position={[-3, 1, -5]} intensity={0.4} color="#f7931a" />

<Mars />
      </Canvas>
    </div>
  )
}
[V0_FILE]jpg:file="public/images/mars-hero-backdrop.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/technological-exploration-settlement-NnQyEhYFluA5ihZWTkWeHw7N56GQMT.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="app/network/page.tsx" isMerged="true"
"use client"

import Link from "next/link"
import {
  ArrowLeft,
  ArrowRight,
  Shield,
  Layers,
  Database,
  Lock,
  Zap,
  BarChart3,
  Users,
  Coins,
  ChevronRight,
  RefreshCw,
  CheckCircle2,
  ArrowDownUp,
  Landmark,
  CircleDollarSign,
  Vote,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { SunBitLogo } from "@/components/ui/sunbit-logo"
import { useState } from "react"

// Use case data
const useCases = [
  {
    id: "trading",
    title: "Perpetual Trading Infrastructure",
    icon: BarChart3,
    color: "#F7931A",
    role: "Unified margin asset, cross-market settlement currency, collateral standard for leverage.",
    benefits: [
      "Reduced fragmentation across trading pairs",
      "Efficient capital reuse for multi-position strategies",
      "Stable collateral base eliminates reflexive risk",
    ],
  },
  {
    id: "liquidity",
    title: "Liquidity Backbone",
    icon: ArrowDownUp,
    color: "#00BCD4",
    role: "All major pairs on 963X are denominated against USDO.",
    benefits: [
      "Centralizes liquidity into deep, efficient pools",
      "Reduces slippage on large orders",
      "Simplifies LP design and capital routing",
    ],
  },
  {
    id: "validator",
    title: "Validator Capital Model",
    icon: Shield,
    color: "#22C55E",
    role: "Validators stake stable liquidity instead of volatile tokens.",
    benefits: [
      "Reduces reflexive risk in security model",
      "Stabilizes validator economics across cycles",
      "Anchors network security to real capital value",
    ],
  },
  {
    id: "institutional",
    title: "Institutional Onboarding",
    icon: Landmark,
    color: "#A855F7",
    role: "Minted against widely accepted stablecoins with transparent collateral.",
    benefits: [
      "Low entry barrier for capital allocators",
      "No exposure to volatile governance tokens required",
      "Verifiable on-chain collateral structure",
    ],
  },
]

// Economic principles
const principles = [
  { label: "Fully Collateralized", desc: "Every USDO is backed by external stablecoins held in the treasury" },
  { label: "No Governance Token Backing", desc: "Collateral is stable assets, not volatile protocol tokens" },
  { label: "No Algorithmic Expansion", desc: "Supply grows only through real deposits, never by minting" },
  { label: "Redemption-Based Peg", desc: "Peg stability through arbitrage and direct redemption" },
  { label: "On-Chain Transparency", desc: "All collateral and minting operations are verifiable on-chain" },
  { label: "Conservative Yield", desc: "Treasury yield from delta-neutral strategies, not speculation" },
]

export default function NetworkPage() {
  const [activeUseCase, setActiveUseCase] = useState("trading")
  const activeCase = useCases.find((u) => u.id === activeUseCase) || useCases[0]

return (
    <div className="min-h-screen bg-[#0a0a0f] text-white">
      {/* Nav */}
      <nav className="fixed top-0 left-0 right-0 z-50 bg-[#0a0a0f]/80 backdrop-blur-xl border-b border-white/5">
        <div className="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
          <Link href="/" className="flex items-center gap-2">
            <ArrowLeft className="w-4 h-4 text-gray-400" />
            <SunBitLogo className="h-6 w-auto" />
          </Link>
          <div className="flex items-center gap-6">
            <Link href="/architecture" className="text-sm text-gray-400 hover:text-white transition-colors">Architecture</Link>
            <span className="text-sm text-white font-medium">Network</span>
            <Link href="/app/trade">
              <Button size="sm" className="bg-[#F7931A] hover:bg-[#E8850C] text-black font-medium">
                Launch App
              </Button>
            </Link>
          </div>
        </div>
      </nav>

{/* Hero */}
      <section className="pt-32 pb-20 relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-b from-[#F7931A]/5 via-transparent to-transparent" />
        <div className="absolute top-20 left-1/2 -translate-x-1/2 w-[600px] h-[300px] bg-[#F7931A]/5 rounded-full blur-[120px]" />
        <div className="relative max-w-4xl mx-auto px-6 text-center">
          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[#F7931A]/10 border border-[#F7931A]/20 mb-8">
            <Coins className="w-4 h-4 text-[#F7931A]" />
            <span className="text-sm font-medium text-[#F7931A]">963X Network</span>
          </div>

<h1 className="text-5xl md:text-7xl font-bold mb-6 text-balance">
            <span className="text-[#F7931A]">USDO</span>
          </h1>
          <p className="text-xl md:text-2xl text-gray-300 mb-4 font-medium">
            Stable Settlement Layer for the 963X Network
          </p>
          <p className="text-gray-500 text-lg max-w-2xl mx-auto mb-8 text-pretty leading-relaxed">
            A fully-backed stable asset designed for capital efficiency, trading settlement,
            and validator-aligned liquidity.
          </p>

{/* Three pillars */}
          <div className="flex flex-wrap justify-center gap-4 mb-12">
            {[
              "No algorithmic minting",
              "No reflexive token backing",
              "Pure collateralized infrastructure",
            ].map((text) => (
              <div key={text} className="flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/5">
                <CheckCircle2 className="w-4 h-4 text-emerald-400 shrink-0" />
                <span className="text-sm text-gray-300">{text}</span>
              </div>
            ))}
          </div>

<div className="flex justify-center gap-4">
            <Link href="/app/trade">
              <Button className="bg-[#F7931A] hover:bg-[#E8850C] text-black font-semibold px-8">
                Start Trading <ArrowRight className="w-4 h-4 ml-2" />
              </Button>
            </Link>
            <Link href="/architecture">
              <Button variant="outline" className="border-white/10 text-white hover:bg-white/5 bg-transparent px-8">
                View Architecture
              </Button>
            </Link>
          </div>
        </div>
      </section>

{/* What is USDO */}
      <section className="py-24 bg-[#0d0d12]">
        <div className="max-w-7xl mx-auto px-6">
          <div className="grid lg:grid-cols-2 gap-16 items-start">
            <div>
              <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">What Is USDO?</h2>
              <p className="text-gray-400 leading-relaxed mb-6">
                USDO is a fully collateralized stable asset minted against external stablecoins
                such as USDT, USDC, and DAI. Users bridge stable assets into the 963X Network
                and mint USDO at a high capital efficiency ratio.
              </p>
              <p className="text-gray-500 leading-relaxed mb-8">
                The collateral remains secured within the treasury and can be redeemed at any time.
                USDO is infrastructure, not speculation.
              </p>

{/* Functions */}
              <div className="space-y-3">
                {[
                  { label: "Settlement", desc: "Primary settlement asset for perpetual trading" },
                  { label: "Collateral", desc: "Collateral for margin and liquidity pools" },
                  { label: "Staking", desc: "Validator staking requirement" },
                  { label: "Base Pair", desc: "Base pair for on-network liquidity" },
                ].map((fn, i) => (
                  <div key={i} className="flex items-start gap-4 p-4 rounded-xl bg-white/[0.02] border border-white/5">
                    <div className="w-8 h-8 rounded-lg bg-[#F7931A]/10 flex items-center justify-center shrink-0">
                      <span className="text-xs font-bold text-[#F7931A]">{String(i + 1).padStart(2, "0")}</span>
                    </div>
                    <div>
                      <div className="text-sm font-semibold text-white">{fn.label}</div>
                      <div className="text-xs text-gray-500">{fn.desc}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

{/* Visual: USDO flow diagram */}
            <div className="bg-[#12121a] rounded-2xl p-8 border border-white/5">
              <div className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-6">Capital Flow</div>
              <div className="space-y-4">
                {/* Step 1 */}
                <div className="p-4 rounded-xl bg-white/[0.02] border border-white/5">
                  <div className="flex items-center gap-3 mb-2">
                    <div className="w-8 h-8 rounded-full bg-blue-500/10 flex items-center justify-center">
                      <CircleDollarSign className="w-4 h-4 text-blue-400" />
                    </div>
                    <span className="text-sm font-semibold text-white">External Stablecoins</span>
                  </div>
                  <p className="text-xs text-gray-500 pl-11">USDT, USDC, DAI bridged into 963X</p>
                </div>

{/* Step 2 */}
                <div className="p-4 rounded-xl bg-[#F7931A]/5 border border-[#F7931A]/10">
                  <div className="flex items-center gap-3 mb-2">
                    <div className="w-8 h-8 rounded-full bg-[#F7931A]/10 flex items-center justify-center">
                      <RefreshCw className="w-4 h-4 text-[#F7931A]" />
                    </div>
                    <span className="text-sm font-semibold text-[#F7931A]">Minting Engine</span>
                  </div>
                  <p className="text-xs text-gray-500 pl-11">Deposit at defined LTV ratio, collateral secured in treasury</p>
                </div>

{/* Step 3 */}
                <div className="p-4 rounded-xl bg-emerald-500/5 border border-emerald-500/10">
                  <div className="flex items-center gap-3 mb-2">
                    <div className="w-8 h-8 rounded-full bg-emerald-500/10 flex items-center justify-center">
                      <Coins className="w-4 h-4 text-emerald-400" />
                    </div>
                    <span className="text-sm font-semibold text-emerald-400">USDO Minted</span>
                  </div>
                  <p className="text-xs text-gray-500 pl-11">Capital efficient, fully backed, redeemable</p>
                </div>

{/* Step 4: Usage */}
                <div className="grid grid-cols-2 gap-3">
                  {[
                    { label: "Trading Margin", icon: BarChart3, color: "text-cyan-400" },
                    { label: "PnL Settlement", icon: ArrowDownUp, color: "text-purple-400" },
                    { label: "LP Pairing", icon: Layers, color: "text-[#F7931A]" },
                    { label: "Validator Stake", icon: Shield, color: "text-emerald-400" },
                  ].map((use) => (
                    <div key={use.label} className="p-3 rounded-lg bg-white/[0.02] border border-white/5 flex items-center gap-2">
                      <use.icon className={`w-4 h-4 ${use.color} shrink-0`} />
                      <span className="text-xs text-gray-400">{use.label}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* How the Model Works */}
      <section className="py-24">
        <div className="max-w-7xl mx-auto px-6">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">How the Model Works</h2>
            <p className="text-gray-500 max-w-2xl mx-auto">
              Four interconnected mechanisms that create a sustainable settlement layer
            </p>
          </div>

<div className="grid md:grid-cols-2 gap-6">
            {/* 1. Minting */}
            <div className="bg-[#12121a] rounded-2xl p-8 border border-white/5 hover:border-[#F7931A]/20 transition-all group">
              <div className="flex items-center gap-4 mb-6">
                <div className="w-12 h-12 rounded-xl bg-[#F7931A]/10 flex items-center justify-center group-hover:bg-[#F7931A]/20 transition-colors">
                  <Coins className="w-6 h-6 text-[#F7931A]" />
                </div>
                <div>
                  <div className="text-xs font-bold text-[#F7931A] uppercase tracking-wider">Mechanism 01</div>
                  <h3 className="text-xl font-bold text-white">Minting</h3>
                </div>
              </div>
              <p className="text-gray-400 text-sm leading-relaxed mb-6">
                Users deposit external stablecoins. USDO is minted at a defined LTV ratio.
                Collateral secured in treasury.
              </p>
              <div className="space-y-2">
                {["Capital efficiency through high LTV", "On-network liquidity growth", "Verifiable backing at all times"].map((t) => (
                  <div key={t} className="flex items-center gap-2 text-xs text-gray-500">
                    <ChevronRight className="w-3.5 h-3.5 text-[#F7931A]/60 shrink-0" />{t}
                  </div>
                ))}
              </div>
            </div>

{/* 2. Settlement */}
            <div className="bg-[#12121a] rounded-2xl p-8 border border-white/5 hover:border-cyan-500/20 transition-all group">
              <div className="flex items-center gap-4 mb-6">
                <div className="w-12 h-12 rounded-xl bg-cyan-500/10 flex items-center justify-center group-hover:bg-cyan-500/20 transition-colors">
                  <ArrowDownUp className="w-6 h-6 text-cyan-400" />
                </div>
                <div>
                  <div className="text-xs font-bold text-cyan-400 uppercase tracking-wider">Mechanism 02</div>
                  <h3 className="text-xl font-bold text-white">Settlement Layer</h3>
                </div>
              </div>
              <p className="text-gray-400 text-sm leading-relaxed mb-6">
                All major flows on 963X use USDO. This standardizes liquidity across the
                entire network.
              </p>
              <div className="space-y-2">
                {["Perpetual contract margin", "PnL settlement", "Liquidity pool pairing", "Validator staking"].map((t) => (
                  <div key={t} className="flex items-center gap-2 text-xs text-gray-500">
                    <ChevronRight className="w-3.5 h-3.5 text-cyan-400/60 shrink-0" />{t}
                  </div>
                ))}
              </div>
            </div>

{/* 3. Validator Alignment */}
            <div className="bg-[#12121a] rounded-2xl p-8 border border-white/5 hover:border-emerald-500/20 transition-all group">
              <div className="flex items-center gap-4 mb-6">
                <div className="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center group-hover:bg-emerald-500/20 transition-colors">
                  <Shield className="w-6 h-6 text-emerald-400" />
                </div>
                <div>
                  <div className="text-xs font-bold text-emerald-400 uppercase tracking-wider">Mechanism 03</div>
                  <h3 className="text-xl font-bold text-white">Validator Alignment</h3>
                </div>
              </div>
              <p className="text-gray-400 text-sm leading-relaxed mb-6">
                Validators are required to stake USDO. This ensures long-term network alignment
                and economic security based on stable value.
              </p>
              <div className="space-y-2">
                {["Stable liquidity lock reduces volatility", "Economic security anchored to real capital", "Reduced circulating supply pressure"].map((t) => (
                  <div key={t} className="flex items-center gap-2 text-xs text-gray-500">
                    <ChevronRight className="w-3.5 h-3.5 text-emerald-400/60 shrink-0" />{t}
                  </div>
                ))}
              </div>
            </div>

{/* 4. Treasury Yield */}
            <div className="bg-[#12121a] rounded-2xl p-8 border border-white/5 hover:border-purple-500/20 transition-all group">
              <div className="flex items-center gap-4 mb-6">
                <div className="w-12 h-12 rounded-xl bg-purple-500/10 flex items-center justify-center group-hover:bg-purple-500/20 transition-colors">
                  <Database className="w-6 h-6 text-purple-400" />
                </div>
                <div>
                  <div className="text-xs font-bold text-purple-400 uppercase tracking-wider">Mechanism 04</div>
                  <h3 className="text-xl font-bold text-white">Treasury Yield Model</h3>
                </div>
              </div>
              <p className="text-gray-400 text-sm leading-relaxed mb-6">
                A portion of collateral is deployed into conservative, delta-neutral yield strategies.
                User collateral is not used for speculative leverage.
              </p>
              <div className="space-y-2">
                {["Validator incentive funding", "Ecosystem growth allocation", "Risk exposure remains controlled and transparent"].map((t) => (
                  <div key={t} className="flex items-center gap-2 text-xs text-gray-500">
                    <ChevronRight className="w-3.5 h-3.5 text-purple-400/60 shrink-0" />{t}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Real Business Use Cases */}
      <section className="py-24 bg-[#0d0d12]">
        <div className="max-w-7xl mx-auto px-6">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">Real Business Use Cases</h2>
            <p className="text-gray-500 max-w-2xl mx-auto">
              USDO is designed for production use, not yield farming experiments
            </p>
          </div>

<div className="grid lg:grid-cols-[280px_1fr] gap-6">
            {/* Tabs */}
            <div className="flex flex-row lg:flex-col gap-2">
              {useCases.map((uc) => (
                <button
                  key={uc.id}
                  onClick={() => setActiveUseCase(uc.id)}
                  className={`flex items-center gap-3 p-4 rounded-xl text-left transition-all w-full ${
                    activeUseCase === uc.id
                      ? "bg-white/5 border border-white/10"
                      : "bg-transparent border border-transparent hover:bg-white/[0.02]"
                  }`}
                >
                  <div
                    className="w-10 h-10 rounded-lg flex items-center justify-center shrink-0"
                    style={{ backgroundColor: `${uc.color}10` }}
                  >
                    <uc.icon className="w-5 h-5" style={{ color: uc.color }} />
                  </div>
                  <div className="hidden lg:block">
                    <div className={`text-sm font-medium ${activeUseCase === uc.id ? "text-white" : "text-gray-400"}`}>
                      {uc.title}
                    </div>
                  </div>
                </button>
              ))}
            </div>

{/* Content */}
            <div className="bg-[#12121a] rounded-2xl p-8 border border-white/5">
              <div className="flex items-center gap-4 mb-6">
                <div
                  className="w-14 h-14 rounded-xl flex items-center justify-center"
                  style={{ backgroundColor: `${activeCase.color}10` }}
                >
                  <activeCase.icon className="w-7 h-7" style={{ color: activeCase.color }} />
                </div>
                <div>
                  <h3 className="text-2xl font-bold text-white">{activeCase.title}</h3>
                </div>
              </div>

<p className="text-gray-400 leading-relaxed mb-8">{activeCase.role}</p>

<div className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-4">Key Benefits</div>
              <div className="space-y-3">
                {activeCase.benefits.map((benefit, i) => (
                  <div key={i} className="flex items-start gap-3 p-4 rounded-xl bg-white/[0.02] border border-white/5">
                    <CheckCircle2 className="w-5 h-5 shrink-0 mt-0.5" style={{ color: activeCase.color }} />
                    <span className="text-sm text-gray-300">{benefit}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Economic Design Principles */}
      <section className="py-24">
        <div className="max-w-7xl mx-auto px-6">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">Economic Design Principles</h2>
            <p className="text-gray-500 max-w-2xl mx-auto">
              USDO is designed as a capital infrastructure layer, not a yield farming instrument
            </p>
          </div>

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
            {principles.map((p, i) => (
              <div key={i} className="bg-[#12121a] rounded-xl p-6 border border-white/5 hover:border-[#F7931A]/10 transition-all">
                <div className="flex items-center gap-3 mb-3">
                  <div className="w-8 h-8 rounded-lg bg-[#F7931A]/10 flex items-center justify-center">
                    <span className="text-xs font-bold text-[#F7931A]">{String(i + 1).padStart(2, "0")}</span>
                  </div>
                  <h3 className="text-sm font-semibold text-white">{p.label}</h3>
                </div>
                <p className="text-xs text-gray-500 leading-relaxed">{p.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

{/* Why This Works */}
      <section className="py-24 bg-[#0d0d12]">
        <div className="max-w-4xl mx-auto px-6">
          <div className="bg-[#12121a] rounded-2xl p-10 border border-white/5 relative overflow-hidden">
            <div className="absolute top-0 right-0 w-[300px] h-[300px] bg-[#F7931A]/5 rounded-full blur-[100px]" />
            <div className="relative">
              <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
                Why This Model Works for 963X
              </h2>
              <p className="text-gray-400 leading-relaxed mb-8">
                963X is a trading-first network. Trading requires stable settlement, deep liquidity,
                capital efficiency, and validator alignment. USDO connects all four into a single economic layer.
              </p>

<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-10">
                {[
                  { label: "Stable Settlement", icon: Coins, color: "#F7931A" },
                  { label: "Deep Liquidity", icon: Layers, color: "#00BCD4" },
                  { label: "Capital Efficiency", icon: Zap, color: "#22C55E" },
                  { label: "Validator Alignment", icon: Shield, color: "#A855F7" },
                ].map((item) => (
                  <div key={item.label} className="text-center p-4 rounded-xl bg-white/[0.02] border border-white/5">
                    <div className="w-10 h-10 mx-auto rounded-lg flex items-center justify-center mb-3" style={{ backgroundColor: `${item.color}15` }}>
                      <item.icon className="w-5 h-5" style={{ color: item.color }} />
                    </div>
                    <span className="text-xs text-gray-400 font-medium">{item.label}</span>
                  </div>
                ))}
              </div>

<div className="p-5 rounded-xl bg-white/[0.02] border border-white/5">
                <p className="text-sm text-gray-400 leading-relaxed">
                  USDO is not competing with USDT. It integrates with it. By allowing users to mint USDO
                  against external stable assets, the network bootstraps liquidity without inflationary token
                  emissions. Growth is driven by trading volume, treasury yield, validator alignment, and stable
                  liquidity locking.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Capital Efficiency Flywheel */}
      <section className="py-24">
        <div className="max-w-5xl mx-auto px-6">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">Capital Efficiency at Scale</h2>
            <p className="text-gray-500 max-w-2xl mx-auto">
              A sustainable liquidity flywheel anchored in real collateral
            </p>
          </div>

<div className="flex flex-col md:flex-row items-center justify-center gap-4">
            {[
              { label: "Stable Deposits", sub: "USDT / USDC / DAI", color: "#3B82F6" },
              { label: "USDO Minted", sub: "Capital efficiency", color: "#F7931A" },
              { label: "Trading Volume", sub: "Perps, Spot, LPs", color: "#00BCD4" },
              { label: "Treasury Yield", sub: "Delta-neutral strategies", color: "#A855F7" },
              { label: "Network Growth", sub: "Validators + Liquidity", color: "#22C55E" },
            ].map((step, i) => (
              <div key={i} className="flex items-center gap-4">
                <div className="text-center">
                  <div
                    className="w-20 h-20 rounded-2xl flex items-center justify-center mb-3 border"
                    style={{ backgroundColor: `${step.color}10`, borderColor: `${step.color}20` }}
                  >
                    <span className="text-2xl font-bold" style={{ color: step.color }}>{i + 1}</span>
                  </div>
                  <div className="text-sm font-semibold text-white">{step.label}</div>
                  <div className="text-xs text-gray-500">{step.sub}</div>
                </div>
                {i < 4 && (
                  <ArrowRight className="w-5 h-5 text-gray-600 hidden md:block shrink-0" />
                )}
              </div>
            ))}
          </div>

<div className="mt-8 flex justify-center">
            <div className="flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/5 text-xs text-gray-500">
              <RefreshCw className="w-3.5 h-3.5 text-[#F7931A]" />
              Revenue cycles back into the network, compounding liquidity growth
            </div>
          </div>
        </div>
      </section>

{/* CTA */}
      <section className="py-24 bg-[#0d0d12]">
        <div className="max-w-3xl mx-auto px-6 text-center">
          <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
            Start Trading on 963X
          </h2>
          <p className="text-gray-500 mb-8">
            Experience capital-efficient trading powered by stable settlement infrastructure
          </p>
          <div className="flex justify-center gap-4">
            <Link href="/app/trade">
              <Button className="bg-[#F7931A] hover:bg-[#E8850C] text-black font-semibold px-8">
                Launch App <ArrowRight className="w-4 h-4 ml-2" />
              </Button>
            </Link>
            <Link href="/architecture">
              <Button variant="outline" className="border-white/10 text-white hover:bg-white/5 bg-transparent px-8">
                View Architecture
              </Button>
            </Link>
          </div>
        </div>
      </section>

{/* Footer */}
      <footer className="border-t border-white/5 py-8">
        <div className="max-w-7xl mx-auto px-6 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <SunBitLogo className="h-5 w-auto" />
            <span className="text-xs text-gray-600">963X Network</span>
          </div>
          <div className="flex items-center gap-6">
            <Link href="/" className="text-xs text-gray-500 hover:text-white transition-colors">Home</Link>
            <Link href="/architecture" className="text-xs text-gray-500 hover:text-white transition-colors">Architecture</Link>
            <Link href="/app/trade" className="text-xs text-gray-500 hover:text-white transition-colors">Trade</Link>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/network/layout.tsx" isMerged="true"
export const metadata = {
  title: "963X Network - USDO Stable Settlement Layer",
  description: "USDO is a fully-backed stable asset designed for capital efficiency, trading settlement, and validator-aligned liquidity on the 963X Network.",
}

export default function NetworkLayout({ children }: { children: React.ReactNode }) {
  return children
}
[V0_FILE]typescriptreact:file="app/architecture/page.tsx" isMerged="true"
"use client"

import Link from "next/link"
import {
  ArrowLeft,
  ArrowRight,
  Shield,
  Layers,
  Bot,
  Cpu,
  Network,
  Wallet,
  Globe,
  Lock,
  Zap,
  Database,
  BarChart3,
  Users,
  Vote,
  Coins,
  ChevronRight,
  Radio,
  CircleDollarSign,
  ArrowDownUp,
} from "lucide-react"
import { Button } from "@/components/ui/button"

// Layer data
const layers = [
  {
    id: "capital",
    number: "01",
    name: "Capital Layer",
    tagline: "The foundation of value",
    color: "#F7931A",
    icon: Database,
    modules: [
      { name: "USDB Engine", desc: "Bitcoin-backed stablecoin minting, redemption, and peg stability mechanism" },
      { name: "Collateral Vault", desc: "BTC and LST (btBTC, LBTC) custody with over-collateralization ratios" },
      { name: "Risk Engine", desc: "Real-time collateral monitoring, liquidation thresholds, and circuit breakers" },
    ],
    details: "All capital in 963x originates from Bitcoin. USDB is minted against BTC collateral with a minimum 150% collateralization ratio. The Risk Engine continuously monitors positions and triggers liquidations before the system becomes under-collateralized.",
  },
  {
    id: "settlement",
    number: "02",
    name: "Stable Settlement Layer",
    tagline: "USDO -- the network's unit of account",
    color: "#22C55E",
    icon: CircleDollarSign,
    modules: [
      { name: "USDO Engine", desc: "Fully collateralized stable asset minted against USDT, USDC, and DAI at high capital efficiency" },
      { name: "Settlement Bus", desc: "Unified settlement for perpetual margin, PnL, liquidity pools, and validator staking" },
      { name: "Redemption Gate", desc: "1:1 redemption back to underlying stablecoins at any time, no lock-up period" },
      { name: "Treasury Yield", desc: "Conservative delta-neutral strategies on collateral to fund validator incentives and growth" },
    ],
    details: "USDO is the stable settlement infrastructure of 963X Network. Users deposit external stablecoins and mint USDO, which becomes the primary settlement asset for perpetual trading, collateral for margin, validator staking requirement, and base pair for all on-network liquidity. It is not algorithmic -- no reflexive token backing, no governance token as collateral. Collateral remains secured in the treasury and can be redeemed at any time.",
  },
  {
    id: "execution",
    number: "03",
    name: "Execution Layer",
    tagline: "Where trades happen",
    color: "#00BCD4",
    icon: Zap,
    modules: [
      { name: "Perpetual Engine", desc: "Onchain perpetual futures with up to 125x leverage, funding rates, and mark price" },
      { name: "Matching Engine", desc: "High-performance order matching with sub-second execution and deep liquidity" },
      { name: "FAI Scheduler", desc: "Economic coordination layer that routes, batches, and optimizes execution" },
    ],
    details: "The Execution Layer processes all trading activity. The Matching Engine handles order book depth, while the Perpetual Engine manages positions, margin, and funding rates. The FAI Scheduler coordinates execution across venues for optimal fills.",
  },
  {
    id: "agent",
    number: "04",
    name: "Agent Layer",
    tagline: "Intelligence at scale",
    color: "#A855F7",
    icon: Bot,
    modules: [
      { name: "AI Agents", desc: "Autonomous financial agents that parse intent, simulate, and execute under user rules" },
      { name: "Strategy Agents", desc: "Pre-built strategies: DCA, grid trading, funding rate arbitrage, basis trade" },
      { name: "Liquidity Agents", desc: "Automated market making and liquidity provision across pools" },
      { name: "Keeper Network", desc: "Decentralized keepers for liquidations, order execution, and oracle updates" },
    ],
    details: "The Agent Layer brings AI-powered automation to every level of the stack. Users can deploy agents with strict permission boundaries (max trade size, daily caps, slippage limits). All agent actions are auditable and revocable onchain.",
  },
  {
    id: "governance",
    number: "05",
    name: "Governance Layer",
    tagline: "Community-driven evolution",
    color: "#10B981",
    icon: Vote,
    modules: [
      { name: "Token Logic", desc: "963X token utility: staking, fee sharing, governance voting power" },
      { name: "Staking", desc: "ve963X model with time-weighted voting and boosted yield up to 2.5x" },
      { name: "Parameter Voting", desc: "Community governance over fees, collateral ratios, and protocol upgrades" },
    ],
    details: "Governance ensures the protocol evolves with its community. ve963X holders vote on fee structures, collateral parameters, new market listings, and treasury allocation. Longer lock periods grant proportionally more voting power.",
  },
  {
    id: "integration",
    number: "06",
    name: "Integration Layer",
    tagline: "Connected to everything",
    color: "#3B82F6",
    icon: Globe,
    modules: [
      { name: "Wallets", desc: "MetaMask, WalletConnect, Coinbase Wallet, and institutional custodians" },
      { name: "Bridges", desc: "Cross-chain BTC bridging via Lombard, threshold signatures, and native bridges" },
      { name: "Oracles", desc: "Multi-source price feeds with Pyth, Chainlink, and proprietary TWAP" },
      { name: "Partner Protocols", desc: "Composability with external DeFi protocols, yield aggregators, and data providers" },
    ],
    details: "The Integration Layer connects 963x to the broader crypto infrastructure. Oracles provide tamper-proof pricing, bridges enable cross-chain capital flow, and wallet integrations ensure accessibility for all user types.",
  },
]

export default function ArchitecturePage() {
  return (
    <div className="min-h-screen bg-[#0a0a0f] text-white">
      {/* Nav */}
      <nav className="border-b border-white/5 bg-[#0a0a0f]/80 backdrop-blur-xl sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
          <Link href="/" className="flex items-center gap-2 text-gray-400 hover:text-white transition-colors">
            <ArrowLeft className="w-4 h-4" />
            <span className="text-sm">Back to 963x</span>
          </Link>
          <Link href="/app/trade">
            <Button className="bg-[#F7931A] hover:bg-[#E8850C] text-black font-semibold px-5 text-sm">
              Launch App
            </Button>
          </Link>
        </div>
      </nav>

{/* Hero */}
      <section className="relative pt-24 pb-20 overflow-hidden">
        <div className="absolute inset-0">
          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[600px] h-[400px] bg-[#F7931A]/5 rounded-full blur-[150px]" />
          <div className="absolute bottom-0 left-1/4 w-[400px] h-[300px] bg-purple-500/5 rounded-full blur-[120px]" />
        </div>
        <div className="relative max-w-4xl mx-auto px-6 text-center">
          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 mb-8">
            <Layers className="w-4 h-4 text-[#F7931A]" />
            <span className="text-sm text-gray-300">System Architecture</span>
          </div>
          <h1 className="text-5xl md:text-7xl font-bold mb-6 tracking-tight text-balance">
            The 963x{" "}
            <span className="bg-gradient-to-r from-[#F7931A] to-[#F7931A]/60 bg-clip-text text-transparent">Stack</span>
          </h1>
          <p className="text-xl text-gray-400 max-w-2xl mx-auto mb-12 leading-relaxed text-pretty">
            Bitcoin-backed capital executed at machine speed. Six layers working together to create a vertically integrated financial protocol with stable settlement at its core.
          </p>

{/* Mini layer badges */}
          <div className="flex flex-wrap justify-center gap-3">
            {layers.map((l) => (
              <a
                key={l.id}
                href={`#${l.id}`}
                className="flex items-center gap-2 px-4 py-2 rounded-full border transition-all hover:scale-105"
                style={{ borderColor: `${l.color}30`, backgroundColor: `${l.color}08` }}
              >
                <l.icon className="w-4 h-4" style={{ color: l.color }} />
                <span className="text-sm font-medium text-gray-300">{l.name}</span>
              </a>
            ))}
          </div>
        </div>
      </section>

{/* System Diagram - Visual SVG */}
      <section className="py-16 relative">
        <div className="max-w-5xl mx-auto px-6">
          <div className="bg-[#12121a] rounded-2xl border border-white/5 p-8 md:p-12 overflow-hidden">
            <h2 className="text-center text-lg font-semibold text-gray-400 mb-10 uppercase tracking-wider">System Diagram</h2>
            
            <div className="relative">
              {/* Vertical stack diagram */}
              <div className="space-y-3">
                {layers.map((layer, i) => (
                  <a
                    href={`#${layer.id}`}
                    key={layer.id}
                    className="block group"
                  >
                    <div
                      className="relative flex items-center gap-6 p-5 rounded-xl border transition-all hover:scale-[1.01] cursor-pointer"
                      style={{
                        borderColor: `${layer.color}20`,
                        backgroundColor: `${layer.color}05`,
                      }}
                    >
                      {/* Layer number */}
                      <div
                        className="w-12 h-12 rounded-xl flex items-center justify-center shrink-0 font-bold text-lg"
                        style={{ backgroundColor: `${layer.color}15`, color: layer.color }}
                      >
                        {layer.number}
                      </div>

{/* Info */}
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-3 mb-1">
                          <h3 className="text-lg font-bold text-white">{layer.name}</h3>
                          <span className="text-xs text-gray-500">{layer.tagline}</span>
                        </div>
                        <div className="flex flex-wrap gap-2">
                          {layer.modules.map((m) => (
                            <span
                              key={m.name}
                              className="px-2.5 py-1 text-xs rounded-md border"
                              style={{ borderColor: `${layer.color}20`, color: `${layer.color}CC` }}
                            >
                              {m.name}
                            </span>
                          ))}
                        </div>
                      </div>

{/* Arrow */}
                      <ChevronRight className="w-5 h-5 text-gray-600 group-hover:text-white transition-colors shrink-0" />
                    </div>

{/* Connector line */}
                    {i < layers.length - 1 && (
                      <div className="flex justify-center py-1">
                        <div className="w-px h-3 bg-gradient-to-b from-white/10 to-transparent" />
                      </div>
                    )}
                  </a>
                ))}
              </div>

{/* Data flow arrows on right side */}
              <div className="hidden lg:flex absolute -right-6 top-0 bottom-0 flex-col items-center justify-center">
                <div className="relative h-full flex flex-col items-center justify-center gap-0">
                  <div className="w-px h-full bg-gradient-to-b from-[#F7931A]/30 via-[#A855F7]/30 to-[#3B82F6]/30" />
                  <div className="absolute top-4 -right-16 text-[10px] text-gray-600 font-medium uppercase tracking-widest [writing-mode:vertical-lr]">
                    Data Flow
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Each Layer Detail */}
      {layers.map((layer, idx) => (
        <section
          key={layer.id}
          id={layer.id}
          className="py-20 relative"
        >
          {/* Subtle background glow */}
          <div
            className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[300px] rounded-full blur-[150px] opacity-[0.03]"
            style={{ backgroundColor: layer.color }}
          />

<div className="relative max-w-6xl mx-auto px-6">
            {/* Section header */}
            <div className="flex items-center gap-4 mb-10">
              <div
                className="w-14 h-14 rounded-2xl flex items-center justify-center shrink-0"
                style={{ backgroundColor: `${layer.color}15` }}
              >
                <layer.icon className="w-7 h-7" style={{ color: layer.color }} />
              </div>
              <div>
                <div className="text-xs font-bold uppercase tracking-wider mb-1" style={{ color: layer.color }}>
                  Layer {layer.number}
                </div>
                <h2 className="text-3xl md:text-4xl font-bold text-white">{layer.name}</h2>
              </div>
            </div>

{/* Description */}
            <p className="text-gray-400 text-lg leading-relaxed max-w-3xl mb-10">
              {layer.details}
            </p>

{/* Module cards */}
            <div className={`grid gap-4 ${layer.modules.length === 4 ? "md:grid-cols-2 lg:grid-cols-4" : "md:grid-cols-3"}`}>
              {layer.modules.map((mod, mi) => (
                <div
                  key={mod.name}
                  className="bg-[#12121a] rounded-xl p-6 border transition-all hover:translate-y-[-2px]"
                  style={{ borderColor: `${layer.color}12` }}
                >
                  <div className="flex items-center gap-3 mb-3">
                    <div
                      className="w-8 h-8 rounded-lg flex items-center justify-center text-sm font-bold"
                      style={{ backgroundColor: `${layer.color}15`, color: layer.color }}
                    >
                      {String(mi + 1).padStart(2, "0")}
                    </div>
                    <h4 className="font-semibold text-white">{mod.name}</h4>
                  </div>
                  <p className="text-sm text-gray-500 leading-relaxed">{mod.desc}</p>
                </div>
              ))}
            </div>

{/* Divider */}
            {idx < layers.length - 1 && (
              <div className="mt-20 flex justify-center">
                <div className="w-px h-16 bg-gradient-to-b from-white/10 to-transparent" />
              </div>
            )}
          </div>
        </section>
      ))}

{/* Cross-Layer Data Flow */}
      <section className="py-20 bg-[#0d0d14]">
        <div className="max-w-6xl mx-auto px-6">
          <div className="text-center mb-14">
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">How the Layers Connect</h2>
            <p className="text-gray-500 max-w-2xl mx-auto">
              Data flows vertically through the stack. Capital enters at Layer 1, settles through USDO at Layer 2, gets executed at Layer 3, optimized by agents in Layer 4, governed in Layer 5, and connected externally in Layer 6.
            </p>
          </div>

<div className="grid md:grid-cols-5 gap-4">
            {[
              { from: "Capital", to: "Settlement", desc: "BTC collateral backs USDB, stablecoins mint USDO for network use", color: "#F7931A", icon: Database },
              { from: "Settlement", to: "Execution", desc: "USDO provides unified margin, PnL settlement, and LP base pairs", color: "#22C55E", icon: CircleDollarSign },
              { from: "Execution", to: "Agent", desc: "Trade data, positions, and market feeds power agent strategies", color: "#00BCD4", icon: Zap },
              { from: "Agent", to: "Governance", desc: "Agent activity metrics and risk data inform governance proposals", color: "#A855F7", icon: Bot },
              { from: "Governance", to: "Integration", desc: "Approved parameters propagate to connected systems and bridges", color: "#10B981", icon: Vote },
            ].map((flow, i) => (
              <div key={i} className="relative">
                <div className="bg-[#12121a] rounded-xl p-6 border border-white/5 h-full">
                  <div className="flex items-center gap-2 mb-4">
                    <flow.icon className="w-5 h-5" style={{ color: flow.color }} />
                    <div className="flex items-center gap-1.5 text-sm">
                      <span className="font-semibold text-white">{flow.from}</span>
                      <ArrowRight className="w-3.5 h-3.5 text-gray-600" />
                      <span className="text-gray-400">{flow.to}</span>
                    </div>
                  </div>
                  <p className="text-sm text-gray-500 leading-relaxed">{flow.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

{/* Key Principles */}
      <section className="py-20">
        <div className="max-w-6xl mx-auto px-6">
          <div className="text-center mb-14">
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">Design Principles</h2>
            <p className="text-gray-500 max-w-2xl mx-auto">
              Every architectural decision in 963x follows these core principles.
            </p>
          </div>

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
            {[
              { title: "Non-Custodial", desc: "Users always hold their own keys. The protocol never takes custody of funds.", icon: Lock, color: "#F7931A" },
              { title: "Bitcoin-Native", desc: "All value is ultimately backed by Bitcoin. USDB is the stable unit of account.", icon: Shield, color: "#F7931A" },
              { title: "Stable Settlement", desc: "USDO standardizes all settlement. No algorithmic minting, no reflexive backing, fully redeemable.", icon: CircleDollarSign, color: "#22C55E" },
              { title: "Vertically Integrated", desc: "Capital, settlement, execution, intelligence, governance, and connectivity in one stack.", icon: Layers, color: "#00BCD4" },
              { title: "AI-Augmented", desc: "Every layer can be enhanced by agents, from risk management to execution.", icon: Cpu, color: "#A855F7" },
              { title: "Permission-Based", desc: "Users grant fine-grained permissions. Agents operate within strict boundaries.", icon: Users, color: "#10B981" },
              { title: "Composable", desc: "Each layer exposes APIs. External protocols can build on top of 963x.", icon: Network, color: "#3B82F6" },
            ].map((p, i) => (
              <div key={i} className="bg-[#12121a] rounded-xl p-6 border border-white/5">
                <div className="flex items-center gap-3 mb-3">
                  <div className="w-10 h-10 rounded-lg flex items-center justify-center" style={{ backgroundColor: `${p.color}15` }}>
                    <p.icon className="w-5 h-5" style={{ color: p.color }} />
                  </div>
                  <h3 className="font-bold text-white">{p.title}</h3>
                </div>
                <p className="text-sm text-gray-500 leading-relaxed">{p.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

{/* Future Expansion */}
      <section className="py-20 bg-[#0d0d14] relative overflow-hidden">
        <div className="absolute top-0 right-0 w-[400px] h-[300px] bg-[#F7931A]/3 rounded-full blur-[150px]" />
        <div className="relative max-w-6xl mx-auto px-6">
          <div className="text-center mb-14">
            <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/5 border border-white/10 mb-6">
              <Radio className="w-3.5 h-3.5 text-[#F7931A]" />
              <span className="text-xs font-medium text-gray-400 uppercase tracking-wider">Roadmap</span>
            </div>
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">Future Expansion</h2>
            <p className="text-gray-500 max-w-2xl mx-auto">
              The 963x stack is designed to grow. Each layer has extension points for new functionality without breaking existing infrastructure.
            </p>
          </div>

<div className="grid md:grid-cols-3 gap-6">
            {/* Now */}
            <div className="bg-[#12121a] rounded-2xl p-8 border border-[#F7931A]/15 relative overflow-hidden">
              <div className="absolute top-0 right-0 w-20 h-20 bg-[#F7931A]/5 rounded-full blur-[40px]" />
              <div className="relative">
                <div className="flex items-center gap-2 mb-4">
                  <div className="w-2 h-2 rounded-full bg-[#F7931A] animate-pulse" />
                  <span className="text-xs font-bold text-[#F7931A] uppercase tracking-wider">Live Now</span>
                </div>
                <h3 className="text-xl font-bold text-white mb-4">Foundation</h3>
                <ul className="space-y-3">
                  {[
                    "PerpDEX with 200+ markets",
                    "USDB stablecoin engine",
                    "USDO stable settlement layer",
                    "Spot trading",
                    "Yield vaults",
                    "Staking & ve963X",
                  ].map(item => (
                    <li key={item} className="flex items-center gap-2.5 text-sm text-gray-400">
                      <div className="w-1.5 h-1.5 rounded-full bg-[#F7931A] shrink-0" />
                      {item}
                    </li>
                  ))}
                </ul>
              </div>
            </div>

{/* Next */}
            <div className="bg-[#12121a] rounded-2xl p-8 border border-purple-500/15 relative overflow-hidden">
              <div className="absolute top-0 right-0 w-20 h-20 bg-purple-500/5 rounded-full blur-[40px]" />
              <div className="relative">
                <div className="flex items-center gap-2 mb-4">
                  <div className="w-2 h-2 rounded-full bg-purple-400" />
                  <span className="text-xs font-bold text-purple-400 uppercase tracking-wider">Q2-Q3 2026</span>
                </div>
                <h3 className="text-xl font-bold text-white mb-4">Intelligence</h3>
                <ul className="space-y-3">
                  {[
                    "FAI Agent Marketplace",
                    "AI-assisted trade execution",
                    "Strategy agent templates",
                    "Agent Vaults (delegated)",
                    "Cross-chain BTC bridging",
                  ].map(item => (
                    <li key={item} className="flex items-center gap-2.5 text-sm text-gray-400">
                      <div className="w-1.5 h-1.5 rounded-full bg-purple-400 shrink-0" />
                      {item}
                    </li>
                  ))}
                </ul>
              </div>
            </div>

{/* Future */}
            <div className="bg-[#12121a] rounded-2xl p-8 border border-cyan-500/15 relative overflow-hidden">
              <div className="absolute top-0 right-0 w-20 h-20 bg-cyan-500/5 rounded-full blur-[40px]" />
              <div className="relative">
                <div className="flex items-center gap-2 mb-4">
                  <div className="w-2 h-2 rounded-full bg-cyan-400" />
                  <span className="text-xs font-bold text-cyan-400 uppercase tracking-wider">2027+</span>
                </div>
                <h3 className="text-xl font-bold text-white mb-4">Scale</h3>
                <ul className="space-y-3">
                  {[
                    "AI-to-AI agent economy",
                    "Institutional custody integration",
                    "Multi-chain deployment",
                    "Structured products",
                    "Protocol-level composability",
                  ].map(item => (
                    <li key={item} className="flex items-center gap-2.5 text-sm text-gray-400">
                      <div className="w-1.5 h-1.5 rounded-full bg-cyan-400 shrink-0" />
                      {item}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* CTA */}
      <section className="py-20">
        <div className="max-w-3xl mx-auto px-6 text-center">
          <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
            Start Trading on 963x
          </h2>
          <p className="text-gray-500 mb-8">
            The architecture is live. Trade perpetuals, earn yield, and stake -- all backed by Bitcoin.
          </p>
          <div className="flex items-center justify-center gap-4">
            <Link href="/app/trade">
              <Button className="bg-[#F7931A] hover:bg-[#E8850C] text-black font-semibold px-8 py-3">
                Launch App <ArrowRight className="w-4 h-4 ml-2" />
              </Button>
            </Link>
            <Link href="/">
              <Button variant="outline" className="border-white/10 text-white hover:bg-white/5 bg-transparent px-6 py-3">
                Back to Home
              </Button>
            </Link>
          </div>
        </div>
      </section>

{/* Footer */}
      <footer className="border-t border-white/5 py-8">
        <div className="max-w-7xl mx-auto px-6 flex items-center justify-between">
          <div className="text-sm text-gray-600">963x Architecture Overview</div>
          <div className="flex items-center gap-6">
            <Link href="/" className="text-sm text-gray-500 hover:text-white transition-colors">Home</Link>
            <Link href="/network" className="text-sm text-gray-500 hover:text-white transition-colors">Network</Link>
            <Link href="/app/trade" className="text-sm text-gray-500 hover:text-white transition-colors">Trade</Link>
            <Link href="/app/agents" className="text-sm text-gray-500 hover:text-white transition-colors">FAI Agents</Link>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/blog/page.tsx" isMerged="true"
"use client"

import Link from "next/link"
import { ArrowLeft, ArrowRight, Clock, Tag, Search, ChevronRight } from "lucide-react"
import { Button } from "@/components/ui/button"
import { SunBitLogo } from "@/components/ui/sunbit-logo"
import { useState, useMemo } from "react"

// Blog post data
const posts = [
  {
    slug: "introducing-963x-network",
    title: "Introducing 963X Network: Bitcoin-Backed Capital at Machine Speed",
    excerpt: "Today we publicly unveil 963X Network -- a vertically integrated DeFi protocol built from the ground up to combine Bitcoin-backed stability, perpetual execution, and autonomous AI agents in a single unified stack.",
    date: "2026-02-10",
    readTime: "8 min read",
    category: "Announcement",
    featured: true,
    image: "/images/mars-hero-backdrop.jpg",
  },
  {
    slug: "usdo-stable-settlement",
    title: "USDO: The Stable Settlement Layer Behind 963X",
    excerpt: "USDO is not another algorithmic stablecoin. It is a fully-collateralized settlement asset designed to unify margin, PnL, and liquidity across the entire 963X execution stack. Here is how it works.",
    date: "2026-02-08",
    readTime: "6 min read",
    category: "Technical",
    featured: false,
  },
  {
    slug: "perpdex-architecture",
    title: "PerpDEX Architecture: How We Execute 200+ Markets with Sub-Second Latency",
    excerpt: "A deep dive into the hybrid matching engine, risk management infrastructure, and multi-venue execution layer powering 963X perpetual trading.",
    date: "2026-02-05",
    readTime: "10 min read",
    category: "Technical",
    featured: false,
  },
  {
    slug: "fai-agent-marketplace-preview",
    title: "FAI Agent Marketplace: What to Expect in Q2 2026",
    excerpt: "Preview of the Financial Autonomous Infrastructure layer -- AI agents that parse natural language into onchain execution under strict user-defined rules. Non-custodial, permission-based, auditable.",
    date: "2026-02-01",
    readTime: "7 min read",
    category: "Product",
    featured: false,
  },
  {
    slug: "bitcoin-capital-efficiency",
    title: "Why Bitcoin Capital Efficiency Matters for DeFi",
    excerpt: "Most DeFi protocols treat Bitcoin as a passive asset. 963X treats it as productive capital -- backing USDB, fueling trading margin, and generating yield without compromising self-custody.",
    date: "2026-01-28",
    readTime: "5 min read",
    category: "Research",
    featured: false,
  },
  {
    slug: "security-first-design",
    title: "Security-First: Our 4-Layer Risk Architecture",
    excerpt: "From static validation rules to circuit breakers, every transaction in 963X passes through a multi-stage security pipeline. Here is how we protect user capital at every layer of the stack.",
    date: "2026-01-25",
    readTime: "6 min read",
    category: "Technical",
    featured: false,
  },
  {
    slug: "validator-staking-economics",
    title: "Validator Staking and ve963X: Aligning Incentives",
    excerpt: "How the 963X validator model uses USDO staking requirements and vote-escrowed tokenomics to align network participants with long-term protocol health.",
    date: "2026-01-20",
    readTime: "5 min read",
    category: "Research",
    featured: false,
  },
  {
    slug: "roadmap-2026",
    title: "963X Roadmap: What We Are Building in 2026",
    excerpt: "From PerpDEX launch to FAI Agent Marketplace, cross-chain bridges, and institutional-grade infrastructure -- a transparent look at what is coming this year.",
    date: "2026-01-15",
    readTime: "4 min read",
    category: "Announcement",
    featured: false,
  },
]

const categories = ["All", "Announcement", "Technical", "Product", "Research"]

function formatDate(dateStr: string) {
  return new Date(dateStr).toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" })
}

const categoryColors: Record<string, string> = {
  Announcement: "bg-[#F7931A]/10 text-[#F7931A] border-[#F7931A]/20",
  Technical: "bg-cyan-500/10 text-cyan-400 border-cyan-500/20",
  Product: "bg-purple-500/10 text-purple-400 border-purple-500/20",
  Research: "bg-emerald-500/10 text-emerald-400 border-emerald-500/20",
}

export default function BlogPage() {
  const [activeCategory, setActiveCategory] = useState("All")
  const [searchQuery, setSearchQuery] = useState("")

const filteredPosts = useMemo(() => {
    return posts.filter((post) => {
      const matchesCategory = activeCategory === "All" || post.category === activeCategory
      const matchesSearch = searchQuery === "" ||
        post.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
        post.excerpt.toLowerCase().includes(searchQuery.toLowerCase())
      return matchesCategory && matchesSearch
    })
  }, [activeCategory, searchQuery])

const featuredPost = posts.find(p => p.featured)
  const regularPosts = filteredPosts.filter(p => !p.featured || activeCategory !== "All" || searchQuery !== "")

return (
    <div className="min-h-screen bg-[#0a0a0f] text-white">
      {/* Navigation */}
      <nav className="sticky top-0 z-50 bg-[#0a0a0f]/90 backdrop-blur-xl border-b border-white/5">
        <div className="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
          <Link href="/" className="flex items-center gap-2">
            <SunBitLogo className="h-8 w-auto" />
          </Link>
          <div className="flex items-center gap-4">
            <Link href="/architecture" className="text-sm text-gray-400 hover:text-white transition-colors">Architecture</Link>
            <Link href="/network" className="text-sm text-gray-400 hover:text-white transition-colors">Network</Link>
            <Link href="/app/trade">
              <Button size="sm" className="bg-[#F7931A] hover:bg-[#E8850C] text-black font-medium">Launch App</Button>
            </Link>
          </div>
        </div>
      </nav>

{/* Hero */}
      <section className="pt-16 pb-8 border-b border-white/5">
        <div className="max-w-6xl mx-auto px-6">
          <Link href="/" className="inline-flex items-center gap-2 text-sm text-gray-500 hover:text-white transition-colors mb-8">
            <ArrowLeft className="w-4 h-4" /> Back to Home
          </Link>
          <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-6">
            <div>
              <h1 className="text-4xl md:text-5xl font-bold text-white mb-3">Blog</h1>
              <p className="text-gray-400 text-lg max-w-xl">
                Protocol updates, technical deep dives, and research from the 963X team.
              </p>
            </div>
            {/* Search */}
            <div className="relative w-full md:w-80">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
              <input
                type="text"
                placeholder="Search articles..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full pl-10 pr-4 py-2.5 bg-white/5 border border-white/10 rounded-lg text-sm text-white placeholder:text-gray-600 focus:outline-none focus:border-[#F7931A]/40 transition-colors"
              />
            </div>
          </div>
        </div>
      </section>

{/* Category Filter */}
      <section className="py-6 border-b border-white/5">
        <div className="max-w-6xl mx-auto px-6">
          <div className="flex items-center gap-2 overflow-x-auto pb-1">
            {categories.map((cat) => (
              <button
                key={cat}
                onClick={() => setActiveCategory(cat)}
                className={`px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-all ${
                  activeCategory === cat
                    ? "bg-[#F7931A] text-black"
                    : "bg-white/5 text-gray-400 hover:bg-white/10 hover:text-white"
                }`}
              >
                {cat}
                {cat !== "All" && (
                  <span className="ml-2 text-xs opacity-60">
                    {posts.filter(p => p.category === cat).length}
                  </span>
                )}
              </button>
            ))}
          </div>
        </div>
      </section>

{/* Featured Post */}
      {featuredPost && activeCategory === "All" && searchQuery === "" && (
        <section className="py-12">
          <div className="max-w-6xl mx-auto px-6">
            <Link href={`/blog/${featuredPost.slug}`}>
              <div className="group relative rounded-2xl overflow-hidden border border-white/5 hover:border-[#F7931A]/20 transition-all">
                <div className="grid md:grid-cols-2">
                  {/* Image */}
                  <div className="relative h-64 md:h-auto overflow-hidden">
                    {featuredPost.image ? (
                      <img
                        src={featuredPost.image}
                        alt={featuredPost.title}
                        className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                      />
                    ) : (
                      <div className="w-full h-full bg-gradient-to-br from-[#F7931A]/20 to-purple-500/20" />
                    )}
                    <div className="absolute inset-0 bg-gradient-to-r from-transparent to-[#0a0a0f] hidden md:block" />
                    <div className="absolute inset-0 bg-gradient-to-t from-[#0a0a0f] to-transparent md:hidden" />
                  </div>
                  {/* Content */}
                  <div className="relative p-8 md:p-10 flex flex-col justify-center bg-[#0e0e15]">
                    <div className="flex items-center gap-3 mb-4">
                      <span className={`px-2.5 py-1 text-xs font-medium rounded-md border ${categoryColors[featuredPost.category]}`}>
                        {featuredPost.category}
                      </span>
                      <span className="text-xs text-[#F7931A] font-medium uppercase tracking-wider">Featured</span>
                    </div>
                    <h2 className="text-2xl md:text-3xl font-bold text-white mb-4 group-hover:text-[#F7931A] transition-colors leading-tight text-balance">
                      {featuredPost.title}
                    </h2>
                    <p className="text-gray-400 text-sm leading-relaxed mb-6 line-clamp-3">
                      {featuredPost.excerpt}
                    </p>
                    <div className="flex items-center gap-4 text-xs text-gray-500">
                      <span className="flex items-center gap-1.5">
                        <Clock className="w-3.5 h-3.5" />
                        {featuredPost.readTime}
                      </span>
                      <span>{formatDate(featuredPost.date)}</span>
                    </div>
                    <div className="mt-6">
                      <span className="inline-flex items-center gap-2 text-sm font-medium text-[#F7931A] group-hover:gap-3 transition-all">
                        Read article <ArrowRight className="w-4 h-4" />
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </Link>
          </div>
        </section>
      )}

{/* Post Grid */}
      <section className="py-12">
        <div className="max-w-6xl mx-auto px-6">
          {regularPosts.length === 0 ? (
            <div className="text-center py-20">
              <p className="text-gray-500 text-lg mb-2">No articles found</p>
              <p className="text-gray-600 text-sm">Try adjusting your search or category filter.</p>
            </div>
          ) : (
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
              {regularPosts.map((post) => (
                <Link key={post.slug} href={`/blog/${post.slug}`}>
                  <article className="group bg-[#12121a] rounded-xl border border-white/5 hover:border-white/10 transition-all h-full flex flex-col overflow-hidden">
                    {/* Color bar */}
                    <div className="h-1 w-full" style={{
                      background: post.category === "Announcement" ? "#F7931A" :
                        post.category === "Technical" ? "#06B6D4" :
                        post.category === "Product" ? "#A855F7" : "#10B981"
                    }} />
                    <div className="p-6 flex flex-col flex-1">
                      <div className="flex items-center gap-3 mb-4">
                        <span className={`px-2 py-0.5 text-[10px] font-medium rounded border ${categoryColors[post.category]}`}>
                          {post.category}
                        </span>
                        <span className="text-xs text-gray-600">{formatDate(post.date)}</span>
                      </div>
                      <h3 className="text-lg font-semibold text-white mb-3 group-hover:text-[#F7931A] transition-colors leading-snug line-clamp-2 text-balance">
                        {post.title}
                      </h3>
                      <p className="text-sm text-gray-500 leading-relaxed mb-4 flex-1 line-clamp-3">
                        {post.excerpt}
                      </p>
                      <div className="flex items-center justify-between pt-4 border-t border-white/5">
                        <span className="flex items-center gap-1.5 text-xs text-gray-600">
                          <Clock className="w-3 h-3" />
                          {post.readTime}
                        </span>
                        <span className="text-xs text-[#F7931A] font-medium flex items-center gap-1 group-hover:gap-2 transition-all">
                          Read <ChevronRight className="w-3 h-3" />
                        </span>
                      </div>
                    </div>
                  </article>
                </Link>
              ))}
            </div>
          )}
        </div>
      </section>

{/* Subscribe CTA */}
      <section className="py-16 border-t border-white/5">
        <div className="max-w-6xl mx-auto px-6">
          <div className="bg-[#12121a] rounded-2xl p-8 md:p-12 border border-white/5 text-center">
            <h3 className="text-2xl font-bold text-white mb-3">Stay Updated</h3>
            <p className="text-gray-400 text-sm mb-6 max-w-md mx-auto">
              Get protocol updates, technical insights, and research delivered to your inbox.
            </p>
            <div className="flex flex-col sm:flex-row gap-3 max-w-md mx-auto">
              <input
                type="email"
                placeholder="your@email.com"
                className="flex-1 px-4 py-3 bg-white/5 border border-white/10 rounded-lg text-sm text-white placeholder:text-gray-600 focus:outline-none focus:border-[#F7931A]/40 transition-colors"
              />
              <Button className="bg-[#F7931A] hover:bg-[#E8850C] text-black font-medium px-6 whitespace-nowrap">
                Subscribe
              </Button>
            </div>
            <p className="text-[10px] text-gray-600 mt-3">No spam. Unsubscribe anytime.</p>
          </div>
        </div>
      </section>

{/* Footer */}
      <footer className="py-8 border-t border-white/5">
        <div className="max-w-6xl mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-4">
          <Link href="/" className="flex items-center gap-2">
            <SunBitLogo className="h-6 w-auto" />
          </Link>
          <div className="flex items-center gap-6">
            <Link href="/" className="text-xs text-gray-500 hover:text-white transition-colors">Home</Link>
            <Link href="/architecture" className="text-xs text-gray-500 hover:text-white transition-colors">Architecture</Link>
            <Link href="/network" className="text-xs text-gray-500 hover:text-white transition-colors">Network</Link>
            <Link href="/app/trade" className="text-xs text-gray-500 hover:text-white transition-colors">Trade</Link>
          </div>
          <p className="text-xs text-gray-600">963X Network</p>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/blog/[slug]/page.tsx" isMerged="true"
"use client"

import Link from "next/link"
import { ArrowLeft, Clock, Tag, ChevronRight, Share2, ArrowRight } from "lucide-react"
import { Button } from "@/components/ui/button"
import { SunBitLogo } from "@/components/ui/sunbit-logo"
import { useParams } from "next/navigation"

// Full blog content
const blogContent: Record<string, {
  title: string
  date: string
  readTime: string
  category: string
  image?: string
  sections: { heading: string; content: string[] }[]
  relatedSlugs: string[]
}> = {
  "introducing-963x-network": {
    title: "Introducing 963X Network: Bitcoin-Backed Capital at Machine Speed",
    date: "2026-02-10",
    readTime: "8 min read",
    category: "Announcement",
    image: "/images/mars-hero-backdrop.jpg",
    sections: [
      {
        heading: "Why We Built 963X",
        content: [
          "DeFi has fragmented into isolated protocols -- lending here, trading there, yield somewhere else. Users move capital between platforms, losing efficiency at every hop. Liquidity is scattered, risk models are incompatible, and the stack is held together by bridges and aggregators that add latency, cost, and attack surface.",
          "963X takes a different approach. We built a vertically integrated protocol where capital, settlement, execution, AI agents, governance, and external connectivity exist in a single unified stack. Bitcoin backs the capital layer. USDO settles everything. AI agents optimize everything in between.",
        ],
      },
      {
        heading: "The 963X Stack",
        content: [
          "At the foundation sits the Capital Layer, where Bitcoin collateral backs USDB through over-collateralization. Above it, the Stable Settlement Layer uses USDO as the network's unit of account -- fully collateralized against external stablecoins, redeemable 1:1, with no algorithmic minting.",
          "The Execution Layer runs a hybrid matching engine serving 200+ perpetual markets with up to 125x leverage. The Agent Layer enables AI-powered trading strategies that operate within strict user-defined boundaries. Governance and Integration layers complete the stack.",
        ],
      },
      {
        heading: "What Is Live Today",
        content: [
          "PerpDEX is live with 200+ perpetual markets across crypto, forex, commodities, and indices. Spot trading, yield vaults, and staking are operational. The USDB stablecoin engine and USDO settlement layer are deployed.",
          "The FAI Agent Marketplace is under active development and scheduled for Q2 2026. Cross-chain bridges and institutional-grade API infrastructure will follow in the second half of the year.",
        ],
      },
      {
        heading: "What Comes Next",
        content: [
          "This is the beginning of a long build. 963X is not a fork, not a wrapper, and not a governance-token-backed experiment. It is a protocol designed from first principles to make Bitcoin capital productive at machine speed.",
          "We will be publishing technical deep dives on each layer of the stack in the coming weeks. Follow the blog for updates.",
        ],
      },
    ],
    relatedSlugs: ["usdo-stable-settlement", "perpdex-architecture", "roadmap-2026"],
  },
  "usdo-stable-settlement": {
    title: "USDO: The Stable Settlement Layer Behind 963X",
    date: "2026-02-08",
    readTime: "6 min read",
    category: "Technical",
    sections: [
      {
        heading: "Why USDO Exists",
        content: [
          "Every DeFi protocol needs a unit of account. Most default to USDT or USDC directly, fragmenting liquidity between pairs and creating dependency on external issuers for core protocol operations. Others create algorithmic stablecoins that introduce reflexive risk.",
          "USDO is neither. It is a fully-collateralized settlement asset backed 1:1 by external stablecoins (USDT, USDC, DAI). Users deposit stablecoins and mint USDO. They can redeem USDO back to the underlying asset at any time. No lock-up. No algorithmic stability mechanism. No governance token as collateral.",
        ],
      },
      {
        heading: "What USDO Settles",
        content: [
          "Every margin deposit, PnL settlement, liquidity provision, and validator stake on 963X is denominated in USDO. This creates a unified settlement layer that eliminates fragmentation -- one asset for all protocol operations.",
          "When a trader opens a 50x leveraged long on BTC-PERP, their margin is in USDO. When they close at profit, PnL is settled in USDO. When that USDO enters a liquidity pool, it earns yield in USDO. The entire capital cycle stays within one settlement standard.",
        ],
      },
      {
        heading: "Treasury and Yield",
        content: [
          "The underlying stablecoin collateral does not sit idle. The 963X treasury deploys conservative delta-neutral strategies -- basis trades, funding rate arbitrage, and short-term lending -- to generate yield on the float.",
          "This yield funds validator incentives, protocol development, and the stability reserve. The treasury never uses high-risk strategies or leverage on collateral. Preservation of the 1:1 backing is the primary constraint.",
        ],
      },
      {
        heading: "Why This Design",
        content: [
          "USDO exists because 963X needs settlement certainty. Algorithmic stablecoins have repeatedly failed under stress. Direct USDT/USDC dependency fragments the protocol. USDO solves both: it provides a unified settlement layer with full redeemability and zero reflexive risk.",
        ],
      },
    ],
    relatedSlugs: ["introducing-963x-network", "security-first-design", "bitcoin-capital-efficiency"],
  },
  "perpdex-architecture": {
    title: "PerpDEX Architecture: How We Execute 200+ Markets with Sub-Second Latency",
    date: "2026-02-05",
    readTime: "10 min read",
    category: "Technical",
    sections: [
      {
        heading: "The Matching Engine",
        content: [
          "The 963X PerpDEX uses a hybrid matching engine that combines onchain settlement with off-chain order matching. Orders are matched in memory with sub-millisecond latency, then batched and settled onchain in periodic intervals.",
          "This architecture achieves the speed of centralized exchanges while maintaining the transparency and self-custody properties of DeFi. Users always retain control of their margin -- the protocol never takes custody.",
        ],
      },
      {
        heading: "Market Coverage",
        content: [
          "The PerpDEX supports 200+ perpetual markets across four asset classes: crypto (BTC, ETH, SOL, and 100+ altcoins), forex (EUR/USD, GBP/USD, USD/JPY), commodities (gold, silver, oil, gas), and indices (S&P 500, NASDAQ).",
          "Each market has individually calibrated parameters: maximum leverage (up to 125x for BTC/ETH, down to 25x for small-cap meme coins), funding rate intervals, and liquidation thresholds.",
        ],
      },
      {
        heading: "Risk Management",
        content: [
          "Every position is monitored by a real-time risk engine that tracks margin ratios, unrealized PnL, and portfolio-level exposure. Liquidations are triggered progressively -- partial liquidation first, then full liquidation only if necessary.",
          "The system includes circuit breakers that pause trading in individual markets if price moves exceed 3 standard deviations within a 5-minute window. This prevents cascading liquidations during extreme volatility events.",
        ],
      },
      {
        heading: "Multi-Venue Execution",
        content: [
          "For large orders, the execution layer supports smart order routing across multiple venues -- splitting orders between the native orderbook, integrated CEX APIs (Binance, OKX, Bybit), and DEX aggregators to minimize slippage.",
          "Route selection is based on a scoring model that weighs liquidity depth, historical fill rates, latency, and gas costs. The system learns from execution outcomes to continuously improve routing decisions.",
        ],
      },
    ],
    relatedSlugs: ["introducing-963x-network", "security-first-design", "fai-agent-marketplace-preview"],
  },
  "fai-agent-marketplace-preview": {
    title: "FAI Agent Marketplace: What to Expect in Q2 2026",
    date: "2026-02-01",
    readTime: "7 min read",
    category: "Product",
    sections: [
      {
        heading: "What Is FAI",
        content: [
          "FAI stands for Financial Autonomous Infrastructure. It is the layer of 963X that enables AI agents to interpret natural language, simulate financial actions, and execute trades onchain -- all within strict user-defined boundaries.",
          "FAI is not a trading bot. It is an execution framework that transforms human intent into verified onchain actions. Users set the rules. Agents operate within them. Every action is auditable.",
        ],
      },
      {
        heading: "Three Execution Modes",
        content: [
          "Chat Mode (free): Users ask questions in natural language and receive market data, portfolio analysis, and trade simulations. No execution, no wallet required. Seven queries per day.",
          "Assisted Mode: AI parses user intent, simulates the trade, previews risk and slippage, and prepares the transaction. The user reviews everything and signs. The AI never signs.",
          "Autonomous Mode: Users grant fine-grained permissions (max trade size, daily volume cap, allowed actions) and the agent executes within those boundaries. Think iOS app permissions, not blank-check delegation.",
        ],
      },
      {
        heading: "Security Architecture",
        content: [
          "Every agent action passes through a 4-layer security pipeline: static rules (rate limits, gas checks), dynamic risk (volatility-adjusted limits), behavioral analysis (anomaly detection), and circuit breakers (system-wide halt on systemic risk).",
          "The blast radius of a compromised agent is capped at 0-5% of portfolio value by design. Agents never hold private keys. They submit transaction requests that are validated by the security engine before execution.",
        ],
      },
      {
        heading: "Timeline",
        content: [
          "The FAI Agent Marketplace is targeted for Q2 2026. Chat Mode will ship first, followed by Assisted Execution. Autonomous Mode will enter beta with a limited set of whitelisted strategies.",
          "Developer API access and the agent SDK will be available at launch for builders who want to create custom agents on the FAI framework.",
        ],
      },
    ],
    relatedSlugs: ["introducing-963x-network", "security-first-design", "perpdex-architecture"],
  },
  "bitcoin-capital-efficiency": {
    title: "Why Bitcoin Capital Efficiency Matters for DeFi",
    date: "2026-01-28",
    readTime: "5 min read",
    category: "Research",
    sections: [
      {
        heading: "The Problem",
        content: [
          "Bitcoin is the largest crypto asset by market cap, but most of it sits idle. Wrapped BTC in DeFi represents a fraction of total supply, and even wrapped BTC is typically used passively -- as collateral that generates minimal yield.",
          "This is a capital efficiency problem. Bitcoin holders want to participate in DeFi without selling their BTC. But current solutions require trusting bridges, wrapping mechanisms, or centralized custodians.",
        ],
      },
      {
        heading: "The 963X Approach",
        content: [
          "963X treats Bitcoin as productive capital. BTC backs USDB at a minimum 150% collateralization ratio. USDB flows into the execution layer as trading margin, liquidity provision, and yield farming -- all while the underlying BTC remains in non-custodial vaults.",
          "The risk engine continuously monitors collateral ratios and triggers liquidations before the system becomes under-collateralized. This creates a capital-efficient loop: BTC backs USDB, USDB fuels execution, execution generates fees, fees compound back into the system.",
        ],
      },
      {
        heading: "Why It Matters",
        content: [
          "Capital efficiency is not just about yield. It is about making Bitcoin useful in the DeFi economy without compromising its properties. 963X does not try to make Bitcoin programmable -- it builds a programmable layer on top of Bitcoin's value.",
        ],
      },
    ],
    relatedSlugs: ["introducing-963x-network", "usdo-stable-settlement", "validator-staking-economics"],
  },
  "security-first-design": {
    title: "Security-First: Our 4-Layer Risk Architecture",
    date: "2026-01-25",
    readTime: "6 min read",
    category: "Technical",
    sections: [
      {
        heading: "Why Security Is Layer Zero",
        content: [
          "In DeFi, security is not a feature -- it is the foundation. Every protocol that has lost user funds did so because security was treated as an afterthought. At 963X, the risk architecture was designed before the first line of execution code was written.",
        ],
      },
      {
        heading: "The 4-Layer Pipeline",
        content: [
          "Layer 1 -- Static Rules: Every transaction is checked against hardcoded constraints: gas price limits, rate limiting per wallet, maximum transaction size, and failure thresholds. These rules cannot be overridden by governance or agents.",
          "Layer 2 -- Dynamic Risk: Volatility-based adjustments reduce position limits during high-volatility periods. If BTC moves 5% in an hour, maximum leverage is automatically reduced across all BTC markets.",
          "Layer 3 -- Behavioral Analysis: Statistical anomaly detection flags unusual patterns -- wallet activity that deviates more than 3 standard deviations from historical norms triggers additional verification.",
          "Layer 4 -- Circuit Breakers: System-wide emergency mechanisms that pause all execution if aggregate risk metrics exceed thresholds. This is the last line of defense against systemic risk events.",
        ],
      },
      {
        heading: "Agent Security",
        content: [
          "AI agents operate under additional security constraints. They never hold private keys. They submit transaction requests through the same 4-layer pipeline. Their blast radius is capped by design -- a compromised agent can affect at most 0-5% of user portfolio value.",
          "Permission grants follow the principle of least privilege. Users specify exactly what actions an agent can take, with what assets, up to what size, and for how long. Permissions can be revoked instantly.",
        ],
      },
    ],
    relatedSlugs: ["perpdex-architecture", "fai-agent-marketplace-preview", "introducing-963x-network"],
  },
  "validator-staking-economics": {
    title: "Validator Staking and ve963X: Aligning Incentives",
    date: "2026-01-20",
    readTime: "5 min read",
    category: "Research",
    sections: [
      {
        heading: "The Validator Model",
        content: [
          "963X validators are not mining blocks. They are economic participants who stake USDO to align their incentives with protocol health. Validators process transactions, provide price feeds, and participate in governance -- and they must have skin in the game to do so.",
          "The minimum validator stake is denominated in USDO, ensuring that validators are exposed to the same settlement asset that the entire network uses. This creates natural alignment: if USDO fails, validators lose their stake.",
        ],
      },
      {
        heading: "ve963X Tokenomics",
        content: [
          "The 963X governance token uses a vote-escrowed model (ve963X). Token holders lock their 963X for a period (up to 4 years) and receive ve963X, which grants voting power proportional to lock duration.",
          "Longer locks mean more voting power. This mechanism selects for participants with long-term alignment and filters out short-term speculators from governance decisions.",
        ],
      },
      {
        heading: "Revenue Distribution",
        content: [
          "Trading fees generated by the PerpDEX are distributed to ve963X holders and validators. The split is governed by protocol parameters that can be adjusted through governance proposals.",
          "This creates a sustainable economic loop: users trade, fees accumulate, ve963X holders and validators earn revenue, and the protocol continues to develop through treasury allocation.",
        ],
      },
    ],
    relatedSlugs: ["bitcoin-capital-efficiency", "usdo-stable-settlement", "roadmap-2026"],
  },
  "roadmap-2026": {
    title: "963X Roadmap: What We Are Building in 2026",
    date: "2026-01-15",
    readTime: "4 min read",
    category: "Announcement",
    sections: [
      {
        heading: "Q1 2026: Foundation (Live)",
        content: [
          "PerpDEX launch with 200+ markets and up to 125x leverage. Spot trading, yield vaults, and staking infrastructure. USDB stablecoin engine and USDO settlement layer. Core risk management and security pipeline.",
        ],
      },
      {
        heading: "Q2-Q3 2026: Intelligence Layer",
        content: [
          "FAI Agent Marketplace launch with Chat Mode, Assisted Execution, and Autonomous Mode beta. Developer API and agent SDK. Advanced order types including DCA, trailing stops, and conditional execution. CEX integration for multi-venue smart order routing.",
        ],
      },
      {
        heading: "Q4 2026 and Beyond",
        content: [
          "Cross-chain bridges for multi-network settlement. Institutional-grade API infrastructure with dedicated instances and SLA guarantees. Mobile application. Expanded asset coverage including real-world assets (RWA) and prediction markets.",
          "The roadmap is not set in stone. We build in public and adjust based on what users actually need. Follow the blog for updates as we ship.",
        ],
      },
    ],
    relatedSlugs: ["introducing-963x-network", "fai-agent-marketplace-preview", "perpdex-architecture"],
  },
}

// Shared post metadata for related posts
const postMeta: Record<string, { title: string; category: string; date: string }> = {
  "introducing-963x-network": { title: "Introducing 963X Network", category: "Announcement", date: "2026-02-10" },
  "usdo-stable-settlement": { title: "USDO: The Stable Settlement Layer", category: "Technical", date: "2026-02-08" },
  "perpdex-architecture": { title: "PerpDEX Architecture Deep Dive", category: "Technical", date: "2026-02-05" },
  "fai-agent-marketplace-preview": { title: "FAI Agent Marketplace Preview", category: "Product", date: "2026-02-01" },
  "bitcoin-capital-efficiency": { title: "Bitcoin Capital Efficiency", category: "Research", date: "2026-01-28" },
  "security-first-design": { title: "4-Layer Risk Architecture", category: "Technical", date: "2026-01-25" },
  "validator-staking-economics": { title: "Validator Staking & ve963X", category: "Research", date: "2026-01-20" },
  "roadmap-2026": { title: "963X Roadmap 2026", category: "Announcement", date: "2026-01-15" },
}

function formatDate(dateStr: string) {
  return new Date(dateStr).toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" })
}

export default function BlogPostPage() {
  const params = useParams()
  const slug = params.slug as string
  const post = blogContent[slug]

if (!post) {
    return (
      <div className="min-h-screen bg-[#0a0a0f] text-white flex items-center justify-center">
        <div className="text-center">
          <h1 className="text-2xl font-bold mb-4">Article not found</h1>
          <Link href="/blog">
            <Button className="bg-[#F7931A] hover:bg-[#E8850C] text-black">Back to Blog</Button>
          </Link>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-[#0a0a0f] text-white">
      {/* Navigation */}
      <nav className="sticky top-0 z-50 bg-[#0a0a0f]/90 backdrop-blur-xl border-b border-white/5">
        <div className="max-w-4xl mx-auto px-6 h-16 flex items-center justify-between">
          <Link href="/" className="flex items-center gap-2">
            <SunBitLogo className="h-8 w-auto" />
          </Link>
          <div className="flex items-center gap-4">
            <Link href="/blog" className="text-sm text-gray-400 hover:text-white transition-colors">Blog</Link>
            <Link href="/app/trade">
              <Button size="sm" className="bg-[#F7931A] hover:bg-[#E8850C] text-black font-medium">Launch App</Button>
            </Link>
          </div>
        </div>
      </nav>

{/* Hero Image */}
      {post.image && (
        <div className="relative h-64 md:h-80 overflow-hidden">
          <img src={post.image} alt={post.title} className="w-full h-full object-cover" />
          <div className="absolute inset-0 bg-gradient-to-t from-[#0a0a0f] via-[#0a0a0f]/50 to-transparent" />
        </div>
      )}

{/* Article */}
      <article className={`max-w-4xl mx-auto px-6 ${post.image ? "-mt-20 relative" : "pt-12"}`}>
        {/* Breadcrumb */}
        <Link href="/blog" className="inline-flex items-center gap-2 text-sm text-gray-500 hover:text-white transition-colors mb-8">
          <ArrowLeft className="w-4 h-4" /> All articles
        </Link>

{/* Header */}
        <header className="mb-12">
          <div className="flex items-center gap-3 mb-4">
            <span className={`px-2.5 py-1 text-xs font-medium rounded-md border ${categoryColors[post.category]}`}>
              {post.category}
            </span>
          </div>
          <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-6 leading-tight text-balance">
            {post.title}
          </h1>
          <div className="flex items-center gap-6 text-sm text-gray-500">
            <span>{formatDate(post.date)}</span>
            <span className="flex items-center gap-1.5">
              <Clock className="w-4 h-4" />
              {post.readTime}
            </span>
          </div>
        </header>

{/* Content */}
        <div className="space-y-12 mb-16">
          {post.sections.map((section, i) => (
            <section key={i}>
              <h2 className="text-xl md:text-2xl font-bold text-white mb-4">{section.heading}</h2>
              <div className="space-y-4">
                {section.content.map((paragraph, j) => (
                  <p key={j} className="text-gray-400 leading-relaxed text-[15px]">{paragraph}</p>
                ))}
              </div>
            </section>
          ))}
        </div>

{/* Divider */}
        <div className="border-t border-white/5 pt-8 mb-8">
          <div className="flex items-center justify-between">
            <p className="text-sm text-gray-600">Published {formatDate(post.date)}</p>
            <button
              onClick={() => navigator.clipboard?.writeText(window.location.href)}
              className="flex items-center gap-2 text-sm text-gray-500 hover:text-white transition-colors"
            >
              <Share2 className="w-4 h-4" /> Copy link
            </button>
          </div>
        </div>

{/* Related Posts */}
        {post.relatedSlugs.length > 0 && (
          <section className="mb-16">
            <h3 className="text-lg font-bold text-white mb-6">Related Articles</h3>
            <div className="grid md:grid-cols-3 gap-4">
              {post.relatedSlugs.map((rSlug) => {
                const meta = postMeta[rSlug]
                if (!meta) return null
                return (
                  <Link key={rSlug} href={`/blog/${rSlug}`}>
                    <div className="group bg-[#12121a] rounded-xl border border-white/5 hover:border-white/10 p-5 transition-all h-full">
                      <span className={`px-2 py-0.5 text-[10px] font-medium rounded border ${categoryColors[meta.category]}`}>
                        {meta.category}
                      </span>
                      <h4 className="text-sm font-semibold text-white mt-3 mb-2 group-hover:text-[#F7931A] transition-colors line-clamp-2">
                        {meta.title}
                      </h4>
                      <span className="text-xs text-gray-600">{formatDate(meta.date)}</span>
                    </div>
                  </Link>
                )
              })}
            </div>
          </section>
        )}
      </article>

{/* Footer */}
      <footer className="py-8 border-t border-white/5">
        <div className="max-w-4xl mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-4">
          <Link href="/" className="flex items-center gap-2">
            <SunBitLogo className="h-6 w-auto" />
          </Link>
          <div className="flex items-center gap-6">
            <Link href="/" className="text-xs text-gray-500 hover:text-white transition-colors">Home</Link>
            <Link href="/blog" className="text-xs text-gray-500 hover:text-white transition-colors">Blog</Link>
            <Link href="/app/trade" className="text-xs text-gray-500 hover:text-white transition-colors">Trade</Link>
          </div>
          <p className="text-xs text-gray-600">963X Network</p>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/brand/layout.tsx" isMerged="true"
export const metadata = {
  title: "Brand Kit | 963X Protocol",
  description: "Official brand assets, color palette, typography, and usage guidelines for 963X Protocol.",
}

export default function BrandLayout({ children }: { children: React.ReactNode }) {
  return children
}
[V0_FILE]typescriptreact:file="app/docs/layout.tsx" isMerged="true"
import type { Metadata } from "next"

export const metadata: Metadata = {
  title: "Documentation | 963X",
  description: "Technical documentation, API reference, and guides for the 963X protocol.",
}

export default function DocsLayout({ children }: { children: React.ReactNode }) {
  return <>{children}</>
}
[V0_FILE]typescriptreact:file="app/docs/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import {
  Search,
  BookOpen,
  FileText,
  Code,
  Shield,
  Zap,
  Bot,
  Wallet,
  ChevronRight,
  ChevronDown,
  ExternalLink,
  Copy,
  Check,
  ArrowLeft,
  Layers,
  CircleDollarSign,
  BarChart3,
  Network,
  Lock,
  HelpCircle,
} from "lucide-react"
import { SunBitLogo } from "@/components/ui/sunbit-logo"

// Documentation structure - admin can expand these sections
const docCategories = [
  {
    id: "getting-started",
    name: "Getting Started",
    icon: BookOpen,
    sections: [
      {
        id: "introduction",
        title: "Introduction to 963X",
        content: [
          { type: "paragraph", text: "963X is a vertically integrated DeFi protocol built on Bitcoin. It combines perpetual trading, stable settlement, AI-driven execution, and yield infrastructure into a single stack -- designed to unlock Bitcoin's full capital efficiency." },
          { type: "heading", text: "Core Products" },
          { type: "list", items: [
            "PerpDEX -- Perpetual futures exchange with 200+ markets and up to 125x leverage",
            "USDB -- Bitcoin-backed stablecoin with 150% minimum collateralization",
            "USDO -- Stable settlement layer for unified margin, PnL, and liquidity",
            "Yield Vaults -- Automated strategies with AI-optimized rebalancing",
            "Staking -- ve963X model for governance weight and fee sharing",
            "FAI Agent -- Autonomous execution layer (coming Q2 2026)",
          ]},
          { type: "heading", text: "Architecture" },
          { type: "paragraph", text: "The 963X stack consists of six layers: Capital Layer (BTC collateral), Stable Settlement Layer (USDO), Execution Layer (PerpDEX + Spot), Agent Layer (FAI), Governance Layer (ve963X), and Integration Layer (bridges, oracles, CEX). Each layer is designed to be independently upgradeable while maintaining composability across the stack." },
        ],
      },
      {
        id: "quickstart",
        title: "Quickstart Guide",
        content: [
          { type: "heading", text: "Step 1: Connect Wallet" },
          { type: "paragraph", text: "Click 'Launch App' and connect your wallet using MetaMask, WalletConnect, or any EVM-compatible wallet. 963X supports Ethereum mainnet and Bitcoin Layer 2 networks." },
          { type: "heading", text: "Step 2: Deposit Assets" },
          { type: "paragraph", text: "Deposit BTC variants (WBTC, cbBTC, LBTC, tBTC, btBTC) or stablecoins (USDT, USDC). For perpetual trading, your collateral will be converted to USDO for unified settlement." },
          { type: "heading", text: "Step 3: Start Trading" },
          { type: "paragraph", text: "Navigate to Trade to open perpetual positions, or explore Earn for yield vaults and staking. All PnL is settled in USDO." },
          { type: "code", language: "text", text: "Supported Networks:\n- Ethereum Mainnet\n- Bitcoin L2 (coming soon)\n\nSupported Wallets:\n- MetaMask\n- WalletConnect\n- Coinbase Wallet\n- Rabby" },
        ],
      },
      {
        id: "supported-assets",
        title: "Supported Assets",
        content: [
          { type: "heading", text: "BTC Variants" },
          { type: "list", items: [
            "WBTC -- Wrapped Bitcoin (BitGo custody)",
            "cbBTC -- Coinbase Wrapped Bitcoin",
            "LBTC -- Lombard Finance liquid staking BTC",
            "tBTC -- Threshold Network trustless BTC",
            "btBTC -- Bedrock liquid restaking BTC",
          ]},
          { type: "heading", text: "Stablecoins" },
          { type: "list", items: [
            "USDT -- Tether USD",
            "USDC -- Circle USD Coin",
            "DAI -- MakerDAO stablecoin",
            "USDB -- 963X Bitcoin-backed stablecoin",
            "USDO -- 963X settlement stablecoin",
          ]},
        ],
      },
    ],
  },
  {
    id: "perpdex",
    name: "PerpDEX Trading",
    icon: BarChart3,
    sections: [
      {
        id: "trading-overview",
        title: "Trading Overview",
        content: [
          { type: "paragraph", text: "PerpDEX is the core perpetual futures exchange of 963X. It supports 200+ trading pairs across Crypto, Forex, and Commodities with leverage up to 125x. All margin and settlement use USDO as the base unit." },
          { type: "heading", text: "Order Types" },
          { type: "list", items: [
            "Market Order -- Execute immediately at best available price",
            "Limit Order -- Execute at specified price or better",
            "Stop-Loss -- Close position when price reaches stop level",
            "Take-Profit -- Close position when profit target is reached",
            "Trailing Stop -- Dynamic stop that follows price movement",
            "Reduce-Only -- Only reduce existing position size",
          ]},
          { type: "heading", text: "Fee Structure" },
          { type: "code", language: "text", text: "Trading Fees:\n  Maker:  0.02%\n  Taker:  0.05%\n\nFunding Rate:\n  Calculated every 8 hours\n  Based on premium between mark and index price\n\nLiquidation Fee: 0.5% of position value" },
        ],
      },
      {
        id: "margin-leverage",
        title: "Margin & Leverage",
        content: [
          { type: "paragraph", text: "963X uses cross-margin by default with isolated margin available per position. Maximum leverage varies by asset class." },
          { type: "heading", text: "Leverage Limits" },
          { type: "code", language: "text", text: "Asset Class      Max Leverage\n─────────────────────────────\nBTC/USD          125x\nETH/USD          100x\nMajor Alts       50x\nForex Majors     100x\nForex Minors     50x\nCommodities      50x" },
          { type: "heading", text: "Liquidation" },
          { type: "paragraph", text: "Positions are liquidated when margin ratio falls below the maintenance margin requirement. The liquidation engine uses a partial liquidation system to minimize market impact. Liquidation penalties are distributed to the insurance fund." },
        ],
      },
      {
        id: "order-book",
        title: "Order Book & Matching",
        content: [
          { type: "paragraph", text: "PerpDEX operates a hybrid order book with onchain settlement. Orders are matched using a price-time priority algorithm with sub-second execution latency." },
          { type: "heading", text: "View Modes" },
          { type: "list", items: [
            "Table -- Classic order book with bid/ask tabs",
            "Stacked -- Asks and bids visible simultaneously with spread indicator",
            "Large -- Side-by-side order book and recent trades",
          ]},
          { type: "heading", text: "Tick Sizes" },
          { type: "code", language: "text", text: "Precision options: 0.01, 0.1, 1, 10, 50, 100\nDefault: 0.01 for crypto, 0.0001 for forex" },
        ],
      },
    ],
  },
  {
    id: "settlement",
    name: "USDO Settlement",
    icon: CircleDollarSign,
    sections: [
      {
        id: "usdo-overview",
        title: "What is USDO",
        content: [
          { type: "paragraph", text: "USDO is the stable settlement infrastructure of 963X Network. It is a fully collateralized stable asset minted against USDT, USDC, and DAI -- not algorithmic, not backed by governance tokens, and redeemable 1:1 at any time." },
          { type: "heading", text: "Key Properties" },
          { type: "list", items: [
            "Fully collateralized -- backed 1:1 by external stablecoins",
            "Non-algorithmic -- no reflexive token backing",
            "Redeemable -- 1:1 redemption at any time, no lock-up",
            "Settlement asset -- unified margin, PnL, and LP base pair",
            "Yield-bearing -- treasury generates conservative yield on collateral",
          ]},
          { type: "heading", text: "Use Cases" },
          { type: "list", items: [
            "Perpetual trading margin and PnL settlement",
            "Liquidity pool base pair",
            "Validator staking requirement",
            "Cross-network settlement",
          ]},
        ],
      },
      {
        id: "minting-redeeming",
        title: "Minting & Redeeming",
        content: [
          { type: "paragraph", text: "Users deposit external stablecoins to mint USDO. The process is instant and permissionless." },
          { type: "code", language: "text", text: "Mint:\n  Deposit USDT/USDC/DAI → Receive USDO 1:1\n  No minimum deposit\n  Instant processing\n\nRedeem:\n  Burn USDO → Receive underlying stablecoin 1:1\n  No lock-up period\n  Subject to available liquidity buffer\n\nTreasury:\n  Collateral held in secure treasury\n  Conservative delta-neutral yield strategies\n  Yield funds validator incentives and growth" },
        ],
      },
    ],
  },
  {
    id: "usdb",
    name: "USDB Stablecoin",
    icon: Shield,
    sections: [
      {
        id: "usdb-overview",
        title: "USDB Overview",
        content: [
          { type: "paragraph", text: "USDB is a Bitcoin-backed stablecoin pegged to USD. Unlike USDO which is collateralized by stablecoins, USDB is backed by Bitcoin with a minimum 150% collateralization ratio." },
          { type: "heading", text: "Mechanism" },
          { type: "list", items: [
            "Deposit BTC variants as collateral",
            "Mint USDB up to 66% of collateral value (150% ratio)",
            "Risk Engine monitors positions continuously",
            "Liquidation triggered if ratio falls below 150%",
          ]},
          { type: "heading", text: "Collateral Types" },
          { type: "code", language: "text", text: "Accepted:  WBTC, cbBTC, LBTC, tBTC, btBTC\nMin Ratio: 150%\nLiq Ratio: 130%\nOracle:    Chainlink + TWAP hybrid" },
        ],
      },
    ],
  },
  {
    id: "staking",
    name: "Staking & Governance",
    icon: Lock,
    sections: [
      {
        id: "ve963x",
        title: "ve963X Model",
        content: [
          { type: "paragraph", text: "963X uses a vote-escrow model (ve963X) for governance. Lock 963X tokens for 1 week to 4 years to receive ve963X, which provides governance voting power and protocol fee sharing." },
          { type: "heading", text: "Lock Multipliers" },
          { type: "code", language: "text", text: "Lock Duration    ve963X Multiplier\n──────────────────────────────────\n1 week           0.005x\n1 month          0.02x\n6 months         0.125x\n1 year           0.25x\n2 years          0.5x\n4 years          1.0x" },
          { type: "heading", text: "Benefits" },
          { type: "list", items: [
            "Governance voting on protocol parameters",
            "Share of protocol trading fees",
            "Boosted yield vault returns",
            "Priority access to new features",
          ]},
        ],
      },
    ],
  },
  {
    id: "vaults",
    name: "Yield Vaults",
    icon: Wallet,
    sections: [
      {
        id: "vault-overview",
        title: "Vault Overview",
        content: [
          { type: "paragraph", text: "963X Yield Vaults provide automated yield strategies with AI-optimized rebalancing. Each vault has a specific strategy, risk profile, and supported assets." },
          { type: "heading", text: "Vault Types" },
          { type: "list", items: [
            "BTC Hodl Vault -- Conservative BTC accumulation strategy",
            "Delta Neutral -- Market-neutral funding rate harvesting",
            "Liquidity Provision -- Automated LP management with IL mitigation",
            "963X Ecosystem Vault -- Diversified across all 963X products",
          ]},
          { type: "heading", text: "Fees" },
          { type: "code", language: "text", text: "Management Fee:  0% - 2% annually\nPerformance Fee: 10% of profits\nDeposit Fee:     0%\nWithdrawal Fee:  0% (subject to lock period)" },
        ],
      },
    ],
  },
  {
    id: "fai-agent",
    name: "FAI Agent",
    icon: Bot,
    sections: [
      {
        id: "fai-overview",
        title: "FAI Overview",
        content: [
          { type: "paragraph", text: "FAI (Financial Autonomous Infrastructure) is the AI execution layer of 963X. It allows users to interact with the protocol using natural language, with AI agents that parse intent, simulate trades, and execute under strict user-defined rules." },
          { type: "heading", text: "Execution Modes" },
          { type: "list", items: [
            "Chat Mode (Free) -- 7 queries/day, market data and simulations only",
            "Assisted Execution -- AI prepares transactions, user signs each one",
            "Autonomous Agent -- AI executes within predefined risk parameters",
          ]},
          { type: "heading", text: "Status" },
          { type: "paragraph", text: "FAI Agent Marketplace is currently under development with an expected launch in Q2 2026. Full documentation will be published upon launch." },
        ],
      },
    ],
  },
  {
    id: "api",
    name: "API Reference",
    icon: Code,
    sections: [
      {
        id: "api-overview",
        title: "API Overview",
        content: [
          { type: "paragraph", text: "The 963X API provides programmatic access to trading, market data, account management, and agent execution. All endpoints use REST with JSON responses. WebSocket feeds are available for real-time data." },
          { type: "heading", text: "Base URLs" },
          { type: "code", language: "text", text: "REST API:      https://api.963x.xyz/v1\nWebSocket:     wss://ws.963x.xyz/v1\nTestnet API:   https://testnet-api.963x.xyz/v1\nTestnet WS:    wss://testnet-ws.963x.xyz/v1" },
          { type: "heading", text: "Authentication" },
          { type: "code", language: "bash", text: "# API Key Authentication\ncurl -H 'X-API-Key: your_api_key' \\\n     -H 'X-API-Signature: hmac_sha256_signature' \\\n     -H 'X-API-Timestamp: unix_timestamp_ms' \\\n     https://api.963x.xyz/v1/account/balance" },
          { type: "heading", text: "Rate Limits" },
          { type: "code", language: "text", text: "Tier          Requests/min    WebSocket Streams\n─────────────────────────────────────────────\nFree          60              5\nPro           300             25\nDeveloper     1,000           100\nInstitution   Unlimited       Unlimited" },
        ],
      },
      {
        id: "api-endpoints",
        title: "Endpoints",
        content: [
          { type: "heading", text: "Market Data" },
          { type: "code", language: "text", text: "GET  /v1/markets              List all markets\nGET  /v1/markets/{symbol}     Market details\nGET  /v1/orderbook/{symbol}   Order book snapshot\nGET  /v1/trades/{symbol}      Recent trades\nGET  /v1/candles/{symbol}     OHLCV candlestick data\nGET  /v1/ticker/{symbol}      24h ticker statistics\nGET  /v1/funding/{symbol}     Funding rate history" },
          { type: "heading", text: "Trading" },
          { type: "code", language: "text", text: "POST   /v1/orders              Place order\nDELETE /v1/orders/{id}         Cancel order\nGET    /v1/orders               List open orders\nGET    /v1/orders/history        Order history\nGET    /v1/positions             Open positions\nPOST   /v1/positions/close       Close position\nPUT    /v1/positions/leverage    Update leverage" },
          { type: "heading", text: "Account" },
          { type: "code", language: "text", text: "GET  /v1/account/balance       Account balance\nGET  /v1/account/deposits       Deposit history\nGET  /v1/account/withdrawals    Withdrawal history\nGET  /v1/account/pnl            PnL summary\nGET  /v1/account/fees           Fee tier info" },
          { type: "heading", text: "WebSocket Channels" },
          { type: "code", language: "javascript", text: "// Subscribe to orderbook updates\nws.send(JSON.stringify({\n  op: 'subscribe',\n  channel: 'orderbook',\n  market: 'BTC-USDO'\n}))\n\n// Subscribe to user trades\nws.send(JSON.stringify({\n  op: 'subscribe',\n  channel: 'trades',\n  market: 'BTC-USDO'\n}))\n\n// Available channels:\n// orderbook, trades, ticker, candles,\n// positions, orders, account" },
        ],
      },
    ],
  },
  {
    id: "security",
    name: "Security",
    icon: Shield,
    sections: [
      {
        id: "security-model",
        title: "Security Model",
        content: [
          { type: "paragraph", text: "963X employs a multi-layered security architecture. The protocol is non-custodial -- users always retain control of their funds. AI agents never hold private keys." },
          { type: "heading", text: "Security Layers" },
          { type: "list", items: [
            "Layer 1: Static Rules -- Gas limits, rate limiting, failure thresholds",
            "Layer 2: Dynamic Risk -- Volatility-based limit adjustments in real-time",
            "Layer 3: Behavioral Analysis -- Anomaly detection at 3x standard deviation",
            "Layer 4: Circuit Breaker -- System-wide halt on systemic risk detection",
          ]},
          { type: "heading", text: "Audit Status" },
          { type: "paragraph", text: "Smart contracts are undergoing audits by leading security firms. Audit reports will be published upon completion. Bug bounty program details will be announced." },
        ],
      },
    ],
  },
]

function CodeBlock({ code, language }: { code: string; language: string }) {
  const [copied, setCopied] = useState(false)
  const handleCopy = () => {
    navigator.clipboard.writeText(code)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }
  return (
    <div className="relative group rounded-lg bg-[#0d0d14] border border-white/5 overflow-hidden my-4">
      <div className="flex items-center justify-between px-4 py-2 border-b border-white/5 bg-white/[0.02]">
        <span className="text-[10px] font-mono uppercase tracking-wider text-gray-600">{language}</span>
        <button onClick={handleCopy} className="text-gray-600 hover:text-white transition-colors">
          {copied ? <Check className="w-3.5 h-3.5 text-emerald-400" /> : <Copy className="w-3.5 h-3.5" />}
        </button>
      </div>
      <pre className="p-4 overflow-x-auto text-sm leading-relaxed"><code className="text-gray-300 font-mono">{code}</code></pre>
    </div>
  )
}

export default function DocsPage() {
  const [activeCategory, setActiveCategory] = useState("getting-started")
  const [activeSection, setActiveSection] = useState("introduction")
  const [searchQuery, setSearchQuery] = useState("")
  const [expandedCategories, setExpandedCategories] = useState<Set<string>>(new Set(["getting-started"]))

const toggleCategory = (catId: string) => {
    const next = new Set(expandedCategories)
    if (next.has(catId)) next.delete(catId)
    else next.add(catId)
    setExpandedCategories(next)
  }

const selectSection = (catId: string, secId: string) => {
    setActiveCategory(catId)
    setActiveSection(secId)
    if (!expandedCategories.has(catId)) {
      setExpandedCategories(new Set([...expandedCategories, catId]))
    }
  }

const currentCategory = docCategories.find(c => c.id === activeCategory)
  const currentSection = currentCategory?.sections.find(s => s.id === activeSection)

// Search across all content
  const searchResults = searchQuery.length > 2
    ? docCategories.flatMap(cat =>
        cat.sections.filter(sec =>
          sec.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
          sec.content.some(block =>
            (block.text || "").toLowerCase().includes(searchQuery.toLowerCase()) ||
            (block.items || []).some(i => i.toLowerCase().includes(searchQuery.toLowerCase()))
          )
        ).map(sec => ({ category: cat, section: sec }))
      )
    : []

return (
    <div className="min-h-screen bg-[#0a0a0f] text-white">
      {/* Top Nav */}
      <header className="sticky top-0 z-50 border-b border-white/5 bg-[#0a0a0f]/95 backdrop-blur-xl">
        <div className="max-w-[1400px] mx-auto flex items-center justify-between px-6 h-14">
          <div className="flex items-center gap-6">
            <Link href="/" className="flex items-center gap-2">
              <SunBitLogo className="h-6 w-auto" />
            </Link>
            <div className="hidden md:flex items-center gap-1 text-sm text-gray-500">
              <ChevronRight className="w-3.5 h-3.5" />
              <span className="text-white font-medium">Documentation</span>
            </div>
          </div>
          <div className="flex items-center gap-4">
            <Link href="/app/trade" className="text-sm text-gray-400 hover:text-white transition-colors">
              Launch App
            </Link>
            <Link href="/blog" className="text-sm text-gray-400 hover:text-white transition-colors">
              Blog
            </Link>
          </div>
        </div>
      </header>

<div className="max-w-[1400px] mx-auto flex">
        {/* Sidebar */}
        <aside className="hidden lg:block w-72 shrink-0 border-r border-white/5 sticky top-14 h-[calc(100vh-56px)] overflow-y-auto">
          <div className="p-4">
            {/* Search */}
            <div className="relative mb-6">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-600" />
              <input
                type="text"
                placeholder="Search docs..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full bg-white/5 border border-white/10 rounded-lg pl-9 pr-3 py-2 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-[#F7931A]/40"
              />
            </div>

{/* Search Results */}
            {searchQuery.length > 2 && (
              <div className="mb-6 space-y-1">
                <div className="text-[10px] font-bold uppercase tracking-wider text-gray-600 mb-2 px-2">
                  {searchResults.length} results
                </div>
                {searchResults.map(({ category, section }) => (
                  <button
                    key={section.id}
                    onClick={() => { selectSection(category.id, section.id); setSearchQuery("") }}
                    className="w-full text-left px-3 py-2 rounded-lg text-sm text-gray-300 hover:bg-white/5 transition-colors"
                  >
                    <div className="font-medium">{section.title}</div>
                    <div className="text-xs text-gray-600">{category.name}</div>
                  </button>
                ))}
                {searchResults.length === 0 && (
                  <div className="text-sm text-gray-600 px-2">No results found</div>
                )}
              </div>
            )}

{/* Category Tree */}
            {!searchQuery && (
              <nav className="space-y-1">
                {docCategories.map((cat) => (
                  <div key={cat.id}>
                    <button
                      onClick={() => toggleCategory(cat.id)}
                      className={`w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
                        activeCategory === cat.id ? "text-white" : "text-gray-400 hover:text-white"
                      }`}
                    >
                      <cat.icon className="w-4 h-4 shrink-0" style={{ color: activeCategory === cat.id ? "#F7931A" : undefined }} />
                      <span className="flex-1 text-left">{cat.name}</span>
                      <ChevronDown className={`w-3.5 h-3.5 text-gray-600 transition-transform ${expandedCategories.has(cat.id) ? "rotate-180" : ""}`} />
                    </button>
                    {expandedCategories.has(cat.id) && (
                      <div className="ml-6 mt-1 space-y-0.5 border-l border-white/5 pl-3">
                        {cat.sections.map((sec) => (
                          <button
                            key={sec.id}
                            onClick={() => selectSection(cat.id, sec.id)}
                            className={`w-full text-left px-3 py-1.5 rounded text-xs transition-colors ${
                              activeSection === sec.id && activeCategory === cat.id
                                ? "text-[#F7931A] bg-[#F7931A]/5"
                                : "text-gray-500 hover:text-white"
                            }`}
                          >
                            {sec.title}
                          </button>
                        ))}
                      </div>
                    )}
                  </div>
                ))}
              </nav>
            )}
          </div>
        </aside>

{/* Main Content */}
        <main className="flex-1 min-w-0">
          {/* Mobile category selector */}
          <div className="lg:hidden p-4 border-b border-white/5">
            <div className="relative mb-3">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-600" />
              <input
                type="text"
                placeholder="Search docs..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full bg-white/5 border border-white/10 rounded-lg pl-9 pr-3 py-2 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-[#F7931A]/40"
              />
            </div>
            <div className="flex gap-2 overflow-x-auto pb-1">
              {docCategories.map(cat => (
                <button
                  key={cat.id}
                  onClick={() => { setActiveCategory(cat.id); setActiveSection(cat.sections[0].id); setExpandedCategories(new Set([cat.id])) }}
                  className={`shrink-0 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
                    activeCategory === cat.id ? "bg-[#F7931A] text-black" : "bg-white/5 text-gray-400"
                  }`}
                >
                  {cat.name}
                </button>
              ))}
            </div>
          </div>

<div className="max-w-3xl mx-auto px-6 py-10">
            {/* Breadcrumb */}
            <div className="flex items-center gap-2 text-xs text-gray-600 mb-6">
              <Link href="/" className="hover:text-white transition-colors">Home</Link>
              <ChevronRight className="w-3 h-3" />
              <span>Docs</span>
              {currentCategory && (
                <>
                  <ChevronRight className="w-3 h-3" />
                  <span className="text-gray-400">{currentCategory.name}</span>
                </>
              )}
            </div>

{/* Title */}
            {currentSection && (
              <>
                <h1 className="text-3xl font-bold text-white mb-2">{currentSection.title}</h1>
                <div className="flex items-center gap-3 mb-8">
                  <span className="text-xs text-gray-600">{currentCategory?.name}</span>
                  <span className="w-1 h-1 rounded-full bg-gray-700" />
                  <span className="text-xs text-gray-600">Last updated Feb 2026</span>
                </div>

{/* Content */}
                <div className="prose-invert max-w-none">
                  <DocContent content={currentSection.content} />
                </div>

{/* Section Navigation */}
                <div className="mt-12 pt-8 border-t border-white/5 flex items-center justify-between">
                  {(() => {
                    const allSections = docCategories.flatMap(c => c.sections.map(s => ({ catId: c.id, ...s })))
                    const currentIndex = allSections.findIndex(s => s.id === activeSection && s.catId === activeCategory)
                    const prev = currentIndex > 0 ? allSections[currentIndex - 1] : null
                    const next = currentIndex < allSections.length - 1 ? allSections[currentIndex + 1] : null
                    return (
                      <>
                        {prev ? (
                          <button onClick={() => selectSection(prev.catId, prev.id)} className="flex items-center gap-2 text-sm text-gray-400 hover:text-white transition-colors">
                            <ArrowLeft className="w-4 h-4" />
                            {prev.title}
                          </button>
                        ) : <div />}
                        {next ? (
                          <button onClick={() => selectSection(next.catId, next.id)} className="flex items-center gap-2 text-sm text-gray-400 hover:text-white transition-colors">
                            {next.title}
                            <ChevronRight className="w-4 h-4" />
                          </button>
                        ) : <div />}
                      </>
                    )
                  })()}
                </div>
              </>
            )}

{/* Help Section */}
            <div className="mt-16 p-6 rounded-xl bg-white/[0.02] border border-white/5 text-center">
              <HelpCircle className="w-8 h-8 text-gray-600 mx-auto mb-3" />
              <h3 className="font-semibold text-white mb-1">Need more help?</h3>
              <p className="text-sm text-gray-500 mb-4">Join the community or reach out to the team.</p>
              <div className="flex items-center justify-center gap-3">
                <a href="https://discord.gg/963x" target="_blank" rel="noopener noreferrer" className="px-4 py-2 bg-[#5865F2] hover:bg-[#5865F2]/80 rounded-lg text-xs font-medium transition-colors">Discord</a>
                <a href="https://twitter.com/963X_xyz" target="_blank" rel="noopener noreferrer" className="px-4 py-2 bg-white/5 hover:bg-white/10 rounded-lg text-xs font-medium transition-colors">Twitter</a>
              </div>
            </div>
          </div>
        </main>

{/* Right TOC */}
        <aside className="hidden xl:block w-56 shrink-0 sticky top-14 h-[calc(100vh-56px)] overflow-y-auto border-l border-white/5">
          <div className="p-4">
            <div className="text-[10px] font-bold uppercase tracking-wider text-gray-600 mb-3">On this page</div>
            {currentSection?.content.filter(b => b.type === "heading").map((block, i) => (
              <div key={i} className="text-xs text-gray-500 hover:text-white transition-colors py-1 cursor-default">
                {block.text}
              </div>
            ))}
          </div>
        </aside>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/whitepaper/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { SunBitLogo } from "@/components/ui/sunbit-logo"
import {
  ArrowLeft,
  Download,
  ChevronRight,
  ChevronDown,
  Copy,
  Check,
  Menu,
  X,
  ExternalLink,
} from "lucide-react"

const sections = [
  { id: "abstract", title: "Abstract", number: "" },
  { id: "introduction", title: "Introduction", number: "1" },
  { id: "problem-statement", title: "Problem Statement", number: "2" },
  { id: "system-architecture", title: "System Architecture", number: "3" },
  { id: "layer-01-capital", title: "Layer 01: Capital Layer", number: "4" },
  { id: "layer-02-settlement", title: "Layer 02: Stable Settlement (USDO)", number: "5" },
  { id: "layer-03-execution", title: "Layer 03: Execution Layer (PerpDEX)", number: "6" },
  { id: "layer-04-agent", title: "Layer 04: Agent Layer", number: "7" },
  { id: "layer-05-governance", title: "Layer 05: Governance Layer", number: "8" },
  { id: "layer-06-integration", title: "Layer 06: Integration Layer", number: "9" },
  { id: "tokenomics", title: "Tokenomics & Economic Model", number: "10" },
  { id: "security", title: "Security & Risk Management", number: "11" },
  { id: "roadmap", title: "Roadmap & Milestones", number: "12" },
  { id: "conclusion", title: "Conclusion", number: "13" },
  { id: "appendix", title: "Appendix", number: "" },
]

function Table({ headers, rows }: { headers: string[]; rows: string[][] }) {
  return (
    <div className="my-4 overflow-x-auto rounded-lg border border-white/5">
      <table className="w-full text-sm">
        <thead>
          <tr className="bg-white/[0.03]">
            {headers.map((h) => (
              <th key={h} className="px-4 py-3 text-left text-xs font-bold text-gray-400 uppercase tracking-wider">{h}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((row, i) => (
            <tr key={i} className="border-t border-white/5">
              {row.map((cell, j) => (
                <td key={j} className="px-4 py-3 text-gray-300">{cell}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

function SectionHeading({ id, number, title }: { id: string; number: string; title: string }) {
  return (
    <h2 id={id} className="text-2xl md:text-3xl font-bold text-white mt-16 mb-6 scroll-mt-24 flex items-baseline gap-3">
      {number && <span className="text-[#F7931A] text-xl font-mono">{number}.</span>}
      {title}
    </h2>
  )
}

function SubHeading({ children }: { children: React.ReactNode }) {
  return <h3 className="text-xl font-bold text-white mt-10 mb-4">{children}</h3>
}

function SubSubHeading({ children }: { children: React.ReactNode }) {
  return <h4 className="text-lg font-semibold text-white mt-8 mb-3">{children}</h4>
}

function P({ children }: { children: React.ReactNode }) {
  return <p className="text-gray-400 leading-relaxed mb-4">{children}</p>
}

function BulletList({ items }: { items: React.ReactNode[] }) {
  return (
    <ul className="space-y-2 mb-4 ml-4">
      {items.map((item, i) => (
        <li key={i} className="text-gray-400 leading-relaxed flex items-start gap-2">
          <span className="w-1.5 h-1.5 rounded-full bg-[#F7931A]/60 shrink-0 mt-2" />
          <span>{item}</span>
        </li>
      ))}
    </ul>
  )
}

function CheckList({ items }: { items: string[] }) {
  return (
    <ul className="space-y-2 mb-4">
      {items.map((item, i) => (
        <li key={i} className="text-gray-400 leading-relaxed flex items-start gap-2">
          <span className="text-emerald-400 shrink-0">{"\\u2705"}</span>
          <span>{item}</span>
        </li>
      ))}
    </ul>
  )
}

function Callout({ children, type = "info" }: { children: React.ReactNode; type?: "info" | "warning" }) {
  return (
    <div className={`my-4 p-4 rounded-lg border-l-4 ${type === "warning" ? "border-yellow-500/50 bg-yellow-500/5" : "border-[#F7931A]/50 bg-[#F7931A]/5"}`}>
      <div className="text-sm text-gray-300 leading-relaxed">{children}</div>
    </div>
  )
}

export default function WhitepaperPage() {
  const [activeSection, setActiveSection] = useState("abstract")
  const [sidebarOpen, setSidebarOpen] = useState(false)

useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        for (const entry of entries) {
          if (entry.isIntersecting) {
            setActiveSection(entry.target.id)
          }
        }
      },
      { rootMargin: "-20% 0px -60% 0px" }
    )
    for (const section of sections) {
      const el = document.getElementById(section.id)
      if (el) observer.observe(el)
    }
    return () => observer.disconnect()
  }, [])

return (
    <div className="min-h-screen bg-[#0a0a0f] text-white">
      {/* Top bar */}
      <div className="sticky top-0 z-50 bg-[#0a0a0f]/90 backdrop-blur-xl border-b border-white/5">
        <div className="max-w-[1400px] mx-auto px-4 md:px-6 h-16 flex items-center justify-between">
          <div className="flex items-center gap-4">
            <Link href="/" className="flex items-center gap-2">
              <SunBitLogo className="h-6 w-auto" />
            </Link>
            <ChevronRight className="w-4 h-4 text-gray-600" />
            <span className="text-sm font-medium text-gray-400">Whitepaper v1.0</span>
          </div>
          <div className="flex items-center gap-3">
            <Link href="/" className="text-sm text-gray-500 hover:text-white transition-colors hidden md:block">
              Home
            </Link>
            <Link href="/docs" className="text-sm text-gray-500 hover:text-white transition-colors hidden md:block">
              Docs
            </Link>
            <button
              type="button"
              onClick={() => setSidebarOpen(!sidebarOpen)}
              className="md:hidden p-2 text-gray-400 hover:text-white"
            >
              {sidebarOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
            </button>
          </div>
        </div>
      </div>

<div className="max-w-[1400px] mx-auto flex">
        {/* Sidebar TOC */}
        <aside className={`
          fixed md:sticky top-16 left-0 z-40 w-72 h-[calc(100vh-4rem)] bg-[#0a0a0f] md:bg-transparent
          border-r border-white/5 md:border-r-0 overflow-y-auto shrink-0
          transition-transform md:translate-x-0 ${sidebarOpen ? "translate-x-0" : "-translate-x-full"}
        `}>
          <nav className="p-6">
            <div className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-4">Table of Contents</div>
            <ul className="space-y-1">
              {sections.map((s) => (
                <li key={s.id}>
                  <a
                    href={`#${s.id}`}
                    onClick={() => setSidebarOpen(false)}
                    className={`block py-1.5 px-3 rounded text-sm transition-colors ${
                      activeSection === s.id
                        ? "text-[#F7931A] bg-[#F7931A]/5 font-medium"
                        : "text-gray-500 hover:text-white"
                    }`}
                  >
                    {s.number && <span className="text-xs font-mono text-gray-600 mr-2">{s.number}.</span>}
                    {s.title}
                  </a>
                </li>
              ))}
            </ul>
            <div className="mt-8 pt-6 border-t border-white/5">
              <div className="text-xs text-gray-600 space-y-1">
                <div>Version 1.0</div>
                <div>Updated: Feb 14, 2026</div>
                <div>Contact: team@963x.xyz</div>
              </div>
            </div>
          </nav>
        </aside>

{/* Main content */}
        <main className="flex-1 min-w-0 px-4 md:px-12 py-12 max-w-4xl">
          {/* Hero */}
          <div className="mb-12">
            <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-[#F7931A]/10 border border-[#F7931A]/20 text-xs font-medium text-[#F7931A] mb-6">
              Official Document
            </div>
            <h1 className="text-4xl md:text-5xl font-bold text-white mb-4 text-balance">963X Network Whitepaper</h1>
            <p className="text-lg text-gray-400 mb-6 text-pretty leading-relaxed">
              Building the Future of Decentralized Financial Infrastructure
            </p>
            <div className="flex flex-wrap items-center gap-4 text-sm text-gray-500">
              <span>Version 1.0</span>
              <span className="w-1 h-1 rounded-full bg-gray-700" />
              <span>February 14, 2026</span>
              <span className="w-1 h-1 rounded-full bg-gray-700" />
              <span>team@963x.xyz</span>
            </div>
          </div>

{/* Abstract */}
          <SectionHeading id="abstract" number="" title="Abstract" />
          <P>
            The 963X Network is a next-generation decentralized financial infrastructure designed to power Bitcoin-native DeFi at scale. Built around a 6-layer modular architecture, 963X introduces USDO -- a fully-backed, non-algorithmic stable settlement asset -- and PerpDEX, a capital-efficient perpetual trading engine that serves as the network{"'"}s primary execution venue.
          </P>
          <P>
            Unlike traditional DeFi protocols that rely on fragmented liquidity and algorithmic stability mechanisms, 963X employs a pure collateral-based approach where Bitcoin and yield-bearing BTC derivatives serve as the foundational trust layer. USDO functions as the network{"'"}s unit of account, enabling seamless settlement, validator rewards, and cross-product composability without reliance on reflexive token mechanics or algorithmic minting.
          </P>
          <P>
            At the core of this infrastructure is PerpDEX -- a perpetual futures exchange offering up to 125x leverage across 296+ global markets, including crypto, forex, and commodities. PerpDEX leverages USDO for all settlements, integrates with off-chain price oracles for accurate market data, and employs a sophisticated risk engine to maintain system solvency during extreme market conditions.
          </P>
          <Callout>
            <strong>Status:</strong> Production-ready core infrastructure (17/17 tests passing), mainnet deployment Q1 2026.<br />
            <strong>Base Layer:</strong> Built on <strong>Othorion</strong> blockchain -- a purpose-built EVM-compatible network optimized for DeFi settlement and USDO operations.
          </Callout>

{/* 1. Introduction */}
          <SectionHeading id="introduction" number="1" title="Introduction" />
          <SubHeading>1.1 The Evolution of Bitcoin DeFi</SubHeading>
          <P>
            Bitcoin, with over $2 trillion in market capitalization, remains the most secure and decentralized blockchain network. However, its DeFi ecosystem has historically lagged behind Ethereum and other smart contract platforms due to:
          </P>
          <BulletList items={[
            "Limited programmability on the base layer",
            "Lack of native stablecoin infrastructure",
            "Fragmented liquidity across bridges and wrapped assets",
            "Absence of institutional-grade derivative markets",
          ]} />
          <P>
            Recent innovations in Bitcoin Layer 2 solutions (Babylon staking, Lombard LBTC, Karak restaking) have unlocked $8B+ in BTC DeFi liquidity, creating an opportunity to build a unified Bitcoin-native financial stack.
          </P>

<SubHeading>1.2 The 963X Vision</SubHeading>
          <P>
            The 963X Network aims to become <strong className="text-white">the primary financial infrastructure for Bitcoin-backed DeFi</strong>, anchored by three core pillars:
          </P>
          <BulletList items={[
            <><strong className="text-white">USDO:</strong> A fully-collateralized stable settlement asset (no algorithmic minting)</>,
            <><strong className="text-white">PerpDEX:</strong> A capital-efficient perpetual futures exchange with 296+ markets</>,
            <><strong className="text-white">Agent Infrastructure:</strong> Autonomous AI-driven market operations and risk management</>,
          ]} />
          <Callout>
            <strong>Base Infrastructure:</strong> 963X is built on <strong>Othorion</strong>, a specialized EVM-compatible blockchain designed for DeFi settlement. Othorion provides optimized gas costs and deterministic finality for financial operations.
          </Callout>
          <CheckList items={[
            "No algorithmic stablecoins (pure collateral backing)",
            "No reflexive token ponzinomics (real yield from trading fees)",
            "Non-custodial architecture (users maintain full asset control)",
            "Bitcoin-first design (BTC as primary collateral, not afterthought)",
          ]} />

{/* 2. Problem Statement */}
          <SectionHeading id="problem-statement" number="2" title="Problem Statement" />
          <SubHeading>2.1 Current State of Decentralized Derivatives</SubHeading>

<SubSubHeading>Problem 1: Liquidity Fragmentation</SubSubHeading>
          <BulletList items={[
            "Liquidity scattered across 50+ chains and protocols",
            "Poor price execution due to thin order books",
            "High slippage on non-ETH pairs (often 5-10%)",
          ]} />

<SubSubHeading>Problem 2: Algorithmic Stability Risks</SubSubHeading>
          <BulletList items={[
            "UST collapse ($60B wipeout, May 2022)",
            "FEI protocol failure ($300M losses, 2022)",
            "DEI de-peg ($50M evaporated, May 2022)",
            "Ongoing concerns with FRAX, USDD, and other algorithmic stables",
          ]} />

<SubSubHeading>Problem 3: Capital Inefficiency</SubSubHeading>
          <BulletList items={[
            "150-200% overcollateralization requirements (MakerDAO, Liquity)",
            "Isolated margin systems prevent portfolio optimization",
            "No cross-product netting (perps, options, yield positions siloed)",
          ]} />

<SubSubHeading>Problem 4: Lack of Institutional Infrastructure</SubSubHeading>
          <BulletList items={[
            "No professional risk management tools",
            "Poor API coverage for automated trading",
            "Inadequate oracle security (oracle manipulation exploits $500M+ in 2023)",
            "Limited regulatory compliance features",
          ]} />

<SubHeading>2.2 Why Existing Solutions Fall Short</SubHeading>
          <Table
            headers={["Protocol", "Limitation"]}
            rows={[
              ["GMX", "Single-chain (Arbitrum), limited markets (15), high funding rates"],
              ["dYdX", "Migrated to own chain (fragmented liquidity), USDC reliance"],
              ["Synthetix", "Complex tokenomics (SNX staking required), high gas costs"],
              ["Perpetual Protocol", "Low TVL ($50M vs $500M+ peak), oracle dependencies"],
              ["Drift", "Solana-only, no BTC collateral support"],
            ]}
          />
          <Callout>No existing protocol offers: Bitcoin-native collateral + full stablecoin backing + institutional tooling + cross-product margining.</Callout>

{/* 3. System Architecture */}
          <SectionHeading id="system-architecture" number="3" title="System Architecture" />
          <SubHeading>3.1 The 6-Layer Design Philosophy</SubHeading>
          <P>963X employs a modular, composable architecture where each layer serves a distinct function:</P>
          <CodeBlock title="Architecture Diagram">{`┌─────────────────────────────────────────────────────────┐
│  Layer 06: Integration Layer                            │
│  Wallets | Bridges | Oracles | Partner Protocols       │
└──────────────────────▲──────────────────────────────────┘
                       │
┌──────────────────────┴──────────────────────────────────┐
│  Layer 05: Governance Layer                             │
│  Token Logic | Staking | Parameter Voting               │
└──────────────────────▲──────────────────────────────────┘
                       │
┌──────────────────────┴──────────────────────────────────┐
│  Layer 04: Agent Layer                                  │
│  AI Agents | Strategy Bots | Liquidity Agents | Keepers │
└──────────────────────▲──────────────────────────────────┘
                       │
┌──────────────────────┴──────────────────────────────────┐
│  Layer 03: Execution Layer (PerpDEX)                    │
│  Perpetual Engine | Matching Engine | FAI Scheduler     │
└──────────────────────▲──────────────────────────────────┘
                       │
┌──────────────────────┴──────────────────────────────────┐
│  Layer 02: Stable Settlement Layer (USDO)               │
│  USDO Engine | Settlement Bus | Redemption | Yield      │
└──────────────────────▲──────────────────────────────────┘
                       │
┌──────────────────────┴──────────────────────────────────┐
│  Layer 01: Capital Layer                                │
│  USDB Collateral | Vault System | Risk Engine           │
└─────────────────────────────────────────────────────────┘`}</CodeBlock>
          <BulletList items={[
            <><strong className="text-white">Separation of Concerns:</strong> Each layer has isolated responsibilities; failure in one layer doesn{"'"}t cascade</>,
            <><strong className="text-white">Composability:</strong> Layers communicate via standardized interfaces (ERC standards, ABIs)</>,
            <><strong className="text-white">Upgradability:</strong> Individual layers can be upgraded without full system redeployment</>,
            <><strong className="text-white">Bitcoin-First:</strong> BTC serves as the foundational trust layer across all operations</>,
          ]} />

<SubHeading>3.2 Information Flow</SubHeading>
          <CodeBlock>{`User Deposits BTC
    ↓
[Layer 01] Mints USDB (collateralized stablecoin)
    ↓
[Layer 02] Converts USDB → USDO (settlement currency)
    ↓
[Layer 03] USDO used for PerpDEX trading (margin, fees, PnL)
    ↓
[Layer 04] AI agents optimize positions, provide liquidity
    ↓
[Layer 05] Governance votes on risk parameters, fee models
    ↓
[Layer 06] External systems integrate via APIs, bridges`}</CodeBlock>

{/* 4. Layer 01: Capital */}
          <SectionHeading id="layer-01-capital" number="4" title="Layer 01: Capital Layer" />
          <P>The Capital Layer manages all collateral deposits, risk assessment, and liquidation mechanisms. It ensures that every USDO in circulation is backed by verifiable, over-collateralized assets.</P>
          <SubHeading>4.1 Supported Collateral Types</SubHeading>
          <Table
            headers={["Asset", "Collateral Ratio", "APR Yield", "Liquidation Threshold"]}
            rows={[
              ["BTC (Native)", "150%", "0% (base)", "120%"],
              ["WBTC", "155%", "0%", "125%"],
              ["cbBTC (Coinbase)", "155%", "0%", "125%"],
              ["stBTC (Babylon)", "140%", "5-8%", "115%"],
              ["LBTC (Lombard)", "140%", "6-10%", "115%"],
              ["ETH", "180%", "0%", "140%"],
            ]}
          />

<SubHeading>4.2 USDB Minting Process</SubHeading>
          <CodeBlock title="Example: Minting USDB">{`User deposits 2 WBTC (value: $200,000 at $100k/BTC)

Collateral Value: $200,000
Collateral Ratio: 155%
Max Mintable USDB: $200,000 / 1.55 = $129,032

User receives: 129,032 USDB
Fee: 0.1% ($129)
Net: 128,903 USDB`}</CodeBlock>

<SubHeading>4.3 Collateral Tracking</SubHeading>
          <CodeBlock title="Solidity">{`struct Position {
    address user;
    uint256 collateralAmount; // 2 WBTC
    uint256 usdValueLocked;    // $200,000
    uint256 usdbMinted;        // 129,032
    uint256 healthFactor;      // 1.55 (155%)
    bool isActive;
}`}</CodeBlock>

<SubHeading>4.4 Liquidation Mechanism</SubHeading>
          <CodeBlock title="Liquidation Example">{`Original Position:
- Collateral: 2 WBTC locked
- USDB Debt: 129,032
- BTC Price: $100,000

BTC Price Drops to $75,000:
- Collateral Value: $150,000
- Health Factor: $150,000 / $129,032 = 1.16 < 1.25 ❌
- LIQUIDATION TRIGGERED

Liquidation Outcome:
- Liquidator pays: 129,032 USDB
- Liquidator receives: 2 WBTC ($150,000 value)
- Liquidator profit: $150,000 - $129,032 = $20,968 (16.2%)
- User receives: $0 (underwater position)`}</CodeBlock>

<SubHeading>4.5 Risk Engine</SubHeading>
          <BulletList items={[
            <><strong className="text-white">Global Collateralization Ratio:</strong> Target {">"}180%, Warning {"<"}150%, Critical {"<"}130%</>,
            <><strong className="text-white">Per-Asset Concentration Risk:</strong> No single collateral type exceeds 60% of total</>,
            <><strong className="text-white">Oracle Health:</strong> Ensures price feeds from Chainlink/Pyth are fresh ({"<"}5 min old)</>,
            <><strong className="text-white">Liquidation Queue:</strong> Maintains list of at-risk positions for efficient keeper operations</>,
          ]} />

{/* 5. Layer 02: USDO */}
          <SectionHeading id="layer-02-settlement" number="5" title="Layer 02: Stable Settlement Layer (USDO)" />
          <P>USDO (963X Dollar) is the network{"'"}s native stable settlement asset, distinct from USDB (the collateral-backed minting layer).</P>
          <CheckList items={[
            "No Algorithmic Minting: Every USDO is backed 1:1 by USDB or equivalent collateral",
            "No Reflexive Token Backing: No dependency on 963X native token for stability",
            "Pure Collateralized Infrastructure: Only accepts over-collateralized assets",
          ]} />

<SubHeading>5.2 Conversion & Redemption</SubHeading>
          <CodeBlock title="USDB → USDO Conversion">{`User holds: 100,000 USDB
User calls: convert(100000 USDB → USDO)
Fee: 0.05% (50 USDB)
User receives: 99,950 USDO`}</CodeBlock>
          <CodeBlock title="USDO → USDB Redemption">{`User holds: 99,950 USDO
User calls: redeem(99950 USDO → USDB)
Fee: 0.05% (49.98 USDB)
User receives: 99,900 USDB

User can then redeem USDB for BTC collateral:
Redeem 99,900 USDB → Burns USDB → Unlocks collateral proportionally`}</CodeBlock>

<SubHeading>5.3 Settlement Bus</SubHeading>
          <CodeBlock title="Architecture">{`┌─────────────────────────────────────────┐
│         Settlement Bus                   │
│  ┌─────────────────────────────────────┤
│  │ PerpDEX Margin Accounts              │
│  │ FAI Scheduler Escrow                 │
│  │ Governance Treasury                  │
│  │ Insurance Fund                       │
│  │ Validator Reward Pool                │
│  └─────────────────────────────────────┤
│         Real-time Accounting             │
└─────────────────────────────────────────┘`}</CodeBlock>

<SubHeading>5.4 Treasury Yield Distribution</SubHeading>
          <CodeBlock>{`Total Protocol Revenue: 100%
├─ 40% → USDO Stakers
├─ 30% → Insurance Fund
├─ 20% → Validator Rewards
└─ 10% → Treasury (buyback X963 token)`}</CodeBlock>

<SubHeading>5.5 Stability Mechanisms</SubHeading>
          <CodeBlock title="Arbitrage Example">{`Scenario: USDO trades at $0.98 on Uniswap

1. Buy 100,000 USDO on Uniswap: $98,000
2. Redeem 100,000 USDO → 99,950 USDB (0.05% fee)
3. Sell 99,950 USDB for $99,950
4. Profit: $99,950 - $98,000 = $1,950 (2% return)

Result: USDO price rises back toward $1.00`}</CodeBlock>

{/* 6. Layer 03: Execution */}
          <SectionHeading id="layer-03-execution" number="6" title="Layer 03: Execution Layer (PerpDEX)" />
          <P>PerpDEX is the flagship perpetual futures exchange of the 963X Network, offering 296+ markets, up to 125x leverage, USDO settlement, and cross-margin portfolio management.</P>

<SubHeading>6.1 Leverage Tiers</SubHeading>
          <Table
            headers={["Tier", "Markets", "Max Leverage", "Margin Req."]}
            rows={[
              ["Tier 1", "BTC, ETH", "125x", "0.8%"],
              ["Tier 2", "Major alts (SOL, BNB)", "100x", "1.0%"],
              ["Tier 3", "Mid-caps", "50x", "2.0%"],
              ["Tier 4", "Long-tail assets", "20x", "5.0%"],
            ]}
          />

<SubHeading>6.2 Funding Rate System</SubHeading>
          <CodeBlock>{`Funding Rate = (Perp Price - Index Price) / Index Price * 8 hours

If Funding Rate > 0: Longs pay shorts
If Funding Rate < 0: Shorts pay longs`}</CodeBlock>

<SubHeading>6.3 Matching Engine</SubHeading>
          <P>Order types supported: Market, Limit, Stop-Loss, Take-Profit, Trailing Stop.</P>
          <CodeBlock title="Execution Priority">{`1. Price: Better prices execute first
2. Time: Earlier orders execute first (FIFO at same price)
3. Size: Pro-rata matching for large orders`}</CodeBlock>

<SubHeading>6.4 Liquidation Engine</SubHeading>
          <CodeBlock title="Solidity">{`function liquidate(uint256 positionId) external {
    Position memory pos = positions[positionId];
    uint256 currentPrice = oracle.getPrice(pos.market);
    
    require(isLiquidatable(pos, currentPrice), "Position healthy");
    
    uint256 loss = calculateLoss(pos, currentPrice);
    uint256 remainingCollateral = pos.collateral - loss;
    
    // Pay liquidator bonus (5%)
    uint256 bonus = remainingCollateral * 5 / 100;
    usdo.transfer(msg.sender, bonus);
    
    // Return remainder to trader (if any)
    if (remainingCollateral > bonus) {
        usdo.transfer(pos.trader, remainingCollateral - bonus);
    } else {
        insuranceFund.cover(bonus - remainingCollateral);
    }
    
    emit PositionLiquidated(positionId, currentPrice, loss, bonus);
}`}</CodeBlock>

<SubHeading>6.5 Oracle Integration</SubHeading>
          <BulletList items={[
            <><strong className="text-white">Chainlink:</strong> BTC, ETH, major crypto pairs (1 min updates)</>,
            <><strong className="text-white">Pyth Network:</strong> 296 feeds, {"<"}1 second updates, 80+ publishers</>,
            <><strong className="text-white">Custom Aggregator:</strong> TWAP to prevent manipulation</>,
          ]} />

{/* 7. Layer 04: Agent */}
          <SectionHeading id="layer-04-agent" number="7" title="Layer 04: Agent Layer" />
          <P>The Agent Layer enables autonomous AI-driven market operations, liquidity provision, and risk management.</P>
          <SubHeading>7.1 Agent Types</SubHeading>
          <BulletList items={[
            <><strong className="text-white">AI Agents:</strong> NLP-based trading assistants</>,
            <><strong className="text-white">Strategy Agents:</strong> Pre-programmed trading algorithms (momentum, mean-reversion, arbitrage)</>,
            <><strong className="text-white">Liquidity Agents:</strong> Automated market makers providing bid/ask quotes</>,
            <><strong className="text-white">Keeper Network:</strong> Bots maintaining system health (liquidations, oracles, funding)</>,
          ]} />

<SubHeading>7.2 Non-Custodial Agent Design</SubHeading>
          <CodeBlock>{`User grants limited authority to AI agent:
- Max trade size: 1,000 USDO per trade
- Max daily volume: 10,000 USDO
- Allowed markets: BTC/USD, ETH/USD
- Time limit: 7 days

AI agent can:
- Read market data
- Submit trades within limits
- Cannot: Transfer funds, change limits, extend duration`}</CodeBlock>

<SubHeading>7.3 Keeper Network</SubHeading>
          <Table
            headers={["Keeper Type", "Reward", "Stake Required"]}
            rows={[
              ["Liquidation Keepers", "5% of liquidated collateral", "10,000 X963"],
              ["Oracle Keepers", "0.01% of protected volume", "5,000 X963"],
              ["Funding Rate Keepers", "100 USDO per update (8h)", "2,000 X963"],
            ]}
          />

<SubHeading>7.4 Security Model</SubHeading>
          <CheckList items={[
            "Can: Read data, submit pre-approved transactions",
          ]} />
          <BulletList items={[
            "Cannot: Transfer funds to external wallets",
            "Cannot: Modify user's base collateral",
            "Cannot: Extend own permissions",
            "User can instantly revoke all agent permissions",
            "Every agent action logged on-chain for audit",
          ]} />

{/* 8. Layer 05: Governance */}
          <SectionHeading id="layer-05-governance" number="8" title="Layer 05: Governance Layer" />
          <SubHeading>8.1 X963 Token</SubHeading>
          <CodeBlock>{`Total Supply: 1,000,000,000 X963

Allocation:
├─ 40% → Community & Ecosystem (400M)
│  ├─ Trading incentives: 150M
│  ├─ Liquidity mining: 150M
│  └─ Grants/partnerships: 100M
├─ 25% → Team & Advisors (250M, 4-year vest)
├─ 20% → Treasury & DAO (200M)
├─ 10% → Private Sale (100M)
└─ 5% → Public Sale (50M)`}</CodeBlock>

<SubHeading>8.2 Governance Process</SubHeading>
          <CodeBlock>{`Step 1: Discussion (Off-chain, 7 days)
Step 2: Temperature Check (Snapshot vote, 3 days) — Quorum: 5%
Step 3: Formal Proposal (On-chain, 7 days) — Quorum: 10%, Approval: >60%
Step 4: Timelock (48 hours)
Step 5: Automated Execution`}</CodeBlock>

<SubHeading>8.3 Governance Parameters</SubHeading>
          <Table
            headers={["Parameter", "Current Value", "Adjustable"]}
            rows={[
              ["Trading Fee", "0.08%", "Yes"],
              ["Funding Rate Cap", "\u00b12% per 8h", "Yes"],
              ["Liquidation Bonus", "5%", "Yes"],
              ["Insurance Fund Target", "5% of TVL", "Yes"],
              ["Max Leverage (BTC)", "125x", "Yes"],
              ["Oracle Staleness Limit", "5 minutes", "Yes"],
              ["Keeper Stake Requirement", "10k X963", "Yes"],
            ]}
          />

<SubHeading>8.4 veX963 Staking</SubHeading>
          <CodeBlock>{`User locks 10,000 X963 for 4 years:
- Receives: 10,000 veX963 (max lock = 1:1 ratio)
- Voting power: 10,000 votes
- Revenue share: Proportional to veX963 balance

Revenue Distribution:
├─ 40% → veX963 Stakers
├─ 30% → Insurance Fund
├─ 20% → Keeper Rewards
└─ 10% → Buyback & Burn`}</CodeBlock>

<SubHeading>8.5 Emergency Controls</SubHeading>
          <BulletList items={[
            <><strong className="text-white">Multi-Sig Guardian:</strong> 7-of-11 multi-sig (3 core team, 4 community, 4 security firms)</>,
            <><strong className="text-white">Circuit Breakers:</strong> Auto-pause if oracle deviates {">"}10% in 1 min, liquidations exceed $100M in 1h, or insurance fund drops below 2% of TVL</>,
          ]} />

{/* 9. Layer 06: Integration */}
          <SectionHeading id="layer-06-integration" number="9" title="Layer 06: Integration Layer" />
          <SubHeading>9.1 Wallet Support</SubHeading>
          <BulletList items={[
            "Web3: MetaMask, WalletConnect (100+), Coinbase Wallet, Ledger/Trezor",
            "Bitcoin: Xverse, Leather, UniSat, OKX Wallet",
            "Mobile: Trust Wallet, Rainbow, Argent",
          ]} />

<SubHeading>9.2 Bridge Infrastructure</SubHeading>
          <Table
            headers={["Chain", "Bridge", "Assets", "Status"]}
            rows={[
              ["Othorion", "Native", "USDO, BTC, ETH", "Live (Base)"],
              ["Bitcoin L1", "tBTC, Wrapped BTC", "BTC", "Live"],
              ["Ethereum", "LayerZero, Wormhole", "ETH, WBTC", "Live"],
              ["Arbitrum", "LayerZero", "ETH, WBTC", "Q2 2026"],
              ["Solana", "Wormhole", "SOL, USDC", "Q2 2026"],
              ["Polygon", "LayerZero", "MATIC, USDC", "Q3 2026"],
              ["Avalanche", "LayerZero", "AVAX, BTC.b", "Q3 2026"],
            ]}
          />

<SubHeading>9.3 Oracle Network</SubHeading>
          <CodeBlock title="Fallback Mechanism (Solidity)">{`function getPrice(string market) returns (uint256) {
    // Try primary oracle (Chainlink)
    uint256 primaryPrice = chainlink.getLatestPrice(market);
    if (isFresh(primaryPrice) && !isStale()) {
        return primaryPrice;
    }
    
    // Fallback to secondary (Pyth)
    uint256 secondaryPrice = pyth.getLatestPrice(market);
    require(isFresh(secondaryPrice), "OracleStale");
    
    // Check deviation between sources (<5%)
    require(isDeviation(primaryPrice, secondaryPrice) < 5%, "OracleDeviation");
    
    return secondaryPrice;
}`}</CodeBlock>

<SubHeading>9.4 Partner Protocols</SubHeading>
          <Table
            headers={["Protocol", "Integration", "Status"]}
            rows={[
              ["Aave", "BTC lending as collateral", "Live"],
              ["Compound", "USDO money market", "Q2 2026"],
              ["Uniswap V3", "USDO/ETH liquidity pool", "Live"],
              ["Curve", "USDO/USDC/USDT stable pool", "Q2 2026"],
              ["Pendle", "Yield tokenization (stBTC)", "Q3 2026"],
              ["Copper", "Institutional custody", "Q2 2026"],
              ["Fireblocks", "Multi-sig treasury", "Q2 2026"],
              ["Chainalysis", "AML/compliance", "Live"],
            ]}
          />

{/* 10. Tokenomics */}
          <SectionHeading id="tokenomics" number="10" title="Tokenomics & Economic Model" />
          <SubHeading>10.1 Value Accrual</SubHeading>
          <CodeBlock>{`Trading Fee: 0.08% per trade
├─ Maker: 0.02% (paid to maker as rebate)
└─ Taker: 0.10% (collected by protocol)

Daily Volume: $500M → Annual Fees: $146M

Fee Distribution:
├─ 40% → veX963 Stakers ($58.4M)
├─ 30% → Insurance Fund ($43.8M)
├─ 20% → Keeper Rewards ($29.2M)
└─ 10% → Buyback & Burn ($14.6M)`}</CodeBlock>

<SubHeading>10.2 Token Sinks & Burn</SubHeading>
          <CodeBlock>{`Annual Burn:
├─ Buyback: 146M X963
├─ Slashing: 1M X963
└─ Proposals: 0.01M X963
────────────────────────
Total: 147M X963/year (14.7% of supply)`}</CodeBlock>

<SubHeading>10.3 Emission Schedule</SubHeading>
          <CodeBlock>{`Years 1-4 (Bootstrap):
  Year 1: 100M X963 (10%)
  Year 2: 80M X963 (8%)
  Year 3: 60M X963 (6%)
  Year 4: 40M X963 (4%)

Year 5+: 2% annual inflation (20M/year)

Net Supply (Year 2 @ $500M daily vol):
  Emissions: 80M — Burns: 147M → Net: -67M (deflationary)`}</CodeBlock>

<SubHeading>10.4 Break-Even Analysis</SubHeading>
          <CodeBlock>{`Fixed Costs (Annual):
├─ Infrastructure: $500k
├─ Oracle costs: $200k
├─ Security audits: $300k
├─ Operations: $1M
────────────────────────
Total: $2M/year

Break-Even Volume: $6.85M daily`}</CodeBlock>

{/* 11. Security */}
          <SectionHeading id="security" number="11" title="Security & Risk Management" />
          <SubHeading>11.1 Smart Contract Security</SubHeading>
          <Table
            headers={["Firm", "Date", "Scope", "Result"]}
            rows={[
              ["Certik", "Q4 2025", "PerpDEX core contracts", "Pass (0 critical)"],
              ["Quantstamp", "Q1 2026", "Capital layer (USDB/USDO)", "In progress"],
              ["Trail of Bits", "Q2 2026", "Full system audit", "Scheduled"],
            ]}
          />
          <Callout>Bug Bounty: Up to $1,000,000 for critical vulnerabilities via Immunefi.</Callout>

<SubHeading>11.2 Multi-Sig & Timelock</SubHeading>
          <CodeBlock>{`Treasury Multi-Sig (7-of-11):
├─ Core Team: 3 signers
├─ Community: 4 signers
└─ Security Firms: 4 signers

- All parameter changes: 48-hour timelock
- Emergency pause: instant (multi-sig required)
- Cannot: Transfer user funds, mint tokens arbitrarily`}</CodeBlock>

<SubHeading>11.3 Insurance Fund</SubHeading>
          <CodeBlock>{`Insurance Fund Sources:
├─ 30% of protocol revenue
├─ Liquidation penalties
└─ Governance treasury allocation

Target Size: 5-10% of total TVL
Coverage: Liquidation shortfalls, oracle failures, smart contract exploits`}</CodeBlock>

<SubHeading>11.4 Risk Mitigations</SubHeading>
          <BulletList items={[
            <><strong className="text-white">Oracle Manipulation:</strong> TWAP over 15 min, multi-source aggregation, 5% deviation circuit breaker</>,
            <><strong className="text-white">Liquidation Cascades:</strong> Stepped liquidation (50% at 110% health, 100% at 105%), 1-min TWAP delay</>,
            <><strong className="text-white">Keeper Centralization:</strong> Permissionless registration, competitive bonus, performance monitoring</>,
            <><strong className="text-white">USDO De-Peg:</strong> 1:1 USDB backing (Chainlink Proof of Reserve), emergency redemptions, protocol-owned liquidity</>,
          ]} />

{/* 12. Roadmap */}
          <SectionHeading id="roadmap" number="12" title="Roadmap & Milestones" />
          {[
            { phase: "Phase 1: Foundation", time: "Q1 2026", status: "Complete", items: ["Core contract development (17/17 tests passing)", "PerpDEX smart contracts (296 markets)", "USDB/USDO capital layer", "Security audits (Certik complete)"] },
            { phase: "Phase 2: Testnet Launch", time: "Q1-Q2 2026", status: "In Progress", items: ["Deploy to Othorion testnet", "Onboard 500-1000 beta testers", "Stress test with $10M simulated daily volume", "Trading competition ($10k USDO prizes)"] },
            { phase: "Phase 3: Mainnet MVP", time: "Q2 2026", status: "Planned", items: ["Deploy PerpDEX to Othorion mainnet", "Bootstrap $10-50M TVL", "Enable top 20 markets", "Trading incentives ($5M X963 over 6 months)"] },
            { phase: "Phase 4: Expansion", time: "Q3-Q4 2026", status: "Planned", items: ["100+ new markets (forex, commodities, indices)", "Options trading engine", "AI agent SDK (Python, JavaScript)", "Mobile app (iOS, Android)"] },
            { phase: "Phase 5: Institutional", time: "2027+", status: "Planned", items: ["Prop trading firm onboarding", "Institutional custody (Copper, Fireblocks)", "FIX protocol API", "Regulatory compliance (MiCA, MAS)"] },
          ].map((p) => (
            <div key={p.phase} className="mb-8">
              <div className="flex items-center gap-3 mb-3">
                <h3 className="text-lg font-bold text-white">{p.phase}</h3>
                <span className="text-xs text-gray-500">{p.time}</span>
                <span className={`px-2 py-0.5 text-[10px] font-bold uppercase rounded ${
                  p.status === "Complete" ? "bg-emerald-500/10 text-emerald-400" :
                  p.status === "In Progress" ? "bg-[#F7931A]/10 text-[#F7931A]" :
                  "bg-white/5 text-gray-500"
                }`}>{p.status}</span>
              </div>
              <BulletList items={p.items} />
            </div>
          ))}

{/* 13. Conclusion */}
          <SectionHeading id="conclusion" number="13" title="Conclusion" />
          <P>The 963X Network represents a paradigm shift in Bitcoin-native DeFi infrastructure. By combining:</P>
          <BulletList items={[
            <><strong className="text-white">Pure Collateralized Stability</strong> (USDO -- no algorithmic risk)</>,
            <><strong className="text-white">Capital-Efficient Derivatives</strong> (PerpDEX -- 296+ markets, 125x leverage)</>,
            <><strong className="text-white">Autonomous Intelligence</strong> (AI agent layer for automated operations)</>,
            <><strong className="text-white">Bitcoin Trust Model</strong> (BTC as the foundational collateral)</>,
          ]} />
          <P>
            963X provides institutional-grade financial infrastructure that is simultaneously decentralized (non-custodial, censorship-resistant), scalable (off-chain matching, on-chain settlement), sustainable (real yield from trading fees), and composable (open standards, permissionless integration).
          </P>
          <Callout>The Future of Finance is Autonomous, Bitcoin-Native, and Built on 963X.</Callout>

{/* Appendix */}
          <SectionHeading id="appendix" number="" title="Appendix" />
          <SubHeading>A. Technical Specifications</SubHeading>
          <CodeBlock>{`Smart Contract Addresses (Othorion Mainnet):
  PerpDEX Core: TBD
  USDB Engine: TBD
  USDO Converter: TBD
  Insurance Fund: TBD
  Governance: TBD

RPC / Block Explorers:
  Mainnet: https://www.othorscan.com/
  Testnet: https://testnet.othorscan.com/`}</CodeBlock>

<SubHeading>B. API Documentation</SubHeading>
          <P>Full API docs: <a href="https://docs.963x.xyz/api" className="text-[#F7931A] hover:underline">docs.963x.xyz/api</a></P>
          <CodeBlock title="REST API Example">{`# Get BTC/USD market info
curl https://api.963x.xyz/v1/markets/BTCUSD

# Response:
{
  "market": "BTCUSD",
  "indexPrice": "100000.00",
  "markPrice": "100025.50",
  "fundingRate": "0.0001",
  "openInterest": "125000000",
  "24hVolume": "450000000"
}`}</CodeBlock>

<SubHeading>C. Glossary</SubHeading>
          <Table
            headers={["Term", "Definition"]}
            rows={[
              ["USDB", "Collateral-backed stablecoin minted against BTC deposits (150% ratio)"],
              ["USDO", "Settlement currency for trading (1:1 backed by USDB + insurance)"],
              ["Othorion", "Base blockchain for 963X Network (EVM-compatible, DeFi-optimized)"],
              ["PerpDEX", "Perpetual futures exchange (core trading engine)"],
              ["veX963", "Voting escrow X963 (time-locked governance token)"],
              ["Keeper", "Bot operator performing maintenance (liquidations, oracles)"],
              ["FAI", "Financial Autonomous Infrastructure (AI agent scheduler)"],
              ["Funding Rate", "Periodic payment between longs and shorts to anchor perp price"],
            ]}
          />

<SubHeading>D. Resources</SubHeading>
          <div className="grid sm:grid-cols-2 gap-3 mb-8">
            {[
              { label: "Website", url: "https://963x.xyz" },
              { label: "Documentation", url: "https://docs.963x.xyz" },
              { label: "GitHub", url: "https://github.com/963x-network" },
              { label: "Discord", url: "https://discord.gg/963x" },
              { label: "Twitter", url: "https://twitter.com/963x_network" },
              { label: "Telegram", url: "https://t.me/963x_official" },
              { label: "Othorscan", url: "https://www.othorscan.com/" },
              { label: "Othorion Docs", url: "https://docs.othorion.network" },
            ].map(r => (
              <a key={r.label} href={r.url} target="_blank" rel="noopener noreferrer" className="flex items-center justify-between p-3 rounded-lg bg-white/[0.02] border border-white/5 hover:bg-white/[0.05] transition-colors group">
                <span className="text-sm text-gray-300">{r.label}</span>
                <ExternalLink className="w-3.5 h-3.5 text-gray-600 group-hover:text-[#F7931A] transition-colors" />
              </a>
            ))}
          </div>

{/* Footer */}
          <div className="mt-16 pt-8 border-t border-white/5 text-center space-y-4">
            <div className="text-sm text-gray-500">
              Whitepaper Version 1.0 | Last Updated: February 14, 2026 | Contact: team@963x.xyz
            </div>
            <p className="text-xs text-gray-600 max-w-2xl mx-auto leading-relaxed italic">
              Disclaimer: This whitepaper is for informational purposes only and does not constitute financial advice. Cryptocurrency trading involves substantial risk of loss. Past performance is not indicative of future results. Always conduct your own research and consult with a qualified financial advisor before making investment decisions.
            </p>
          </div>
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/whitepaper/layout.tsx" isMerged="true"
import type { Metadata } from "next"

export const metadata: Metadata = {
  title: "Whitepaper | 963X Network",
  description: "963X Network Whitepaper v1.0 — Building the Future of Decentralized Financial Infrastructure. Bitcoin-native DeFi with USDO settlement, PerpDEX trading, and AI agent layer.",
}

export default function WhitepaperLayout({ children }: { children: React.ReactNode }) {
  return <>{children}</>
}
[V0_FILE]typescriptreact:file="app/brand/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { SunBitLogo } from "@/components/ui/sunbit-logo"
import { Button } from "@/components/ui/button"
import {
  ArrowLeft,
  Download,
  Copy,
  Check,
  Eye,
  EyeOff,
} from "lucide-react"

const brandColors = {
  primary: [
    { name: "Bitcoin Gold", hex: "#F7931A", rgb: "247, 147, 26", usage: "Primary brand, CTAs, accent highlights" },
    { name: "Gold Light", hex: "#FFAA33", rgb: "255, 170, 51", usage: "Hover states, gradients" },
    { name: "Gold Dark", hex: "#E8850C", rgb: "232, 133, 12", usage: "Active states, pressed buttons" },
  ],
  neutral: [
    { name: "Background", hex: "#0A0A0F", rgb: "10, 10, 15", usage: "Primary background" },
    { name: "Surface", hex: "#12121A", rgb: "18, 18, 26", usage: "Cards, panels, modals" },
    { name: "Surface 2", hex: "#1E2329", rgb: "30, 35, 41", usage: "Borders, dividers" },
    { name: "White", hex: "#FFFFFF", rgb: "255, 255, 255", usage: "Primary text" },
    { name: "Gray 400", hex: "#9CA3AF", rgb: "156, 163, 175", usage: "Secondary text" },
    { name: "Gray 600", hex: "#4B5563", rgb: "75, 85, 99", usage: "Muted text, captions" },
  ],
  semantic: [
    { name: "Long / Buy", hex: "#22C55E", rgb: "34, 197, 94", usage: "Positive values, buy actions" },
    { name: "Short / Sell", hex: "#EF4444", rgb: "239, 68, 68", usage: "Negative values, sell actions" },
    { name: "Red Dot", hex: "#DC2626", rgb: "220, 38, 38", usage: "Logo accent dot, alerts" },
    { name: "Info / Cyan", hex: "#00BCD4", rgb: "0, 188, 212", usage: "Informational, execution layer" },
    { name: "AI / Purple", hex: "#A855F7", rgb: "168, 85, 247", usage: "AI features, agent layer" },
  ],
}

const typographyScale = [
  { name: "Display", class: "text-5xl md:text-6xl font-bold", size: "48-60px", weight: "700", sample: "963X Protocol" },
  { name: "H1", class: "text-4xl md:text-5xl font-bold", size: "36-48px", weight: "700", sample: "Bitcoin-Backed Capital" },
  { name: "H2", class: "text-3xl font-bold", size: "30px", weight: "700", sample: "Perpetual Trading" },
  { name: "H3", class: "text-xl font-bold", size: "20px", weight: "700", sample: "Module Heading" },
  { name: "Body", class: "text-base leading-relaxed", size: "16px", weight: "400", sample: "The 963X Network is a vertically integrated protocol for derivatives." },
  { name: "Caption", class: "text-sm text-gray-400", size: "14px", weight: "400", sample: "Secondary informational text" },
  { name: "Mono", class: "text-sm font-mono", size: "14px", weight: "400", sample: "0x963x...a1b2c3" },
]

function CopyButton({ text }: { text: string }) {
  const [copied, setCopied] = useState(false)
  return (
    <button
      onClick={() => { navigator.clipboard.writeText(text); setCopied(true); setTimeout(() => setCopied(false), 2000) }}
      className="p-1 rounded hover:bg-white/10 transition-colors"
      title="Copy"
    >
      {copied ? <Check className="w-3.5 h-3.5 text-emerald-400" /> : <Copy className="w-3.5 h-3.5 text-gray-500" />}
    </button>
  )
}

export default function BrandKitPage() {
  const [logoBg, setLogoBg] = useState<"dark" | "light">("dark")

return (
    <div className="min-h-screen bg-[#0a0a0f] text-white">
      {/* Nav */}
      <nav className="border-b border-white/5 bg-[#0a0a0f]/90 backdrop-blur-xl sticky top-0 z-50">
        <div className="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
          <div className="flex items-center gap-4">
            <Link href="/" className="flex items-center gap-3 text-gray-400 hover:text-white transition-colors">
              <ArrowLeft className="w-4 h-4" />
              <SunBitLogo height={28} />
            </Link>
          </div>
          <a
            href="/logo-963x.svg"
            download="963x-logo.svg"
            className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg bg-[#F7931A] text-black hover:bg-[#E8850C] transition-colors"
          >
            <Download className="w-4 h-4" />
            Download All
          </a>
        </div>
      </nav>

<div className="max-w-6xl mx-auto px-6 py-16">
        {/* Header */}
        <div className="mb-16">
          <h1 className="text-4xl md:text-5xl font-bold text-white mb-4">Brand Kit</h1>
          <p className="text-gray-400 text-lg max-w-2xl leading-relaxed">
            Official brand assets, color palette, typography, and usage guidelines for 963X Protocol.
            Use these resources to maintain consistency across all communications.
          </p>
        </div>

{/* ========== LOGO ========== */}
        <section className="mb-20">
          <div className="flex items-center justify-between mb-8">
            <div>
              <h2 className="text-2xl font-bold text-white mb-1">Logo</h2>
              <p className="text-sm text-gray-500">Primary mark with wordmark and red accent dot</p>
            </div>
            <div className="flex items-center gap-2 bg-white/5 rounded-lg p-1">
              <button
                onClick={() => setLogoBg("dark")}
                className={`px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${logoBg === "dark" ? "bg-white/10 text-white" : "text-gray-500 hover:text-white"}`}
              >
                Dark
              </button>
              <button
                onClick={() => setLogoBg("light")}
                className={`px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${logoBg === "light" ? "bg-white/10 text-white" : "text-gray-500 hover:text-white"}`}
              >
                Light
              </button>
            </div>
          </div>

<div className="grid md:grid-cols-2 gap-6">
            {/* Primary Logo */}
            <div className={`rounded-2xl border border-white/5 p-10 flex flex-col items-center justify-center min-h-[260px] transition-colors ${logoBg === "dark" ? "bg-[#0a0a0f]" : "bg-white"}`}>
              <SunBitLogo height={56} variant={logoBg === "dark" ? "dark" : "light"} />
              <span className={`text-xs mt-6 ${logoBg === "dark" ? "text-gray-600" : "text-gray-400"}`}>Primary Logo</span>
            </div>

{/* Logo on brand gold */}
            <div className="rounded-2xl border border-white/5 p-10 flex flex-col items-center justify-center min-h-[260px] bg-[#F7931A]">
              <SunBitLogo height={56} variant="light" />
              <span className="text-xs mt-6 text-black/50">On Brand Gold</span>
            </div>
          </div>

{/* Token Coin Logo */}
          <div className="mt-10 mb-8">
            <h3 className="text-lg font-bold text-white mb-1">963X Token Icon</h3>
            <p className="text-sm text-gray-500 mb-6">Coin logo for the 963X token -- used in trading pairs, portfolio, and exchanges</p>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
              {/* Large preview */}
              <div className="rounded-2xl border border-white/5 bg-[#0a0a0f] p-8 flex flex-col items-center justify-center col-span-2 md:col-span-1">
                <div className="w-24 h-24 rounded-full overflow-hidden">
                  <img src="/images/963x-coin-logo.jpg" alt="963X Token" className="w-full h-full object-cover" />
                </div>
                <span className="text-xs text-gray-600 mt-4">128px</span>
              </div>
              {/* Size variants */}
              <div className="rounded-2xl border border-white/5 bg-[#12121a] p-8 flex items-center justify-center gap-6 col-span-2 md:col-span-2">
                {[48, 36, 24, 20, 16].map((s) => (
                  <div key={s} className="flex flex-col items-center gap-2">
                    <div className="rounded-full overflow-hidden" style={{ width: s, height: s }}>
                      <img src="/images/963x-coin-logo.jpg" alt="963X" className="w-full h-full object-cover" />
                    </div>
                    <span className="text-[10px] text-gray-600">{s}px</span>
                  </div>
                ))}
              </div>
              {/* On light bg */}
              <div className="rounded-2xl border border-white/5 bg-white p-8 flex flex-col items-center justify-center">
                <div className="w-16 h-16 rounded-full overflow-hidden">
                  <img src="/images/963x-coin-logo.jpg" alt="963X Token" className="w-full h-full object-cover" />
                </div>
                <span className="text-xs text-gray-400 mt-4">On Light</span>
              </div>
            </div>
          </div>

{/* Download links */}
          <div className="mt-6 grid grid-cols-2 md:grid-cols-4 gap-3">
            {[
              { label: "SVG Logo (Vector)", href: "/logo-963x.svg", format: "SVG" },
              { label: "PNG Logo (Raster)", href: "/logo-963x.png", format: "PNG" },
              { label: "Token Icon (JPG)", href: "/images/963x-coin-logo.jpg", format: "JPG" },
            ].map((file) => (
              <a
                key={file.format}
                href={file.href}
                download
                className="flex items-center gap-3 p-4 rounded-xl bg-[#12121a] border border-white/5 hover:border-[#F7931A]/30 transition-all group"
              >
                <Download className="w-4 h-4 text-gray-500 group-hover:text-[#F7931A] transition-colors" />
                <div>
                  <div className="text-sm font-medium text-white">{file.label}</div>
                  <div className="text-xs text-gray-600">.{file.format.toLowerCase()}</div>
                </div>
              </a>
            ))}
          </div>

{/* Usage rules */}
          <div className="mt-8 grid md:grid-cols-2 gap-6">
            <div className="p-6 rounded-xl bg-[#12121a] border border-white/5">
              <div className="flex items-center gap-2 mb-4">
                <Eye className="w-4 h-4 text-emerald-400" />
                <h3 className="text-sm font-bold text-white">Do</h3>
              </div>
              <ul className="space-y-2">
                {[
                  "Use the logo on dark backgrounds (#0A0A0F or #12121A)",
                  "Maintain minimum clear space equal to the height of the red dot",
                  "Use the inverted (dark) version on light backgrounds",
                  "Scale proportionally -- never stretch or distort",
                ].map(rule => (
                  <li key={rule} className="text-xs text-gray-400 flex items-start gap-2">
                    <div className="w-1.5 h-1.5 rounded-full bg-emerald-400 mt-1.5 shrink-0" />
                    {rule}
                  </li>
                ))}
              </ul>
            </div>
            <div className="p-6 rounded-xl bg-[#12121a] border border-white/5">
              <div className="flex items-center gap-2 mb-4">
                <EyeOff className="w-4 h-4 text-red-400" />
                <h3 className="text-sm font-bold text-white">{"Don't"}</h3>
              </div>
              <ul className="space-y-2">
                {[
                  "Place on busy or low-contrast backgrounds",
                  "Change the logo colors or remove the red dot",
                  "Add effects like shadows, borders, or glows",
                  "Use the logo smaller than 24px in height",
                ].map(rule => (
                  <li key={rule} className="text-xs text-gray-400 flex items-start gap-2">
                    <div className="w-1.5 h-1.5 rounded-full bg-red-400 mt-1.5 shrink-0" />
                    {rule}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </section>

{/* ========== COLORS ========== */}
        <section className="mb-20">
          <h2 className="text-2xl font-bold text-white mb-1">Color Palette</h2>
          <p className="text-sm text-gray-500 mb-8">Core brand and UI colors with usage context</p>

{/* Primary */}
          <div className="mb-8">
            <h3 className="text-xs font-bold text-[#F7931A] uppercase tracking-wider mb-4">Primary -- Bitcoin Gold</h3>
            <div className="grid grid-cols-3 gap-4">
              {brandColors.primary.map(c => (
                <div key={c.hex} className="rounded-xl overflow-hidden border border-white/5">
                  <div className="h-24" style={{ backgroundColor: c.hex }} />
                  <div className="p-4 bg-[#12121a]">
                    <div className="flex items-center justify-between mb-1">
                      <span className="text-sm font-bold text-white">{c.name}</span>
                      <CopyButton text={c.hex} />
                    </div>
                    <div className="text-xs font-mono text-gray-400 mb-1">{c.hex}</div>
                    <div className="text-xs text-gray-600">RGB {c.rgb}</div>
                    <div className="text-xs text-gray-500 mt-2">{c.usage}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

{/* Neutrals */}
          <div className="mb-8">
            <h3 className="text-xs font-bold text-gray-400 uppercase tracking-wider mb-4">Neutrals</h3>
            <div className="grid grid-cols-3 md:grid-cols-6 gap-3">
              {brandColors.neutral.map(c => (
                <div key={c.hex} className="rounded-xl overflow-hidden border border-white/5">
                  <div className="h-16" style={{ backgroundColor: c.hex, border: c.hex === "#FFFFFF" ? "1px solid rgba(255,255,255,0.1)" : "none" }} />
                  <div className="p-3 bg-[#12121a]">
                    <div className="flex items-center justify-between mb-1">
                      <span className="text-xs font-semibold text-white">{c.name}</span>
                      <CopyButton text={c.hex} />
                    </div>
                    <div className="text-[10px] font-mono text-gray-500">{c.hex}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

{/* Semantic */}
          <div>
            <h3 className="text-xs font-bold text-gray-400 uppercase tracking-wider mb-4">Semantic / Functional</h3>
            <div className="grid grid-cols-5 gap-3">
              {brandColors.semantic.map(c => (
                <div key={c.hex} className="rounded-xl overflow-hidden border border-white/5">
                  <div className="h-16" style={{ backgroundColor: c.hex }} />
                  <div className="p-3 bg-[#12121a]">
                    <div className="flex items-center justify-between mb-1">
                      <span className="text-xs font-semibold text-white">{c.name}</span>
                      <CopyButton text={c.hex} />
                    </div>
                    <div className="text-[10px] font-mono text-gray-500">{c.hex}</div>
                    <div className="text-[10px] text-gray-600 mt-1">{c.usage}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

{/* ========== TYPOGRAPHY ========== */}
        <section className="mb-20">
          <h2 className="text-2xl font-bold text-white mb-1">Typography</h2>
          <p className="text-sm text-gray-500 mb-8">Geist (sans) and Geist Mono (monospace) -- clean, technical, modern</p>

<div className="space-y-4">
            {typographyScale.map(t => (
              <div key={t.name} className="flex items-start gap-6 p-5 rounded-xl bg-[#12121a] border border-white/5">
                <div className="w-28 shrink-0 pt-1">
                  <div className="text-xs font-bold text-[#F7931A]">{t.name}</div>
                  <div className="text-[10px] text-gray-600 mt-0.5">{t.size} / {t.weight}</div>
                </div>
                <div className="flex-1 min-w-0">
                  <p className={`text-white ${t.class} ${t.name === "Mono" ? "font-mono" : "font-sans"}`}>{t.sample}</p>
                </div>
              </div>
            ))}
          </div>
        </section>

{/* ========== SPACING & RADII ========== */}
        <section className="mb-20">
          <h2 className="text-2xl font-bold text-white mb-1">Spacing & Radii</h2>
          <p className="text-sm text-gray-500 mb-8">Consistent 4px base grid with defined corner radii</p>

<div className="grid md:grid-cols-2 gap-6">
            <div className="p-6 rounded-xl bg-[#12121a] border border-white/5">
              <h3 className="text-sm font-bold text-white mb-4">Spacing Scale</h3>
              <div className="space-y-3">
                {[
                  { name: "xs", value: "4px", tw: "p-1" },
                  { name: "sm", value: "8px", tw: "p-2" },
                  { name: "md", value: "16px", tw: "p-4" },
                  { name: "lg", value: "24px", tw: "p-6" },
                  { name: "xl", value: "32px", tw: "p-8" },
                  { name: "2xl", value: "48px", tw: "p-12" },
                ].map(s => (
                  <div key={s.name} className="flex items-center gap-4">
                    <span className="w-10 text-xs font-mono text-gray-500">{s.name}</span>
                    <div className="flex-1 h-4 bg-white/5 rounded overflow-hidden">
                      <div className="h-full bg-[#F7931A]/30 rounded" style={{ width: s.value }} />
                    </div>
                    <span className="text-xs font-mono text-gray-400 w-14 text-right">{s.value}</span>
                    <span className="text-xs font-mono text-gray-600 w-10 text-right">{s.tw}</span>
                  </div>
                ))}
              </div>
            </div>

<div className="p-6 rounded-xl bg-[#12121a] border border-white/5">
              <h3 className="text-sm font-bold text-white mb-4">Border Radius</h3>
              <div className="grid grid-cols-3 gap-4">
                {[
                  { name: "sm", value: "4px", tw: "rounded" },
                  { name: "md", value: "8px", tw: "rounded-lg" },
                  { name: "lg", value: "12px", tw: "rounded-xl" },
                  { name: "xl", value: "16px", tw: "rounded-2xl" },
                  { name: "pill", value: "9999px", tw: "rounded-full" },
                ].map(r => (
                  <div key={r.name} className="text-center">
                    <div
                      className="w-16 h-16 mx-auto bg-[#F7931A]/20 border border-[#F7931A]/40 mb-2"
                      style={{ borderRadius: r.value }}
                    />
                    <div className="text-xs font-bold text-white">{r.name}</div>
                    <div className="text-[10px] font-mono text-gray-500">{r.value}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>

{/* ========== BRAND VOICE ========== */}
        <section className="mb-20">
          <h2 className="text-2xl font-bold text-white mb-1">Brand Voice</h2>
          <p className="text-sm text-gray-500 mb-8">Tone and personality across all communications</p>

<div className="grid md:grid-cols-3 gap-6">
            {[
              {
                title: "Technical, Not Jargon",
                desc: "Explain complex systems clearly. Use precise terminology but always provide context. Never assume the reader knows abbreviations.",
                do: "USDO is fully collateralized against external stablecoins",
                dont: "USDO leverages composable DeFi primitives for delta-neutral synth issuance",
              },
              {
                title: "Confident, Not Hype",
                desc: "State facts and architecture decisions. Let the product speak. Avoid superlatives, moon promises, or comparison to competitors.",
                do: "125x maximum leverage across 200+ perpetual markets",
                dont: "The most revolutionary DEX that will change everything",
              },
              {
                title: "Institutional, Not Retail",
                desc: "Write for professionals who manage capital. Assume intelligence, not familiarity. Focus on risk management and capital efficiency.",
                do: "4-layer security engine with circuit breakers and behavioral analysis",
                dont: "Super safe! Your money is protected by our amazing AI",
              },
            ].map(voice => (
              <div key={voice.title} className="p-6 rounded-xl bg-[#12121a] border border-white/5">
                <h3 className="text-base font-bold text-white mb-2">{voice.title}</h3>
                <p className="text-xs text-gray-400 leading-relaxed mb-4">{voice.desc}</p>
                <div className="space-y-3">
                  <div className="p-3 rounded-lg bg-emerald-500/5 border border-emerald-500/10">
                    <div className="text-[10px] font-bold text-emerald-400 uppercase tracking-wider mb-1">Do</div>
                    <div className="text-xs text-gray-300 italic">{`"${voice.do}"`}</div>
                  </div>
                  <div className="p-3 rounded-lg bg-red-500/5 border border-red-500/10">
                    <div className="text-[10px] font-bold text-red-400 uppercase tracking-wider mb-1">{"Don't"}</div>
                    <div className="text-xs text-gray-300 italic">{`"${voice.dont}"`}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </section>

{/* ========== KEYWORDS ========== */}
        <section className="mb-16">
          <h2 className="text-2xl font-bold text-white mb-1">Brand Keywords</h2>
          <p className="text-sm text-gray-500 mb-6">Core terms that define the project identity</p>
          <div className="flex flex-wrap gap-2">
            {[
              "Bitcoin-native", "Non-custodial", "Vertically integrated", "Machine speed",
              "Capital efficiency", "Stable settlement", "AI-augmented", "Permission-based",
              "On-chain execution", "Institutional grade", "Delta-neutral", "Protocol revenue",
              "963X Stack", "USDO", "USDB", "PerpDEX", "FAI Agent", "ve963X",
            ].map(tag => (
              <span key={tag} className="px-3 py-1.5 text-xs font-medium rounded-lg bg-white/5 text-gray-300 border border-white/5">
                {tag}
              </span>
            ))}
          </div>
        </section>

{/* Footer */}
        <footer className="border-t border-white/5 pt-8">
          <div className="flex items-center justify-between">
            <p className="text-xs text-gray-600">963X Protocol Brand Kit v1.0 -- For partners, press, and community use.</p>
            <div className="flex items-center gap-4">
              <Link href="/" className="text-xs text-gray-500 hover:text-white transition-colors">Home</Link>
              <Link href="/architecture" className="text-xs text-gray-500 hover:text-white transition-colors">Architecture</Link>
              <Link href="/network" className="text-xs text-gray-500 hover:text-white transition-colors">Network</Link>
            </div>
          </div>
        </footer>
      </div>
    </div>
  )
}
[V0_FILE]jpg:file="public/images/963x-coin-logo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/05c4a28e4439f8c7cad65955041f56ef-T7Dgniq5Hw1tTydX2Ffps87lXrfoin.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="components/ui/coin-logo.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Image from "next/image"
import { cn } from "@/lib/utils"

// Mapping symbol to CoinGecko ID for logo URLs via simplr-sh CDN
const COIN_ID_MAP: Record<string, string> = {
  // Major Crypto
  BTC: "bitcoin",
  ETH: "ethereum",
  SOL: "solana",
  XRP: "ripple",
  BNB: "binancecoin",
  ADA: "cardano",
  DOGE: "dogecoin",
  AVAX: "avalanche-2",
  LINK: "chainlink",
  DOT: "polkadot",
  MATIC: "matic-network",
  NEAR: "near",
  UNI: "uniswap",
  SUI: "sui",
  APT: "aptos",
  TIA: "celestia",
  INJ: "injective-protocol",
  OP: "optimism",
  ARB: "arbitrum",
  WIF: "dogwifcoin",
  PEPE: "pepe",
  ZEC: "zcash",
  ATOM: "cosmos",
  LTC: "litecoin",
  BCH: "bitcoin-cash",
  AAVE: "aave",
  CRV: "curve-dao-token",
  MKR: "maker",
  SNX: "synthetix-network-token",
  COMP: "compound-governance-token",
  SUSHI: "sushi",
  YFI: "yearn-finance",
  FTM: "fantom",
  ALGO: "algorand",
  XLM: "stellar",
  VET: "vechain",
  FIL: "filecoin",
  THETA: "theta-network",
  EOS: "eos",
  XTZ: "tezos",
  HBAR: "hedera-hashgraph",
  EGLD: "elrond-erd-2",
  ICP: "internet-computer",
  APE: "apecoin",
  SAND: "the-sandbox",
  MANA: "decentraland",
  AXS: "axie-infinity",
  GMT: "stepn",
  GALA: "gala",
  ENJ: "enjincoin",
  LDO: "lido-dao",
  RPL: "rocket-pool",
  BLUR: "blur",
  SEI: "sei-network",
  PYTH: "pyth-network",
  JTO: "jito-governance-token",
  JUP: "jupiter-exchange-solana",
  BONK: "bonk",
  SHIB: "shiba-inu",
  FLOKI: "floki",
  WLD: "worldcoin-wld",
  HYPE: "hyperliquid",
  FARTCOIN: "fartcoin",
  PUMP: "pump-fun",
  // New additions
  RENDER: "render-token",
  RNDR: "render-token",
  FET: "fetch-ai",
  TAO: "bittensor",
  IMX: "immutable-x",
  ONDO: "ondo-finance",
  MNT: "mantle",
  ETC: "ethereum-classic",
  KAS: "kaspa",
  STX: "blockstack",
  PENDLE: "pendle",
  // Stablecoins & Wrapped
  USDC: "usd-coin",
  USDT: "tether",
  DAI: "dai",
  USDE: "ethena-usde",
  USD1: "world-liberty-financial-usd",
  FUSD: "first-digital-usd",
  USDD: "usdd",
  USDG: "global-dollar",
  USDS: "usds",
  WBTC: "wrapped-bitcoin",
  WETH: "weth",
  WBETH: "wrapped-beacon-eth",
  BTCB: "bitcoin-bep2",
  LBTC: "lombard-staked-btc",
  STETH: "staked-ether",
  RETH: "rocket-pool-eth",
  CBETH: "coinbase-wrapped-staked-eth",
  // Commodities
  PAXG: "pax-gold",
  XAUT: "tether-gold",
}

// TradFi logo config: color + abbreviation for branded circle logos
const TRADFI_LOGOS: Record<string, { bg: string; fg: string; text: string }> = {
  // Stocks
  TSLA:  { bg: "#CC0000",  fg: "#fff", text: "T" },
  NVDA:  { bg: "#76B900",  fg: "#fff", text: "NV" },
  GOOGL: { bg: "#4285F4",  fg: "#fff", text: "G" },
  AAPL:  { bg: "#555555",  fg: "#fff", text: "AP" },
  MSFT:  { bg: "#00A4EF",  fg: "#fff", text: "MS" },
  AMZN:  { bg: "#FF9900",  fg: "#fff", text: "AZ" },
  META:  { bg: "#0081FB",  fg: "#fff", text: "M" },
  AMD:   { bg: "#ED1C24",  fg: "#fff", text: "AMD" },
  COIN:  { bg: "#0052FF",  fg: "#fff", text: "CB" },
  MSTR:  { bg: "#E31937",  fg: "#fff", text: "MS" },
  GME:   { bg: "#D51A2D",  fg: "#fff", text: "GM" },
  PLTR:  { bg: "#1B1B1B",  fg: "#fff", text: "P" },
  NFLX:  { bg: "#E50914",  fg: "#fff", text: "N" },
  JPM:   { bg: "#003087",  fg: "#fff", text: "JP" },
  V:     { bg: "#1A1F71",  fg: "#F7B600", text: "V" },
  // Indices
  US500:  { bg: "#1E88E5", fg: "#fff", text: "SPX" },
  US30:   { bg: "#1565C0", fg: "#fff", text: "DJI" },
  NAS100: { bg: "#00BCD4", fg: "#fff", text: "NDX" },
  UK100:  { bg: "#3F51B5", fg: "#fff", text: "FTS" },
  EU50:   { bg: "#0D47A1", fg: "#FFD700", text: "EU" },
  JP225:  { bg: "#E53935", fg: "#fff", text: "NKI" },
  HK50:   { bg: "#FF5722", fg: "#fff", text: "HSI" },
  DE40:   { bg: "#1a1a1a", fg: "#FFD600", text: "DAX" },
  AU200:  { bg: "#2E7D32", fg: "#FFD700", text: "ASX" },
  CN50:   { bg: "#D32F2F", fg: "#FFD700", text: "A50" },
  // Commodities
  GOLD:    { bg: "#FFD700", fg: "#7B5B00", text: "Au" },
  PAXG:    { bg: "#E4B93A", fg: "#fff", text: "Au" },
  XAUT:    { bg: "#E4B93A", fg: "#fff", text: "Au" },
  SILVER:  { bg: "#C0C0C0", fg: "#333",   text: "Ag" },
  CRUDE:   { bg: "#4E342E", fg: "#fff", text: "WTI" },
  BRENT:   { bg: "#795548", fg: "#fff", text: "BRT" },
  NATGAS:  { bg: "#2196F3", fg: "#fff", text: "NG" },
  COPPER:  { bg: "#BF360C", fg: "#fff", text: "Cu" },
  PLAT:    { bg: "#B0BEC5", fg: "#333", text: "Pt" },
  WHEAT:   { bg: "#F9A825", fg: "#fff", text: "W" },
  CORN:    { bg: "#FDD835", fg: "#5D4037", text: "C" },
  SOYBEAN: { bg: "#7CB342", fg: "#fff", text: "S" },
  // Forex - use currency code pair
  EURUSD: { bg: "#003399", fg: "#FFD700", text: "EU" },
  GBPUSD: { bg: "#00247D", fg: "#fff", text: "GBP" },
  USDJPY: { bg: "#BC002D", fg: "#fff", text: "JPY" },
  USDCHF: { bg: "#FF0000", fg: "#fff", text: "CHF" },
  AUDUSD: { bg: "#00008B", fg: "#fff", text: "AUD" },
  USDCAD: { bg: "#FF0000", fg: "#fff", text: "CAD" },
  NZDUSD: { bg: "#00247D", fg: "#fff", text: "NZD" },
  EURGBP: { bg: "#003399", fg: "#FFD700", text: "E/G" },
  EURJPY: { bg: "#003399", fg: "#FFD700", text: "E/J" },
  GBPJPY: { bg: "#00247D", fg: "#fff", text: "G/J" },
  EURCHF: { bg: "#003399", fg: "#FFD700", text: "E/C" },
  AUDCAD: { bg: "#00008B", fg: "#fff", text: "A/C" },
  AUDNZD: { bg: "#00008B", fg: "#fff", text: "A/N" },
  AUDJPY: { bg: "#00008B", fg: "#fff", text: "A/J" },
  CADJPY: { bg: "#FF0000", fg: "#fff", text: "C/J" },
  NZDJPY: { bg: "#00247D", fg: "#fff", text: "N/J" },
  GBPCHF: { bg: "#00247D", fg: "#fff", text: "G/C" },
  GBPCAD: { bg: "#00247D", fg: "#fff", text: "G/C" },
  GBPAUD: { bg: "#00247D", fg: "#fff", text: "G/A" },
  EURAUD: { bg: "#003399", fg: "#FFD700", text: "E/A" },
  EURCAD: { bg: "#003399", fg: "#FFD700", text: "E/C" },
  EURNZD: { bg: "#003399", fg: "#FFD700", text: "E/N" },
  USDSGD: { bg: "#EF3340", fg: "#fff", text: "SGD" },
  USDHKD: { bg: "#DE2910", fg: "#FFD700", text: "HKD" },
  USDMXN: { bg: "#006847", fg: "#fff", text: "MXN" },
  USDZAR: { bg: "#007A4D", fg: "#FFD700", text: "ZAR" },
  USDTRY: { bg: "#E30A17", fg: "#fff", text: "TRY" },
  USDNOK: { bg: "#002868", fg: "#fff", text: "NOK" },
  USDSEK: { bg: "#006AA7", fg: "#FECC02", text: "SEK" },
  USDPLN: { bg: "#DC143C", fg: "#fff", text: "PLN" },
  USDDKK: { bg: "#C8102E", fg: "#fff", text: "DKK" },
  USDCNH: { bg: "#DE2910", fg: "#FFD700", text: "CNH" },
  // Pre-IPO
  OPENAI:     { bg: "#10A37F", fg: "#fff", text: "AI" },
  SPACEX:     { bg: "#005288", fg: "#fff", text: "SX" },
  ANTHROPIC:  { bg: "#D4A76A", fg: "#fff", text: "An" },
  STRIPE:     { bg: "#635BFF", fg: "#fff", text: "St" },
  DISCORD:    { bg: "#5865F2", fg: "#fff", text: "Di" },
  DATABRICKS: { bg: "#FF3621", fg: "#fff", text: "DB" },
}

// Build TRADFI_COLORS from TRADFI_LOGOS for backward compat
const TRADFI_COLORS: Record<string, string> = Object.fromEntries(
  Object.entries(TRADFI_LOGOS).map(([k, v]) => [k, v.bg])
)

// Fallback colors for coins without CDN logos
const COIN_COLORS: Record<string, string> = {
  BTC: "#F7931A",
  ETH: "#627EEA",
  SOL: "#00FFA3",
  XRP: "#23292F",
  BNB: "#F3BA2F",
  ADA: "#0033AD",
  DOGE: "#C2A633",
  AVAX: "#E84142",
  LINK: "#2A5ADA",
  DOT: "#E6007A",
  MATIC: "#8247E5",
  NEAR: "#00C08B",
  UNI: "#FF007A",
  SUI: "#4DA2FF",
  APT: "#000000",
  HYPE: "#70E0BA",
  INJ: "#00F2FE",
  OP: "#FF0420",
  ARB: "#12AAFF",
  WIF: "#8B4513",
  PEPE: "#3E8B2F",
  TIA: "#7B2FBF",
  ZEC: "#ECB244",
  USDC: "#2775CA",
  USDT: "#26A17B",
  USDB: "#F7931A",
  USDE: "#1E90FF",
  USD1: "#00D4AA",
  FUSD: "#FF6B35",
  USDD: "#216B52",
  USDG: "#00D4AA",
  USDS: "#1A66FF",
  "963X": "#F7931A",
  PAXG: "#E4B93A",
  XAUT: "#E4B93A",
  DAI: "#F5AC37",
  WBTC: "#F7931A",
  WETH: "#627EEA",
  WBETH: "#627EEA",
  BTCB: "#F7931A",
  LBTC: "#8B5CF6",
  STETH: "#00A3FF",
  RETH: "#FF6B4A",
  CBETH: "#0052FF",
  FARTCOIN: "#8BC34A",
  PUMP: "#FF6B00",
  AAVE: "#B6509E",
  MKR: "#1AAB9B",
  CRV: "#FF0000",
  LDO: "#00A3FF",
  SNX: "#00D1FF",
  COMP: "#00D395",
  SUSHI: "#FA52A0",
  RENDER: "#000000",
  RNDR: "#000000",
  FET: "#1B1464",
  TAO: "#000000",
  WLD: "#000000",
  AXS: "#0055D5",
  SAND: "#04ADEF",
  MANA: "#FF2D55",
  GALA: "#000000",
  IMX: "#14B8ED",
  BLUR: "#FF6900",
  APE: "#0047AB",
  ONDO: "#1761F0",
  MNT: "#000000",
  LTC: "#BFBBBB",
  BCH: "#0AC18E",
  ETC: "#328332",
  KAS: "#70C7BA",
  FIL: "#0090FF",
  ATOM: "#2E3148",
  ICP: "#292A2E",
  SEI: "#981E32",
  SHIB: "#FFA409",
  FLOKI: "#FFA409",
  BONK: "#F7931A",
  PYTH: "#6C3AD1",
  JUP: "#70E0BA",
  STX: "#5546FF",
  PENDLE: "#2ECDE0",
  ...TRADFI_COLORS,
}

interface CoinLogoProps {
  symbol: string
  size?: number
  className?: string
}

// Trading pair logo component for displaying base/quote pair like TradingView
interface TradingPairLogoProps {
  baseSymbol: string
  quoteSymbol: string
  size?: number
  className?: string
}

export function TradingPairLogo({ baseSymbol, quoteSymbol, size = 24, className }: TradingPairLogoProps) {
  return (
    <div className={cn("relative flex items-center", className)} style={{ width: size * 1.5, height: size }}>
      <div className="absolute left-0 z-10">
        <CoinLogo symbol={baseSymbol} size={size} />
      </div>
      <div
        className="absolute border-2 border-[#0d1117] rounded-full"
        style={{ left: size * 0.6, zIndex: 5 }}
      >
        <CoinLogo symbol={quoteSymbol} size={size} />
      </div>
    </div>
  )
}

// Custom USDB Logo Component - Bitcoin style: orange outer ring -> white inner ring -> orange fill -> white $
function USDBLogo({ size = 20, className }: { size?: number; className?: string }) {
  return (
    <svg
      viewBox="0 0 32 32"
      className={cn("rounded-full flex-shrink-0", className)}
      style={{ width: size, height: size }}
    >
      {/* Outer orange border ring - Bitcoin style */}
      <circle cx="16" cy="16" r="16" fill="#F7931A" />
      {/* White inner ring */}
      <circle cx="16" cy="16" r="13" fill="none" stroke="#FFFFFF" strokeWidth="1.5" />
      {/* Inner filled circle - Bitcoin orange */}
      <circle cx="16" cy="16" r="11.5" fill="#F7931A" />
      {/* Dollar sign $ - properly centered, no extra lines */}
      <text
        x="16"
        y="16"
        textAnchor="middle"
        dominantBaseline="central"
        fill="#FFFFFF"
        fontSize="16"
        fontWeight="bold"
        fontFamily="Arial, sans-serif"
      >
        $
      </text>
    </svg>
  )
}

// Custom 963X Token Logo Component - uses coin logo
function Token963XLogo({ size = 20, className }: { size?: number; className?: string }) {
  return (
    <div 
      className={cn("rounded-full overflow-hidden flex items-center justify-center flex-shrink-0", className)}
      style={{ width: size, height: size }}
    >
      <img 
        src="/images/963x-coin-logo.jpg" 
        alt="963X" 
        style={{ width: size, height: size, objectFit: "cover" }}
      />
    </div>
  )
}

// Custom xBTC Logo Component - uses custom image
function XBTCLogo({ size = 20, className }: { size?: number; className?: string }) {
  return (
    <div 
      className={cn("rounded-full overflow-hidden flex items-center justify-center flex-shrink-0", className)}
      style={{ width: size, height: size }}
    >
      <img 
        src="/images/tokens/xbtc.png" 
        alt="xBTC" 
        style={{ width: size, height: size, objectFit: "cover" }}
      />
    </div>
  )
}

export function CoinLogo({ symbol, size = 20, className }: CoinLogoProps) {
  const [hasError, setHasError] = useState(false)
  const upperSymbol = symbol.toUpperCase()
  
  // Custom logos for USDB, 963X, and xBTC
  if (upperSymbol === "USDB") {
    return <USDBLogo size={size} className={className} />
  }
  if (upperSymbol === "963X") {
    return <Token963XLogo size={size} className={className} />
  }
  if (upperSymbol === "XBTC") {
    return <XBTCLogo size={size} className={className} />
  }
  
  const coinId = COIN_ID_MAP[upperSymbol]
  const tradfiLogo = TRADFI_LOGOS[upperSymbol]

// Use simplr-sh/coin-logos CDN (16,119 coins, no rate limits)
  const cdnUrl = coinId
    ? `https://cdn.jsdelivr.net/gh/simplr-sh/coin-logos/images/${coinId}/standard.png`
    : null

const fallbackColor = COIN_COLORS[upperSymbol] || "#70E0BA"

// TradFi branded logo - SVG circle with brand color + abbreviation
  if (tradfiLogo && (!cdnUrl || hasError)) {
    const fontSize = tradfiLogo.text.length > 2 ? size * 0.32 : size * 0.45
    return (
      <svg
        viewBox="0 0 32 32"
        className={cn("rounded-full flex-shrink-0", className)}
        style={{ width: size, height: size }}
      >
        <circle cx="16" cy="16" r="16" fill={tradfiLogo.bg} />
        <text
          x="16"
          y="16.5"
          textAnchor="middle"
          dominantBaseline="central"
          fill={tradfiLogo.fg}
          fontSize={fontSize / size * 32}
          fontWeight="700"
          fontFamily="system-ui, -apple-system, sans-serif"
          letterSpacing="-0.5"
        >
          {tradfiLogo.text}
        </text>
      </svg>
    )
  }

if (hasError || !cdnUrl) {
    // Fallback: colored circle with first letter
    return (
      <div
        className={cn("flex items-center justify-center rounded-full font-bold text-black flex-shrink-0", className)}
        style={{
          width: size,
          height: size,
          backgroundColor: fallbackColor,
          fontSize: size * 0.5,
        }}
      >
        {symbol.charAt(0).toUpperCase()}
      </div>
    )
  }

return (
    <div className={cn("relative rounded-full overflow-hidden flex-shrink-0", className)} style={{ width: size, height: size }}>
      <Image
        src={cdnUrl || "/placeholder.svg"}
        alt={symbol}
        width={size}
        height={size}
        className="object-cover"
        onError={() => setHasError(true)}
        unoptimized
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/chain-icon.tsx" isMerged="true"
"use client"

import { useState } from "react"

// Official logos from CoinGecko CDN, keyed by chain ID
const CHAIN_DATA: Record<number, { name: string; logo: string; color: string }> = {
  42161: {
    name: "Arbitrum",
    logo: "https://coin-images.coingecko.com/coins/images/16547/small/arb.jpg",
    color: "#2D374B",
  },
  1: {
    name: "Ethereum",
    logo: "https://coin-images.coingecko.com/coins/images/279/small/ethereum.png",
    color: "#627EEA",
  },
  101: {
    name: "Solana",
    logo: "https://coin-images.coingecko.com/coins/images/4128/small/solana.png",
    color: "#9945FF",
  },
  8453: {
    name: "Base",
    logo: "https://coin-images.coingecko.com/asset_platforms/images/131/small/base.png",
    color: "#0052FF",
  },
  10: {
    name: "Optimism",
    logo: "https://coin-images.coingecko.com/coins/images/25244/small/Optimism_%28OP%29.png",
    color: "#FF0420",
  },
  137: {
    name: "Polygon",
    logo: "https://coin-images.coingecko.com/coins/images/32440/small/polygon.png",
    color: "#8247E5",
  },
  56: {
    name: "BNB Chain",
    logo: "https://coin-images.coingecko.com/coins/images/825/small/bnb-icon2_2x.png",
    color: "#F0B90B",
  },
  43114: {
    name: "Avalanche",
    logo: "https://coin-images.coingecko.com/coins/images/12559/small/Avalanche_Circle_RedWhite_Trans.png",
    color: "#E84142",
  },
  728126428: {
    name: "TRON",
    logo: "https://coin-images.coingecko.com/coins/images/1094/small/tron-logo.png",
    color: "#FF0013",
  },
}

export function ChainIcon({
  chainId,
  size = 20,
  className,
}: {
  chainId: number
  size?: number
  className?: string
}) {
  const chain = CHAIN_DATA[chainId]
  const [imgError, setImgError] = useState(false)

if (!chain) {
    return (
      <div
        className={`rounded-full bg-gray-700 flex items-center justify-center text-white font-bold flex-shrink-0 ${className || ""}`}
        style={{ width: size, height: size, fontSize: size * 0.4 }}
      >
        ?
      </div>
    )
  }

// Use CoinGecko CDN logo if available and not errored
  if (chain.logo && !imgError) {
    return (
      <img
        src={chain.logo}
        alt={chain.name}
        width={size}
        height={size}
        className={`rounded-full object-cover flex-shrink-0 ${className || ""}`}
        style={{ width: size, height: size }}
        onError={() => setImgError(true)}
      />
    )
  }

// Fallback: branded color circle with initial letter
  return (
    <div
      className={`rounded-full flex items-center justify-center flex-shrink-0 ${className || ""}`}
      style={{ width: size, height: size, backgroundColor: chain.color }}
    >
      <span className="font-bold text-white leading-none" style={{ fontSize: size * 0.45 }}>
        {chain.name[0]}
      </span>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/token-logos.tsx" isMerged="true"
// Token logo components for consistent display across the app
// Uses CoinLogo for actual token logos with real market icons

import { CoinLogo } from "./coin-logo"

// Parse Tailwind w-N h-N class to pixel size
function parseSizeFromClass(className: string): number {
  const match = className.match(/w-(\d+)/)
  if (!match) return 32
  const twSize = parseInt(match[1], 10)
  return twSize * 4 // Tailwind: w-6 = 24px, w-8 = 32px, w-10 = 40px
}

export function USDBLogo({ className = "w-8 h-8" }: { className?: string }) {
  const size = parseSizeFromClass(className || "w-8 h-8")
  return <CoinLogo symbol="USDB" size={size} className={className} />
}

export function Token963XLogo({ className = "w-8 h-8" }: { className?: string }) {
  const size = parseSizeFromClass(className || "w-8 h-8")
  return <CoinLogo symbol="963X" size={size} className={className} />
}

export function WBTCLogo({ className = "w-8 h-8" }: { className?: string }) {
  const size = parseSizeFromClass(className || "w-8 h-8")
  return <CoinLogo symbol="WBTC" size={size} className={className} />
}

export function ETHLogo({ className = "w-8 h-8" }: { className?: string }) {
  const size = parseSizeFromClass(className || "w-8 h-8")
  return <CoinLogo symbol="ETH" size={size} className={className} />
}

export function USDTLogo({ className = "w-8 h-8" }: { className?: string }) {
  const size = parseSizeFromClass(className || "w-8 h-8")
  return <CoinLogo symbol="USDT" size={size} className={className} />
}

export function USDCLogo({ className = "w-8 h-8" }: { className?: string }) {
  const size = parseSizeFromClass(className || "w-8 h-8")
  return <CoinLogo symbol="USDC" size={size} className={className} />
}

export function USDGLogo({ className = "w-8 h-8" }: { className?: string }) {
  const size = parseSizeFromClass(className || "w-8 h-8")
  return <CoinLogo symbol="USDG" size={size} className={className} />
}

export function DAILogo({ className = "w-8 h-8" }: { className?: string }) {
  const size = parseSizeFromClass(className || "w-8 h-8")
  return <CoinLogo symbol="DAI" size={size} className={className} />
}

export function CurveLogo({ className = "w-8 h-8" }: { className?: string }) {
  const size = parseSizeFromClass(className || "w-8 h-8")
  return <CoinLogo symbol="CRV" size={size} className={className} />
}

export function PendleLogo({ className = "w-8 h-8" }: { className?: string }) {
  return (
    <svg viewBox="0 0 40 40" className={className}>
      <circle cx="20" cy="20" r="20" fill="#3D5AFE" />
      <path d="M15 28 L25 12 L25 28 L15 12 Z" stroke="white" strokeWidth="2" fill="none" />
    </svg>
  )
}

// Parse token symbol - handles special cases like btBTC, cbBTC, tBTC, LBTC
function getBaseSymbol(token: string): string {
  const t = token.toUpperCase()
  // Handle BTC variations
  if (t === "BTBTC" || t === "BTBTC") return "BTC"
  if (t === "CBBTC" || t === "CB-BTC") return "BTC"
  if (t === "TBTC" || t === "T-BTC") return "BTC"
  if (t === "LBTC" || t === "L-BTC") return "LBTC"
  if (t === "WBTC" || t === "W-BTC") return "WBTC"
  if (t.includes("BTC")) return "BTC"
  // Handle ETH variations
  if (t === "WETH") return "ETH"
  if (t === "STETH") return "ETH"
  if (t.includes("ETH")) return "ETH"
  // Handle stablecoins
  if (t === "SUSDB" || t === "S-USDB") return "USDB"
  if (t === "VE963X") return "963X"
  // Handle Pendle tokens
  if (t.startsWith("PT-") || t.startsWith("YT-")) return "PENDLE"
  return token.toUpperCase()
}

// Pool logo component that shows both tokens
export function PoolLogo({
  token1,
  token2,
  className = "w-10 h-10",
}: {
  token1: string
  token2?: string
  className?: string
}) {
  const symbol1 = getBaseSymbol(token1)
  const isPendle = token1.toUpperCase().startsWith("PT-") || token1.toUpperCase().startsWith("YT-")
  const containerSize = parseSizeFromClass(className || "w-10 h-10")

if (!token2) {
    return (
      <div className={`flex items-center justify-center flex-shrink-0 ${className}`}>
        {isPendle ? <PendleLogo className="w-full h-full" /> : <CoinLogo symbol={symbol1} size={containerSize} />}
      </div>
    )
  }

const symbol2 = getBaseSymbol(token2)
  const coinSize = Math.round(containerSize * 0.75)

return (
    <div className="flex items-center flex-shrink-0 gap-1.5">
      <CoinLogo symbol={symbol1} size={coinSize} />
      <CoinLogo symbol={symbol2} size={coinSize} />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/ai-chat-panel.tsx" isMerged="true"
"use client"

import { useState, useRef, useEffect } from "react"
import { usePathname } from "next/navigation"
import Link from "next/link"
import { useWallet } from "@/lib/wallet-context"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import {
  X,
  Send,
  PieChart,
  AlertTriangle,
  TrendingUp,
  HelpCircle,
  Bot,
  Sparkles,
  ExternalLink,
  Loader2,
} from "lucide-react"

interface Message {
  id: string
  role: "user" | "assistant"
  content: string
  timestamp: Date
}

interface AIChatPanelProps {
  isOpen: boolean
  onClose: () => void
}

// Context detection based on pathname
function getPageContext(pathname: string) {
  if (pathname.includes("/trade")) return { page: "PerpDEX Trading", type: "perp" }
  if (pathname.includes("/vaults")) return { page: "Yield Vaults", type: "vault" }
  if (pathname.includes("/staking")) return { page: "Staking", type: "staking" }
  if (pathname.includes("/swap")) return { page: "Swap", type: "swap" }
  if (pathname.includes("/portfolio")) return { page: "Portfolio", type: "portfolio" }
  if (pathname.includes("/lending")) return { page: "Lending & Borrow", type: "lending" }
  return { page: "Dashboard", type: "dashboard" }
}

export function AIChatPanel({ isOpen, onClose }: AIChatPanelProps) {
  const pathname = usePathname()
  const { wallet } = useWallet()
  const [messages, setMessages] = useState<Message[]>([])
  const [input, setInput] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const messagesEndRef = useRef<HTMLDivElement>(null)
  const inputRef = useRef<HTMLInputElement>(null)

const context = getPageContext(pathname)

// Auto scroll to bottom
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }, [messages])

// Focus input when panel opens
  useEffect(() => {
    if (isOpen) {
      setTimeout(() => inputRef.current?.focus(), 300)
    }
  }, [isOpen])

// Generate context-aware greeting
  const getContextGreeting = () => {
    if (!wallet.isConnected) {
      return "Connect your wallet to get personalized DeFi insights and portfolio analysis."
    }

const balance = wallet.totalValue.toLocaleString("en-US", { style: "currency", currency: "USD" })

switch (context.type) {
      case "perp":
        return `You're on PerpDEX Trading. Your portfolio is ${balance}. I can help analyze positions, check liquidation risks, or suggest trading strategies.`
      case "vault":
        return `You're viewing Yield Vaults. Your portfolio is ${balance}. I can help compare APYs, analyze risks, or optimize your vault allocations.`
      case "staking":
        return `You're on Staking. Your portfolio is ${balance}. I can explain staking options, compare lock periods, or calculate potential rewards.`
      case "swap":
        return `You're on Swap. Your portfolio is ${balance}. I can help find best routes, estimate slippage, or suggest optimal swap timing.`
      case "portfolio":
        return `You're viewing your Portfolio valued at ${balance}. I can analyze allocation, suggest diversification, or identify optimization opportunities.`
      default:
        return `Welcome! Your portfolio is ${balance}. I can help analyze your positions, optimize yields, or explain any 963X products.`
    }
  }

// Quick action handlers
  const quickActions = [
    {
      icon: PieChart,
      label: "Analyze portfolio",
      prompt: "Analyze my current portfolio allocation and suggest improvements",
    },
    {
      icon: AlertTriangle,
      label: "Check risks",
      prompt: "Check my liquidation risks and health factors across all positions",
    },
    {
      icon: TrendingUp,
      label: "Optimize yield",
      prompt: "Find the best yield opportunities for my current assets",
    },
    {
      icon: HelpCircle,
      label: "Explain this",
      prompt: `Explain how ${context.page} works and its benefits`,
    },
  ]

const handleQuickAction = (prompt: string) => {
    handleSendMessage(prompt)
  }

const handleSendMessage = async (messageText?: string) => {
    const text = messageText || input.trim()
    if (!text) return

const userMessage: Message = {
      id: Date.now().toString(),
      role: "user",
      content: text,
      timestamp: new Date(),
    }
    setMessages((prev) => [...prev, userMessage])
    setInput("")
    setIsLoading(true)

// Simulate AI response
    await new Promise((resolve) => setTimeout(resolve, 1500))

const responses: Record<string, string> = {
      analyze: `Based on your current portfolio of ${wallet.totalValue.toLocaleString("en-US", { style: "currency", currency: "USD" })}:\n\n• **Allocation**: Your assets are distributed across ${wallet.balances.length} tokens\n• **Risk Level**: Moderate - consider diversifying into stablecoins\n• **Recommendation**: Move 20% to USDB Vault for 8.5% APY while maintaining liquidity\n\nWould you like me to explain any specific strategy?`,
      risk: `**Risk Analysis**:\n\n• **Liquidation Risk**: Low - no leveraged positions detected\n• **Smart Contract Risk**: Medium - some assets in newer protocols\n• **Market Risk**: Moderate - 60% exposure to volatile assets\n\n**Suggestions**:\n1. Consider hedging BTC exposure\n2. Set stop-losses on perp positions\n3. Maintain 20% in stablecoins`,
      yield: `**Best Yield Opportunities**:\n\n1. **USDB Vault** - 8.5% APY (auto-compound)\n2. **BTC Staking (Lombard)** - 6.5% APY (Medium Risk)\n3. **USDB/WBTC LP** - 35.2% APY (IL Risk)\n4. **Stake 963X** - Up to 30% APY (4-year lock)\n\nBased on your holdings, I recommend starting with USDB Vault for stable returns.`,
      explain: `**${context.page}** is a key product in 963X's Bitcoin DeFi ecosystem.\n\n• **Purpose**: ${context.type === "perp" ? "Trade perpetual futures with up to 100x leverage" : context.type === "vault" ? "Earn yield through automated strategies" : context.type === "staking" ? "Lock assets to earn rewards" : "Swap between different tokens"}\n• **Benefits**: Native Bitcoin yield, transparent fees, non-custodial\n• **Risk Level**: ${context.type === "perp" ? "High" : "Low to Medium"}\n\nWould you like me to guide you through getting started?`,
    }

let responseContent = "I understand you're asking about your DeFi positions. "
    if (text.toLowerCase().includes("analyze") || text.toLowerCase().includes("portfolio")) {
      responseContent = responses.analyze
    } else if (text.toLowerCase().includes("risk") || text.toLowerCase().includes("liquidation")) {
      responseContent = responses.risk
    } else if (
      text.toLowerCase().includes("yield") ||
      text.toLowerCase().includes("optimize") ||
      text.toLowerCase().includes("apy")
    ) {
      responseContent = responses.yield
    } else if (
      text.toLowerCase().includes("explain") ||
      text.toLowerCase().includes("how") ||
      text.toLowerCase().includes("what")
    ) {
      responseContent = responses.explain
    } else {
      responseContent += `For ${context.page}, I can help you analyze positions, check risks, optimize yields, or explain how things work. What would you like to know?`
    }

const aiMessage: Message = {
      id: (Date.now() + 1).toString(),
      role: "assistant",
      content: responseContent,
      timestamp: new Date(),
    }
    setMessages((prev) => [...prev, aiMessage])
    setIsLoading(false)
  }

return (
    <>
      {/* Backdrop */}
      {isOpen && <div className="fixed inset-0 bg-black/50 z-40 transition-opacity" onClick={onClose} />}

{/* Panel */}
      <div
        className={`fixed top-0 right-0 h-full w-full max-w-md bg-[#0a0a0f] border-l border-white/10 z-50 transform transition-transform duration-300 ease-in-out ${
          isOpen ? "translate-x-0" : "translate-x-full"
        }`}
      >
        {/* Header */}
        <div className="flex items-center justify-between p-4 border-b border-white/10">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-gray-400 to-gray-600 flex items-center justify-center">
              <Bot className="w-5 h-5 text-white" />
            </div>
            <div>
              <h2 className="text-white font-semibold">FAI Copilot</h2>
              <p className="text-xs text-gray-400">Bitcoin DeFi Intelligence</p>
            </div>
          </div>
          <div className="flex items-center gap-2">
            <Link href="/app/assistant">
              <Button variant="ghost" size="sm" className="text-gray-400 hover:text-white h-8 text-xs">
                <ExternalLink className="w-3 h-3 mr-1" />
                Full Chat
              </Button>
            </Link>
            <Button variant="ghost" size="icon" onClick={onClose} className="text-gray-400 hover:text-white h-8 w-8">
              <X className="w-4 h-4" />
            </Button>
          </div>
        </div>

{/* Context Banner */}
        <div className="p-3 bg-white/5 border-b border-white/5">
          <div className="flex items-center gap-2 text-xs text-gray-400">
            <Sparkles className="w-3 h-3 text-[#F7931A]" />
            <span>
              Context: <span className="text-white">{context.page}</span>
            </span>
          </div>
        </div>

{/* Messages */}
        <div className="flex-1 overflow-y-auto p-4 space-y-4 h-[calc(100vh-280px)] scrollbar-hide">
          {messages.length === 0 ? (
            <div className="space-y-4">
              {/* Greeting */}
              <div className="flex gap-3">
                <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-gray-400 to-gray-600 flex items-center justify-center flex-shrink-0">
                  <Bot className="w-4 h-4 text-white" />
                </div>
                <div className="bg-white/5 rounded-2xl rounded-tl-sm p-3 max-w-[85%]">
                  <p className="text-sm text-gray-300">{getContextGreeting()}</p>
                </div>
              </div>

{/* Quick Actions */}
              <div className="space-y-2">
                <p className="text-xs text-gray-500 px-2">Quick Actions</p>
                <div className="grid grid-cols-2 gap-2">
                  {quickActions.map((action) => (
                    <button
                      key={action.label}
                      onClick={() => handleQuickAction(action.prompt)}
                      className="flex items-center gap-2 p-3 bg-white/5 hover:bg-white/10 border border-white/5 rounded-xl transition-colors text-left"
                    >
                      <action.icon className="w-4 h-4 text-[#F7931A]" />
                      <span className="text-xs text-white">{action.label}</span>
                    </button>
                  ))}
                </div>
              </div>
            </div>
          ) : (
            messages.map((message) => (
              <div key={message.id} className={`flex gap-3 ${message.role === "user" ? "flex-row-reverse" : ""}`}>
                <div
                  className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${
                    message.role === "user" ? "bg-[#F7931A]" : "bg-gradient-to-br from-gray-400 to-gray-600"
                  }`}
                >
                  {message.role === "user" ? (
                    <span className="text-xs font-bold text-black">
                      {wallet.address?.slice(2, 4).toUpperCase() || "U"}
                    </span>
                  ) : (
                    <Bot className="w-4 h-4 text-white" />
                  )}
                </div>
                <div
                  className={`rounded-2xl p-3 max-w-[85%] ${
                    message.role === "user"
                      ? "bg-[#F7931A] text-black rounded-tr-sm"
                      : "bg-white/5 text-gray-300 rounded-tl-sm"
                  }`}
                >
                  <p className="text-sm whitespace-pre-wrap">{message.content}</p>
                </div>
              </div>
            ))
          )}
          {isLoading && (
            <div className="flex gap-3">
              <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-gray-400 to-gray-600 flex items-center justify-center">
                <Bot className="w-4 h-4 text-white" />
              </div>
              <div className="bg-white/5 rounded-2xl rounded-tl-sm p-3">
                <Loader2 className="w-4 h-4 text-gray-400 animate-spin" />
              </div>
            </div>
          )}
          <div ref={messagesEndRef} />
        </div>

{/* Input */}
        <div className="absolute bottom-0 left-0 right-0 p-4 border-t border-white/10 bg-[#0a0a0f]">
          <form
            onSubmit={(e) => {
              e.preventDefault()
              handleSendMessage()
            }}
            className="flex gap-2"
          >
            <Input
              ref={inputRef}
              value={input}
              onChange={(e) => setInput(e.target.value)}
              placeholder="Ask about your DeFi positions..."
              className="flex-1 bg-white/5 border-white/10 text-white placeholder:text-gray-500"
              disabled={isLoading}
            />
            <Button
              type="submit"
              size="icon"
              disabled={!input.trim() || isLoading}
              className="bg-[#F7931A] hover:bg-[#E8850C] text-black h-10 w-10"
            >
              <Send className="w-4 h-4" />
            </Button>
          </form>
          <p className="text-[10px] text-gray-500 text-center mt-2">
            FAI provides advisory insights only. Always verify before executing.
          </p>
        </div>
      </div>
    </>
  )
}
[V0_FILE]typescriptreact:file="lib/capital-flow-context.tsx" isMerged="true"
"use client"

import { createContext, useContext, useState, useEffect, type ReactNode } from "react"
import { useWallet } from "./wallet-context"

// Capital Flow States
export type CapitalStage = 
  | "no-btc"           // User has no BTC
  | "has-btc"          // User has BTC, suggest minting USDB
  | "has-usdb"         // User has USDB, suggest deployment
  | "capital-deployed" // User has active positions
  | "at-risk"          // User positions at risk
  | "optimized"        // Portfolio is optimized

// Risk Levels
export type RiskLevel = "low" | "medium" | "high" | "critical"

// Position Types
export interface Position {
  id: string
  type: "perp" | "vault" | "yield" | "lending" | "staking"
  asset: string
  size: number
  sizeUsd: number
  pnl?: number
  pnlPercent?: number
  leverage?: number
  liquidationPrice?: number
  collateralRatio?: number
  apy?: number
  healthScore: number
  riskLevel: RiskLevel
}

// AI Recommendation
export interface AIRecommendation {
  id: string
  priority: "urgent" | "high" | "medium" | "low"
  type: "reduce-risk" | "increase-yield" | "rebalance" | "open-position" | "close-position" | "mint-usdb" | "trade-perp"
  title: string
  description: string
  impact: string
  action: {
    label: string
    href: string
    params?: Record<string, string>
  }
}

// Capital Flow Context
interface CapitalFlowState {
  // Portfolio Overview
  totalCapital: number
  totalUsdb: number
  totalBtc: number
  availableUsdb: number
  deployedUsdb: number
  
  // Risk Metrics
  portfolioHealthScore: number
  overallRiskLevel: RiskLevel
  liquidationRisk: number // 0-100
  maxDrawdown: number
  
  // Exposure Breakdown
  exposure: {
    btc: number
    stablecoins: number
    yield: number
    leverage: number
  }
  
  // Positions
  positions: Position[]
  activePositionsCount: number
  atRiskPositionsCount: number
  
  // Capital Stage
  capitalStage: CapitalStage
  
  // AI Recommendations
  recommendations: AIRecommendation[]
  urgentAlerts: number
  
  // Actions
  refreshData: () => void
  getNextAction: () => AIRecommendation | null
  getPositionsByType: (type: Position["type"]) => Position[]
}

const CapitalFlowContext = createContext<CapitalFlowState | undefined>(undefined)

export function CapitalFlowProvider({ children }: { children: ReactNode }) {
  const { wallet } = useWallet()
  
  // Calculate derived state based on wallet
  const [state, setState] = useState<Omit<CapitalFlowState, 'refreshData' | 'getNextAction' | 'getPositionsByType'>>(() => {
    return calculateCapitalState(wallet)
  })
  
  useEffect(() => {
    setState(calculateCapitalState(wallet))
  }, [wallet])
  
  const refreshData = () => {
    setState(calculateCapitalState(wallet))
  }
  
  const getNextAction = (): AIRecommendation | null => {
    return state.recommendations.length > 0 ? state.recommendations[0] : null
  }
  
  const getPositionsByType = (type: Position["type"]): Position[] => {
    return state.positions.filter(p => p.type === type)
  }
  
  return (
    <CapitalFlowContext.Provider value={{ ...state, refreshData, getNextAction, getPositionsByType }}>
      {children}
    </CapitalFlowContext.Provider>
  )
}

export function useCapitalFlow() {
  const context = useContext(CapitalFlowContext)
  if (!context) {
    throw new Error("useCapitalFlow must be used within CapitalFlowProvider")
  }
  return context
}

// Calculate capital state from wallet
function calculateCapitalState(wallet: ReturnType<typeof useWallet>["wallet"]): Omit<CapitalFlowState, 'refreshData' | 'getNextAction' | 'getPositionsByType'> {
  const isConnected = wallet.isConnected
  
  // Mock data - in production, fetch from APIs/blockchain
  const totalBtc = isConnected ? (wallet.balances?.BTC || 0) : 0
  const totalUsdb = isConnected ? (wallet.balances?.USDB || 0) : 0
  const totalCapital = totalBtc * 95000 + totalUsdb
  
  // Simulate positions
  const positions: Position[] = isConnected ? [
    {
      id: "perp-btc-1",
      type: "perp",
      asset: "BTC-PERP",
      size: 0.5,
      sizeUsd: 47500,
      pnl: 2350,
      pnlPercent: 5.2,
      leverage: 5,
      liquidationPrice: 72000,
      healthScore: 68,
      riskLevel: "medium"
    },
    {
      id: "vault-usdb-1",
      type: "vault",
      asset: "USDB Vault",
      size: 25000,
      sizeUsd: 25000,
      collateralRatio: 165,
      healthScore: 75,
      riskLevel: "medium"
    },
    {
      id: "yield-usdb-wbtc",
      type: "yield",
      asset: "USDB/WBTC LP",
      size: 15000,
      sizeUsd: 15000,
      apy: 35.2,
      healthScore: 85,
      riskLevel: "low"
    },
    {
      id: "staking-btc",
      type: "staking",
      asset: "Babylon BTC",
      size: 0.25,
      sizeUsd: 23750,
      apy: 0.21,
      healthScore: 95,
      riskLevel: "low"
    }
  ] : []
  
  const deployedUsdb = positions.reduce((sum, p) => sum + p.sizeUsd, 0)
  const availableUsdb = Math.max(0, totalUsdb - deployedUsdb * 0.3)
  
  // Calculate health score
  const portfolioHealthScore = positions.length > 0 
    ? Math.round(positions.reduce((sum, p) => sum + p.healthScore, 0) / positions.length)
    : 100
  
  // Calculate risk level
  const overallRiskLevel: RiskLevel = portfolioHealthScore >= 80 ? "low" 
    : portfolioHealthScore >= 60 ? "medium" 
    : portfolioHealthScore >= 40 ? "high" 
    : "critical"
  
  // Calculate exposure
  const btcExposure = totalBtc > 0 ? Math.round((totalBtc * 95000 / totalCapital) * 100) : 0
  const stablecoinExposure = totalUsdb > 0 ? Math.round((totalUsdb / totalCapital) * 100) : 0
  const yieldExposure = positions.filter(p => p.type === "yield").length > 0 ? 15 : 0
  const leverageExposure = positions.filter(p => p.leverage && p.leverage > 1).length > 0 ? 25 : 0
  
  // Determine capital stage
  let capitalStage: CapitalStage = "no-btc"
  if (!isConnected) {
    capitalStage = "no-btc"
  } else if (totalBtc > 0 && totalUsdb === 0) {
    capitalStage = "has-btc"
  } else if (totalUsdb > 0 && positions.length === 0) {
    capitalStage = "has-usdb"
  } else if (positions.some(p => p.riskLevel === "high" || p.riskLevel === "critical")) {
    capitalStage = "at-risk"
  } else if (positions.length > 0) {
    capitalStage = portfolioHealthScore >= 80 ? "optimized" : "capital-deployed"
  }
  
  // Generate AI recommendations based on capital stage and positions
  const recommendations = generateRecommendations(capitalStage, positions, {
    totalBtc,
    totalUsdb,
    availableUsdb,
    portfolioHealthScore,
    btcExposure
  })
  
  const atRiskPositions = positions.filter(p => p.riskLevel === "high" || p.riskLevel === "critical")
  
  return {
    totalCapital,
    totalUsdb,
    totalBtc,
    availableUsdb,
    deployedUsdb,
    portfolioHealthScore,
    overallRiskLevel,
    liquidationRisk: positions.some(p => p.type === "perp") ? 15 : 0,
    maxDrawdown: 12.5,
    exposure: {
      btc: btcExposure || 64,
      stablecoins: stablecoinExposure || 28,
      yield: yieldExposure || 8,
      leverage: leverageExposure || 0
    },
    positions,
    activePositionsCount: positions.length,
    atRiskPositionsCount: atRiskPositions.length,
    capitalStage,
    recommendations,
    urgentAlerts: recommendations.filter(r => r.priority === "urgent").length
  }
}

// Generate AI recommendations
function generateRecommendations(
  stage: CapitalStage, 
  positions: Position[],
  metrics: {
    totalBtc: number
    totalUsdb: number
    availableUsdb: number
    portfolioHealthScore: number
    btcExposure: number
  }
): AIRecommendation[] {
  const recommendations: AIRecommendation[] = []
  
  // Stage-based recommendations
  switch (stage) {
    case "no-btc":
      recommendations.push({
        id: "deposit-btc",
        priority: "high",
        type: "mint-usdb",
        title: "Deposit BTC to Start",
        description: "Deposit BTC to mint USDB and unlock the full power of 963X DeFi.",
        impact: "Access perpetual trading, yield farming, and AI-optimized strategies",
        action: { label: "Deposit BTC", href: "/app/vaults" }
      })
      break
      
    case "has-btc":
      recommendations.push({
        id: "mint-usdb",
        priority: "high",
        type: "mint-usdb",
        title: "Mint USDB from your BTC",
        description: `You have ${metrics.totalBtc.toFixed(4)} BTC. Mint USDB to deploy capital across the platform.`,
        impact: "Unlock trading, yield, and leverage without selling your BTC",
        action: { label: "Mint USDB", href: "/app/vaults" }
      })
      break
      
    case "has-usdb":
      recommendations.push({
        id: "trade-perp",
        priority: "high",
        type: "trade-perp",
        title: "Open Your First Trade",
        description: `You have ${metrics.availableUsdb.toLocaleString()} USDB available. Start trading perpetuals on PerpDEX.`,
        impact: "Up to 50x leverage with USDB as margin",
        action: { label: "Trade Now", href: "/app/trade" }
      })
      recommendations.push({
        id: "deploy-yield",
        priority: "medium",
        type: "increase-yield",
        title: "Deploy to Yield",
        description: "Earn passive income by providing liquidity to yield pools.",
        impact: "8-55% APY on stablecoin pairs",
        action: { label: "View Yields", href: "/app/vaults?tab=yield" }
      })
      break
      
    case "at-risk":
      const riskyPosition = positions.find(p => p.riskLevel === "high" || p.riskLevel === "critical")
      if (riskyPosition) {
        recommendations.push({
          id: "reduce-risk-urgent",
          priority: "urgent",
          type: "reduce-risk",
          title: "Reduce Position Risk",
          description: `Your ${riskyPosition.asset} position is at ${riskyPosition.riskLevel} risk. Consider reducing leverage or adding collateral.`,
          impact: `Avoid potential liquidation at $${riskyPosition.liquidationPrice?.toLocaleString()}`,
          action: { label: "Manage Position", href: "/app/trade" }
        })
      }
      break
      
    case "capital-deployed":
      // Check for optimization opportunities
      if (metrics.btcExposure > 60) {
        recommendations.push({
          id: "rebalance-btc",
          priority: "medium",
          type: "rebalance",
          title: "High BTC Exposure",
          description: `${metrics.btcExposure}% of your portfolio is in BTC. Consider diversifying to reduce volatility risk.`,
          impact: "Improved risk-adjusted returns",
          action: { label: "Rebalance", href: "/app/portfolio" }
        })
      }
      
      if (metrics.availableUsdb > 5000) {
        recommendations.push({
          id: "deploy-idle",
          priority: "medium",
          type: "increase-yield",
          title: "Idle Capital Detected",
          description: `${metrics.availableUsdb.toLocaleString()} USDB is sitting idle. Deploy to earn yield or open trades.`,
          impact: "Stop leaving money on the table",
          action: { label: "Deploy Capital", href: "/app/trade" }
        })
      }
      break
      
    case "optimized":
      recommendations.push({
        id: "portfolio-healthy",
        priority: "low",
        type: "increase-yield",
        title: "Portfolio Optimized",
        description: "Your portfolio is well-balanced. Consider increasing yield positions for passive income.",
        impact: "Maximize capital efficiency",
        action: { label: "Explore Yield", href: "/app/vaults?tab=yield" }
      })
      break
  }
  
  // Always suggest trading if user has USDB (core revenue driver)
  if (metrics.totalUsdb > 0 && !recommendations.some(r => r.type === "trade-perp")) {
    recommendations.push({
      id: "trade-opportunity",
      priority: "medium",
      type: "trade-perp",
      title: "Trading Opportunity",
      description: "Market conditions favor BTC long positions. Consider opening a trade.",
      impact: "Potential 15-30% return based on AI analysis",
      action: { label: "View Markets", href: "/app/trade" }
    })
  }
  
  return recommendations.sort((a, b) => {
    const priorityOrder = { urgent: 0, high: 1, medium: 2, low: 3 }
    return priorityOrder[a.priority] - priorityOrder[b.priority]
  })
}
[V0_FILE]typescript:file="lib/trade-data.ts" isMerged="true"
// Static mock data for trading interface

export type QuoteCurrency = "USDT" | "USDC" | "USDB"

export type MarketData = {
  symbol: string
  name: string
  quote: QuoteCurrency
  price: number
  change24h: number
  leverage: number
  funding8h: number
  volume24h: number
  openInterest: number
  category: ("perps" | "spot" | "crypto" | "tradfi" | "stocks" | "indices" | "commodities" | "fx" | "preipo" | "trending" | "prelaunch" | "usdt" | "usdc" | "usdb" | "layer1" | "layer2" | "defi" | "meme" | "ai" | "gaming" | "rwa" | "nft" | "pow" | "infra")[]
  tags?: string[]
  isFavorite?: boolean
}

// Base perps markets (will be extended with quote currencies)
const perpsMarkets = [
  // === Crypto - Leverage varies by tier: BTC/ETH=125x, SOL/XRP/BNB/ADA=100x, Mid=75x/50x, Meme/Small=25-50x ===
  {
    symbol: "BTC",
    name: "Bitcoin",
    price: 95146,
    change24h: 2.81,
    leverage: 125,
    funding8h: 0.01,
    volume24h: 4594085130,
    openInterest: 2581652821,
    baseCategory: ["perps", "crypto", "trending", "layer1", "pow"] as const,
    isFavorite: true,
  },
  {
    symbol: "ETH",
    name: "Ethereum",
    price: 3331.3,
    change24h: 5.99,
    leverage: 125,
    funding8h: 0.0027,
    volume24h: 2048113647,
    openInterest: 2974006900,
    baseCategory: ["perps", "crypto", "trending", "layer1", "infra"] as const,
    isFavorite: true,
  },
  {
    symbol: "SOL",
    name: "Solana",
    price: 145.46,
    change24h: 2.14,
    leverage: 100,
    funding8h: 0.01,
    volume24h: 632067764,
    openInterest: 638902998,
    baseCategory: ["perps", "crypto", "trending", "layer1"] as const,
  },
  {
    symbol: "XRP",
    name: "Ripple",
    price: 2.15,
    change24h: 3.78,
    leverage: 100,
    funding8h: 0.0092,
    volume24h: 152707543,
    openInterest: 246937888,
    baseCategory: ["perps", "crypto", "layer1", "infra"] as const,
  },
  {
    symbol: "BNB",
    name: "BNB",
    price: 612.40,
    change24h: 1.45,
    leverage: 100,
    funding8h: 0.0065,
    volume24h: 892341567,
    openInterest: 456123789,
    baseCategory: ["perps", "crypto", "layer1", "infra"] as const,
  },
  {
    symbol: "ADA",
    name: "Cardano",
    price: 0.745,
    change24h: 4.12,
    leverage: 100,
    funding8h: 0.0078,
    volume24h: 234567890,
    openInterest: 189234567,
    baseCategory: ["perps", "crypto", "layer1"] as const,
  },
  {
    symbol: "DOGE",
    name: "Dogecoin",
    price: 0.3245,
    change24h: 3.21,
    leverage: 75,
    funding8h: 0.0085,
    volume24h: 89432156,
    openInterest: 156789432,
    baseCategory: ["perps", "crypto", "trending", "meme", "pow"] as const,
  },
  {
    symbol: "AVAX",
    name: "Avalanche",
    price: 38.45,
    change24h: -1.56,
    leverage: 75,
    funding8h: 0.0034,
    volume24h: 67543210,
    openInterest: 98765432,
    baseCategory: ["perps", "crypto", "layer1", "infra"] as const,
  },
  {
    symbol: "LINK",
    name: "Chainlink",
    price: 14.87,
    change24h: 2.34,
    leverage: 75,
    funding8h: 0.0056,
    volume24h: 54321098,
    openInterest: 76543210,
    baseCategory: ["perps", "crypto", "infra", "rwa", "ai"] as const,
  },
  {
    symbol: "DOT",
    name: "Polkadot",
    price: 7.85,
    change24h: 3.67,
    leverage: 75,
    funding8h: 0.0041,
    volume24h: 178234567,
    openInterest: 134567890,
    baseCategory: ["perps", "crypto", "layer1", "infra"] as const,
  },
  {
    symbol: "MATIC",
    name: "Polygon",
    price: 0.89,
    change24h: 1.23,
    leverage: 50,
    funding8h: 0.0023,
    volume24h: 43210987,
    openInterest: 65432109,
    baseCategory: ["perps", "crypto", "layer2"] as const,
  },
  {
    symbol: "NEAR",
    name: "NEAR Protocol",
    price: 5.23,
    change24h: 5.89,
    leverage: 50,
    funding8h: 0.0089,
    volume24h: 156789012,
    openInterest: 98765432,
    baseCategory: ["perps", "crypto", "layer1", "ai"] as const,
  },
  {
    symbol: "UNI",
    name: "Uniswap",
    price: 12.45,
    change24h: 2.78,
    leverage: 50,
    funding8h: 0.0034,
    volume24h: 134567890,
    openInterest: 87654321,
    baseCategory: ["perps", "crypto", "defi"] as const,
  },
  {
    symbol: "SUI",
    name: "Sui",
    price: 4.12,
    change24h: 8.45,
    leverage: 75,
    funding8h: 0.0156,
    volume24h: 245678901,
    openInterest: 178901234,
    baseCategory: ["perps", "crypto", "trending", "layer1"] as const,
  },
  {
    symbol: "APT",
    name: "Aptos",
    price: 9.87,
    change24h: 3.45,
    leverage: 50,
    funding8h: 0.0067,
    volume24h: 167890123,
    openInterest: 112345678,
    baseCategory: ["perps", "crypto", "layer1"] as const,
  },
  {
    symbol: "HYPE",
    name: "Hyperliquid",
    price: 24.56,
    change24h: 15.23,
    leverage: 50,
    funding8h: 0.0423,
    volume24h: 456789012,
    openInterest: 234567890,
    baseCategory: ["perps", "crypto", "trending", "defi", "layer1"] as const,
    isFavorite: true,
  },
  {
    symbol: "TIA",
    name: "Celestia",
    price: 8.34,
    change24h: 6.78,
    leverage: 50,
    funding8h: 0.0098,
    volume24h: 189012345,
    openInterest: 145678901,
    baseCategory: ["perps", "crypto", "infra", "layer1"] as const,
  },
  {
    symbol: "INJ",
    name: "Injective",
    price: 22.15,
    change24h: -2.34,
    leverage: 50,
    funding8h: 0.0045,
    volume24h: 123456789,
    openInterest: 89012345,
    baseCategory: ["perps", "crypto", "defi", "layer1"] as const,
  },
  {
    symbol: "OP",
    name: "Optimism",
    price: 2.87,
    change24h: 1.56,
    leverage: 50,
    funding8h: 0.0034,
    volume24h: 98765432,
    openInterest: 67890123,
    baseCategory: ["perps", "crypto", "layer2"] as const,
  },
  {
    symbol: "ARB",
    name: "Arbitrum",
    price: 1.23,
    change24h: -2.1,
    leverage: 50,
    funding8h: 0.0045,
    volume24h: 32109876,
    openInterest: 54321098,
    baseCategory: ["perps", "crypto", "layer2"] as const,
  },
  {
    symbol: "WIF",
    name: "dogwifhat",
    price: 2.45,
    change24h: 18.92,
    leverage: 50,
    funding8h: 0.0567,
    volume24h: 345678901,
    openInterest: 198765432,
    baseCategory: ["perps", "crypto", "trending", "meme"] as const,
  },
  {
    symbol: "PEPE",
    name: "Pepe",
    price: 0.00001234,
    change24h: 9.87,
    leverage: 50,
    funding8h: 0.0234,
    volume24h: 267890123,
    openInterest: 156789012,
    baseCategory: ["perps", "crypto", "trending", "meme"] as const,
  },
  {
    symbol: "ZEC",
    name: "Zcash",
    price: 409.31,
    change24h: 0.27,
    leverage: 50,
    funding8h: 0,
    volume24h: 148146051,
    openInterest: 154484916,
    baseCategory: ["perps", "crypto", "pow"] as const,
  },
  {
    symbol: "FARTCOIN",
    name: "Fartcoin",
    price: 0.42724,
    change24h: 12.77,
    leverage: 25,
    funding8h: 0.0377,
    volume24h: 94542408,
    openInterest: 117348500,
    baseCategory: ["perps", "crypto", "trending", "meme"] as const,
  },
  {
    symbol: "PUMP",
    name: "Pump.fun",
    price: 0.002849,
    change24h: 12.56,
    leverage: 25,
    funding8h: 0.01,
    volume24h: 71146154,
    openInterest: 92364289,
    baseCategory: ["perps", "crypto", "prelaunch", "meme"] as const,
  },
  // More crypto tokens with specific categories
  { symbol: "AAVE", name: "Aave", price: 285.40, change24h: 3.45, leverage: 50, funding8h: 0.0045, volume24h: 189012345, openInterest: 123456789, baseCategory: ["perps", "crypto", "defi"] as const },
  { symbol: "MKR", name: "Maker", price: 1845.60, change24h: 1.23, leverage: 50, funding8h: 0.0023, volume24h: 98765432, openInterest: 67890123, baseCategory: ["perps", "crypto", "defi"] as const },
  { symbol: "CRV", name: "Curve DAO", price: 0.845, change24h: 2.67, leverage: 50, funding8h: 0.0056, volume24h: 78901234, openInterest: 45678901, baseCategory: ["perps", "crypto", "defi"] as const },
  { symbol: "LDO", name: "Lido DAO", price: 2.34, change24h: 4.56, leverage: 50, funding8h: 0.0078, volume24h: 112345678, openInterest: 78901234, baseCategory: ["perps", "crypto", "defi", "infra"] as const },
  { symbol: "SNX", name: "Synthetix", price: 3.12, change24h: -1.23, leverage: 50, funding8h: 0.0034, volume24h: 67890123, openInterest: 34567890, baseCategory: ["perps", "crypto", "defi"] as const },
  { symbol: "COMP", name: "Compound", price: 67.89, change24h: 1.89, leverage: 50, funding8h: 0.0023, volume24h: 56789012, openInterest: 23456789, baseCategory: ["perps", "crypto", "defi"] as const },
  { symbol: "SUSHI", name: "SushiSwap", price: 1.45, change24h: 3.78, leverage: 50, funding8h: 0.0067, volume24h: 45678901, openInterest: 19012345, baseCategory: ["perps", "crypto", "defi"] as const },
  { symbol: "RENDER", name: "Render", price: 8.92, change24h: 7.45, leverage: 50, funding8h: 0.0123, volume24h: 234567890, openInterest: 156789012, baseCategory: ["perps", "crypto", "ai", "infra"] as const },
  { symbol: "FET", name: "Fetch.ai", price: 2.34, change24h: 8.92, leverage: 50, funding8h: 0.0189, volume24h: 178901234, openInterest: 112345678, baseCategory: ["perps", "crypto", "ai"] as const },
  { symbol: "RNDR", name: "Render Token", price: 8.45, change24h: 5.67, leverage: 50, funding8h: 0.0098, volume24h: 189012345, openInterest: 123456789, baseCategory: ["perps", "crypto", "ai", "infra"] as const },
  { symbol: "TAO", name: "Bittensor", price: 456.78, change24h: 12.34, leverage: 50, funding8h: 0.0234, volume24h: 267890123, openInterest: 178901234, baseCategory: ["perps", "crypto", "ai", "trending"] as const },
  { symbol: "WLD", name: "Worldcoin", price: 3.45, change24h: 6.78, leverage: 50, funding8h: 0.0134, volume24h: 145678901, openInterest: 89012345, baseCategory: ["perps", "crypto", "ai"] as const },
  { symbol: "AXS", name: "Axie Infinity", price: 8.56, change24h: -2.34, leverage: 50, funding8h: 0.0034, volume24h: 67890123, openInterest: 34567890, baseCategory: ["perps", "crypto", "gaming", "nft"] as const },
  { symbol: "SAND", name: "The Sandbox", price: 0.56, change24h: 1.89, leverage: 50, funding8h: 0.0045, volume24h: 56789012, openInterest: 23456789, baseCategory: ["perps", "crypto", "gaming", "nft"] as const },
  { symbol: "MANA", name: "Decentraland", price: 0.48, change24h: 2.34, leverage: 50, funding8h: 0.0056, volume24h: 45678901, openInterest: 19012345, baseCategory: ["perps", "crypto", "gaming", "nft"] as const },
  { symbol: "GALA", name: "Gala Games", price: 0.034, change24h: 4.56, leverage: 50, funding8h: 0.0078, volume24h: 89012345, openInterest: 45678901, baseCategory: ["perps", "crypto", "gaming"] as const },
  { symbol: "IMX", name: "Immutable", price: 2.12, change24h: 3.45, leverage: 50, funding8h: 0.0067, volume24h: 78901234, openInterest: 34567890, baseCategory: ["perps", "crypto", "gaming", "layer2", "nft"] as const },
  { symbol: "BLUR", name: "Blur", price: 0.34, change24h: -3.21, leverage: 50, funding8h: 0.0045, volume24h: 56789012, openInterest: 23456789, baseCategory: ["perps", "crypto", "nft"] as const },
  { symbol: "APE", name: "ApeCoin", price: 1.67, change24h: -1.56, leverage: 50, funding8h: 0.0034, volume24h: 67890123, openInterest: 34567890, baseCategory: ["perps", "crypto", "nft", "meme"] as const },
  { symbol: "ONDO", name: "Ondo Finance", price: 1.45, change24h: 5.67, leverage: 50, funding8h: 0.0089, volume24h: 134567890, openInterest: 89012345, baseCategory: ["perps", "crypto", "rwa", "defi", "trending"] as const },
  { symbol: "MNT", name: "Mantle", price: 1.23, change24h: 2.34, leverage: 50, funding8h: 0.0045, volume24h: 78901234, openInterest: 45678901, baseCategory: ["perps", "crypto", "rwa", "layer2"] as const },
  { symbol: "LTC", name: "Litecoin", price: 84.56, change24h: 1.23, leverage: 75, funding8h: 0.0023, volume24h: 189012345, openInterest: 112345678, baseCategory: ["perps", "crypto", "pow", "layer1"] as const },
  { symbol: "BCH", name: "Bitcoin Cash", price: 456.78, change24h: 2.45, leverage: 75, funding8h: 0.0034, volume24h: 145678901, openInterest: 89012345, baseCategory: ["perps", "crypto", "pow", "layer1"] as const },
  { symbol: "ETC", name: "Ethereum Classic", price: 28.90, change24h: 1.67, leverage: 50, funding8h: 0.0023, volume24h: 89012345, openInterest: 45678901, baseCategory: ["perps", "crypto", "pow"] as const },
  { symbol: "KAS", name: "Kaspa", price: 0.145, change24h: 6.78, leverage: 50, funding8h: 0.0123, volume24h: 134567890, openInterest: 78901234, baseCategory: ["perps", "crypto", "pow", "trending"] as const },
  { symbol: "FIL", name: "Filecoin", price: 5.67, change24h: 3.45, leverage: 50, funding8h: 0.0056, volume24h: 98765432, openInterest: 56789012, baseCategory: ["perps", "crypto", "infra"] as const },
  { symbol: "ATOM", name: "Cosmos", price: 9.45, change24h: 2.34, leverage: 75, funding8h: 0.0034, volume24h: 112345678, openInterest: 67890123, baseCategory: ["perps", "crypto", "layer1", "infra"] as const },
  { symbol: "ICP", name: "Internet Computer", price: 12.34, change24h: 4.56, leverage: 50, funding8h: 0.0078, volume24h: 145678901, openInterest: 89012345, baseCategory: ["perps", "crypto", "layer1", "infra"] as const },
  { symbol: "SEI", name: "Sei", price: 0.56, change24h: 5.89, leverage: 50, funding8h: 0.0098, volume24h: 123456789, openInterest: 67890123, baseCategory: ["perps", "crypto", "layer1"] as const },
  { symbol: "SHIB", name: "Shiba Inu", price: 0.00002345, change24h: 4.56, leverage: 50, funding8h: 0.0089, volume24h: 345678901, openInterest: 198765432, baseCategory: ["perps", "crypto", "meme"] as const },
  { symbol: "FLOKI", name: "Floki", price: 0.000189, change24h: 7.89, leverage: 50, funding8h: 0.0145, volume24h: 178901234, openInterest: 98765432, baseCategory: ["perps", "crypto", "meme"] as const },
  { symbol: "BONK", name: "Bonk", price: 0.0000234, change24h: 11.23, leverage: 50, funding8h: 0.0234, volume24h: 234567890, openInterest: 134567890, baseCategory: ["perps", "crypto", "meme"] as const },
  { symbol: "PYTH", name: "Pyth Network", price: 0.42, change24h: 3.45, leverage: 50, funding8h: 0.0056, volume24h: 89012345, openInterest: 45678901, baseCategory: ["perps", "crypto", "infra"] as const },
  { symbol: "JUP", name: "Jupiter", price: 1.23, change24h: 4.67, leverage: 50, funding8h: 0.0078, volume24h: 178901234, openInterest: 98765432, baseCategory: ["perps", "crypto", "defi"] as const },
  { symbol: "STX", name: "Stacks", price: 2.34, change24h: 3.89, leverage: 50, funding8h: 0.0056, volume24h: 89012345, openInterest: 45678901, baseCategory: ["perps", "crypto", "layer2", "infra"] as const },
  { symbol: "PENDLE", name: "Pendle", price: 5.67, change24h: 8.45, leverage: 50, funding8h: 0.0134, volume24h: 134567890, openInterest: 78901234, baseCategory: ["perps", "crypto", "defi", "rwa"] as const },
  // ===================== TRADFI MARKETS =====================

// === Stocks (max x20) ===
  { symbol: "TSLA", name: "Tesla", price: 387.25, change24h: 4.56, leverage: 20, funding8h: 0.0012, volume24h: 892345678, openInterest: 567890123, baseCategory: ["perps", "tradfi", "stocks", "trending"] as const, tags: ["tech", "ev"] },
  { symbol: "NVDA", name: "NVIDIA", price: 892.40, change24h: 3.21, leverage: 20, funding8h: 0.0015, volume24h: 1234567890, openInterest: 789012345, baseCategory: ["perps", "tradfi", "stocks", "trending"] as const, tags: ["tech", "ai"] },
  { symbol: "GOOGL", name: "Alphabet", price: 185.67, change24h: 1.23, leverage: 20, funding8h: 0.0008, volume24h: 456789012, openInterest: 234567890, baseCategory: ["perps", "tradfi", "stocks"] as const, tags: ["tech"] },
  { symbol: "AAPL", name: "Apple", price: 228.45, change24h: 0.89, leverage: 20, funding8h: 0.0006, volume24h: 567890123, openInterest: 345678901, baseCategory: ["perps", "tradfi", "stocks"] as const, tags: ["tech"] },
  { symbol: "MSFT", name: "Microsoft", price: 425.80, change24h: 1.45, leverage: 20, funding8h: 0.0009, volume24h: 489012345, openInterest: 298765432, baseCategory: ["perps", "tradfi", "stocks"] as const, tags: ["tech"] },
  { symbol: "AMZN", name: "Amazon", price: 205.34, change24h: 2.12, leverage: 20, funding8h: 0.0011, volume24h: 378901234, openInterest: 256789012, baseCategory: ["perps", "tradfi", "stocks"] as const, tags: ["tech"] },
  { symbol: "META", name: "Meta Platforms", price: 612.90, change24h: -0.67, leverage: 20, funding8h: 0.0007, volume24h: 345678901, openInterest: 212345678, baseCategory: ["perps", "tradfi", "stocks"] as const, tags: ["tech"] },
  { symbol: "AMD", name: "AMD", price: 178.56, change24h: 5.34, leverage: 20, funding8h: 0.0019, volume24h: 267890123, openInterest: 178901234, baseCategory: ["perps", "tradfi", "stocks"] as const, tags: ["tech", "ai"] },
  { symbol: "COIN", name: "Coinbase", price: 265.78, change24h: 7.89, leverage: 20, funding8h: 0.0034, volume24h: 189012345, openInterest: 123456789, baseCategory: ["perps", "tradfi", "stocks", "trending"] as const, tags: ["crypto"] },
  { symbol: "MSTR", name: "MicroStrategy", price: 342.15, change24h: 9.45, leverage: 20, funding8h: 0.0056, volume24h: 234567890, openInterest: 156789012, baseCategory: ["perps", "tradfi", "stocks", "trending"] as const, tags: ["crypto"] },
  { symbol: "GME", name: "GameStop", price: 28.45, change24h: -3.21, leverage: 20, funding8h: 0.0023, volume24h: 145678901, openInterest: 89012345, baseCategory: ["perps", "tradfi", "stocks"] as const, tags: ["meme"] },
  { symbol: "PLTR", name: "Palantir", price: 78.90, change24h: 6.78, leverage: 20, funding8h: 0.0028, volume24h: 198765432, openInterest: 134567890, baseCategory: ["perps", "tradfi", "stocks"] as const, tags: ["tech", "ai"] },
  { symbol: "NFLX", name: "Netflix", price: 845.30, change24h: 1.87, leverage: 20, funding8h: 0.0010, volume24h: 312456789, openInterest: 198765432, baseCategory: ["perps", "tradfi", "stocks"] as const, tags: ["tech"] },
  { symbol: "JPM", name: "JPMorgan Chase", price: 198.45, change24h: 0.56, leverage: 20, funding8h: 0.0005, volume24h: 234567890, openInterest: 156789012, baseCategory: ["perps", "tradfi", "stocks"] as const, tags: ["finance"] },
  { symbol: "V", name: "Visa", price: 312.80, change24h: 0.34, leverage: 20, funding8h: 0.0004, volume24h: 189012345, openInterest: 123456789, baseCategory: ["perps", "tradfi", "stocks"] as const, tags: ["finance"] },

// === Indices (max x25) ===
  { symbol: "US500", name: "S&P 500", price: 6130.50, change24h: -0.26, leverage: 25, funding8h: 0, volume24h: 712366986, openInterest: 234988400, baseCategory: ["perps", "tradfi", "indices"] as const },
  { symbol: "US30", name: "Dow Jones 30", price: 44250.80, change24h: 0.42, leverage: 25, funding8h: 0, volume24h: 456789012, openInterest: 189012345, baseCategory: ["perps", "tradfi", "indices"] as const },
  { symbol: "NAS100", name: "Nasdaq 100", price: 21780.40, change24h: -0.85, leverage: 25, funding8h: 0, volume24h: 567890123, openInterest: 212345678, baseCategory: ["perps", "tradfi", "indices"] as const },
  { symbol: "UK100", name: "FTSE 100", price: 8456.30, change24h: 0.67, leverage: 20, funding8h: 0, volume24h: 145678901, openInterest: 89012345, baseCategory: ["perps", "tradfi", "indices"] as const },
  { symbol: "EU50", name: "Euro Stoxx 50", price: 5120.75, change24h: 0.34, leverage: 20, funding8h: 0, volume24h: 123456789, openInterest: 78901234, baseCategory: ["perps", "tradfi", "indices"] as const },
  { symbol: "JP225", name: "Nikkei 225", price: 39450.60, change24h: 1.23, leverage: 20, funding8h: 0, volume24h: 234567890, openInterest: 134567890, baseCategory: ["perps", "tradfi", "indices"] as const },
  { symbol: "HK50", name: "Hang Seng 50", price: 22150.40, change24h: -1.45, leverage: 20, funding8h: 0, volume24h: 189012345, openInterest: 98765432, baseCategory: ["perps", "tradfi", "indices"] as const },
  { symbol: "DE40", name: "DAX 40", price: 21340.90, change24h: 0.89, leverage: 20, funding8h: 0, volume24h: 178901234, openInterest: 112345678, baseCategory: ["perps", "tradfi", "indices"] as const },
  { symbol: "AU200", name: "ASX 200", price: 8345.20, change24h: 0.45, leverage: 20, funding8h: 0, volume24h: 89012345, openInterest: 56789012, baseCategory: ["perps", "tradfi", "indices"] as const },
  { symbol: "CN50", name: "China A50", price: 12890.30, change24h: -0.78, leverage: 20, funding8h: 0, volume24h: 156789012, openInterest: 89012345, baseCategory: ["perps", "tradfi", "indices"] as const },

// === Commodities (max x20) ===
  { symbol: "GOLD", name: "Gold", price: 2712.80, change24h: 0.78, leverage: 20, funding8h: 0.0018, volume24h: 387654320, openInterest: 256789010, baseCategory: ["perps", "tradfi", "commodities"] as const },
  { symbol: "PAXG", name: "PAX Gold", price: 2712.80, change24h: 0.78, leverage: 20, funding8h: 0.0018, volume24h: 38765432, openInterest: 25678901, baseCategory: ["perps", "tradfi", "commodities"] as const },
  { symbol: "XAUT", name: "Tether Gold", price: 2715.50, change24h: 0.85, leverage: 20, funding8h: 0.0015, volume24h: 45678901, openInterest: 32456789, baseCategory: ["perps", "tradfi", "commodities"] as const },
  { symbol: "SILVER", name: "Silver", price: 30.375, change24h: 1.39, leverage: 20, funding8h: 0.0113, volume24h: 150300547, openInterest: 53449162, baseCategory: ["perps", "tradfi", "commodities"] as const },
  { symbol: "CRUDE", name: "Crude Oil WTI", price: 78.45, change24h: -1.23, leverage: 20, funding8h: 0.0008, volume24h: 567890123, openInterest: 345678901, baseCategory: ["perps", "tradfi", "commodities"] as const },
  { symbol: "BRENT", name: "Brent Crude", price: 82.30, change24h: -0.89, leverage: 20, funding8h: 0.0007, volume24h: 456789012, openInterest: 267890123, baseCategory: ["perps", "tradfi", "commodities"] as const },
  { symbol: "NATGAS", name: "Natural Gas", price: 2.845, change24h: 3.45, leverage: 15, funding8h: 0.0034, volume24h: 234567890, openInterest: 156789012, baseCategory: ["perps", "tradfi", "commodities"] as const },
  { symbol: "COPPER", name: "Copper", price: 4.234, change24h: 0.67, leverage: 15, funding8h: 0.0012, volume24h: 123456789, openInterest: 89012345, baseCategory: ["perps", "tradfi", "commodities"] as const },
  { symbol: "PLAT", name: "Platinum", price: 1045.60, change24h: 1.12, leverage: 15, funding8h: 0.0009, volume24h: 89012345, openInterest: 56789012, baseCategory: ["perps", "tradfi", "commodities"] as const },
  { symbol: "WHEAT", name: "Wheat", price: 5.845, change24h: -0.45, leverage: 10, funding8h: 0.0006, volume24h: 67890123, openInterest: 34567890, baseCategory: ["perps", "tradfi", "commodities"] as const },
  { symbol: "CORN", name: "Corn", price: 4.523, change24h: 0.23, leverage: 10, funding8h: 0.0005, volume24h: 56789012, openInterest: 23456789, baseCategory: ["perps", "tradfi", "commodities"] as const },
  { symbol: "SOYBEAN", name: "Soybeans", price: 12.345, change24h: -0.67, leverage: 10, funding8h: 0.0004, volume24h: 45678901, openInterest: 19012345, baseCategory: ["perps", "tradfi", "commodities"] as const },

// === FX / Forex (max x100) ===
  // Majors
  { symbol: "EURUSD", name: "EUR/USD", price: 1.0845, change24h: 0.12, leverage: 100, funding8h: 0.0002, volume24h: 2345678901, openInterest: 1234567890, baseCategory: ["perps", "tradfi", "fx"] as const },
  { symbol: "GBPUSD", name: "GBP/USD", price: 1.2654, change24h: -0.23, leverage: 100, funding8h: 0.0003, volume24h: 1890123456, openInterest: 987654321, baseCategory: ["perps", "tradfi", "fx"] as const },
  { symbol: "USDJPY", name: "USD/JPY", price: 154.85, change24h: 0.45, leverage: 100, funding8h: 0.0004, volume24h: 1678901234, openInterest: 876543210, baseCategory: ["perps", "tradfi", "fx"] as const },
  { symbol: "USDCHF", name: "USD/CHF", price: 0.8912, change24h: -0.15, leverage: 100, funding8h: 0.0002, volume24h: 890123456, openInterest: 456789012, baseCategory: ["perps", "tradfi", "fx"] as const },
  { symbol: "AUDUSD", name: "AUD/USD", price: 0.6534, change24h: 0.34, leverage: 100, funding8h: 0.0003, volume24h: 756789012, openInterest: 398765432, baseCategory: ["perps", "tradfi", "fx"] as const },
  { symbol: "USDCAD", name: "USD/CAD", price: 1.3567, change24h: -0.08, leverage: 100, funding8h: 0.0002, volume24h: 678901234, openInterest: 345678901, baseCategory: ["perps", "tradfi", "fx"] as const },
  { symbol: "NZDUSD", name: "NZD/USD", price: 0.6123, change24h: 0.28, leverage: 100, funding8h: 0.0003, volume24h: 456789012, openInterest: 234567890, baseCategory: ["perps", "tradfi", "fx"] as const },
  // Crosses
  { symbol: "EURGBP", name: "EUR/GBP", price: 0.8567, change24h: 0.09, leverage: 100, funding8h: 0.0002, volume24h: 567890123, openInterest: 289012345, baseCategory: ["perps", "tradfi", "fx"] as const },
  { symbol: "EURJPY", name: "EUR/JPY", price: 167.95, change24h: 0.56, leverage: 100, funding8h: 0.0004, volume24h: 489012345, openInterest: 256789012, baseCategory: ["perps", "tradfi", "fx"] as const },
  { symbol: "GBPJPY", name: "GBP/JPY", price: 195.87, change24h: 0.78, leverage: 100, funding8h: 0.0005, volume24h: 345678901, openInterest: 189012345, baseCategory: ["perps", "tradfi", "fx"] as const },
  { symbol: "EURCHF", name: "EUR/CHF", price: 0.9665, change24h: -0.12, leverage: 100, funding8h: 0.0002, volume24h: 345678901, openInterest: 178901234, baseCategory: ["perps", "tradfi", "fx"] as const },
  { symbol: "AUDCAD", name: "AUD/CAD", price: 0.8862, change24h: 0.18, leverage: 50, funding8h: 0.0003, volume24h: 189012345, openInterest: 98765432, baseCategory: ["perps", "tradfi", "fx"] as const },
  { symbol: "AUDNZD", name: "AUD/NZD", price: 1.0672, change24h: -0.05, leverage: 50, funding8h: 0.0002, volume24h: 145678901, openInterest: 78901234, baseCategory: ["perps", "tradfi", "fx"] as const },
  { symbol: "AUDJPY", name: "AUD/JPY", price: 101.15, change24h: 0.45, leverage: 50, funding8h: 0.0004, volume24h: 234567890, openInterest: 123456789, baseCategory: ["perps", "tradfi", "fx"] as const },
  { symbol: "CADJPY", name: "CAD/JPY", price: 114.12, change24h: 0.32, leverage: 50, funding8h: 0.0003, volume24h: 178901234, openInterest: 89012345, baseCategory: ["perps", "tradfi", "fx"] as const },
  { symbol: "NZDJPY", name: "NZD/JPY", price: 94.82, change24h: 0.67, leverage: 50, funding8h: 0.0004, volume24h: 123456789, openInterest: 67890123, baseCategory: ["perps", "tradfi", "fx"] as const },
  { symbol: "GBPCHF", name: "GBP/CHF", price: 1.1278, change24h: -0.23, leverage: 50, funding8h: 0.0003, volume24h: 189012345, openInterest: 98765432, baseCategory: ["perps", "tradfi", "fx"] as const },
  { symbol: "GBPCAD", name: "GBP/CAD", price: 1.7168, change24h: 0.15, leverage: 50, funding8h: 0.0003, volume24h: 145678901, openInterest: 78901234, baseCategory: ["perps", "tradfi", "fx"] as const },
  { symbol: "GBPAUD", name: "GBP/AUD", price: 1.9372, change24h: -0.34, leverage: 50, funding8h: 0.0004, volume24h: 134567890, openInterest: 67890123, baseCategory: ["perps", "tradfi", "fx"] as const },
  { symbol: "EURAUD", name: "EUR/AUD", price: 1.6598, change24h: 0.21, leverage: 50, funding8h: 0.0003, volume24h: 178901234, openInterest: 89012345, baseCategory: ["perps", "tradfi", "fx"] as const },
  { symbol: "EURCAD", name: "EUR/CAD", price: 1.4712, change24h: -0.09, leverage: 50, funding8h: 0.0002, volume24h: 156789012, openInterest: 78901234, baseCategory: ["perps", "tradfi", "fx"] as const },
  { symbol: "EURNZD", name: "EUR/NZD", price: 1.7712, change24h: 0.34, leverage: 50, funding8h: 0.0003, volume24h: 89012345, openInterest: 45678901, baseCategory: ["perps", "tradfi", "fx"] as const },
  // Exotics
  { symbol: "USDSGD", name: "USD/SGD", price: 1.3412, change24h: -0.05, leverage: 50, funding8h: 0.0002, volume24h: 134567890, openInterest: 67890123, baseCategory: ["perps", "tradfi", "fx"] as const },
  { symbol: "USDHKD", name: "USD/HKD", price: 7.8125, change24h: 0.01, leverage: 50, funding8h: 0.0001, volume24h: 89012345, openInterest: 45678901, baseCategory: ["perps", "tradfi", "fx"] as const },
  { symbol: "USDMXN", name: "USD/MXN", price: 17.245, change24h: 0.45, leverage: 25, funding8h: 0.0008, volume24h: 234567890, openInterest: 123456789, baseCategory: ["perps", "tradfi", "fx"] as const },
  { symbol: "USDZAR", name: "USD/ZAR", price: 18.345, change24h: -0.67, leverage: 25, funding8h: 0.0012, volume24h: 156789012, openInterest: 78901234, baseCategory: ["perps", "tradfi", "fx"] as const },
  { symbol: "USDTRY", name: "USD/TRY", price: 34.567, change24h: 0.12, leverage: 25, funding8h: 0.0025, volume24h: 123456789, openInterest: 56789012, baseCategory: ["perps", "tradfi", "fx"] as const },
  { symbol: "USDNOK", name: "USD/NOK", price: 10.845, change24h: -0.23, leverage: 50, funding8h: 0.0004, volume24h: 89012345, openInterest: 45678901, baseCategory: ["perps", "tradfi", "fx"] as const },
  { symbol: "USDSEK", name: "USD/SEK", price: 10.567, change24h: 0.18, leverage: 50, funding8h: 0.0004, volume24h: 78901234, openInterest: 34567890, baseCategory: ["perps", "tradfi", "fx"] as const },
  { symbol: "USDPLN", name: "USD/PLN", price: 4.012, change24h: -0.34, leverage: 25, funding8h: 0.0006, volume24h: 67890123, openInterest: 23456789, baseCategory: ["perps", "tradfi", "fx"] as const },
  { symbol: "USDDKK", name: "USD/DKK", price: 6.912, change24h: 0.05, leverage: 50, funding8h: 0.0002, volume24h: 56789012, openInterest: 23456789, baseCategory: ["perps", "tradfi", "fx"] as const },
  { symbol: "USDCNH", name: "USD/CNH", price: 7.234, change24h: -0.15, leverage: 25, funding8h: 0.0005, volume24h: 234567890, openInterest: 123456789, baseCategory: ["perps", "tradfi", "fx"] as const },

// === Pre-IPO (max x3) ===
  { symbol: "OPENAI", name: "OpenAI", price: 683.40, change24h: 12.59, leverage: 3, funding8h: 0.0474, volume24h: 623420, openInterest: 892931, baseCategory: ["perps", "tradfi", "preipo"] as const },
  { symbol: "SPACEX", name: "SpaceX", price: 1574.80, change24h: 0.30, leverage: 3, funding8h: 0.0249, volume24h: 23429, openInterest: 2187348, baseCategory: ["perps", "tradfi", "preipo"] as const },
  { symbol: "ANTHROPIC", name: "Anthropic", price: 545.16, change24h: 1.19, leverage: 3, funding8h: 0.0261, volume24h: 22335, openInterest: 478031, baseCategory: ["perps", "tradfi", "preipo"] as const },
  { symbol: "STRIPE", name: "Stripe", price: 892.50, change24h: 2.34, leverage: 3, funding8h: 0.0189, volume24h: 34567, openInterest: 567890, baseCategory: ["perps", "tradfi", "preipo"] as const },
  { symbol: "DISCORD", name: "Discord", price: 234.60, change24h: -1.45, leverage: 3, funding8h: 0.0156, volume24h: 12345, openInterest: 234567, baseCategory: ["perps", "tradfi", "preipo"] as const },
  { symbol: "DATABRICKS", name: "Databricks", price: 456.78, change24h: 3.67, leverage: 3, funding8h: 0.0198, volume24h: 18765, openInterest: 345678, baseCategory: ["perps", "tradfi", "preipo"] as const },
]

// Spot markets (only crypto)
const spotMarkets = [
  {
    symbol: "BTC",
    name: "Bitcoin",
    price: 95146,
    change24h: 2.81,
    leverage: 1,
    funding8h: 0,
    volume24h: 2894085130,
    openInterest: 0,
    baseCategory: ["spot", "crypto"] as const,
    isFavorite: true,
  },
  {
    symbol: "ETH",
    name: "Ethereum",
    price: 3331.3,
    change24h: 5.99,
    leverage: 1,
    funding8h: 0,
    volume24h: 1248113647,
    openInterest: 0,
    baseCategory: ["spot", "crypto"] as const,
  },
  {
    symbol: "SOL",
    name: "Solana",
    price: 145.46,
    change24h: 2.14,
    leverage: 1,
    funding8h: 0,
    volume24h: 432067764,
    openInterest: 0,
    baseCategory: ["spot", "crypto"] as const,
  },
  {
    symbol: "XRP",
    name: "Ripple",
    price: 2.15,
    change24h: 3.78,
    leverage: 1,
    funding8h: 0,
    volume24h: 102707543,
    openInterest: 0,
    baseCategory: ["spot", "crypto"] as const,
  },
  {
    symbol: "DOGE",
    name: "Dogecoin",
    price: 0.3245,
    change24h: 3.21,
    leverage: 1,
    funding8h: 0,
    volume24h: 59432156,
    openInterest: 0,
    baseCategory: ["spot", "crypto"] as const,
  },
  {
    symbol: "BNB",
    name: "BNB",
    price: 612.40,
    change24h: 1.45,
    leverage: 1,
    funding8h: 0,
    volume24h: 692341567,
    openInterest: 0,
    baseCategory: ["spot", "crypto"] as const,
  },
  {
    symbol: "PAXG",
    name: "PAX Gold",
    price: 2712.8,
    change24h: 0.78,
    leverage: 1,
    funding8h: 0,
    volume24h: 18765432,
    openInterest: 0,
    baseCategory: ["spot", "crypto"] as const,
    tags: ["gold"],
  },
]

// Generate all markets with proper categories
export const extendedMarkets: MarketData[] = [
  // USDT Perps
  ...perpsMarkets.map((market) => ({
    symbol: market.symbol,
    name: market.name,
    quote: "USDT" as QuoteCurrency,
    price: market.price,
    change24h: market.change24h,
    leverage: market.leverage,
    funding8h: market.funding8h,
    volume24h: market.volume24h,
    openInterest: market.openInterest,
    category: [...market.baseCategory, "usdt"] as MarketData["category"],
    tags: market.tags,
    isFavorite: market.isFavorite,
  })),
  // USDC Perps
  ...perpsMarkets.map((market) => ({
    symbol: market.symbol,
    name: market.name,
    quote: "USDC" as QuoteCurrency,
    price: market.price,
    change24h: market.change24h,
    leverage: market.leverage,
    funding8h: market.funding8h,
    volume24h: market.volume24h * 0.85,
    openInterest: market.openInterest * 0.9,
    category: [...market.baseCategory, "usdc"] as MarketData["category"],
    tags: market.tags,
    isFavorite: market.isFavorite,
  })),
  // USDB Perps (SunBit native - limited pairs)
  ...perpsMarkets
    .filter((m) => ["BTC", "ETH", "SOL", "XRP", "PAXG"].includes(m.symbol))
    .map((market) => ({
      symbol: market.symbol,
      name: market.name,
      quote: "USDB" as QuoteCurrency,
      price: market.price,
      change24h: market.change24h,
      leverage: market.leverage, // Same leverage for USDB
      funding8h: market.funding8h,
      volume24h: market.volume24h * 0.5,
      openInterest: market.openInterest * 0.4,
      category: [...market.baseCategory, "usdb"] as MarketData["category"],
      tags: market.tags,
      isFavorite: market.isFavorite,
    })),
  // USDT Spot
  ...spotMarkets.map((market) => ({
    symbol: market.symbol,
    name: market.name,
    quote: "USDT" as QuoteCurrency,
    price: market.price,
    change24h: market.change24h,
    leverage: market.leverage,
    funding8h: market.funding8h,
    volume24h: market.volume24h,
    openInterest: market.openInterest,
    category: [...market.baseCategory, "usdt"] as MarketData["category"],
    tags: market.tags,
    isFavorite: market.isFavorite,
  })),
  // USDC Spot
  ...spotMarkets.map((market) => ({
    symbol: market.symbol,
    name: market.name,
    quote: "USDC" as QuoteCurrency,
    price: market.price,
    change24h: market.change24h,
    leverage: market.leverage,
    funding8h: market.funding8h,
    volume24h: market.volume24h * 0.85,
    openInterest: market.openInterest,
    category: [...market.baseCategory, "usdc"] as MarketData["category"],
    tags: market.tags,
    isFavorite: market.isFavorite,
  })),
  // USDB Spot (limited pairs)
  ...spotMarkets
    .filter((m) => ["BTC", "ETH", "SOL"].includes(m.symbol))
    .map((market) => ({
      symbol: market.symbol,
      name: market.name,
      quote: "USDB" as QuoteCurrency,
      price: market.price,
      change24h: market.change24h,
      leverage: market.leverage,
      funding8h: market.funding8h,
      volume24h: market.volume24h * 0.3,
      openInterest: market.openInterest,
      category: [...market.baseCategory, "usdb"] as MarketData["category"],
      tags: market.tags,
      isFavorite: market.isFavorite,
    })),
  // Stablecoin pairs
  {
    symbol: "USDB",
    name: "SunBit USD",
    quote: "USDT" as QuoteCurrency,
    price: 1.0002,
    change24h: 0.02,
    leverage: 10,
    funding8h: 0.0001,
    volume24h: 125000000,
    openInterest: 45000000,
    category: ["perps", "crypto", "usdt"] as MarketData["category"],
  },
  {
    symbol: "USDB",
    name: "SunBit USD",
    quote: "USDC" as QuoteCurrency,
    price: 1.0001,
    change24h: 0.01,
    leverage: 10,
    funding8h: 0.0001,
    volume24h: 95000000,
    openInterest: 38000000,
    category: ["perps", "crypto", "usdc"] as MarketData["category"],
  },
]

export function getMarketKey(market: MarketData): string {
  return `${market.symbol}-${market.quote}`
}

export function getMarketPair(market: MarketData): string {
  return `${market.symbol}-${market.quote}`
}

export const marketInfo = {
  symbol: "BTC",
  pair: "BTC/USDT",
  price: 95146,
  change24h: 2.81,
  changeAmount: 2599,
  volume24h: 4594085130,
  marketCap: 7874337054,
  contract: "0x0d01...11ec",
}

export function generateOrderBook(basePrice: number, symbol: string) {
  const asks = []
  const bids = []

for (let i = 0; i < 12; i++) {
    const priceOffset = (i + 1) * (basePrice * 0.0001)
    const price = basePrice + priceOffset
    const size = Math.random() * 500 + 10
    asks.push({
      price: Number(price.toFixed(basePrice > 100 ? 2 : 4)),
      size: Number(size.toFixed(2)),
      total: 0,
    })
  }
  let runningTotal = 0
  for (let i = asks.length - 1; i >= 0; i--) {
    runningTotal += asks[i].size
    asks[i].total = Number(runningTotal.toFixed(2))
  }
  asks.reverse()

for (let i = 0; i < 12; i++) {
    const priceOffset = (i + 1) * (basePrice * 0.0001)
    const price = basePrice - priceOffset
    const size = Math.random() * 500 + 10
    bids.push({
      price: Number(price.toFixed(basePrice > 100 ? 2 : 4)),
      size: Number(size.toFixed(2)),
      total: 0,
    })
  }
  runningTotal = 0
  for (let i = 0; i < bids.length; i++) {
    runningTotal += bids[i].size
    bids[i].total = Number(runningTotal.toFixed(2))
  }

return { asks, bids }
}

export function generateRecentTrades(basePrice: number) {
  const trades = []
  const now = new Date()

for (let i = 0; i < 15; i++) {
    const priceVariation = (Math.random() - 0.5) * basePrice * 0.001
    const price = basePrice + priceVariation
    const size = Math.random() * 50 + 0.5
    const time = new Date(now.getTime() - i * 3000)

trades.push({
      price: Number(price.toFixed(basePrice > 100 ? 2 : 4)),
      size: Number(size.toFixed(2)),
      time: time.toLocaleTimeString("en-US", { hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit" }),
      side: Math.random() > 0.5 ? ("buy" as const) : ("sell" as const),
    })
  }

return trades
}

export const positions = [
  {
    symbol: "BTC",
    side: "Long" as const,
    size: 0.5,
    entryPrice: 94500,
    markPrice: 95146,
    pnl: 323.0,
    pnlPercent: 0.68,
    leverage: 10,
    margin: 4725.0,
    liqPrice: 85050,
  },
]

export const openOrders = [
  {
    symbol: "BTC",
    side: "Buy" as const,
    type: "Limit" as OrderType,
    price: 93000,
    triggerPrice: null as number | null,
    size: 0.1,
    filled: 0,
    status: "Open" as OrderStatus,
    time: "14:20:00",
    marketType: "Perps" as MarketType,
  },
  {
    symbol: "ETH",
    side: "Sell" as const,
    type: "Stop Limit" as OrderType,
    price: 3200,
    triggerPrice: 3250,
    size: 1.5,
    filled: 0,
    status: "Pending" as OrderStatus,
    time: "13:45:00",
    marketType: "Perps" as MarketType,
  },
  {
    symbol: "SOL",
    side: "Buy" as const,
    type: "Take Limit" as OrderType,
    price: 140,
    triggerPrice: 142,
    size: 10,
    filled: 0,
    status: "Pending" as OrderStatus,
    time: "12:30:00",
    marketType: "Perps" as MarketType,
  },
  {
    symbol: "BTC",
    side: "Buy" as const,
    type: "Limit" as OrderType,
    price: 94500,
    triggerPrice: null as number | null,
    size: 0.05,
    filled: 0,
    status: "Open" as OrderStatus,
    time: "11:15:00",
    marketType: "Spot" as MarketType,
  },
]

export const orderHistory = [
  {
    symbol: "BTC",
    side: "Buy" as const,
    type: "Market" as OrderType,
    price: 95000,
    triggerPrice: null as number | null,
    size: 0.2,
    filled: 0.2,
    status: "Filled" as OrderStatus,
    time: "10:00:00",
    marketType: "Perps" as MarketType,
  },
  {
    symbol: "ETH",
    side: "Sell" as const,
    type: "Stop Market" as OrderType,
    price: 3280,
    triggerPrice: 3300,
    size: 2,
    filled: 2,
    status: "Triggered" as OrderStatus,
    time: "09:30:00",
    marketType: "Perps" as MarketType,
  },
  {
    symbol: "SOL",
    side: "Buy" as const,
    type: "TWAP" as OrderType,
    price: 145,
    triggerPrice: null as number | null,
    size: 50,
    filled: 50,
    status: "Filled" as OrderStatus,
    time: "08:00:00",
    marketType: "Perps" as MarketType,
  },
  {
    symbol: "BTC",
    side: "Sell" as const,
    type: "Take Market" as OrderType,
    price: 96000,
    triggerPrice: 95500,
    size: 0.1,
    filled: 0.1,
    status: "Triggered" as OrderStatus,
    time: "Yesterday",
    marketType: "Spot" as MarketType,
  },
]

export const balances = [
  { coin: "USDT", total: 10250.0, available: 9925.44, usdcValue: 10250.0, pnl: 0, pnlPercent: 0 },
  { coin: "USDC", total: 5000.0, available: 4800.0, usdcValue: 5000.0, pnl: 0, pnlPercent: 0 },
  { coin: "BTC", total: 0.5, available: 0, usdcValue: 47573.0, pnl: 323.0, pnlPercent: 0.68 },
]

export const accountEquity = {
  spot: 10250.0,
  perps: 3596.73,
  balance: 3596.73,
  unrealizedPnl: 22.98,
  crossMarginRatio: 12.45,
  maintenanceMargin: 162.28,
  crossAccountLeverage: 1.24,
}

export const chartData = {
  ohlc: { open: 94633, high: 96107, low: 93599, close: 95146, change: 2.81 },
  volume: "4.59B",
}

export const timeframes = ["5m", "1h", "D", "12h"]

export const markets = [
  { symbol: "BTC", name: "Bitcoin", price: 95146, change: 2.81 },
  { symbol: "ETH", name: "Ethereum", price: 3331, change: 5.99 },
  { symbol: "SOL", name: "Solana", price: 145.46, change: 2.14 },
  { symbol: "XRP", name: "Ripple", price: 2.15, change: 3.78 },
  { symbol: "DOGE", name: "Dogecoin", price: 0.32, change: 3.21 },
  { symbol: "PAXG", name: "PAX Gold", price: 2712.8, change: 0.78 },
]
[V0_FILE]xml:file="public/963x-logo.svg" isMerged="true"
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 viewBox="200 800 1900 400"
 preserveAspectRatio="xMidYMid meet">
<g transform="translate(0,2000) scale(0.1,-0.1)"
stroke="none">

<g fill="currentColor">
<path d="M10030 11894 c-484 -67 -870 -338 -1126 -790 -308 -544 -370 -1306
-158 -1944 84 -254 191 -440 350 -608 156 -167 360 -294 567 -357 249 -74 617
-85 897 -26 409 86 758 361 929 734 65 141 90 239 111 424 27 251 -59 567
-210 769 -178 238 -441 385 -760 424 -124 15 -390 12 -495 -5 -388 -63 -700
-326 -842 -710 l-18 -50 -6 70 c-18 202 -5 454 32 615 103 447 334 732 694
856 74 26 91 28 245 28 186 1 244 -11 362 -72 80 -41 183 -132 228 -202 18
-27 39 -50 46 -50 8 0 76 12 152 26 75 14 182 34 237 44 254 48 240 44 238 74
-6 83 -142 299 -261 415 -182 177 -402 284 -669 327 -139 23 -413 27 -543 8z
m445 -1794 c348 -98 555 -417 506 -781 -41 -307 -234 -525 -541 -610 -74 -21
-106 -24 -245 -23 -139 1 -173 4 -258 27 -274 73 -466 242 -547 481 -25 75
-25 158 -1 261 77 318 318 574 611 648 100 25 106 26 255 23 108 -3 158 -8
220 -26z"/>
<path d="M13165 11890 c-399 -59 -681 -239 -924 -590 -43 -62 -129 -253 -156
-345 -14 -49 -29 -120 -32 -157 -7 -79 -32 -66 202 -103 88 -14 183 -30 210
-35 28 -6 78 -13 113 -16 l62 -7 0 36 c0 66 22 141 70 242 105 218 272 357
503 417 119 32 354 31 480 0 217 -54 386 -181 463 -347 50 -108 68 -281 40
-396 -38 -162 -182 -280 -401 -330 -28 -6 -189 -14 -360 -18 l-310 -6 -3 -172
-2 -173 257 0 c355 0 469 -20 620 -108 77 -46 153 -116 195 -182 73 -114 91
-303 43 -447 -70 -208 -242 -357 -490 -424 -66 -18 -109 -22 -240 -23 -297 -1
-475 65 -655 244 -82 81 -103 109 -143 190 -56 112 -85 212 -98 334 -5 49 -11
91 -12 93 -2 1 -30 -2 -63 -7 -32 -6 -122 -19 -199 -30 -77 -11 -185 -27 -240
-35 -55 -8 -106 -15 -112 -15 -34 0 2 -316 53 -475 179 -551 714 -874 1445
-875 458 0 836 121 1091 349 223 200 333 497 300 808 -27 264 -152 471 -374
621 -86 59 -251 122 -348 134 -15 2 14 13 77 30 202 53 342 150 444 305 198
303 178 774 -44 1068 -51 68 -168 174 -252 230 -88 59 -158 92 -282 136 -252
88 -641 122 -928 79z"/>
<path d="M6405 11879 c-482 -46 -891 -313 -1095 -716 -170 -335 -172 -739 -8
-1068 55 -108 89 -157 172 -244 170 -178 364 -280 630 -333 161 -32 459 -32
596 -1 205 48 368 135 518 277 120 113 236 283 277 408 26 78 19 -320 -9 -502
-39 -252 -116 -473 -217 -626 -47 -71 -195 -214 -261 -252 -130 -77 -274 -107
-463 -99 -229 10 -394 75 -526 207 -41 41 -86 94 -99 118 -13 23 -30 42 -39
42 -8 0 -146 -29 -306 -65 -161 -36 -300 -65 -309 -65 -22 0 -20 -20 10 -87
35 -80 107 -195 175 -278 179 -221 465 -377 803 -438 176 -32 528 -32 701 0
425 78 728 296 939 674 44 79 120 262 142 339 76 269 109 467 125 740 27 445
-37 840 -187 1158 -171 364 -434 609 -789 736 -206 74 -497 102 -780 75z m387
-544 c173 -31 299 -95 418 -215 70 -70 93 -101 132 -180 64 -132 90 -220 82
-284 -28 -234 -150 -462 -319 -598 -76 -62 -204 -124 -296 -144 -41 -9 -130
-18 -199 -21 -247 -10 -427 53 -576 202 -65 65 -90 98 -124 168 -72 150 -95
317 -66 482 46 252 208 454 441 547 136 54 341 72 507 43z"/>
<path d="M15030 10854 c0 -3 93 -137 208 -296 114 -160 219 -307 233 -327 14
-20 115 -162 225 -316 110 -154 210 -295 223 -313 l23 -33 -28 -42 c-16 -23
-79 -112 -140 -197 -115 -162 -408 -576 -434 -613 -8 -12 -93 -132 -188 -267
l-174 -245 354 -5 c194 -3 358 -4 363 -2 6 2 19 17 30 35 25 38 447 665 550
817 40 58 78 105 84 105 7 0 43 -45 81 -100 38 -55 117 -170 175 -255 58 -85
147 -213 196 -285 50 -71 115 -167 146 -213 31 -45 62 -87 68 -92 8 -7 140 -9
369 -8 l358 3 -211 295 c-115 162 -255 358 -310 435 -318 445 -441 621 -441
634 0 13 57 95 400 574 80 111 163 228 185 260 22 31 56 79 75 106 130 180
233 328 237 338 4 11 -66 13 -358 11 l-363 -3 -78 -115 c-42 -63 -177 -265
-300 -447 -123 -183 -226 -333 -230 -333 -3 0 -93 129 -199 288 -106 158 -242
360 -302 450 l-110 162 -358 0 c-198 0 -359 -3 -359 -6z"/>

<path d="M2935 10819 c-340 -49 -646 -306 -756 -635 -41 -121 -52 -209 -46
-359 4 -99 11 -150 30 -212 82 -266 255 -471 502 -596 81 -40 210 -77 318 -89
380 -43 749 152 936 493 88 161 117 296 108 507 -4 112 -10 153 -32 222 -115
357 -392 602 -754 665 -91 16 -211 18 -306 4z"/>
</g>

<path fill="#FF5247" d="M18208 8958 c-102 -26 -151 -69 -199 -170 -33 -71 -34 -76 -34 -198
0 -96 4 -133 17 -160 9 -19 23 -51 31 -70 17 -42 78 -104 115 -118 157 -58
295 -57 427 4 43 20 68 43 96 89 88 146 92 341 11 491 -41 75 -69 97 -168 129
-94 31 -186 32 -296 3z"/>
</g>
</svg>
[V0_FILE]typescriptreact:file="components/ui/sunbit-logo.tsx" isMerged="true"
"use client"

interface Logo963XProps {
  height?: number  // Height in pixels - this controls the logo size
  className?: string
  variant?: "light" | "dark"
}

export function SunBitLogo({ height = 32, className = "", variant = "dark" }: Logo963XProps) {
  // Calculate width based on aspect ratio of the logo (approximately 4.75:1)
  const logoHeight = height
  const logoWidth = Math.round(height * 4.75)
  
  // Colors based on variant
  const textColor = variant === "dark" ? "white" : "#1a1a1a"
  
  return (
    <div className={`flex items-center shrink-0 ${className}`}>
      <svg 
        viewBox="200 800 1900 400" 
        width={logoWidth}
        height={logoHeight}
        preserveAspectRatio="xMidYMid meet"
        style={{ width: logoWidth, height: logoHeight }}
      >
        <g transform="translate(0,2000) scale(0.1,-0.1)" stroke="none">
          <g fill={textColor}>
            <path d="M10030 11894 c-484 -67 -870 -338 -1126 -790 -308 -544 -370 -1306 -158 -1944 84 -254 191 -440 350 -608 156 -167 360 -294 567 -357 249 -74 617 -85 897 -26 409 86 758 361 929 734 65 141 90 239 111 424 27 251 -59 567 -210 769 -178 238 -441 385 -760 424 -124 15 -390 12 -495 -5 -388 -63 -700 -326 -842 -710 l-18 -50 -6 70 c-18 202 -5 454 32 615 103 447 334 732 694 856 74 26 91 28 245 28 186 1 244 -11 362 -72 80 -41 183 -132 228 -202 18 -27 39 -50 46 -50 8 0 76 12 152 26 75 14 182 34 237 44 254 48 240 44 238 74 -6 83 -142 299 -261 415 -182 177 -402 284 -669 327 -139 23 -413 27 -543 8z m445 -1794 c348 -98 555 -417 506 -781 -41 -307 -234 -525 -541 -610 -74 -21 -106 -24 -245 -23 -139 1 -173 4 -258 27 -274 73 -466 242 -547 481 -25 75 -25 158 -1 261 77 318 318 574 611 648 100 25 106 26 255 23 108 -3 158 -8 220 -26z"/>
            <path d="M13165 11890 c-399 -59 -681 -239 -924 -590 -43 -62 -129 -253 -156 -345 -14 -49 -29 -120 -32 -157 -7 -79 -32 -66 202 -103 88 -14 183 -30 210 -35 28 -6 78 -13 113 -16 l62 -7 0 36 c0 66 22 141 70 242 105 218 272 357 503 417 119 32 354 31 480 0 217 -54 386 -181 463 -347 50 -108 68 -281 40 -396 -38 -162 -182 -280 -401 -330 -28 -6 -189 -14 -360 -18 l-310 -6 -3 -172 -2 -173 257 0 c355 0 469 -20 620 -108 77 -46 153 -116 195 -182 73 -114 91 -303 43 -447 -70 -208 -242 -357 -490 -424 -66 -18 -109 -22 -240 -23 -297 -1 -475 65 -655 244 -82 81 -103 109 -143 190 -56 112 -85 212 -98 334 -5 49 -11 91 -12 93 -2 1 -30 -2 -63 -7 -32 -6 -122 -19 -199 -30 -77 -11 -185 -27 -240 -35 -55 -8 -106 -15 -112 -15 -34 0 2 -316 53 -475 179 -551 714 -874 1445 -875 458 0 836 121 1091 349 223 200 333 497 300 808 -27 264 -152 471 -374 621 -86 59 -251 122 -348 134 -15 2 14 13 77 30 202 53 342 150 444 305 198 303 178 774 -44 1068 -51 68 -168 174 -252 230 -88 59 -158 92 -282 136 -252 88 -641 122 -928 79z"/>
            <path d="M6405 11879 c-482 -46 -891 -313 -1095 -716 -170 -335 -172 -739 -8 -1068 55 -108 89 -157 172 -244 170 -178 364 -280 630 -333 161 -32 459 -32 596 -1 205 48 368 135 518 277 120 113 236 283 277 408 26 78 19 -320 -9 -502 -39 -252 -116 -473 -217 -626 -47 -71 -195 -214 -261 -252 -130 -77 -274 -107 -463 -99 -229 10 -394 75 -526 207 -41 41 -86 94 -99 118 -13 23 -30 42 -39 42 -8 0 -146 -29 -306 -65 -161 -36 -300 -65 -309 -65 -22 0 -20 -20 10 -87 35 -80 107 -195 175 -278 179 -221 465 -377 803 -438 176 -32 528 -32 701 0 425 78 728 296 939 674 44 79 120 262 142 339 76 269 109 467 125 740 27 445 -37 840 -187 1158 -171 364 -434 609 -789 736 -206 74 -497 102 -780 75z m387 -544 c173 -31 299 -95 418 -215 70 -70 93 -101 132 -180 64 -132 90 -220 82 -284 -28 -234 -150 -462 -319 -598 -76 -62 -204 -124 -296 -144 -41 -9 -130 -18 -199 -21 -247 -10 -427 53 -576 202 -65 65 -90 98 -124 168 -72 150 -95 317 -66 482 46 252 208 454 441 547 136 54 341 72 507 43z"/>
            <path d="M15030 10854 c0 -3 93 -137 208 -296 114 -160 219 -307 233 -327 14 -20 115 -162 225 -316 110 -154 210 -295 223 -313 l23 -33 -28 -42 c-16 -23 -79 -112 -140 -197 -115 -162 -408 -576 -434 -613 -8 -12 -93 -132 -188 -267 l-174 -245 354 -5 c194 -3 358 -4 363 -2 6 2 19 17 30 35 25 38 447 665 550 817 40 58 78 105 84 105 7 0 43 -45 81 -100 38 -55 117 -170 175 -255 58 -85 147 -213 196 -285 50 -71 115 -167 146 -213 31 -45 62 -87 68 -92 8 -7 140 -9 369 -8 l358 3 -211 295 c-115 162 -255 358 -310 435 -318 445 -441 621 -441 634 0 13 57 95 400 574 80 111 163 228 185 260 22 31 56 79 75 106 130 180 233 328 237 338 4 11 -66 13 -358 11 l-363 -3 -78 -115 c-42 -63 -177 -265 -300 -447 -123 -183 -226 -333 -230 -333 -3 0 -93 129 -199 288 -106 158 -242 360 -302 450 l-110 162 -358 0 c-198 0 -359 -3 -359 -6z"/>
            <path d="M2935 10819 c-340 -49 -646 -306 -756 -635 -41 -121 -52 -209 -46 -359 4 -99 11 -150 30 -212 82 -266 255 -471 502 -596 81 -40 210 -77 318 -89 380 -43 749 152 936 493 88 161 117 296 108 507 -4 112 -10 153 -32 222 -115 357 -392 602 -754 665 -91 16 -211 18 -306 4z"/>
          </g>
          <path fill="#FF5247" d="M18208 8958 c-102 -26 -151 -69 -199 -170 -33 -71 -34 -76 -34 -198 0 -96 4 -133 17 -160 9 -19 23 -51 31 -70 17 -42 78 -104 115 -118 157 -58 295 -57 427 4 43 20 68 43 96 89 88 146 92 341 11 491 -41 75 -69 97 -168 129 -94 31 -186 32 -296 3z"/>
        </g>
      </svg>
    </div>
  )
}

// Also export as Logo963X for new code
export const Logo963X = SunBitLogo
[V0_FILE]typescriptreact:file="components/ui/withdraw-modal.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { X, ChevronDown, Check, AlertTriangle, Search } from "lucide-react"
import { Button } from "@/components/ui/button"
import { useWallet } from "@/lib/wallet-context"
import { CoinLogo } from "@/components/ui/coin-logo"
import { ChainIcon } from "@/components/ui/chain-icon"

interface WithdrawModalProps {
  isOpen: boolean
  onClose: () => void
}

// Full crypto asset list
const ASSETS = [
  { symbol: "USDB", name: "963X USD", isPrimary: true, category: "stable" },
  { symbol: "963X", name: "963X Token", isPrimary: false, category: "native" },
  { symbol: "USDT", name: "Tether USD", isPrimary: false, category: "stable" },
  { symbol: "USDC", name: "USD Coin", isPrimary: false, category: "stable" },
  { symbol: "DAI", name: "Dai Stablecoin", isPrimary: false, category: "stable" },
  { symbol: "BTC", name: "Bitcoin", isPrimary: false, category: "major" },
  { symbol: "WBTC", name: "Wrapped Bitcoin", isPrimary: false, category: "major" },
  { symbol: "ETH", name: "Ethereum", isPrimary: false, category: "major" },
  { symbol: "WETH", name: "Wrapped Ether", isPrimary: false, category: "major" },
  { symbol: "SOL", name: "Solana", isPrimary: false, category: "major" },
  { symbol: "BNB", name: "BNB", isPrimary: false, category: "major" },
  { symbol: "ARB", name: "Arbitrum", isPrimary: false, category: "alt" },
  { symbol: "OP", name: "Optimism", isPrimary: false, category: "alt" },
  { symbol: "MATIC", name: "Polygon", isPrimary: false, category: "alt" },
  { symbol: "AVAX", name: "Avalanche", isPrimary: false, category: "alt" },
  { symbol: "LINK", name: "Chainlink", isPrimary: false, category: "alt" },
  { symbol: "UNI", name: "Uniswap", isPrimary: false, category: "alt" },
  { symbol: "AAVE", name: "Aave", isPrimary: false, category: "alt" },
  { symbol: "CRV", name: "Curve DAO", isPrimary: false, category: "alt" },
  { symbol: "DOGE", name: "Dogecoin", isPrimary: false, category: "alt" },
  { symbol: "XRP", name: "Ripple", isPrimary: false, category: "alt" },
  { symbol: "ADA", name: "Cardano", isPrimary: false, category: "alt" },
  { symbol: "DOT", name: "Polkadot", isPrimary: false, category: "alt" },
  { symbol: "ATOM", name: "Cosmos", isPrimary: false, category: "alt" },
]

// Supported chains with proper identification
const CHAINS = [
  { id: 42161, name: "Arbitrum One", recommended: true, fee: "~$0.10", time: "~1 min" },
  { id: 1, name: "Ethereum", recommended: false, fee: "~$5.00", time: "~15 min" },
  { id: 101, name: "Solana", recommended: false, fee: "~$0.01", time: "~30 sec" },
  { id: 8453, name: "Base", recommended: false, fee: "~$0.05", time: "~1 min" },
  { id: 10, name: "Optimism", recommended: false, fee: "~$0.08", time: "~1 min" },
  { id: 137, name: "Polygon", recommended: false, fee: "~$0.02", time: "~5 min" },
  { id: 56, name: "BNB Chain", recommended: false, fee: "~$0.15", time: "~30 sec" },
  { id: 43114, name: "Avalanche", recommended: false, fee: "~$0.20", time: "~2 min" },

]

export function WithdrawModal({ isOpen, onClose }: WithdrawModalProps) {
  const { wallet, withdraw } = useWallet()
  const [selectedAsset, setSelectedAsset] = useState(ASSETS[0])
  const [selectedChain, setSelectedChain] = useState(CHAINS[0])
  const [amount, setAmount] = useState("")
  const [destinationAddress, setDestinationAddress] = useState("")
  const [showAssetDropdown, setShowAssetDropdown] = useState(false)
  const [showChainDropdown, setShowChainDropdown] = useState(false)
  const [isProcessing, setIsProcessing] = useState(false)
  const [assetSearch, setAssetSearch] = useState("")

const filteredAssets = ASSETS.filter(
    (a) =>
      a.symbol.toLowerCase().includes(assetSearch.toLowerCase()) ||
      a.name.toLowerCase().includes(assetSearch.toLowerCase())
  )

const getAssetBalance = (symbol: string) => {
    const found = wallet.balances.find((b) => b.symbol === symbol)
    return found ? found.balance : "0.00"
  }

if (!isOpen) return null

const currentBalance = getAssetBalance(selectedAsset.symbol)
  const numericBalance = Number.parseFloat(currentBalance.replace(/,/g, ""))
  const numericAmount = Number.parseFloat(amount) || 0
  const hasInsufficientBalance = numericAmount > numericBalance

const handleMax = () => {
    setAmount(currentBalance.replace(/,/g, ""))
  }

const handleWithdraw = async () => {
    if (hasInsufficientBalance || !destinationAddress || numericAmount <= 0) return
    
    setIsProcessing(true)
    try {
      await withdraw(selectedAsset.symbol, numericAmount)
      alert(`Successfully withdrew ${amount} ${selectedAsset.symbol} to ${destinationAddress.slice(0, 6)}...${destinationAddress.slice(-4)} via ${selectedChain.name}!`)
      setAmount("")
      setDestinationAddress("")
      onClose()
    } catch (error) {
      console.error("Withdrawal failed:", error)
      alert("Withdrawal failed. Please try again.")
    } finally {
      setIsProcessing(false)
    }
  }

return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      <div className="absolute inset-0 bg-black/80 backdrop-blur-sm" onClick={onClose} />
      <div className="relative bg-[#12121a] border border-white/10 rounded-2xl w-full max-w-md p-6 shadow-2xl max-h-[90vh] overflow-y-auto scrollbar-hide">
        {/* Close button */}
        <button onClick={onClose} className="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors">
          <X className="w-5 h-5" />
        </button>

{/* Header with icon */}
        <div className="text-center mb-6">
          <div className="w-14 h-14 rounded-full bg-[#ef5350]/10 flex items-center justify-center mx-auto mb-4">
            <CoinLogo symbol={selectedAsset.symbol} size={40} />
          </div>
          <h2 className="text-xl font-semibold text-white">
            Withdraw {selectedAsset.symbol} to {selectedChain.name}
          </h2>
          <p className="text-gray-400 text-sm mt-1">Network fee: {selectedChain.fee}</p>
        </div>

{/* Asset Selection */}
        <div className="mb-4">
          <div
            className="relative bg-[#1a1a24] border border-white/10 rounded-xl p-4 cursor-pointer hover:border-white/20 transition-colors"
            onClick={() => setShowAssetDropdown(!showAssetDropdown)}
          >
            <div className="flex items-center justify-between">
              <span className="text-gray-400 text-sm">Asset</span>
              <div className="flex items-center gap-2">
                <CoinLogo symbol={selectedAsset.symbol} size={20} />
                <span className="text-white font-medium">{selectedAsset.symbol}</span>
                <ChevronDown className="w-4 h-4 text-gray-400" />
              </div>
            </div>

{showAssetDropdown && (
              <div className="absolute left-0 right-0 top-full mt-2 bg-[#1a1a24] border border-white/10 rounded-xl overflow-hidden z-10 max-h-72 flex flex-col">
                <div className="p-2 border-b border-white/5">
                  <div className="relative">
                    <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-gray-500" />
                    <input
                      type="text"
                      value={assetSearch}
                      onChange={(e) => setAssetSearch(e.target.value)}
                      onClick={(e) => e.stopPropagation()}
                      placeholder="Search token..."
                      className="w-full bg-white/5 border border-white/5 rounded-lg pl-8 pr-3 py-1.5 text-sm text-white outline-none placeholder:text-gray-600 focus:border-white/10"
                    />
                  </div>
                </div>
                <div className="overflow-y-auto scrollbar-hide">
                {filteredAssets.map((asset) => (
                  <div
                    key={asset.symbol}
                    className={`flex items-center justify-between p-3 hover:bg-white/5 cursor-pointer ${selectedAsset.symbol === asset.symbol ? "bg-white/5" : ""}`}
                    onClick={(e) => {
                      e.stopPropagation()
                      setSelectedAsset(asset)
                      setShowAssetDropdown(false)
                    }}
                  >
                    <div className="flex items-center gap-3">
                      <CoinLogo symbol={asset.symbol} size={24} />
                      <div>
                        <div className="text-white font-medium flex items-center gap-2">
                          {asset.symbol}
                          {asset.isPrimary && (
                            <span className="text-[10px] bg-[#F7931A]/20 text-[#F7931A] px-1.5 py-0.5 rounded">Primary</span>
                          )}
                        </div>
                        <div className="text-gray-500 text-xs">{asset.name}</div>
                      </div>
                    </div>
                    <div className="flex items-center gap-2">
                      <span className="text-gray-400 text-sm">{getAssetBalance(asset.symbol)}</span>
                      {selectedAsset.symbol === asset.symbol && <Check className="w-4 h-4 text-[#F7931A]" />}
                    </div>
                  </div>
                ))}
                </div>
              </div>
            )}
          </div>
        </div>

{/* Chain Selection */}
        <div className="mb-4">
          <div
            className="relative bg-[#1a1a24] border border-white/10 rounded-xl p-4 cursor-pointer hover:border-white/20 transition-colors"
            onClick={() => setShowChainDropdown(!showChainDropdown)}
          >
            <div className="flex items-center justify-between">
              <span className="text-gray-400 text-sm">Withdraw Chain</span>
              <div className="flex items-center gap-2">
                <ChainIcon chainId={selectedChain.id} size={20} />
                <span className="text-white font-medium">{selectedChain.name}</span>
                <ChevronDown className="w-4 h-4 text-gray-400" />
              </div>
            </div>

{showChainDropdown && (
              <div className="absolute left-0 right-0 top-full mt-2 bg-[#1a1a24] border border-white/10 rounded-xl overflow-hidden z-10 max-h-60 overflow-y-auto scrollbar-hide">
                {CHAINS.map((chain) => (
                  <div
                    key={chain.id}
                    className={`flex items-center justify-between p-3 hover:bg-white/5 cursor-pointer ${selectedChain.id === chain.id ? "bg-white/5" : ""}`}
                    onClick={(e) => {
                      e.stopPropagation()
                      setSelectedChain(chain)
                      setShowChainDropdown(false)
                    }}
                  >
                    <div className="flex items-center gap-3">
                      <ChainIcon chainId={chain.id} size={24} className="flex-shrink-0" />
                      <div className="flex flex-col">
                        <div className="flex items-center gap-2">
                          <span className="text-white font-medium">{chain.name}</span>
                          {chain.recommended && (
                            <span className="text-[10px] bg-[#F7931A]/20 text-[#F7931A] px-1.5 py-0.5 rounded">Low Fee</span>
                          )}
                        </div>
                        <span className="text-[11px] text-gray-500">Fee: {chain.fee} · {chain.time}</span>
                      </div>
                    </div>
                    {selectedChain.id === chain.id && <Check className="w-4 h-4 text-[#F7931A]" />}
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>

{/* Destination Address */}
        <div className="mb-4">
          <div className="bg-[#1a1a24] border border-white/10 rounded-xl p-4">
            <div className="flex items-center justify-between mb-2">
              <span className="text-gray-400 text-sm">Destination Address</span>
            </div>
            <input
              type="text"
              value={destinationAddress}
              onChange={(e) => setDestinationAddress(e.target.value)}
              placeholder="0x... or wallet address"
              className="w-full bg-transparent text-white text-sm outline-none font-mono"
            />
          </div>
        </div>

{/* Amount Input */}
        <div className="mb-4">
          <div className={`bg-[#1a1a24] border rounded-xl p-4 ${hasInsufficientBalance ? 'border-red-500/50' : 'border-white/10'}`}>
            <div className="flex items-center justify-between mb-2">
              <span className="text-gray-400 text-sm">Amount</span>
              <button
                onClick={handleMax}
                className="text-[#F7931A] text-sm font-medium hover:text-[#E8850C] transition-colors"
              >
                Available: {currentBalance}
              </button>
            </div>
            <input
              type="text"
              inputMode="decimal"
              value={amount}
              onChange={(e) => {
                const val = e.target.value.replace(/[^0-9.]/g, "")
                if (val === "" || /^\d*\.?\d*$/.test(val)) setAmount(val)
              }}
              placeholder="0.00"
              className="w-full bg-transparent text-2xl font-semibold text-white outline-none"
            />
            {hasInsufficientBalance && (
              <div className="flex items-center gap-1 mt-2 text-red-400 text-xs">
                <AlertTriangle className="w-3 h-3" />
                <span>Insufficient balance</span>
              </div>
            )}
          </div>
        </div>

{/* Summary */}
        <div className="mb-6 p-4 bg-[#1a1a24] rounded-xl border border-white/5">
          <div className="flex justify-between text-sm mb-2">
            <span className="text-gray-400">You will receive</span>
            <span className="text-white font-medium">{amount || "0.00"} {selectedAsset.symbol}</span>
          </div>
          <div className="flex justify-between text-sm">
            <span className="text-gray-400">Network fee</span>
            <span className="text-gray-400">{selectedChain.fee}</span>
          </div>
        </div>

{/* Withdraw Button */}
        <Button
          onClick={handleWithdraw}
          disabled={!amount || numericAmount <= 0 || hasInsufficientBalance || !destinationAddress || isProcessing}
          className="w-full h-12 bg-[#ef5350] hover:bg-[#f44336] text-white font-semibold rounded-xl disabled:opacity-50 disabled:cursor-not-allowed"
        >
          {isProcessing ? "Processing..." : `Withdraw ${selectedAsset.symbol}`}
        </Button>

<p className="text-center text-gray-500 text-xs mt-4">
          Withdrawals typically take 1-30 minutes depending on network congestion.
        </p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/crypto-icons.tsx" isMerged="true"
"use client"

import React from "react"

// ─── Crypto Icon SVGs with proper viewBox and simplified paths ───
export const CRYPTO_ICONS: Record<string, { color: string; name: string; icon: React.ReactNode }> = {
  btc: {
    color: "#F7931A",
    name: "Bitcoin",
    icon: (
      <svg viewBox="0 0 24 24" fill="currentColor">
        <path d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12z" fillOpacity="0.2" />
        <path d="M15.6 10.8c.2-1.3-.8-2-2.2-2.5l.4-1.8-1-.2-.4 1.7-.8-.2.4-1.7-1-.3-.5 1.8-2-.5-.3 1.2s.8.2.8.2c.4.1.5.4.5.6l-.5 2.2v.1l-.7 3c0 .2-.2.4-.5.3l-.8-.2-.5 1.3 1.9.5-.4 1.8 1 .3.5-1.8.8.2-.4 1.7 1 .3.5-1.8c1.8.3 3.2.2 3.7-1.5.4-1.3 0-2.1-1-2.6.7-.2 1.2-.7 1.4-1.6zM13 14.9c-.3 1.3-2.5.6-3.2.4l.6-2.3c.7.2 2.9.5 2.6 1.9zm.3-3.5c-.3 1.2-2.1.6-2.7.4l.5-2.1c.6.2 2.5.4 2.2 1.7z" />
      </svg>
    ),
  },
  eth: {
    color: "#627EEA",
    name: "Ethereum",
    icon: (
      <svg viewBox="0 0 24 24" fill="currentColor">
        <path d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12z" fillOpacity="0.2" />
        <path d="M12 4l-5 8.5 5 3 5-3L12 4zM7 13.5L12 20l5-6.5-5 3-5-3z" />
      </svg>
    ),
  },
  sol: {
    color: "#9945FF",
    name: "Solana",
    icon: (
      <svg viewBox="0 0 24 24" fill="currentColor">
        <path d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12z" fillOpacity="0.2" />
        <path d="M7.5 15.5L9 14h9l-1.5 1.5h-9zM7.5 8.5L9 10h9l-1.5-1.5h-9zM16.5 12L15 13.5h-9L7.5 12h9z" />
      </svg>
    ),
  },
  xrp: {
    color: "#00AAE4",
    name: "XRP",
    icon: (
      <svg viewBox="0 0 24 24" fill="currentColor">
        <path d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12z" fillOpacity="0.2" />
        <path d="M17 7h1.5l-3.7 3.7a4 4 0 01-5.6 0L5.5 7H7l3 3a2.5 2.5 0 003.5 0L17 7zM7 17H5.5l3.7-3.7a4 4 0 015.6 0l3.7 3.7H17l-3-3a2.5 2.5 0 00-3.5 0L7 17z" />
      </svg>
    ),
  },
  bnb: {
    color: "#F3BA2F",
    name: "BNB",
    icon: (
      <svg viewBox="0 0 24 24" fill="currentColor">
        <path d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12z" fillOpacity="0.2" />
        <path d="M12 6l2.5 2.5-1.5 1.5L12 9l-1 1-1.5-1.5L12 6zM7 11l1.5-1.5L10 11l-1.5 1.5L7 11zM12 18l-2.5-2.5 1.5-1.5 1 1 1-1 1.5 1.5L12 18zM17 13l-1.5 1.5L14 13l1.5-1.5L17 13zM12 11l1 1-1 1-1-1 1-1z" />
      </svg>
    ),
  },
  doge: {
    color: "#C2A633",
    name: "Dogecoin",
    icon: (
      <svg viewBox="0 0 24 24" fill="currentColor">
        <path d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12z" fillOpacity="0.2" />
        <path d="M10 7h3c3 0 5 2 5 5s-2 5-5 5h-3V7zm2 2v6h1c1.7 0 3-1.3 3-3s-1.3-3-3-3h-1z" />
      </svg>
    ),
  },
}

// ─── CryptoIcon Component ───
export function CryptoIcon({ symbol, size = 40 }: { symbol: string; size?: number }) {
  const crypto = CRYPTO_ICONS[symbol.toLowerCase()] || CRYPTO_ICONS.btc
  const iconSize = Math.max(size * 0.55, 14)
  
  return (
    <div 
      className="rounded-full flex items-center justify-center shrink-0 overflow-visible"
      style={{ 
        width: size, 
        height: size, 
        backgroundColor: `${crypto.color}25`,
        color: crypto.color,
      }}
    >
      <div 
        className="flex items-center justify-center"
        style={{ width: iconSize, height: iconSize }}
      >
        {crypto.icon}
      </div>
    </div>
  )
}

// Export for use in other components
export function getCryptoColor(symbol: string): string {
  return CRYPTO_ICONS[symbol.toLowerCase()]?.color || "#F7931A"
}

export function getCryptoName(symbol: string): string {
  return CRYPTO_ICONS[symbol.toLowerCase()]?.name || symbol.toUpperCase()
}
[V0_FILE]typescriptreact:file="components/ui/updown-trade-modal.tsx" isMerged="true"
"use client"

import { useState, useEffect, useCallback } from "react"
import { X, Minus, Plus, Clock, ChevronDown, Loader2, CheckCircle2, XCircle } from "lucide-react"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import { usePredictionPositionStore } from "@/lib/stores/prediction-position-store"
import { useTradingStore, tradingStore } from "@/lib/trading-store"

// Icon URL mapping - same as prediction page for consistency
const ICON_IMAGES: Record<string, string> = {
  btc: "https://assets.coingecko.com/coins/images/1/small/bitcoin.png",
  eth: "https://assets.coingecko.com/coins/images/279/small/ethereum.png",
  sol: "https://assets.coingecko.com/coins/images/4128/small/solana.png",
  xrp: "https://assets.coingecko.com/coins/images/44/small/xrp-symbol-white-128.png",
  bnb: "https://assets.coingecko.com/coins/images/825/small/bnb-icon2_2x.png",
  doge: "https://assets.coingecko.com/coins/images/5/small/dogecoin.png",
}

interface UpDownTradeModalProps {
  isOpen: boolean
  onClose: () => void
  market: {
    symbol: string
    name: string
    icon: string
    timeframe: string
    upPercent: number
    downPercent: number
    startTime?: string
    endTime?: string
    roundNumber?: number
    startPrice?: number
  }
  initialSide?: "up" | "down"
}

export function UpDownTradeModal({ isOpen, onClose, market, initialSide = "up" }: UpDownTradeModalProps) {
  const [activeTab, setActiveTab] = useState<"buy" | "sell">("buy")
  const [orderType, setOrderType] = useState<"limit" | "market">("limit")
  const [selectedSide, setSelectedSide] = useState<"up" | "down">(initialSide)
  const [shares, setShares] = useState(0)
  const [limitPrice, setLimitPrice] = useState(45.9)
  const [setExpiration, setSetExpiration] = useState(false)
  const [expiryTime, setExpiryTime] = useState("1m")
  const [showExpiryDrop, setShowExpiryDrop] = useState(false)
  const [countdown, setCountdown] = useState("")
  
  // Phase 3: Execution states
  const [isExecuting, setIsExecuting] = useState(false)
  const [executionResult, setExecutionResult] = useState<'success' | 'error' | null>(null)
  const [executionMessage, setExecutionMessage] = useState("")
  
  // Phase 3: Position store
  const { addPosition } = usePredictionPositionStore()
  const predictionBalance = useTradingStore(state => state.predictionBalance)
  const { deductPredictionBalance } = tradingStore

// Update selected side when initialSide changes
  useEffect(() => {
    setSelectedSide(initialSide)
  }, [initialSide])

// Countdown timer
  const [isEnded, setIsEnded] = useState(false)
  
  useEffect(() => {
    if (!market.endTime) return
    
    const updateCountdown = () => {
      const now = new Date()
      const [hours, mins] = market.endTime!.split(":").map(Number)
      const end = new Date()
      end.setHours(hours, mins, 0, 0)
      
      const diff = end.getTime() - now.getTime()
      
      // If time has passed, show "Ended"
      if (diff <= 0) {
        setCountdown("Ended")
        setIsEnded(true)
        return
      }
      
      setIsEnded(false)
      const minutes = Math.floor(diff / 60000)
      const seconds = Math.floor((diff % 60000) / 1000)
      setCountdown(`${minutes}:${seconds.toString().padStart(2, "0")}`)
    }
    
    updateCountdown()
    const interval = setInterval(updateCountdown, 1000)
    return () => clearInterval(interval)
  }, [market.endTime])

if (!isOpen) return null

// Calculate prices based on percentages (cents)
  const upPrice = Math.round((market.upPercent / 100) * 100)
  const downPrice = Math.round((market.downPercent / 100) * 100)
  
  const currentPrice = selectedSide === "up" ? upPrice : downPrice
  const total = activeTab === "buy" ? (shares * (orderType === "limit" ? limitPrice : currentPrice) / 100) : 0
  const toWin = activeTab === "buy" ? (shares * (100 - (orderType === "limit" ? limitPrice : currentPrice)) / 100) : 0
  const toReceive = activeTab === "sell" ? (shares * currentPrice / 100) : 0

const handleSharePercentage = (percent: number) => {
    if (percent === 100) {
      setShares(Math.floor(predictionBalance / (currentPrice / 100)))
    } else {
      setShares(Math.floor((predictionBalance * percent / 100) / (currentPrice / 100)))
    }
  }
  
  // Phase 3: Execute trade handler
  const handleExecute = useCallback(async () => {
    if (isEnded || shares <= 0 || total > predictionBalance) return
    
    setIsExecuting(true)
    setExecutionResult(null)
    
    try {
      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 1200))
      
      // Deduct balance
      deductPredictionBalance(total)
      
      // Calculate end time based on timeframe
      const timeframeMinutes = market.timeframe === "5 Min" ? 5 : 15
      const endTime = Date.now() + timeframeMinutes * 60 * 1000
      
      // Add position to store
      addPosition({
        marketId: `${market.symbol}-updown-${market.timeframe.replace(" ", "").toLowerCase()}-${Date.now()}`,
        marketTitle: `${market.name} ${selectedSide === "up" ? "Up" : "Down"} (${market.timeframe})`,
        marketIcon: ICON_IMAGES[market.icon.toLowerCase()] || "",
        side: selectedSide === "up" ? "YES" : "NO", // UP = YES, DOWN = NO
        entryPrice: currentPrice,
        amount: total,
        openedAt: Date.now(),
        endTime: endTime
      })
      
      setExecutionResult('success')
      setExecutionMessage(`Bought ${shares} shares of ${selectedSide.toUpperCase()} @ ${currentPrice}c`)
      
      // Reset form
      setTimeout(() => {
        setShares(0)
        setExecutionResult(null)
        onClose()
      }, 2000)
      
    } catch {
      setExecutionResult('error')
      setExecutionMessage("Failed to place order. Please try again.")
    } finally {
      setIsExecuting(false)
    }
  }, [isEnded, shares, total, predictionBalance, market, selectedSide, currentPrice, deductPredictionBalance, addPosition, onClose])

return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      {/* Backdrop */}
      <div className="absolute inset-0 bg-black/70 backdrop-blur-sm" onClick={onClose} />
      
      {/* Modal */}
      <div className="relative bg-[#1a1a24] rounded-xl w-full max-w-md mx-4 shadow-2xl border border-white/10">
        {/* Header */}
        <div className="flex items-center justify-between p-4 border-b border-white/10">
          <div className="flex items-center gap-3">
            {market.icon && (
              <div className="w-10 h-10 rounded-full overflow-hidden bg-[#1a1a2e] flex items-center justify-center shrink-0">
                <img 
                  src={ICON_IMAGES[market.icon.toLowerCase()] || `https://img.icons8.com/color/96/${market.icon}.png`} 
                  alt="" 
                  className="w-7 h-7 object-contain" 
                  crossOrigin="anonymous"
                  onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }}
                />
              </div>
            )}
            <div>
              <h2 className="text-lg font-semibold text-white">
                {market.name} - {market.timeframe}
              </h2>
              {market.roundNumber && (
                <div className="text-xs text-gray-500 mt-0.5">Round #{market.roundNumber}</div>
              )}
            </div>
          </div>
          <button onClick={onClose} className="text-gray-400 hover:text-white transition-colors">
            <X className="w-5 h-5" />
          </button>
        </div>

{/* Time Info Bar */}
        {(market.startTime || market.endTime) && (
          <div className="px-4 py-3 bg-[#0f0f16] border-b border-white/5 flex items-center justify-between text-xs">
            <div className="flex items-center gap-4">
              {market.startTime && (
                <div>
                  <span className="text-gray-500">Start: </span>
                  <span className="text-white font-medium">{market.startTime}</span>
                </div>
              )}
              {market.endTime && (
                <div>
                  <span className="text-gray-500">End: </span>
                  <span className="text-white font-medium">{market.endTime}</span>
                </div>
              )}
            </div>
            {countdown && (
<div className={`flex items-center gap-1.5 ${isEnded ? "text-red-500" : "text-[#F7931A]"}`}>
  <Clock className="w-3.5 h-3.5" />
  <span className="font-mono font-medium">{countdown}</span>
  </div>
            )}
          </div>
        )}

{/* Start Price Info */}
        {market.startPrice && (
          <div className="px-4 py-2.5 bg-[#0a0a0f] border-b border-white/5 flex items-center justify-between text-xs">
            <span className="text-gray-500">Entry Price</span>
            <span className="text-white font-mono font-medium">${market.startPrice.toLocaleString()}</span>
          </div>
        )}

{/* Content */}
        <div className="p-4 space-y-5">
          {/* Buy/Sell Tabs + Order Type */}
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-4">
              <button
                onClick={() => setActiveTab("buy")}
                className={`text-sm font-medium pb-1 border-b-2 transition-colors ${
                  activeTab === "buy" 
                    ? "text-white border-white" 
                    : "text-gray-500 border-transparent hover:text-gray-300"
                }`}
              >
                Buy
              </button>
              <button
                onClick={() => setActiveTab("sell")}
                className={`text-sm font-medium pb-1 border-b-2 transition-colors ${
                  activeTab === "sell" 
                    ? "text-white border-white" 
                    : "text-gray-500 border-transparent hover:text-gray-300"
                }`}
              >
                Sell
              </button>
            </div>
            <select
              value={orderType}
              onChange={(e) => setOrderType(e.target.value as "limit" | "market")}
              className="bg-transparent text-sm text-gray-400 border-none outline-none cursor-pointer"
            >
              <option value="limit" className="bg-[#1a1a24]">Limit</option>
              <option value="market" className="bg-[#1a1a24]">Market</option>
            </select>
          </div>

{/* Up/Down Buttons */}
          <div className="flex gap-3">
            <button
              onClick={() => setSelectedSide("up")}
              className={`flex-1 py-3 rounded-lg font-semibold text-sm transition-all ${
                selectedSide === "up"
                  ? "bg-emerald-500 text-white"
                  : "bg-[#0a0a0f] text-gray-400 border border-white/10 hover:border-emerald-500/50"
              }`}
            >
              Up {upPrice}¢
            </button>
            <button
              onClick={() => setSelectedSide("down")}
              className={`flex-1 py-3 rounded-lg font-semibold text-sm transition-all ${
                selectedSide === "down"
                  ? "bg-red-500 text-white"
                  : "bg-[#0a0a0f] text-gray-400 border border-white/10 hover:border-red-500/50"
              }`}
            >
              Down {downPrice}¢
            </button>
          </div>

{/* Available & Current Price */}
          <div className="space-y-2">
            <div className="flex items-center justify-between text-sm">
              <span className="text-gray-500">Available USDC</span>
              <span className="text-white font-medium">$0.00</span>
            </div>
            <div className="flex items-center justify-between text-sm">
              <span className="text-gray-500">Current price</span>
              <span className="text-white font-medium">{currentPrice}¢</span>
            </div>
          </div>

{/* Limit Price (only for Buy + Limit) */}
          {activeTab === "buy" && orderType === "limit" && (
            <div className="space-y-2">
              <label className="text-sm text-emerald-400">Limit price</label>
              <div className="flex items-center bg-[#0a0a0f] rounded-lg border border-white/10">
                <button
                  onClick={() => setLimitPrice(Math.max(0.1, limitPrice - 0.1))}
                  className="p-3 text-gray-400 hover:text-white transition-colors"
                >
                  <Minus className="w-4 h-4" />
                </button>
                <div className="flex-1 text-center">
                  <span className="text-white font-medium">{limitPrice.toFixed(1)}</span>
                  <span className="text-gray-400 ml-1">¢</span>
                </div>
                <button
                  onClick={() => setLimitPrice(Math.min(99.9, limitPrice + 0.1))}
                  className="p-3 text-gray-400 hover:text-white transition-colors"
                >
                  <Plus className="w-4 h-4" />
                </button>
              </div>
            </div>
          )}

{/* Shares */}
          <div className="space-y-2">
            <label className="text-sm text-gray-500">Share</label>
            <input
              type="number"
              value={shares}
              onChange={(e) => setShares(Math.max(0, parseInt(e.target.value) || 0))}
              className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-4 py-3 text-white text-center outline-none focus:border-white/30 transition-colors"
              placeholder="0"
            />
            <div className="flex gap-2">
              <button
                onClick={() => handleSharePercentage(25)}
                className="flex-1 py-2 text-xs font-medium text-gray-400 bg-[#0a0a0f] border border-white/10 rounded-lg hover:border-white/30 transition-colors"
              >
                25%
              </button>
              <button
                onClick={() => handleSharePercentage(50)}
                className="flex-1 py-2 text-xs font-medium text-gray-400 bg-[#0a0a0f] border border-white/10 rounded-lg hover:border-white/30 transition-colors"
              >
                50%
              </button>
              <button
                onClick={() => handleSharePercentage(100)}
                className="flex-1 py-2 text-xs font-medium text-gray-400 bg-[#0a0a0f] border border-white/10 rounded-lg hover:border-white/30 transition-colors"
              >
                Maximum
              </button>
            </div>
          </div>

{/* Expiration (only for Buy + Limit) */}
          {activeTab === "buy" && orderType === "limit" && (
            <div className="flex items-center justify-between">
              <label className="flex items-center gap-2 cursor-pointer">
                <input
                  type="checkbox"
                  checked={setExpiration}
                  onChange={(e) => setSetExpiration(e.target.checked)}
                  className="w-4 h-4 rounded border-white/20 bg-transparent accent-emerald-500"
                />
                <span className="text-sm text-gray-400">Set expiration time</span>
              </label>
              {setExpiration && (
                <div className="relative">
                  <button 
                    onClick={() => setShowExpiryDrop(!showExpiryDrop)} 
                    className="flex items-center gap-1.5 text-sm text-white hover:text-gray-300 transition-colors"
                  >
                    {expiryTime} <ChevronDown className="w-3.5 h-3.5" />
                  </button>
                  {showExpiryDrop && (
                    <div className="absolute right-0 top-full mt-1 bg-[#1a1a2e] border border-white/10 rounded-lg py-1.5 z-30 min-w-[120px] shadow-xl [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-white/10 [&::-webkit-scrollbar-thumb]:rounded-full">
                      {["1m", "5m", "1h", "12h", "24h", "End of day", "Custom"].map((t) => (
                        <button 
                          key={t} 
                          onClick={() => { setExpiryTime(t); setShowExpiryDrop(false) }}
                          className={`block w-full text-left px-4 py-2 text-sm transition-colors ${
                            expiryTime === t 
                              ? "text-white bg-white/5 font-medium" 
                              : "text-gray-400 hover:text-white hover:bg-white/5"
                          }`}
                        >
                          {t}
                        </button>
                      ))}
                    </div>
                  )}
                </div>
              )}
            </div>
          )}

{/* Balance */}
          <div className="flex items-center justify-between text-sm">
            <span className="text-gray-500">Available Balance</span>
            <span className="text-emerald-400 font-medium">${predictionBalance.toFixed(2)}</span>
          </div>

{/* Summary */}
          {activeTab === "buy" ? (
            <div className="space-y-2 pt-2 border-t border-white/5">
              <div className="flex items-center justify-between">
                <span className="text-sm text-white">Total Cost</span>
                <span className={`text-sm font-medium ${total > predictionBalance ? 'text-red-400' : 'text-emerald-400'}`}>
                  ${total.toFixed(2)}
                </span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-sm text-white">Potential Win</span>
                <span className="text-sm text-emerald-400 font-bold">+${toWin.toFixed(2)}</span>
              </div>
            </div>
          ) : (
            <div className="space-y-2 pt-2">
              <div className="flex items-center justify-between">
                <span className="text-sm text-white">You will receive</span>
                <span className="text-sm text-emerald-400">${toReceive.toFixed(2)}</span>
              </div>
              <div className="text-xs text-gray-500">
                Average price {(currentPrice + 0.1).toFixed(1)}¢
              </div>
            </div>
          )}

{/* Phase 3: Execution Feedback */}
          {executionResult && (
            <div className={`flex items-center gap-3 p-4 rounded-xl ${
              executionResult === 'success' 
                ? 'bg-emerald-500/10 border border-emerald-500/20' 
                : 'bg-red-500/10 border border-red-500/20'
            }`}>
              {executionResult === 'success' ? (
                <CheckCircle2 className="w-5 h-5 text-emerald-400 shrink-0" />
              ) : (
                <XCircle className="w-5 h-5 text-red-400 shrink-0" />
              )}
              <span className={`text-sm ${executionResult === 'success' ? 'text-emerald-400' : 'text-red-400'}`}>
                {executionMessage}
              </span>
            </div>
          )}

{/* Action Button */}
          <Button
            onClick={handleExecute}
            disabled={isEnded || shares <= 0 || total > predictionBalance || isExecuting}
            className={`w-full py-6 text-base font-semibold rounded-xl transition-all ${
              isEnded || shares <= 0 || total > predictionBalance
                ? "bg-gray-600 text-gray-400 cursor-not-allowed" 
                : selectedSide === "up"
                ? "bg-emerald-500 hover:bg-emerald-600 text-white shadow-lg shadow-emerald-500/20"
                : "bg-red-500 hover:bg-red-600 text-white shadow-lg shadow-red-500/20"
            }`}
          >
            {isExecuting ? (
              <span className="flex items-center justify-center gap-2">
                <Loader2 className="w-5 h-5 animate-spin" />
                Processing...
              </span>
            ) : isEnded ? (
              "Round Ended"
            ) : shares <= 0 ? (
              "Enter Shares"
            ) : total > predictionBalance ? (
              "Insufficient Balance"
            ) : (
              `${activeTab === "buy" ? "Buy" : "Sell"} ${selectedSide === "up" ? "Up" : "Down"}`
            )}
          </Button>

{/* Terms */}
          <p className="text-xs text-gray-500 text-center">
            By trading, you agree to{" "}
            <Link href="/terms" className="underline hover:text-gray-300">
              Terms of Use
            </Link>
          </p>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/binary-trade-modal.tsx" isMerged="true"
"use client"

import { useState, useEffect, useCallback, useMemo } from "react"
import { X, Minus, Plus, Clock, ChevronDown, AlertTriangle, TrendingUp, TrendingDown, Loader2, CheckCircle2, XCircle } from "lucide-react"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import { usePredictionPositionStore } from "@/lib/stores/prediction-position-store"
import { useTradingStore } from "@/lib/trading-store"

// ─── Phase 2: Countdown Timer Hook (Task 2.1) ───
function useCountdown(endTime?: number) {
  const [remaining, setRemaining] = useState(() => {
    if (!endTime) return null
    return Math.max(0, endTime - Date.now())
  })

useEffect(() => {
    if (!endTime) return
    
    const interval = setInterval(() => {
      const newRemaining = Math.max(0, endTime - Date.now())
      setRemaining(newRemaining)
    }, 1000)
    
    return () => clearInterval(interval)
  }, [endTime])

const formatted = useMemo(() => {
    if (remaining === null) return null
    
    const seconds = Math.floor(remaining / 1000)
    const minutes = Math.floor(seconds / 60)
    const hours = Math.floor(minutes / 60)
    const days = Math.floor(hours / 24)
    
    if (days > 0) return `${days}d ${hours % 24}h`
    if (hours > 0) return `${hours}h ${minutes % 60}m`
    if (minutes > 0) return `${minutes}m ${seconds % 60}s`
    return `${seconds}s`
  }, [remaining])

const status = useMemo(() => {
    if (remaining === null) return "open"
    if (remaining <= 0) return "closed"
    if (remaining <= 60 * 1000) return "closing-critical" // <1 min
    if (remaining <= 5 * 60 * 1000) return "closing-soon" // <5 min
    if (remaining <= 60 * 60 * 1000) return "closing" // <1 hour
    return "open"
  }, [remaining])

return { remaining, formatted, status }
}

// ─── Phase 2: Real-time Price Simulation Hook ───
function useRealTimePrice(initialYes: number, initialNo: number) {
  const [yesPrice, setYesPrice] = useState(initialYes)
  const [noPrice, setNoPrice] = useState(initialNo)
  const [priceChange, setPriceChange] = useState<'up' | 'down' | null>(null)

useEffect(() => {
    const interval = setInterval(() => {
      setYesPrice(prev => {
        const change = (Math.random() - 0.5) * 2 // -1 to +1
        const newPrice = Math.max(1, Math.min(99, prev + change))
        setPriceChange(newPrice > prev ? 'up' : newPrice < prev ? 'down' : null)
        setNoPrice(100 - newPrice)
        return Math.round(newPrice * 10) / 10
      })
    }, 3000)
    
    // Clear price change indicator after animation
    const flashTimeout = setTimeout(() => setPriceChange(null), 500)
    
    return () => {
      clearInterval(interval)
      clearTimeout(flashTimeout)
    }
  }, [])

useEffect(() => {
    if (priceChange) {
      const timeout = setTimeout(() => setPriceChange(null), 500)
      return () => clearTimeout(timeout)
    }
  }, [priceChange])

return { yesPrice, noPrice, priceChange }
}

// ─── Task 2.8: Debounce Hook for calculations ───
function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState(value)
  
  useEffect(() => {
    const timer = setTimeout(() => setDebouncedValue(value), delay)
    return () => clearTimeout(timer)
  }, [value, delay])
  
  return debouncedValue
}

// Icon URL mapping - same as prediction page for consistency
const ICON_IMAGES: Record<string, string> = {
  // Crypto icons
  btc: "https://assets.coingecko.com/coins/images/1/small/bitcoin.png",
  eth: "https://assets.coingecko.com/coins/images/279/small/ethereum.png",
  sol: "https://assets.coingecko.com/coins/images/4128/small/solana.png",
  xrp: "https://assets.coingecko.com/coins/images/44/small/xrp-symbol-white-128.png",
  bnb: "https://assets.coingecko.com/coins/images/825/small/bnb-icon2_2x.png",
  doge: "https://assets.coingecko.com/coins/images/5/small/dogecoin.png",
  coins: "https://assets.coingecko.com/coins/images/1/small/bitcoin.png",
  // Other icons
  fed: "https://img.icons8.com/color/96/bank-building.png",
  politics: "https://img.icons8.com/color/96/parliament.png",
  musk: "https://img.icons8.com/color/96/twitter-x--v1.png",
  tech: "https://img.icons8.com/color/96/chatgpt.png",
  oil: "https://img.icons8.com/color/96/oil-industry.png",
  finance: "https://img.icons8.com/color/96/stocks-growth.png",
  geopolitics: "https://img.icons8.com/color/96/globe--v1.png",
  culture: "https://img.icons8.com/color/96/controller.png",
  economy: "https://img.icons8.com/color/96/economic-improvement.png",
  netflix: "https://img.icons8.com/color/96/netflix.png",
  sold: "https://img.icons8.com/color/96/sold.png",
  openai: "https://img.icons8.com/color/96/chatgpt.png",
  ai: "https://img.icons8.com/color/96/artificial-intelligence.png",
  science: "https://img.icons8.com/color/96/test-tube.png",
  company: "https://img.icons8.com/color/96/company.png",
}

// ─── Phase 2: Enhanced Market Interface ───
interface BinaryTradeModalProps {
  isOpen: boolean
  onClose: () => void
  market: {
    id: string
    title: string
    icon: string
    yesPercent: number
    noPercent: number
    volume: string
    endDate?: string
    endTime?: number // Unix timestamp for countdown
    outcomeLabel?: string // For multi-outcome markets
    liquidity?: number
    participants?: number
  }
  initialSide?: "yes" | "no"
  userBalance?: number // Task 2.3: User's available balance
  onTradeSuccess?: (trade: { side: string; amount: number; price: number }) => void // Task 2.7
}

export function BinaryTradeModal({ 
  isOpen, 
  onClose, 
  market, 
  initialSide = "yes",
  userBalance = 0,
  onTradeSuccess
}: BinaryTradeModalProps) {
  // ─── Phase 3: Position Store Integration ───
  const addPosition = usePredictionPositionStore(state => state.addPosition)
  const deductPredictionBalance = useTradingStore(state => state.deductPredictionBalance)
  
  // ─── Task 2.2: Side Selection State ───
  const [selectedSide, setSelectedSide] = useState<"yes" | "no" | null>(null)
  const [sideAnimating, setSideAnimating] = useState(false)
  
  // ─── Task 2.3: Amount Input State ───
  const [amount, setAmount] = useState<string>("")
  const [amountError, setAmountError] = useState<string | null>(null)
  
  // ─── Order Type State ───
  const [activeTab, setActiveTab] = useState<"buy" | "sell">("buy")
  const [orderType, setOrderType] = useState<"limit" | "market">("market") // Default to market for simplicity
  const [limitPrice, setLimitPrice] = useState(market.yesPercent || 50)
  const [setExpiration, setSetExpiration] = useState(false)
  const [expiryTime, setExpiryTime] = useState("1m")
  const [showExpiryDrop, setShowExpiryDrop] = useState(false)
  const [showOrderTypeDrop, setShowOrderTypeDrop] = useState(false)
  
  // ─── Task 2.7: Execution State ───
  const [isExecuting, setIsExecuting] = useState(false)
  const [executionResult, setExecutionResult] = useState<"success" | "error" | null>(null)
  const [executionMessage, setExecutionMessage] = useState<string>("")

// ─── Task 2.1: Real-time Countdown ───
  const { remaining, formatted: countdownFormatted, status: marketStatus } = useCountdown(
    market.endTime || (market.endDate ? new Date(market.endDate).getTime() : undefined)
  )
  
  // ─── Task 2.4: Real-time Prices ───
  const { yesPrice, noPrice, priceChange } = useRealTimePrice(market.yesPercent, market.noPercent)
  
  // Set initial side when modal opens
  useEffect(() => {
    if (isOpen && initialSide) {
      setSelectedSide(initialSide)
    }
  }, [isOpen, initialSide])
  
  // Reset state when modal closes
  useEffect(() => {
    if (!isOpen) {
      setSelectedSide(null)
      setAmount("")
      setAmountError(null)
      setExecutionResult(null)
      setExecutionMessage("")
    }
  }, [isOpen])

// ─── Task 2.4: Pricing & Payout Engine ───
  const currentPrice = selectedSide === "yes" ? yesPrice : selectedSide === "no" ? noPrice : 0
  const parsedAmount = parseFloat(amount) || 0
  
  // Core payout calculation per spec: payout = amount / (price/100)
  const payout = useMemo(() => {
    if (!selectedSide || parsedAmount <= 0 || currentPrice <= 0) return 0
    return parsedAmount / (currentPrice / 100)
  }, [selectedSide, parsedAmount, currentPrice])
  
  // profit = payout - amount
  const profit = useMemo(() => Math.max(0, payout - parsedAmount), [payout, parsedAmount])
  
  // loss = amount (if wrong, you lose your stake)
  const loss = parsedAmount
  
  // ─── Task 2.3: Amount Input Handlers ───
  const handleAmountChange = useCallback((value: string) => {
    // Prevent negative/invalid
    const cleaned = value.replace(/[^0-9.]/g, '')
    const parts = cleaned.split('.')
    const formatted = parts[0] + (parts.length > 1 ? '.' + parts[1].slice(0, 2) : '')
    
    setAmount(formatted)
    
    // Validate
    const num = parseFloat(formatted) || 0
    if (num > userBalance) {
      setAmountError("Insufficient balance")
    } else if (num < 0) {
      setAmountError("Invalid amount")
    } else {
      setAmountError(null)
    }
  }, [userBalance])

const handleQuickAmount = useCallback((percent: number) => {
    if (percent === 100) {
      setAmount(userBalance.toFixed(2))
    } else {
      setAmount((userBalance * percent / 100).toFixed(2))
    }
    setAmountError(null)
  }, [userBalance])
  
  // ─── Task 2.2: Side Selection Handler with Animation ───
  const handleSideSelect = useCallback((side: "yes" | "no") => {
    setSideAnimating(true)
    setSelectedSide(side)
    setTimeout(() => setSideAnimating(false), 300)
  }, [])
  
  // ─── Task 2.6: Validation Logic ───
  const isMarketClosed = marketStatus === "closed"
  const canTrade = useMemo(() => {
    return (
      selectedSide !== null &&
      parsedAmount > 0 &&
      parsedAmount <= userBalance &&
      !isMarketClosed &&
      !isExecuting
    )
  }, [selectedSide, parsedAmount, userBalance, isMarketClosed, isExecuting])
  
  const buttonText = useMemo(() => {
    if (isExecuting) return "Processing..."
    if (isMarketClosed) return "Market Closed"
    if (!selectedSide) return "Select YES or NO"
    if (parsedAmount <= 0) return "Enter Amount"
    if (parsedAmount > userBalance) return "Insufficient Balance"
    return `Place ${selectedSide.toUpperCase()} Bet`
  }, [isExecuting, isMarketClosed, selectedSide, parsedAmount, userBalance])
  
  // ─── Task 2.7: Execution Handler ───
  const handleExecute = useCallback(async () => {
    if (!canTrade) return
    
    setIsExecuting(true)
    setExecutionResult(null)
    
    try {
      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 1500))
      
      // ─── Phase 3 Task 3.1: Create Position on Success ───
      // Deduct balance from prediction account
      deductPredictionBalance(parsedAmount)
      
      // Add position to the prediction position store
      addPosition({
        marketId: market.id,
        marketTitle: market.title,
        marketIcon: market.icon.startsWith("http") ? market.icon : (ICON_IMAGES[market.icon] || ""),
        side: selectedSide!.toUpperCase() as "YES" | "NO",
        entryPrice: currentPrice, // Entry price in cents (0-100)
        amount: parsedAmount,
        openedAt: Date.now(),
        endTime: market.endTime || Date.now() + 24 * 60 * 60 * 1000, // Default 24h if not specified
      })
      
      // Success
      setExecutionResult("success")
      setExecutionMessage(`Successfully placed ${selectedSide?.toUpperCase()} bet for $${parsedAmount.toFixed(2)}`)
      
      onTradeSuccess?.({
        side: selectedSide!,
        amount: parsedAmount,
        price: currentPrice
      })
      
      // Auto close after success
      setTimeout(() => {
        onClose()
      }, 2000)
    } catch {
      setExecutionResult("error")
      setExecutionMessage("Failed to place bet. Please try again.")
    } finally {
      setIsExecuting(false)
    }
  }, [canTrade, selectedSide, parsedAmount, currentPrice, onTradeSuccess, onClose, addPosition, deductPredictionBalance, market])

if (!isOpen) return null

return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      <div className="absolute inset-0 bg-black/70 backdrop-blur-sm" onClick={onClose} />
      
      <div className="relative bg-[#1a1a24] rounded-xl w-full max-w-md mx-4 shadow-2xl border border-white/10">
        {/* Task 2.1: Market Context Header with Real-time Updates */}
        <div className="p-4 border-b border-white/10">
          {/* Top row: Icon, Title, Close */}
          <div className="flex items-start justify-between gap-3">
            <div className="flex items-start gap-3 flex-1">
              {market.icon && (
                <div className="w-10 h-10 rounded-full overflow-hidden bg-[#1a1a2e] flex items-center justify-center shrink-0">
                  <img 
                    src={market.icon.startsWith("http") ? market.icon : (ICON_IMAGES[market.icon] || `https://img.icons8.com/fluency/48/${market.icon}.png`)} 
                    alt="" 
                    className="w-7 h-7 object-contain" 
                    crossOrigin="anonymous"
                    onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }}
                  />
                </div>
              )}
              <div className="flex-1 min-w-0">
                <h2 className="text-base font-semibold text-white leading-tight line-clamp-2">
                  {market.title}
                </h2>
                {market.outcomeLabel && (
                  <div className="text-sm text-emerald-400 font-medium mt-1">Outcome: {market.outcomeLabel}</div>
                )}
              </div>
            </div>
            <button onClick={onClose} className="text-gray-400 hover:text-white transition-colors shrink-0 p-1">
              <X className="w-5 h-5" />
            </button>
          </div>
          
          {/* Task 2.1: Real-time Price Display + Countdown */}
          <div className="mt-3 flex items-center justify-between">
            {/* Current Prices with animation */}
            <div className="flex items-center gap-4">
              <div className="flex items-center gap-1.5">
                <span className="text-[11px] text-gray-500">YES:</span>
                <span className={`text-sm font-bold transition-all duration-300 ${
                  priceChange === 'up' ? 'text-emerald-300 scale-110' : 'text-emerald-400'
                }`}>
                  {yesPrice.toFixed(1)}c
                  {priceChange === 'up' && <TrendingUp className="inline w-3 h-3 ml-0.5" />}
                </span>
              </div>
              <div className="flex items-center gap-1.5">
                <span className="text-[11px] text-gray-500">NO:</span>
                <span className={`text-sm font-bold transition-all duration-300 ${
                  priceChange === 'down' ? 'text-red-300 scale-110' : 'text-red-400'
                }`}>
                  {noPrice.toFixed(1)}c
                  {priceChange === 'down' && <TrendingDown className="inline w-3 h-3 ml-0.5" />}
                </span>
              </div>
            </div>
            
            {/* Countdown Timer + Status Badge */}
            <div className="flex items-center gap-2">
              {countdownFormatted && (
                <div className={`flex items-center gap-1 text-[11px] px-2 py-1 rounded-full ${
                  marketStatus === 'closing-critical' 
                    ? 'bg-red-500/20 text-red-400 animate-pulse' 
                    : marketStatus === 'closing-soon'
                    ? 'bg-amber-500/20 text-amber-400'
                    : marketStatus === 'closing'
                    ? 'bg-yellow-500/20 text-yellow-400'
                    : 'bg-white/5 text-gray-400'
                }`}>
                  <Clock className="w-3 h-3" />
                  {countdownFormatted}
                </div>
              )}
              
              {/* Market Status Badge */}
              <div className={`px-2 py-1 rounded-full text-[10px] font-bold uppercase ${
                isMarketClosed 
                  ? 'bg-red-500/20 text-red-400'
                  : marketStatus === 'closing-critical' || marketStatus === 'closing-soon'
                  ? 'bg-amber-500/20 text-amber-400'
                  : 'bg-emerald-500/20 text-emerald-400'
              }`}>
                {isMarketClosed ? 'Closed' : marketStatus.includes('closing') ? 'Closing' : 'Open'}
              </div>
            </div>
          </div>
          
          {/* Task 2.8: Warning when closing soon */}
          {(marketStatus === 'closing-critical' || marketStatus === 'closing-soon') && !isMarketClosed && (
            <div className="mt-3 flex items-center gap-2 px-3 py-2 bg-amber-500/10 border border-amber-500/20 rounded-lg">
              <AlertTriangle className="w-4 h-4 text-amber-400 shrink-0" />
              <span className="text-[11px] text-amber-400">
                {marketStatus === 'closing-critical' 
                  ? 'Market closing in less than 1 minute! Trade quickly.'
                  : 'Market closing soon. Your trade may not fill.'}
              </span>
            </div>
          )}
          
          {/* Volume info */}
          <div className="mt-2 text-[11px] text-gray-500">
            Volume: {market.volume} {market.participants && `| ${market.participants.toLocaleString()} traders`}
          </div>
        </div>

{/* Content */}
        <div className="p-4 space-y-4">
          {/* Buy/Sell Tabs */}
          <div className="flex items-center justify-between">
            <div className="flex gap-6">
              <button
                onClick={() => setActiveTab("buy")}
                className={`text-sm font-semibold transition-colors ${
                  activeTab === "buy" ? "text-white" : "text-gray-500 hover:text-gray-300"
                }`}
              >
                Buy
              </button>
              <button
                onClick={() => setActiveTab("sell")}
                className={`text-sm font-semibold transition-colors ${
                  activeTab === "sell" ? "text-white" : "text-gray-500 hover:text-gray-300"
                }`}
              >
                Sell
              </button>
            </div>
            
            <div className="relative">
              <button 
                onClick={() => setShowOrderTypeDrop(!showOrderTypeDrop)}
                className="flex items-center gap-1 text-sm text-gray-400 hover:text-white transition-colors"
              >
                {orderType === "limit" ? "Limit" : "Market"}
                <ChevronDown className="w-3.5 h-3.5" />
              </button>
              {showOrderTypeDrop && (
                <div className="absolute right-0 top-full mt-1 bg-[#1a1a2e] border border-white/10 rounded-lg py-1.5 z-30 min-w-[100px] shadow-xl">
                  <button 
                    onClick={() => { setOrderType("market"); setShowOrderTypeDrop(false) }}
                    className={`block w-full text-left px-4 py-2 text-sm transition-colors ${
                      orderType === "market" 
                        ? "text-white bg-white/5 font-medium" 
                        : "text-gray-400 hover:text-white hover:bg-white/5"
                    }`}
                  >
                    Market
                  </button>
                  <button 
                    onClick={() => { setOrderType("limit"); setShowOrderTypeDrop(false) }}
                    className={`block w-full text-left px-4 py-2 text-sm transition-colors ${
                      orderType === "limit" 
                        ? "text-white bg-white/5 font-medium" 
                        : "text-gray-400 hover:text-white hover:bg-white/5"
                    }`}
                  >
                    Limit
                  </button>
                </div>
              )}
            </div>
          </div>

{/* Task 2.2: YES/NO Selector with Animation */}
          <div className="space-y-2">
            <span className="text-[11px] text-gray-500 font-medium uppercase tracking-wider">Select Outcome</span>
            <div className="grid grid-cols-2 gap-3">
              <button
                onClick={() => handleSideSelect("yes")}
                disabled={isMarketClosed || isExecuting}
                className={`relative py-4 rounded-xl text-base font-bold transition-all duration-300 overflow-hidden ${
                  selectedSide === "yes"
                    ? "bg-emerald-500 text-white shadow-lg shadow-emerald-500/30 scale-[1.02]"
                    : "bg-[#0a0a0f] border border-white/[0.08] text-gray-400 hover:text-white hover:border-emerald-500/40 hover:bg-emerald-500/5"
                } ${isMarketClosed ? 'opacity-50 cursor-not-allowed' : ''} ${sideAnimating && selectedSide === 'yes' ? 'animate-pulse' : ''}`}
              >
                <div className="flex flex-col items-center gap-1">
                  <span>YES</span>
                  <span className={`text-sm font-medium ${selectedSide === "yes" ? "text-emerald-100" : "text-emerald-400"}`}>
                    {yesPrice.toFixed(1)}c
                  </span>
                </div>
                {selectedSide === "yes" && (
                  <div className="absolute inset-0 bg-gradient-to-t from-emerald-600/20 to-transparent pointer-events-none" />
                )}
              </button>
              <button
                onClick={() => handleSideSelect("no")}
                disabled={isMarketClosed || isExecuting}
                className={`relative py-4 rounded-xl text-base font-bold transition-all duration-300 overflow-hidden ${
                  selectedSide === "no"
                    ? "bg-red-500 text-white shadow-lg shadow-red-500/30 scale-[1.02]"
                    : "bg-[#0a0a0f] border border-white/[0.08] text-gray-400 hover:text-white hover:border-red-500/40 hover:bg-red-500/5"
                } ${isMarketClosed ? 'opacity-50 cursor-not-allowed' : ''} ${sideAnimating && selectedSide === 'no' ? 'animate-pulse' : ''}`}
              >
                <div className="flex flex-col items-center gap-1">
                  <span>NO</span>
                  <span className={`text-sm font-medium ${selectedSide === "no" ? "text-red-100" : "text-red-400"}`}>
                    {noPrice.toFixed(1)}c
                  </span>
                </div>
                {selectedSide === "no" && (
                  <div className="absolute inset-0 bg-gradient-to-t from-red-600/20 to-transparent pointer-events-none" />
                )}
              </button>
            </div>
          </div>

{/* Task 2.3: Amount Input */}
          <div className="space-y-2">
            <div className="flex items-center justify-between">
              <span className="text-[11px] text-gray-500 font-medium uppercase tracking-wider">Amount (USD)</span>
              <span className="text-[11px] text-gray-500">
                Balance: <span className="text-emerald-400 font-medium">${userBalance.toFixed(2)}</span>
              </span>
            </div>
            <div className={`relative ${amountError ? 'ring-1 ring-red-500/50' : ''} rounded-xl`}>
              <span className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500 text-lg">$</span>
              <input
                type="text"
                inputMode="decimal"
                value={amount}
                onChange={(e) => handleAmountChange(e.target.value)}
                disabled={isMarketClosed || isExecuting}
                className="w-full bg-[#0a0a0f] border border-white/[0.08] rounded-xl pl-8 pr-4 py-4 text-white text-xl font-bold text-center focus:outline-none focus:border-white/20 disabled:opacity-50"
                placeholder="0.00"
            />
            {amountError && (
              <p className="text-[11px] text-red-400 mt-1">{amountError}</p>
            )}
            </div>
            
            {/* Quick Amount Buttons */}
            <div className="grid grid-cols-4 gap-2">
              {[25, 50, 75, 100].map((pct) => (
                <button
                  key={pct}
                  onClick={() => handleQuickAmount(pct)}
                  disabled={isMarketClosed || isExecuting || userBalance <= 0}
                  className="py-2.5 rounded-lg text-xs font-medium bg-[#0a0a0f] border border-white/[0.08] text-gray-400 hover:text-white hover:border-white/15 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  {pct === 100 ? "MAX" : `${pct}%`}
                </button>
              ))}
            </div>
          </div>

{/* Task 2.5: Order Summary Panel */}
          {selectedSide && parsedAmount > 0 && (
            <div className="bg-[#0a0a0f] border border-white/[0.06] rounded-xl p-4 space-y-3">
              <div className="flex items-center justify-between text-[11px] text-gray-500 uppercase tracking-wider">
                <span>Order Summary</span>
                {priceChange && (
                  <span className={`flex items-center gap-1 ${priceChange === 'up' ? 'text-emerald-400' : 'text-red-400'}`}>
                    {priceChange === 'up' ? <TrendingUp className="w-3 h-3" /> : <TrendingDown className="w-3 h-3" />}
                    Price updated
                  </span>
                )}
              </div>
              
              <div className="space-y-2">
                <div className="flex items-center justify-between text-sm">
                  <span className="text-gray-400">Side</span>
                  <span className={`font-semibold ${selectedSide === 'yes' ? 'text-emerald-400' : 'text-red-400'}`}>
                    {selectedSide.toUpperCase()}
                  </span>
                </div>
                <div className="flex items-center justify-between text-sm">
                  <span className="text-gray-400">Entry Price</span>
                  <span className="text-white font-medium">{currentPrice.toFixed(1)}c</span>
                </div>
                <div className="flex items-center justify-between text-sm">
                  <span className="text-gray-400">Amount</span>
                  <span className="text-white font-medium">${parsedAmount.toFixed(2)}</span>
                </div>
                
                <div className="h-px bg-white/5 my-2" />
                
                {/* Task 2.4: Win/Loss Display */}
                <div className="flex items-center justify-between text-sm">
                  <span className="text-gray-400">Potential Payout</span>
                  <span className="text-white font-bold">${payout.toFixed(2)}</span>
                </div>
                <div className="flex items-center justify-between text-sm">
                  <span className="text-emerald-400">If Correct</span>
                  <span className="text-emerald-400 font-bold">+${profit.toFixed(2)}</span>
                </div>
                <div className="flex items-center justify-between text-sm">
                  <span className="text-red-400">If Wrong</span>
                  <span className="text-red-400 font-bold">-${loss.toFixed(2)}</span>
                </div>
              </div>
            </div>
          )}

{/* Task 2.7: Execution Feedback */}
          {executionResult && (
            <div className={`flex items-center gap-3 p-4 rounded-xl ${
              executionResult === 'success' 
                ? 'bg-emerald-500/10 border border-emerald-500/20' 
                : 'bg-red-500/10 border border-red-500/20'
            }`}>
              {executionResult === 'success' ? (
                <CheckCircle2 className="w-5 h-5 text-emerald-400 shrink-0" />
              ) : (
                <XCircle className="w-5 h-5 text-red-400 shrink-0" />
              )}
              <span className={`text-sm ${executionResult === 'success' ? 'text-emerald-400' : 'text-red-400'}`}>
                {executionMessage}
              </span>
            </div>
          )}

{/* Task 2.6: Confirm Button with Validation */}
          <Button
            onClick={handleExecute}
            disabled={!canTrade}
            className={`w-full py-6 text-base font-semibold rounded-xl transition-all ${
              !canTrade
                ? 'bg-gray-700 text-gray-400 cursor-not-allowed'
                : selectedSide === "yes" 
                ? "bg-emerald-500 hover:bg-emerald-600 text-white shadow-lg shadow-emerald-500/20" 
                : selectedSide === "no"
                ? "bg-red-500 hover:bg-red-600 text-white shadow-lg shadow-red-500/20"
                : "bg-gray-700 text-gray-400"
            }`}
          >
            {isExecuting ? (
              <span className="flex items-center justify-center gap-2">
                <Loader2 className="w-5 h-5 animate-spin" />
                Processing...
              </span>
            ) : (
              buttonText
            )}
          </Button>

{/* Terms */}
          <p className="text-center text-[11px] text-gray-600">
            By trading, you agree to <Link href="/terms" className="underline hover:text-gray-400">Terms of Use</Link>
          </p>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="lib/markets-data.ts" isMerged="true"
// Shared markets data used by both list page and detail page
export interface MarketOutcome {
  label: string
  percent: number
  volume?: string
  yesPrice?: number
  noPrice?: number
  color?: string
  resolved?: "yes" | "no"
}

export interface PredictionMarket {
  id: string
  title: string
  icon: string
  category: string
  subcategory: string
  type: "binary" | "multi"
  yesPercent?: number
  noPercent?: number
  outcomes: { label: string; percent: number }[]
  volume: string
  frequency: string
  endDate?: string
  countdown?: string
  rule?: string
}

export const MARKETS: PredictionMarket[] = [
  // Multi-outcome markets (price ranges, elections, etc.)
  { id: "btc-march", title: "What price will Bitcoin hit in March?", icon: "btc", category: "crypto", subcategory: "Bitcoin", type: "multi", outcomes: [{ label: "↓ 65,000", percent: 73 }, { label: "↑ 75,000", percent: 53 }, { label: "↑ 80,000", percent: 28 }, { label: "↑ 90,000", percent: 12 }], volume: "$12M", frequency: "Monthly", endDate: "Mar 31, 2026" },
  { id: "btc-above-march4", title: "Bitcoin above ___ on March 4?", icon: "btc", category: "crypto", subcategory: "Hit Price", type: "multi", outcomes: [{ label: "58,000", percent: 100 }, { label: "60,000", percent: 100 }], volume: "$3M", frequency: "Weekly" },
  { id: "eth-march", title: "What price will Ethereum hit in March?", icon: "eth", category: "crypto", subcategory: "Ethereum", type: "multi", outcomes: [{ label: "↓ 1,800", percent: 57 }, { label: "↑ 2,200", percent: 54 }], volume: "$2M", frequency: "Monthly" },
  { id: "eth-above-march4", title: "Ethereum above ___ on March 4?", icon: "eth", category: "crypto", subcategory: "Ethereum", type: "multi", outcomes: [{ label: "1,500", percent: 100 }, { label: "1,600", percent: 100 }], volume: "$1M", frequency: "Weekly" },
  { id: "sol-march", title: "What price will Solana hit in March?", icon: "sol", category: "crypto", subcategory: "Solana", type: "multi", outcomes: [{ label: "↓ 120", percent: 65 }, { label: "↑ 150", percent: 45 }], volume: "$1.5M", frequency: "Monthly" },
  { id: "btc-price-march4", title: "Bitcoin price on March 4?", icon: "btc", category: "crypto", subcategory: "Hit Price", type: "multi", outcomes: [{ label: "68,000-70,000", percent: 43 }, { label: "66,000-68,000", percent: 34 }], volume: "$724k", frequency: "Weekly" },
  { id: "opinion-fdv", title: "Opinion FDV above ___ one day after launch?", icon: "coins", category: "crypto", subcategory: "Featured", type: "multi", outcomes: [{ label: "$250M", percent: 93 }, { label: "$400M", percent: 63 }], volume: "$9M", frequency: "" },
  { id: "btc-hit-march2-8", title: "What price will Bitcoin hit March 2-8?", icon: "btc", category: "crypto", subcategory: "Weekly", type: "multi", outcomes: [{ label: "↑ 72,000", percent: 40 }, { label: "↑ 68,000", percent: 35 }], volume: "$5M", frequency: "Weekly" },
  { id: "btc-2026", title: "What price will Bitcoin hit in 2026?", icon: "btc", category: "crypto", subcategory: "Monthly", type: "multi", outcomes: [{ label: "↑ 75,000", percent: 82 }, { label: "↓ 55,000", percent: 70 }], volume: "$8M", frequency: "Monthly" },
  { id: "btc-above-march5", title: "Bitcoin above ___ on March 5?", icon: "btc", category: "crypto", subcategory: "Hit Price", type: "multi", outcomes: [{ label: "56,000", percent: 100 }, { label: "58,000", percent: 100 }], volume: "$2M", frequency: "Daily" },
  { id: "pres-2028", title: "Presidential Election Winner 2028", icon: "politics", category: "politics", subcategory: "US Election", type: "multi", outcomes: [{ label: "JD Vance", percent: 22 }, { label: "Gavin Newsom", percent: 18 }], volume: "$357M", frequency: "" },
  { id: "fed-march", title: "Fed decision in March?", icon: "fed", category: "economy", subcategory: "Fed Rates", type: "multi", outcomes: [{ label: "No change", percent: 97 }, { label: "25 bps decrease", percent: 2 }], volume: "$203M", frequency: "Monthly" },
  { id: "iran-strait", title: "Will Iran close the Strait of Hormuz by...?", icon: "geopolitics", category: "geopolitics", subcategory: "Iran", type: "multi", outcomes: [{ label: "December 31", percent: 78 }, { label: "June 30", percent: 72 }], volume: "$10M", frequency: "Weekly" },
  { id: "us-iran-ceasefire", title: "US x Iran ceasefire by...?", icon: "geopolitics", category: "geopolitics", subcategory: "Iran", type: "multi", outcomes: [{ label: "June 30", percent: 71 }, { label: "May 31", percent: 65 }], volume: "$10M", frequency: "" },
  { id: "musk-tweets-feb", title: "Elon Musk # tweets February 27 - March 6, 2026?", icon: "musk", category: "culture", subcategory: "Tweet Markets", type: "multi", outcomes: [{ label: "140-159", percent: 26 }, { label: "160-179", percent: 25 }], volume: "$36M", frequency: "Weekly" },
  { id: "musk-tweets-mar3", title: "Elon Musk # tweets March 3 - March 10, 2026?", icon: "musk", category: "culture", subcategory: "Tweet Markets", type: "multi", outcomes: [{ label: "180-199", percent: 11 }, { label: "200-219", percent: 11 }], volume: "$4M", frequency: "Weekly" },
  { id: "musk-tweets-mar2", title: "Elon Musk # tweets March 2 - March 4, 2026?", icon: "musk", category: "culture", subcategory: "Tweet Markets", type: "multi", outcomes: [{ label: "<40", percent: 77 }, { label: "40-64", percent: 20 }], volume: "$990k", frequency: "Daily" },
  { id: "gpt53", title: "GPT-5.3 released by...?", icon: "tech", category: "technology", subcategory: "AI", type: "multi", outcomes: [{ label: "March 8", percent: 100 }, { label: "March 15", percent: 100 }], volume: "$2M", frequency: "" },
  { id: "largest-co-march", title: "Largest Company end of March?", icon: "company", category: "technology", subcategory: "Big Tech", type: "multi", outcomes: [{ label: "NVIDIA", percent: 95 }, { label: "Apple", percent: 3 }, { label: "Alphabet", percent: 1 }, { label: "Saudi Aramco", percent: 0 }], volume: "$8M", frequency: "Monthly", endDate: "Mar 31, 2026" },
  { id: "acquired-2027", title: "Which companies will be acquired before 2027?", icon: "sold", category: "technology", subcategory: "Acquisitions", type: "multi", outcomes: [{ label: "Viking Therapeutics", percent: 49 }, { label: "GitLab", percent: 49 }, { label: "JetBlue Airways", percent: 34 }, { label: "MicroStrategy", percent: 9 }, { label: "Xerox", percent: 21 }, { label: "OpenAI", percent: 6 }, { label: "Anthropic", percent: 3 }], volume: "$17M", frequency: "", endDate: "Dec 31, 2026" },
  { id: "openai-ipo", title: "OpenAI IPO closing market cap above ___?", icon: "tech", category: "technology", subcategory: "OpenAI", type: "multi", outcomes: [{ label: "$800B", percent: 66 }, { label: "$1T", percent: 44 }], volume: "$1M", frequency: "" },
  { id: "deepseek-v4", title: "DeepSeek V4 released by...?", icon: "tech", category: "technology", subcategory: "AI", type: "multi", outcomes: [{ label: "March 31", percent: 69 }, { label: "March 15", percent: 52 }], volume: "$549k", frequency: "Daily" },
  // Binary Yes/No markets
  { id: "fda-retatrutide", title: "FDA approves Retatrutide this year?", icon: "science", category: "technology", subcategory: "Science", type: "binary", yesPercent: 16, noPercent: 84, outcomes: [], volume: "$3M", frequency: "" },
  { id: "fed-rate-cuts", title: "How many Fed rate cuts in 2026?", icon: "fed", category: "finance", subcategory: "Fed Rates", type: "multi", outcomes: [{ label: "2 (50 bps)", percent: 26 }, { label: "1 (25 bps)", percent: 24 }], volume: "$8M", frequency: "" },
  { id: "gold-june", title: "What will Gold (GC) hit ___ by end of June?", icon: "finance", category: "finance", subcategory: "Business", type: "multi", outcomes: [{ label: "↑ $5,500", percent: 75 }, { label: "↑ $5,700", percent: 56 }], volume: "$1M", frequency: "Monthly" },
  { id: "silver-june", title: "Will Silver (SI) hit___ by end of June?", icon: "finance", category: "finance", subcategory: "Business", type: "multi", outcomes: [{ label: "↓ $70", percent: 67 }, { label: "↓ $80", percent: 45 }], volume: "$800k", frequency: "Monthly" },
  { id: "usd-krw", title: "Will USD/KRW hit ___ in 2026?", icon: "finance", category: "finance", subcategory: "Business", type: "multi", outcomes: [{ label: "↓ 1350", percent: 64 }, { label: "↓ 1400", percent: 52 }], volume: "$500k", frequency: "" },
  { id: "microstrategy", title: "Nothing Ever Happens: MicroStrategy", icon: "finance", category: "finance", subcategory: "Business", type: "binary", yesPercent: 85, noPercent: 15, outcomes: [], volume: "$2M", frequency: "" },
  { id: "fed-april", title: "Fed decision in April?", icon: "fed", category: "economy", subcategory: "Fed Rates", type: "multi", outcomes: [{ label: "No change", percent: 86 }, { label: "25 bps decrease", percent: 12 }], volume: "$4M", frequency: "" },
  { id: "japan-unemployment", title: "January 2026 Unemployment Rate - Japan", icon: "economy", category: "economy", subcategory: "Macro Indicators", type: "multi", outcomes: [{ label: "≥2.7%", percent: 100 }, { label: "2.6%", percent: 1 }], volume: "$684k", frequency: "Monthly" },
  { id: "boj-march", title: "Bank of Japan Decision in March?", icon: "economy", category: "economy", subcategory: "Global Rates", type: "multi", outcomes: [{ label: "No change", percent: 93 }, { label: "25 bps increase", percent: 6 }], volume: "$868k", frequency: "Daily" },
  { id: "boe-march", title: "Bank of England Decision in March?", icon: "economy", category: "economy", subcategory: "Global Rates", type: "multi", outcomes: [{ label: "No change", percent: 72 }, { label: "25 bps decrease", percent: 27 }], volume: "$500k", frequency: "" },
  { id: "fed-june", title: "Fed Decision in June?", icon: "fed", category: "economy", subcategory: "Fed Rates", type: "multi", outcomes: [{ label: "No change", percent: 56 }, { label: "25 bps decrease", percent: 30 }], volume: "$2M", frequency: "" },
  { id: "crude-oil-march", title: "What will Crude Oil (CL) settle at in March?", icon: "oil", category: "economy", subcategory: "Trade War", type: "multi", outcomes: [{ label: "$90+", percent: 49 }, { label: "$70-$75", percent: 48 }], volume: "$1M", frequency: "Monthly" },
  { id: "le-havre-mayor", title: "Le Havre Mayoral Election Winner", icon: "geopolitics", category: "latest", subcategory: "All", type: "multi", outcomes: [{ label: "Edouard Philippe", percent: 43 }, { label: "Charlotte Bou...", percent: 43 }], volume: "$0", frequency: "" },
  { id: "toulon-mayor", title: "Toulon Mayoral Election Winner", icon: "geopolitics", category: "latest", subcategory: "All", type: "multi", outcomes: [{ label: "Laure Lavalette", percent: 49 }, { label: "Jean-Michel G...", percent: 42 }], volume: "$0", frequency: "" },
  { id: "iran-supreme-leader", title: "New Supreme Leader of Iran by...?", icon: "geopolitics", category: "world", subcategory: "Iran", type: "multi", outcomes: [{ label: "March 31", percent: 92 }, { label: "March 15", percent: 86 }], volume: "$3M", frequency: "" },
  { id: "reza-pahlavi", title: "Will Reza Pahlavi enter Iran by...?", icon: "geopolitics", category: "world", subcategory: "Iran", type: "multi", outcomes: [{ label: "December 31", percent: 31 }, { label: "June 30", percent: 22 }], volume: "$4M", frequency: "" },
  { id: "ben-gurion", title: "Will Israel's Ben Gurion Airport reopen by...?", icon: "geopolitics", category: "world", subcategory: "Israel", type: "multi", outcomes: [{ label: "March 15", percent: 63 }, { label: "March 7", percent: 24 }], volume: "$369k", frequency: "" },
  { id: "hungary-pm", title: "Next Prime Minister of Hungary", icon: "geopolitics", category: "world", subcategory: "Global Elections", type: "multi", outcomes: [{ label: "Peter Magyar", percent: 64 }, { label: "Viktor Orban", percent: 36 }], volume: "$26M", frequency: "Monthly" },
  { id: "brazil-election", title: "Brazil Presidential Election", icon: "geopolitics", category: "world", subcategory: "Global Elections", type: "multi", outcomes: [{ label: "Luiz Inacio Lula", percent: 52 }, { label: "Flavio Bolsonaro", percent: 33 }], volume: "$23M", frequency: "" },
  { id: "seoul-mayor", title: "2026 Seoul Mayoral Election Winner", icon: "geopolitics", category: "world", subcategory: "Global Elections", type: "multi", outcomes: [{ label: "Chong Won-oh", percent: 78 }, { label: "Oh Se-hoon", percent: 14 }], volume: "$5M", frequency: "" },
  { id: "russia-ukraine-march", title: "Russia x Ukraine ceasefire by March 31, 2026?", icon: "geopolitics", category: "world", subcategory: "Ukraine", type: "binary", yesPercent: 4, noPercent: 96, outcomes: [], volume: "$15M", frequency: "" },
  { id: "gta-vi", title: "GTA VI released before June 2026?", icon: "culture", category: "culture", subcategory: "GTA", type: "binary", yesPercent: 2, noPercent: 98, outcomes: [], volume: "$9M", frequency: "" },
  { id: "jesus-christ", title: "Will Jesus Christ return before 2027?", icon: "culture", category: "culture", subcategory: "Courts", type: "binary", yesPercent: 4, noPercent: 96, outcomes: [], volume: "$37M", frequency: "Annual" },
  { id: "eurovision-2026", title: "Eurovision Winner 2026", icon: "geopolitics", category: "culture", subcategory: "Awards", type: "multi", outcomes: [{ label: "Finland", percent: 30 }, { label: "Australia", percent: 11 }], volume: "$7M", frequency: "" },
  { id: "netflix-global", title: "What will be the top global Netflix show this week?", icon: "netflix", category: "culture", subcategory: "Movies", type: "multi", outcomes: [{ label: "Bridgerton: Season 4", percent: 68 }, { label: "The Dinosaurs", percent: 43 }], volume: "$11,648", frequency: "Daily" },
  { id: "netflix-us", title: "What will be the top US Netflix show this week?", icon: "netflix", category: "culture", subcategory: "Movies", type: "multi", outcomes: [{ label: "The Dinosaurs", percent: 43 }, { label: "Bridgerton: Season 4", percent: 43 }], volume: "$0", frequency: "Weekly" },
  { id: "trump-emergency", title: "Trump Emergency", icon: "politics", category: "politics", subcategory: "US Politics", type: "binary", yesPercent: 65, noPercent: 35, outcomes: [], volume: "$5M", frequency: "" },
  { id: "aliens", title: "Will the US confirm that aliens exist before 2027?", icon: "culture", category: "culture", subcategory: "Courts", type: "binary", yesPercent: 19, noPercent: 81, outcomes: [], volume: "$5M", frequency: "" },
  { id: "musk-tweets-april", title: "Elon Musk # tweets in April 2026?", icon: "musk", category: "culture", subcategory: "Tweet Markets", type: "multi", outcomes: [{ label: "660-679", percent: 13 }, { label: "880-919", percent: 10 }], volume: "$1M", frequency: "" },
  { id: "us-iran-ceasefire-p", title: "US x Iran ceasefire by...?", icon: "politics", category: "politics", subcategory: "Trump", type: "multi", outcomes: [{ label: "June 30", percent: 71 }, { label: "May 31", percent: 65 }], volume: "$10M", frequency: "" },
  { id: "venezuela-leader", title: "Venezuela leader end of 2026?", icon: "geopolitics", category: "politics", subcategory: "Venezuela", type: "multi", outcomes: [{ label: "Delcy Rodriguez", percent: 53 }, { label: "Maria Corina Machado", percent: 18 }], volume: "$72M", frequency: "Monthly" },
  { id: "texas-primary", title: "Texas Democratic Senate Primary Winner", icon: "politics", category: "politics", subcategory: "Texas Senate", type: "multi", outcomes: [{ label: "James Talarico", percent: 99 }, { label: "Jasmine Crockett", percent: 1 }], volume: "$2M", frequency: "" },
  { id: "crude-oil-gp", title: "Will Crude Oil (CL) hit__ by end of March?", icon: "oil", category: "geopolitics", subcategory: "Oil", type: "multi", outcomes: [{ label: "↑ $75", percent: 91 }, { label: "↑ $80", percent: 67 }], volume: "$3M", frequency: "Monthly" },
  { id: "venezuela-leader-gp", title: "Venezuela leader end of 2026?", icon: "geopolitics", category: "geopolitics", subcategory: "Venezuela", type: "multi", outcomes: [{ label: "Delcy Rodriguez", percent: 53 }, { label: "Maria Corina Machado", percent: 18 }], volume: "$72M", frequency: "" },
  { id: "us-forces-iran", title: "US forces enter Iran by..?", icon: "geopolitics", category: "geopolitics", subcategory: "Iran", type: "multi", outcomes: [{ label: "December 31", percent: 63 }, { label: "March 31", percent: 27 }], volume: "$4M", frequency: "" },
  { id: "russia-ukraine-end", title: "Russia x Ukraine ceasefire by end of 2026?", icon: "geopolitics", category: "geopolitics", subcategory: "Ukraine", type: "binary", yesPercent: 39, noPercent: 61, outcomes: [], volume: "$20M", frequency: "" },
  { id: "us-ambassador-expel", title: "Will any country expel a U.S. ambassador by March 31?", icon: "geopolitics", category: "world", subcategory: "Geopolitics", type: "binary", yesPercent: 12, noPercent: 88, outcomes: [], volume: "$85.2k", frequency: "" },
  { id: "btc-100k-march", title: "Bitcoin above $100k by end of March?", icon: "btc", category: "crypto", subcategory: "Bitcoin", type: "binary", yesPercent: 23, noPercent: 77, outcomes: [], volume: "$4.5M", frequency: "" },
]

// Helper function to get market data by ID
export function getMarketById(id: string): PredictionMarket | undefined {
  return MARKETS.find(m => m.id === id)
}

// Generate detailed market data from the shared MARKETS data
export function getMarketDetail(id: string) {
  const market = getMarketById(id)
  if (!market) return null
  
  // For binary markets, create Yes/No outcomes from yesPercent/noPercent
  if (market.type === "binary") {
    const yesPrice = market.yesPercent || 50
    const noPrice = market.noPercent || 50
    return {
      id: market.id,
      title: market.title,
      icon: market.icon,
      volume: market.volume,
      endDate: market.endDate || "TBD",
      countdown: market.countdown || "---",
      outcomes: [
        { label: "Yes", percent: yesPrice, volume: `$${(parseFloat(market.volume.replace(/[$,MkK]/g, '')) * 0.5 * (market.volume.includes('M') ? 1000000 : market.volume.includes('k') ? 1000 : 1)).toLocaleString()}`, yesPrice, noPrice: 100 - yesPrice, color: "#3b82f6" },
        { label: "No", percent: noPrice, volume: `$${(parseFloat(market.volume.replace(/[$,MkK]/g, '')) * 0.5 * (market.volume.includes('M') ? 1000000 : market.volume.includes('k') ? 1000 : 1)).toLocaleString()}`, yesPrice: noPrice, noPrice: 100 - noPrice, color: "#f97316" },
      ],
      rule: market.rule || `This market will resolve based on the outcome described in "${market.title}".`,
      chartData: generateChartData(yesPrice, noPrice),
    }
  }
  
  // For multi-outcome markets
  const colors = ["#3b82f6", "#f97316", "#22c55e", "#a855f7", "#eab308", "#ec4899", "#6366f1", "#14b8a6"]
  return {
    id: market.id,
    title: market.title,
    icon: market.icon,
    volume: market.volume,
    endDate: market.endDate || "TBD",
    countdown: market.countdown || "---",
    outcomes: market.outcomes.map((o, i) => ({
      label: o.label,
      percent: o.percent,
      volume: `$${(parseFloat(market.volume.replace(/[$,MkK]/g, '')) * (o.percent / 100) * (market.volume.includes('M') ? 1000000 : market.volume.includes('k') ? 1000 : 1)).toLocaleString()}`,
      yesPrice: o.percent,
      noPrice: 100 - o.percent,
      color: colors[i % colors.length],
    })),
    rule: market.rule || `This market will resolve based on the outcome described in "${market.title}".`,
    chartData: generateChartDataMulti(market.outcomes),
  }
}

function generateChartData(yesPercent: number, noPercent: number) {
  // Generate realistic chart data leading to current percentages
  const points = []
  let yes = 50, no = 50
  const months = ["Jan", "Feb", "Mar"]
  for (const month of months) {
    yes += (yesPercent - yes) * 0.4 + (Math.random() - 0.5) * 10
    no = 100 - yes
    points.push({ month, values: [Math.round(yes), Math.round(no)] })
  }
  // Ensure final values match
  points[points.length - 1].values = [yesPercent, noPercent]
  return points
}

function generateChartDataMulti(outcomes: { label: string; percent: number }[]) {
  const months = ["Jan", "Feb", "Mar"]
  return months.map((month, i) => ({
    month,
    values: outcomes.map(o => Math.round(o.percent * (0.8 + i * 0.1 + Math.random() * 0.1)))
  }))
}
[V0_FILE]typescript:file="lib/trading-store.ts" isMerged="true"
"use client"

import { useSyncExternalStore } from "react"
import { usePortfolioStore } from "./stores/portfolio-store"

// ═══════════════════════════════════════════════════════════════════════════════
// LEGACY TRADING STORE
// This store is being replaced by the unified portfolio-store.ts
// Balance operations now sync with the portfolio store
// ═══════════════════════════════════════════════════════════════════════════════

// ─── Types ───
export interface Position {
  id: string
  marketId: string
  market: string
  outcome: "Yes" | "No"
  shares: number
  avgPrice: number
  currentPrice: number
  pnl: number
  value: number
}

export interface OpenOrder {
  id: string
  marketId: string
  market: string
  outcome: "Yes" | "No"
  side: "buy" | "sell"
  type: "Market" | "Limit"
  price: number
  shares: number
  filled: number
  status: "Pending" | "Partial"
  createdAt: string
}

export interface TradeHistory {
  id: string
  marketId: string
  market: string
  outcome: "Yes" | "No"
  side: "buy" | "sell"
  type: "Market" | "Limit"
  price: number
  shares: number
  total: number
  date: string
}

export interface TransferHistory {
  id: string
  type: "deposit" | "withdraw" | "transfer_to_prediction" | "transfer_to_portfolio"
  amount: number
  currency: "USDT" | "USDC"
  date: string
  status: "completed" | "pending"
}

export interface TradingState {
  // Portfolio balance (main wallet after deposit USDT/USDC)
  portfolioBalance: number
  // Prediction balance (transferred from portfolio for trading)
  predictionBalance: number
  // Total portfolio value (portfolioBalance + predictionBalance + positions value)
  totalPortfolioValue: number
  // Positions, orders, history
  positions: Position[]
  openOrders: OpenOrder[]
  tradeHistory: TradeHistory[]
  transferHistory: TransferHistory[]
}

// ─── Initial State with sample data ───
const initialState: TradingState = {
  portfolioBalance: 15000.00, // Main wallet USDC
  predictionBalance: 5073.04, // Transferred to prediction USDC
  totalPortfolioValue: 20886.89,
  positions: [
    { id: "pos-1", marketId: "btc-march", market: "Bitcoin March Price", outcome: "Yes", shares: 200, avgPrice: 70.0, currentPrice: 73.0, pnl: 4.29, value: 146.00 },
    { id: "pos-2", marketId: "fed-march", market: "Fed March Decision", outcome: "Yes", shares: 500, avgPrice: 95.0, currentPrice: 97.0, pnl: 2.11, value: 485.00 },
    { id: "pos-3", marketId: "pres-2028", market: "Presidential 2028", outcome: "Yes", shares: 300, avgPrice: 20.0, currentPrice: 21.7, pnl: 8.50, value: 65.10 },
    { id: "pos-4", marketId: "pres-2028", market: "Presidential 2028", outcome: "No", shares: 150, avgPrice: 76.0, currentPrice: 78.5, pnl: 3.29, value: 117.75 },
  ],
  openOrders: [
    { id: "ord-1", marketId: "btc-march", market: "Bitcoin March Price", outcome: "Yes", side: "buy", type: "Limit", price: 70.0, shares: 150, filled: 0, status: "Pending", createdAt: "Mar 10, 2:15 PM" },
    { id: "ord-2", marketId: "btc-march", market: "Bitcoin March Price", outcome: "No", side: "sell", type: "Limit", price: 30.0, shares: 80, filled: 25, status: "Partial", createdAt: "Mar 10, 1:00 PM" },
    { id: "ord-3", marketId: "pres-2028", market: "Presidential 2028", outcome: "Yes", side: "buy", type: "Limit", price: 19.0, shares: 500, filled: 0, status: "Pending", createdAt: "Mar 10, 11:30 AM" },
  ],
  tradeHistory: [
    { id: "hist-1", marketId: "btc-march", market: "Bitcoin March Price", outcome: "Yes", side: "buy", type: "Market", price: 70.0, shares: 200, total: 140.00, date: "Mar 10, 2:34 PM" },
    { id: "hist-2", marketId: "pres-2028", market: "Presidential 2028", outcome: "Yes", side: "buy", type: "Market", price: 20.0, shares: 300, total: 60.00, date: "Mar 9, 11:20 AM" },
    { id: "hist-3", marketId: "fed-march", market: "Fed March Decision", outcome: "Yes", side: "buy", type: "Market", price: 95.0, shares: 500, total: 475.00, date: "Mar 8, 2:30 PM" },
  ],
  transferHistory: [
    { id: "tf-1", type: "deposit", amount: 20000.00, currency: "USDC", date: "Mar 1, 10:00 AM", status: "completed" },
    { id: "tf-2", type: "transfer_to_prediction", amount: 5000.00, currency: "USDC", date: "Mar 5, 2:30 PM", status: "completed" },
  ],
}

// ─── Store (simple global state) ───
let state: TradingState = { ...initialState }
let listeners: Set<() => void> = new Set()

function notifyListeners() {
  listeners.forEach(listener => listener())
}

function updateTotalPortfolioValue() {
  const positionsValue = state.positions.reduce((sum, p) => sum + p.value, 0)
  state.totalPortfolioValue = state.portfolioBalance + state.predictionBalance + positionsValue
}

function formatDate(date: Date): string {
  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) + ', ' + 
         date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true })
}

// ─── Store API ───
export const tradingStore = {
  getState: () => state,
  
  subscribe: (listener: () => void) => {
    listeners.add(listener)
    return () => listeners.delete(listener)
  },

// ─── Balance Getters ───
  getPortfolioBalance: () => state.portfolioBalance,
  getPredictionBalance: () => state.predictionBalance,
  getTotalPortfolioValue: () => state.totalPortfolioValue,

// ─── Positions ───
  getAllPositions: () => state.positions,
  getPositionsByMarket: (marketId: string) => 
    state.positions.filter(p => p.marketId === marketId),

// ─── Orders ───
  getAllOpenOrders: () => state.openOrders,
  getOpenOrdersByMarket: (marketId: string) => 
    state.openOrders.filter(o => o.marketId === marketId),

// ─── History ───
  getAllTradeHistory: () => state.tradeHistory,
  getTradeHistoryByMarket: (marketId: string) => 
    state.tradeHistory.filter(h => h.marketId === marketId),
  getTransferHistory: () => state.transferHistory,

// ─── Deposit USDT/USDC to Portfolio ───
  deposit: (amount: number, currency: "USDT" | "USDC") => {
    if (amount <= 0) {
      return { success: false, error: "Invalid amount" }
    }

// Convert USDT to USDC 1:1 for internal accounting
    state.portfolioBalance += amount
    
    state.transferHistory.unshift({
      id: `tf-${Date.now()}`,
      type: "deposit",
      amount,
      currency,
      date: formatDate(new Date()),
      status: "completed"
    })

updateTotalPortfolioValue()
    notifyListeners()
    return { success: true, message: `Deposited ${amount.toFixed(2)} ${currency}` }
  },

// ─── Withdraw USDC from Portfolio ───
  withdraw: (amount: number) => {
    if (amount <= 0) {
      return { success: false, error: "Invalid amount" }
    }
    if (amount > state.portfolioBalance) {
      return { success: false, error: "Insufficient portfolio balance" }
    }

state.portfolioBalance -= amount
    
    state.transferHistory.unshift({
      id: `tf-${Date.now()}`,
      type: "withdraw",
      amount,
      currency: "USDC",
      date: formatDate(new Date()),
      status: "completed"
    })

updateTotalPortfolioValue()
    notifyListeners()
    return { success: true, message: `Withdrew ${amount.toFixed(2)} USDC` }
  },

// ─── Transfer from Portfolio to Prediction ───
  transferToPrediction: (amount: number) => {
    if (amount <= 0) {
      return { success: false, error: "Invalid amount" }
    }
    if (amount > state.portfolioBalance) {
      return { success: false, error: "Insufficient portfolio balance" }
    }

state.portfolioBalance -= amount
    state.predictionBalance += amount

state.transferHistory.unshift({
      id: `tf-${Date.now()}`,
      type: "transfer_to_prediction",
      amount,
      currency: "USDC",
      date: formatDate(new Date()),
      status: "completed"
    })

updateTotalPortfolioValue()
    notifyListeners()
    return { success: true, message: `Transferred ${amount.toFixed(2)} USDC to Prediction` }
  },

// ─── Transfer from Prediction back to Portfolio ───
  transferToPortfolio: (amount: number) => {
    if (amount <= 0) {
      return { success: false, error: "Invalid amount" }
    }
    if (amount > state.predictionBalance) {
      return { success: false, error: "Insufficient prediction balance" }
    }

state.predictionBalance -= amount
    state.portfolioBalance += amount

state.transferHistory.unshift({
      id: `tf-${Date.now()}`,
      type: "transfer_to_portfolio",
      amount,
      currency: "USDC",
      date: formatDate(new Date()),
      status: "completed"
    })

updateTotalPortfolioValue()
    notifyListeners()
    return { success: true, message: `Transferred ${amount.toFixed(2)} USDC to Portfolio` }
  },

// ─── Place Order (uses predictionBalance) ───
  placeOrder: (params: {
    marketId: string
    market: string
    outcome: "Yes" | "No"
    side: "buy" | "sell"
    type: "Market" | "Limit"
    price: number
    shares: number
    amount: number
  }) => {
    const { marketId, market, outcome, side, type, price, shares, amount } = params
    const dateStr = formatDate(new Date())

if (side === "buy") {
      // Check prediction balance (not portfolio balance)
      if (amount > state.predictionBalance) {
        return { success: false, error: "Insufficient USDC balance. Transfer funds from Portfolio first." }
      }

if (type === "Market") {
        // Market order - execute immediately
        state.predictionBalance -= amount

// Update or create position
        const existingPos = state.positions.find(p => p.marketId === marketId && p.outcome === outcome)
        if (existingPos) {
          const totalShares = existingPos.shares + shares
          const totalCost = (existingPos.shares * existingPos.avgPrice) + (shares * price)
          existingPos.avgPrice = totalCost / totalShares
          existingPos.shares = totalShares
          existingPos.value = totalShares * price / 100
          existingPos.currentPrice = price
          existingPos.pnl = ((price - existingPos.avgPrice) / existingPos.avgPrice) * 100
        } else {
          state.positions.push({
            id: `pos-${Date.now()}`,
            marketId,
            market,
            outcome,
            shares,
            avgPrice: price,
            currentPrice: price,
            pnl: 0,
            value: shares * price / 100
          })
        }

// Add to history
        state.tradeHistory.unshift({
          id: `hist-${Date.now()}`,
          marketId,
          market,
          outcome,
          side: "buy",
          type: "Market",
          price,
          shares,
          total: amount,
          date: dateStr
        })

updateTotalPortfolioValue()
        notifyListeners()
        return { success: true, message: `Bought ${shares} ${outcome} shares at ${price}¢` }

} else {
        // Limit order - reserve funds from prediction balance
        state.predictionBalance -= amount

state.openOrders.unshift({
          id: `ord-${Date.now()}`,
          marketId,
          market,
          outcome,
          side: "buy",
          type: "Limit",
          price,
          shares,
          filled: 0,
          status: "Pending",
          createdAt: dateStr
        })

updateTotalPortfolioValue()
        notifyListeners()
        return { success: true, message: `Limit buy order placed for ${shares} ${outcome} shares at ${price}¢` }
      }

} else {
      // SELL
      const existingPos = state.positions.find(p => p.marketId === marketId && p.outcome === outcome)
      
      if (!existingPos || existingPos.shares < shares) {
        return { success: false, error: "Insufficient shares to sell" }
      }

if (type === "Market") {
        // Market sell - execute immediately, add proceeds to prediction balance
        const proceeds = shares * price / 100
        state.predictionBalance += proceeds

// Update position
        existingPos.shares -= shares
        existingPos.value = existingPos.shares * existingPos.currentPrice / 100
        
        if (existingPos.shares === 0) {
          state.positions = state.positions.filter(p => p.id !== existingPos.id)
        }

// Add to history
        state.tradeHistory.unshift({
          id: `hist-${Date.now()}`,
          marketId,
          market,
          outcome,
          side: "sell",
          type: "Market",
          price,
          shares,
          total: proceeds,
          date: dateStr
        })

updateTotalPortfolioValue()
        notifyListeners()
        return { success: true, message: `Sold ${shares} ${outcome} shares at ${price}¢` }

} else {
        // Limit sell order
        state.openOrders.unshift({
          id: `ord-${Date.now()}`,
          marketId,
          market,
          outcome,
          side: "sell",
          type: "Limit",
          price,
          shares,
          filled: 0,
          status: "Pending",
          createdAt: dateStr
        })

updateTotalPortfolioValue()
        notifyListeners()
        return { success: true, message: `Limit sell order placed for ${shares} ${outcome} shares at ${price}¢` }
      }
    }
  },

// ─── Cancel Order ───
  cancelOrder: (orderId: string) => {
    const order = state.openOrders.find(o => o.id === orderId)
    if (!order) {
      return { success: false, error: "Order not found" }
    }

// Refund reserved prediction balance for buy orders
    if (order.side === "buy") {
      const remainingShares = order.shares - order.filled
      const refund = remainingShares * order.price / 100
      state.predictionBalance += refund
    }

// Remove order
    state.openOrders = state.openOrders.filter(o => o.id !== orderId)
    
    updateTotalPortfolioValue()
    notifyListeners()
    return { success: true, message: "Order cancelled" }
  },

// Deposit USDC directly
  depositUSDC: (amount: number): { success: boolean; message?: string; error?: string } => {
    if (amount <= 0) {
      return { success: false, error: "Invalid amount" }
    }
    
    const dateStr = new Date().toLocaleString("en-US", { month: "short", day: "numeric", hour: "numeric", minute: "2-digit", hour12: true })
    
    state.portfolioBalance += amount
    state.transferHistory.unshift({
      id: `transfer-${Date.now()}`,
      type: "deposit",
      amount,
      currency: "USDC",
      date: dateStr,
      status: "completed"
    })
    
    updateTotalPortfolioValue()
    notifyListeners()
    return { success: true, message: `Deposited ${amount.toFixed(2)} USDC` }
  },

// Deposit USDT with auto-swap to USDC
  depositUSDT: (amount: number, swapFee: number = 0.0008): { success: boolean; message?: string; error?: string; received?: number } => {
    if (amount <= 0) {
      return { success: false, error: "Invalid amount" }
    }
    
    const feeAmount = amount * swapFee
    const receivedUSDC = amount - feeAmount
    const dateStr = new Date().toLocaleString("en-US", { month: "short", day: "numeric", hour: "numeric", minute: "2-digit", hour12: true })
    
    state.portfolioBalance += receivedUSDC
    state.transferHistory.unshift({
      id: `transfer-${Date.now()}`,
      type: "deposit",
      amount: receivedUSDC,
      currency: "USDC",
      date: dateStr,
      status: "completed"
    })
    
    updateTotalPortfolioValue()
    notifyListeners()
    return { 
      success: true, 
      message: `Swapped ${amount.toFixed(2)} USDT to ${receivedUSDC.toFixed(4)} USDC (fee: ${feeAmount.toFixed(4)})`,
      received: receivedUSDC
    }
  },

// Withdraw USDC
  withdrawUSDC: (amount: number): { success: boolean; message?: string; error?: string } => {
    if (amount <= 0) {
      return { success: false, error: "Invalid amount" }
    }
    
    if (amount > state.portfolioBalance) {
      return { success: false, error: "Insufficient balance" }
    }
    
    const dateStr = new Date().toLocaleString("en-US", { month: "short", day: "numeric", hour: "numeric", minute: "2-digit", hour12: true })
    
    state.portfolioBalance -= amount
    state.transferHistory.unshift({
      id: `transfer-${Date.now()}`,
      type: "withdraw",
      amount,
      currency: "USDC",
      date: dateStr,
      status: "completed"
    })
    
    updateTotalPortfolioValue()
    notifyListeners()
    return { success: true, message: `Withdrawn ${amount.toFixed(2)} USDC` }
  },

// Reset to initial state (for testing)
  reset: () => {
    state = { ...initialState }
    notifyListeners()
  },

// ─── Prediction Balance Operations (for Phase 3 Position System) ───
  // Deduct prediction balance when placing a bet
  deductPredictionBalance: (amount: number) => {
    if (amount <= 0 || amount > state.predictionBalance) {
      return { success: false, error: "Insufficient balance or invalid amount" }
    }
    state.predictionBalance -= amount
    updateTotalPortfolioValue()
    notifyListeners()
    return { success: true }
  },

// Add to prediction balance when closing a position
  addPredictionBalance: (amount: number) => {
    if (amount <= 0) {
      return { success: false, error: "Invalid amount" }
    }
    state.predictionBalance += amount
    updateTotalPortfolioValue()
    notifyListeners()
    return { success: true }
  }
}

// ─── React Hooks ───
export function useTradingStore() {
  return useSyncExternalStore(
    tradingStore.subscribe,
    tradingStore.getState,
    tradingStore.getState
  )
}

export function usePortfolioBalance() {
  const state = useTradingStore()
  return state.portfolioBalance
}

export function usePredictionBalance() {
  const state = useTradingStore()
  return state.predictionBalance
}

export function useTotalPortfolioValue() {
  const state = useTradingStore()
  return state.totalPortfolioValue
}

// Legacy hook for backward compatibility
export function useBalance() {
  return usePredictionBalance()
}

export function usePositions(marketId?: string) {
  const state = useTradingStore()
  return marketId 
    ? state.positions.filter(p => p.marketId === marketId)
    : state.positions
}

export function useOpenOrders(marketId?: string) {
  const state = useTradingStore()
  return marketId
    ? state.openOrders.filter(o => o.marketId === marketId)
    : state.openOrders
}

export function useTradeHistory(marketId?: string) {
  const state = useTradingStore()
  return marketId
    ? state.tradeHistory.filter(h => h.marketId === marketId)
    : state.tradeHistory
}

export function useTransferHistory() {
  const state = useTradingStore()
  return state.transferHistory
}
[V0_FILE]typescriptreact:file="app/app/prediction/updown/[id]/page.tsx" isMerged="true"
"use client"

import { useState, useEffect, use, useMemo, useRef } from "react"
import Link from "next/link"
import { useParams } from "next/navigation"
import { useWallet } from "@/lib/wallet-context"
import { PredictionTransferModal } from "@/components/ui/prediction-transfer-modal"
import { CryptoIcon, getCryptoColor, getCryptoName, CRYPTO_ICONS } from "@/components/ui/crypto-icons"
import { Button } from "@/components/ui/button"
import {
  ArrowLeft,
  Calendar,
  ChevronDown,
  ChevronUp,
  Clock,
  ExternalLink,
  Minus,
  Plus,
  RefreshCw,
  Repeat2,
  Share2,
  Star,
  TrendingUp,
} from "lucide-react"

// ─── Market Data ───
const MARKET_DATA: Record<string, { name: string; price: number }> = {
  btc: { name: "Bitcoin", price: 70322.41 },
  eth: { name: "Ethereum", price: 3245.80 },
  sol: { name: "Solana", price: 142.35 },
  xrp: { name: "XRP", price: 2.18 },
  bnb: { name: "BNB", price: 612.40 },
  doge: { name: "Dogecoin", price: 0.32 },
}

// ─── Up/Down Line Chart (percentage mode) ───
function UpDownLineChart({ upPercent, downPercent, upLabel = "Up", downLabel = "Down" }: { upPercent: number; downPercent: number; upLabel?: string; downLabel?: string }) {
  const w = 900, h = 300
  const pad = { top: 20, right: 60, bottom: 50, left: 10 }
  const cw = w - pad.left - pad.right, ch = h - pad.top - pad.bottom
  const svgRef = useRef<SVGSVGElement>(null)
  const [hoverInfo, setHoverInfo] = useState<{ x: number; dataIndex: number; date: Date } | null>(null)

// Generate realistic up/down percentage data
  const dataPoints = useMemo(() => {
    const points: { time: string; date: Date; up: number; down: number }[] = []
    const now = new Date()
    let up = 50, down = 50
    
    for (let i = 0; i < 40; i++) {
      const t = new Date(now.getTime() - (39 - i) * 2000)
      const timeStr = t.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", second: "2-digit", hour12: true })
      
      // Random walk with trend towards final values
      const progress = i / 39
      const targetUp = upPercent
      const trend = (targetUp - up) * 0.1
      const noise = (Math.random() - 0.5) * 8
      up = Math.max(0, Math.min(100, up + trend + noise))
      down = 100 - up
      
      points.push({ time: timeStr, date: t, up, down })
    }
    // Set final values
    points[points.length - 1].up = upPercent
    points[points.length - 1].down = downPercent
    return points
  }, [upPercent, downPercent])

const percentToY = (percent: number) => pad.top + ch - (percent / 100) * ch

// Generate path for up line
  const upPath = dataPoints.map((p, i) => {
    const x = pad.left + (i / (dataPoints.length - 1)) * cw
    const y = percentToY(p.up)
    return `${i === 0 ? "M" : "L"} ${x} ${y}`
  }).join(" ")

// Generate path for down line
  const downPath = dataPoints.map((p, i) => {
    const x = pad.left + (i / (dataPoints.length - 1)) * cw
    const y = percentToY(p.down)
    return `${i === 0 ? "M" : "L"} ${x} ${y}`
  }).join(" ")

const lastUp = dataPoints[dataPoints.length - 1]
  const lastX = pad.left + cw

// Handle mouse move on chart
  const handleMouseMove = (e: React.MouseEvent<SVGSVGElement>) => {
    if (!svgRef.current) return
    const rect = svgRef.current.getBoundingClientRect()
    const scaleX = w / rect.width
    const mouseX = (e.clientX - rect.left) * scaleX
    
    const dataIndex = Math.round(((mouseX - pad.left) / cw) * (dataPoints.length - 1))
    const clampedIndex = Math.max(0, Math.min(dataPoints.length - 1, dataIndex))
    
    const x = pad.left + (clampedIndex / (dataPoints.length - 1)) * cw
    setHoverInfo({ x, dataIndex: clampedIndex, date: dataPoints[clampedIndex].date })
  }

return (
    <div className="relative w-full overflow-x-auto bg-[#0a0a0f]" style={{ scrollbarWidth: "none" }}>
      <svg 
        ref={svgRef}
        viewBox={`0 0 ${w} ${h}`} 
        className="w-full min-w-[600px]"
        onMouseMove={handleMouseMove}
        onMouseLeave={() => setHoverInfo(null)}
      >
        {/* Grid lines */}
        {[0, 25, 50, 75, 100].map((percent) => {
          const y = percentToY(percent)
          return (
            <g key={percent}>
              <line x1={pad.left} y1={y} x2={w - pad.right} y2={y} stroke="#ffffff08" strokeDasharray="2 4" />
              <text x={w - pad.right + 8} y={y + 4} fill="#6b7280" fontSize="10" fontFamily="monospace">
                {percent}%
              </text>
            </g>
          )
        })}

{/* 50% reference line */}
        <line x1={pad.left} y1={percentToY(50)} x2={w - pad.right} y2={percentToY(50)} stroke="#ffffff15" strokeDasharray="4 4" />

{/* Time labels on X axis */}
        {dataPoints.filter((_, i) => i % 8 === 0).map((p, idx) => {
          const i = idx * 8
          const x = pad.left + (i / (dataPoints.length - 1)) * cw
          return (
            <text key={i} x={x} y={h - 10} fill="#6b7280" fontSize="10" textAnchor="middle">
              {p.time}
            </text>
          )
        })}

{/* Down line (red) */}
        <path d={downPath} fill="none" stroke="#ef4444" strokeWidth="2" />
        
        {/* Up line (green) */}
        <path d={upPath} fill="none" stroke="#22c55e" strokeWidth="2" />

{/* End circles */}
        <circle cx={lastX} cy={percentToY(lastUp.up)} r="6" fill="#22c55e" stroke="#0a0a0f" strokeWidth="2" />
        <circle cx={lastX} cy={percentToY(lastUp.down)} r="4" fill="#ef4444" stroke="#0a0a0f" strokeWidth="2" />

{/* End labels */}
        <text x={lastX + 10} y={percentToY(lastUp.up) + 4} fill="#22c55e" fontSize="11" fontWeight="bold">
          {lastUp.up.toFixed(0)}%
        </text>
        <text x={lastX + 10} y={percentToY(lastUp.down) + 4} fill="#ef4444" fontSize="11" fontWeight="bold">
          {lastUp.down.toFixed(0)}%
        </text>

{/* Hover line and dots */}
        {hoverInfo && (
          <>
            <line 
              x1={hoverInfo.x} 
              y1={pad.top} 
              x2={hoverInfo.x} 
              y2={pad.top + ch} 
              stroke="#ffffff30" 
              strokeWidth="1" 
              strokeDasharray="3 3" 
            />
            <circle 
              cx={hoverInfo.x} 
              cy={percentToY(dataPoints[hoverInfo.dataIndex].up)} 
              r="6" 
              fill="#22c55e" 
              stroke="#0a0a0f"
              strokeWidth="2"
            />
            <circle 
              cx={hoverInfo.x} 
              cy={percentToY(dataPoints[hoverInfo.dataIndex].down)} 
              r="6" 
              fill="#ef4444" 
              stroke="#0a0a0f"
              strokeWidth="2"
            />
          </>
        )}
      </svg>
      
      {/* Tooltip */}
      {hoverInfo && dataPoints[hoverInfo.dataIndex] && (
        <div 
          className="absolute z-50 pointer-events-none"
          style={{ 
            left: `${(hoverInfo.x / w) * 100}%`,
            top: `${pad.top}px`,
            transform: hoverInfo.x > w / 2 ? 'translateX(-100%)' : 'translateX(0)'
          }}
        >
          <div className="bg-[#1a1a24] border border-white/10 rounded-lg p-3 shadow-xl min-w-[140px]">
            <div className="text-[11px] text-gray-400 mb-2 font-medium">
              {hoverInfo.date.toLocaleDateString('en-US', { 
                month: 'short', 
                day: 'numeric', 
                year: 'numeric',
                hour: 'numeric',
                minute: '2-digit',
                hour12: true
              })}
            </div>
            <div className="space-y-1.5">
              <div 
                className="flex items-center gap-2 px-2 py-1 rounded text-[11px] font-medium"
                style={{ backgroundColor: '#22c55e20', color: '#22c55e' }}
              >
                <span>{upLabel}</span>
                <span className="ml-auto">{dataPoints[hoverInfo.dataIndex].up.toFixed(1)}%</span>
              </div>
              <div 
                className="flex items-center gap-2 px-2 py-1 rounded text-[11px] font-medium"
                style={{ backgroundColor: '#ef444420', color: '#ef4444' }}
              >
                <span>{downLabel}</span>
                <span className="ml-auto">{dataPoints[hoverInfo.dataIndex].down.toFixed(1)}%</span>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}

// ─── Price Chart Component (BTC price mode) ───
function UpDownPriceChart({ targetPrice, currentPrice, symbol }: { targetPrice: number; currentPrice: number; symbol: string }) {
  const w = 900, h = 300
  const pad = { top: 20, right: 75, bottom: 50, left: 10 }
  const cw = w - pad.left - pad.right, ch = h - pad.top - pad.bottom
  const svgRef = useRef<SVGSVGElement>(null)
  const [hoverInfo, setHoverInfo] = useState<{ x: number; dataIndex: number; date: Date } | null>(null)
  
  // Get the crypto's specific color
  const cryptoColor = getCryptoColor(symbol)

// Generate realistic price data points around the target
  const priceRange = targetPrice * 0.0006 // 0.06% range
  const minPrice = targetPrice - priceRange * 2
  const maxPrice = targetPrice + priceRange * 2
  
  // Generate time-series data points
  const dataPoints = useMemo(() => {
    const points: { time: string; date: Date; price: number }[] = []
    const now = new Date()
    const basePrice = targetPrice
    
    for (let i = 0; i < 30; i++) {
      const t = new Date(now.getTime() - (29 - i) * 1000)
      const timeStr = t.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", second: "2-digit", hour12: true })
      // Generate price with some volatility
      const volatility = (Math.random() - 0.5) * priceRange * 2
      const trend = i > 20 ? -priceRange * 0.5 : priceRange * 0.3 // Downtrend at end
      const price = basePrice + volatility + trend * (i / 30)
      points.push({ time: timeStr, date: t, price })
    }
    // Set last point to current price
    points[points.length - 1].price = currentPrice
    return points
  }, [targetPrice, currentPrice, priceRange])

const priceToY = (price: number) => pad.top + ch - ((price - minPrice) / (maxPrice - minPrice)) * ch

// Generate price levels for Y axis
  const priceLevels = []
  const step = (maxPrice - minPrice) / 6
  for (let i = 0; i <= 6; i++) {
    priceLevels.push(minPrice + step * i)
  }

// Create path for the line
  const pathD = dataPoints.map((p, i) => {
    const x = pad.left + (i / (dataPoints.length - 1)) * cw
    const y = priceToY(p.price)
    return `${i === 0 ? "M" : "L"} ${x} ${y}`
  }).join(" ")

const lastPoint = dataPoints[dataPoints.length - 1]
  const lastX = pad.left + cw
  const lastY = priceToY(lastPoint.price)

return (
    <div className="relative w-full overflow-x-auto bg-[#0a0a0f]" style={{ scrollbarWidth: "none" }}>
      <svg 
        ref={svgRef}
        viewBox={`0 0 ${w} ${h}`} 
        className="w-full min-w-[600px]"
        onMouseMove={handleMouseMove}
        onMouseLeave={() => setHoverInfo(null)}
      >
        {/* Grid lines */}
        {priceLevels.map((price, i) => {
          const y = priceToY(price)
          return (
            <g key={i}>
              <line x1={pad.left} y1={y} x2={w - pad.right} y2={y} stroke="#ffffff08" strokeDasharray="2 4" />
              <text x={w - pad.right + 8} y={y + 4} fill="#6b7280" fontSize="10" fontFamily="monospace">
                {price.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
              </text>
            </g>
          )
        })}

{/* Target price line (green dashed) */}
        <line 
          x1={pad.left} 
          y1={priceToY(targetPrice)} 
          x2={w - pad.right} 
          y2={priceToY(targetPrice)} 
          stroke="#22c55e" 
          strokeWidth="1" 
          strokeDasharray="4 4" 
          opacity="0.6"
        />

{/* Time labels on X axis */}
        {dataPoints.filter((_, i) => i % 5 === 0).map((p, idx) => {
          const i = idx * 5
          const x = pad.left + (i / (dataPoints.length - 1)) * cw
          return (
            <text key={i} x={x} y={h - 10} fill="#6b7280" fontSize="10" textAnchor="middle">
              {p.time}
            </text>
          )
        })}

{/* Price line (crypto specific color) */}
        <path d={pathD} fill="none" stroke={cryptoColor} strokeWidth="2" />

{/* Current price circle and label at the end */}
        <circle cx={lastX} cy={lastY} r="5" fill={cryptoColor} stroke="#0a0a0f" strokeWidth="2" />
        
        {/* Current price label box */}
        <g transform={`translate(${lastX + 5}, ${lastY - 8})`}>
          <rect x="0" y="0" width="70" height="16" rx="2" fill={cryptoColor} />
          <text x="35" y="12" fill="#000" fontSize="10" fontWeight="bold" textAnchor="middle" fontFamily="monospace">
            {lastPoint.price.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
          </text>
        </g>

{/* Hover line and dot */}
        {hoverInfo && (
          <>
            <line 
              x1={hoverInfo.x} 
              y1={pad.top} 
              x2={hoverInfo.x} 
              y2={pad.top + ch} 
              stroke="#ffffff30" 
              strokeWidth="1" 
              strokeDasharray="3 3" 
            />
            <circle 
              cx={hoverInfo.x} 
              cy={priceToY(dataPoints[hoverInfo.dataIndex].price)} 
              r="6" 
              fill={cryptoColor} 
              stroke="#0a0a0f"
              strokeWidth="2"
            />
          </>
        )}
      </svg>
      
      {/* Tooltip */}
      {hoverInfo && dataPoints[hoverInfo.dataIndex] && (
        <div 
          className="absolute z-50 pointer-events-none"
          style={{ 
            left: `${(hoverInfo.x / w) * 100}%`,
            top: `${pad.top}px`,
            transform: hoverInfo.x > w / 2 ? 'translateX(-100%)' : 'translateX(0)'
          }}
        >
          <div className="bg-[#1a1a24] border border-white/10 rounded-lg p-3 shadow-xl min-w-[120px]">
            <div className="text-[11px] text-gray-400 mb-2 font-medium">
              {hoverInfo.date.toLocaleDateString('en-US', { 
                month: 'short', 
                day: 'numeric', 
                year: 'numeric',
                hour: 'numeric',
                minute: '2-digit',
                hour12: true
              })}
            </div>
            <div 
              className="flex items-center gap-2 px-2 py-1 rounded text-[11px] font-medium"
              style={{ backgroundColor: `${cryptoColor}20`, color: cryptoColor }}
            >
              <span>{symbol.toUpperCase()}</span>
              <span className="ml-auto font-mono">${dataPoints[hoverInfo.dataIndex].price.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}

// ─── Order Book ───
function OrderBook({ upPrice, symbol, tradingVolume }: { upPrice: number; symbol: string; tradingVolume: string }) {
  const [tab, setTab] = useState<"up" | "down">("up")
  
  const generateOrders = (side: "sell" | "buy", basePrice: number) => {
    const orders = []
    const direction = side === "sell" ? -1 : 1
    for (let i = 0; i < 5; i++) {
      const price = basePrice + (i * direction * 0.5)
      const quantity = (Math.random() * 4000 + 30).toFixed(2)
      const total = (parseFloat(quantity) * price / 100).toFixed(2)
      orders.push({ price: price.toFixed(1), quantity, total, depth: Math.random() * 80 + 20 })
    }
    return orders
  }

const sellOrders = generateOrders("sell", tab === "up" ? 99 : 4)
  const buyOrders = generateOrders("buy", tab === "up" ? 95 : 1)

return (
    <div className="bg-[#111118] border border-white/[0.06] rounded-xl p-4">
      <div className="flex items-center justify-between mb-4">
        <h3 className="text-base font-semibold text-white">Order Book</h3>
        <span className="text-[12px] text-gray-500">Trading volume: {tradingVolume}</span>
      </div>

{/* Tabs */}
      <div className="flex items-center gap-6 mb-4 border-b border-white/[0.04] pb-2">
        <button onClick={() => setTab("up")} className={`text-[13px] font-medium pb-1 border-b-2 transition-colors ${tab === "up" ? "border-white text-white" : "border-transparent text-gray-500"}`}>
          Transaction Up
        </button>
        <button onClick={() => setTab("down")} className={`text-[13px] font-medium pb-1 border-b-2 transition-colors ${tab === "down" ? "border-white text-white" : "border-transparent text-gray-500"}`}>
          Transaction Down
        </button>
        <button className="ml-auto p-1 text-gray-500 hover:text-white"><RefreshCw className="w-3.5 h-3.5" /></button>
      </div>

{/* Headers */}
      <div className="grid grid-cols-4 text-[10px] text-gray-600 uppercase tracking-wider mb-2 px-2">
        <span>Transaction {tab.toUpperCase()}</span>
        <span className="text-right">Price</span>
        <span className="text-right">Quantity</span>
        <span className="text-right">Total</span>
      </div>

{/* Sell orders */}
      <div className="mb-2">
        <div className="text-[10px] text-red-400 px-2 py-1 bg-red-500/10 rounded-sm inline-block mb-1">Sell order</div>
        {sellOrders.map((o, i) => (
          <div key={i} className="relative grid grid-cols-4 text-[12px] py-1.5 px-2 hover:bg-white/[0.02] rounded">
            <div className="absolute inset-y-0 left-0 bg-red-500/10 rounded-l" style={{ width: `${o.depth}%` }} />
            <span className="relative" />
            <span className="relative text-right text-red-400 font-mono">{o.price}¢</span>
            <span className="relative text-right text-gray-400 font-mono">{o.quantity}</span>
            <span className="relative text-right text-gray-400 font-mono">${o.total}</span>
          </div>
        ))}
      </div>

{/* Spread */}
      <div className="flex items-center justify-between text-[11px] text-gray-500 py-2 border-y border-white/[0.04] my-2">
        <span>Latest:{tab === "up" ? upPrice : (100 - upPrice)}¢</span>
        <span>Price difference:1¢</span>
      </div>

{/* Buy orders */}
      <div>
        <div className="text-[10px] text-emerald-400 px-2 py-1 bg-emerald-500/10 rounded-sm inline-block mb-1">Buy order</div>
        {buyOrders.map((o, i) => (
          <div key={i} className="relative grid grid-cols-4 text-[12px] py-1.5 px-2 hover:bg-white/[0.02] rounded">
            <div className="absolute inset-y-0 left-0 bg-emerald-500/10 rounded-l" style={{ width: `${o.depth}%` }} />
            <span className="relative" />
            <span className="relative text-right text-emerald-400 font-mono">{o.price}¢</span>
            <span className="relative text-right text-gray-400 font-mono">{o.quantity}</span>
            <span className="relative text-right text-gray-400 font-mono">${o.total}</span>
          </div>
        ))}
      </div>
    </div>
  )
}

// ─── Order Form (same pattern as Yes/No) ───
function OrderForm({ upPrice, downPrice, symbol, icon }: { upPrice: number; downPrice: number; symbol: string; icon: string }) {
  const [orderType, setOrderType] = useState<"market" | "limit">("market")
  const [side, setSide] = useState<"buy" | "sell">("buy")
  const [upDown, setUpDown] = useState<"up" | "down">("up")
  const [amount, setAmount] = useState("")
  const [limitPrice, setLimitPrice] = useState(upPrice)
  const [share, setShare] = useState("")
  const [showExpiry, setShowExpiry] = useState(false)
  const [expiryTime, setExpiryTime] = useState("1m")
  const [showExpiryDrop, setShowExpiryDrop] = useState(false)

const price = upDown === "up" ? upPrice : downPrice
  const amt = parseFloat(amount) || 0
  const toWin = orderType === "market" ? (price && price > 0 ? (amt / (price / 100)) - amt : 0) : 0

return (
    <div className="bg-[#111118] border border-white/[0.06] rounded-xl p-5">
      {/* Outcome header */}
      <div className="flex items-center gap-3 mb-5">
        <CryptoIcon symbol={icon} size={40} />
        <span className="text-white font-semibold text-[13px]">{symbol} {upDown === "up" ? "Up" : "Down"}</span>
      </div>

{/* Buy / Sell + Order type */}
      <div className="flex items-center justify-between mb-3">
        <div className="flex items-center gap-5">
          <button onClick={() => setSide("buy")} className={`text-[13px] font-semibold pb-1.5 relative ${side === "buy" ? "text-white" : "text-gray-500"}`}>
            Buy {side === "buy" && <span className="absolute bottom-0 left-0 right-0 h-[2px] bg-white rounded-full" />}
          </button>
          <button onClick={() => setSide("sell")} className={`text-[13px] font-semibold pb-1.5 relative ${side === "sell" ? "text-white" : "text-gray-500"}`}>
            Sell {side === "sell" && <span className="absolute bottom-0 left-0 right-0 h-[2px] bg-white rounded-full" />}
          </button>
        </div>
        <button onClick={() => setOrderType(orderType === "market" ? "limit" : "market")} className="flex items-center gap-1 text-[13px] text-white hover:text-gray-300 transition-colors">
          {orderType === "market" ? "Market" : "Limit"} <ChevronDown className="w-3.5 h-3.5" />
        </button>
      </div>
      <div className="border-t border-white/[0.04] mb-4" />

{/* Up / Down */}
      <div className="grid grid-cols-2 gap-2 mb-5">
        <button
          onClick={() => setUpDown("up")}
          className={`py-2.5 rounded-lg text-[13px] font-bold transition-all ${upDown === "up" ? "bg-emerald-500/15 text-emerald-400 border border-emerald-500/25" : "bg-[#1a1a2e] text-gray-500 border border-white/[0.04]"}`}
        >
          Up {upPrice.toFixed(1)}¢
        </button>
        <button
          onClick={() => setUpDown("down")}
          className={`py-2.5 rounded-lg text-[13px] font-bold transition-all ${upDown === "down" ? "bg-red-500/15 text-red-400 border border-red-500/25" : "bg-[#1a1a2e] text-gray-500 border border-white/[0.04]"}`}
        >
          Down {downPrice.toFixed(1)}¢
        </button>
      </div>

{/* Info */}
      <div className="space-y-1.5 mb-5 text-[13px]">
        <div className="flex justify-between"><span className="text-gray-500">Available USDC</span><span className="text-white font-medium">$0.00</span></div>
        <div className="flex justify-between"><span className="text-gray-500">Current price</span><span className="text-white font-medium">{price.toFixed(1)}¢</span></div>
      </div>

{orderType === "market" ? (
        <>
          <div className="mb-1.5 text-[13px] text-gray-500">Amount</div>
          <input type="number" value={amount} onChange={(e) => setAmount(e.target.value)} placeholder="0"
            className="w-full bg-[#0a0a0f] border border-white/[0.06] rounded-lg px-4 py-2.5 text-center text-white text-[13px] focus:outline-none focus:border-white/15 mb-2.5 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" />
          <div className="grid grid-cols-4 gap-1.5 mb-5">
            {["+$2", "+$10", "+$100", "Maximum"].map((v) => (
              <button key={v} onClick={() => { if (v === "Maximum") setAmount("1000"); else setAmount(String((parseFloat(amount) || 0) + parseFloat(v.replace("+$", "")))) }}
                className="py-1.5 text-[11px] font-medium bg-[#1a1a2e] border border-white/[0.04] rounded-lg text-gray-300 hover:text-white hover:bg-white/[0.04] transition-colors">
                {v}
              </button>
            ))}
          </div>
        </>
      ) : (
        <>
          <div className="mb-1.5 text-[13px] text-gray-500">Limit price</div>
          <div className="flex items-center justify-between bg-[#0a0a0f] border border-white/[0.06] rounded-lg px-4 py-2.5 mb-4">
            <button onClick={() => setLimitPrice((p) => Math.max(0.1, +(p - 0.1).toFixed(1)))} className="text-gray-500 hover:text-white transition-colors"><Minus className="w-4 h-4" /></button>
            <div className="text-white text-[13px] font-medium">{limitPrice.toFixed(1)} <span className="text-gray-500">¢</span></div>
            <button onClick={() => setLimitPrice((p) => Math.min(99.9, +(p + 0.1).toFixed(1)))} className="text-gray-500 hover:text-white transition-colors"><Plus className="w-4 h-4" /></button>
          </div>
          <div className="mb-1.5 text-[13px] text-gray-500">Share</div>
          <input type="number" value={share} onChange={(e) => setShare(e.target.value)} placeholder="0"
            className="w-full bg-[#0a0a0f] border border-white/[0.06] rounded-lg px-4 py-2.5 text-center text-white text-[13px] focus:outline-none focus:border-white/15 mb-2.5 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" />
          <div className="grid grid-cols-3 gap-1.5 mb-4">
            {["25%", "50%", "Maximum"].map((v) => (
              <button key={v} className="py-1.5 text-[11px] font-medium bg-[#1a1a2e] border border-white/[0.04] rounded-lg text-gray-300 hover:text-white hover:bg-white/[0.04] transition-colors">{v}</button>
            ))}
          </div>
          <div className="flex items-center justify-between mb-4">
            <label className="flex items-center gap-2 text-[13px] text-gray-500 cursor-pointer">
              <input type="checkbox" checked={showExpiry} onChange={(e) => setShowExpiry(e.target.checked)} className="w-3.5 h-3.5 rounded border-gray-600 bg-transparent accent-blue-500" />
              Set expiration time
            </label>
            {showExpiry && (
              <div className="relative">
                <button onClick={() => setShowExpiryDrop(!showExpiryDrop)} className="flex items-center gap-1 text-[13px] text-white">{expiryTime} <ChevronDown className="w-3 h-3" /></button>
                {showExpiryDrop && (
                  <div className="absolute right-0 top-full mt-1 bg-[#1a1a2e] border border-white/10 rounded-lg py-1 z-20 min-w-[100px] shadow-xl">
                    {["1m", "5m", "1h", "12h", "24h", "End of day", "Custom"].map((t) => (
                      <button key={t} onClick={() => { setExpiryTime(t); setShowExpiryDrop(false) }}
                        className={`block w-full text-left px-4 py-2 text-[13px] ${expiryTime === t ? "text-white font-semibold" : "text-gray-500"} hover:bg-white/5`}>{t}</button>
                    ))}
                  </div>
                )}
              </div>
            )}
          </div>
        </>
      )}

{/* Totals */}
      <div className="space-y-1.5 mb-5">
        {orderType === "limit" && (
          <div className="flex justify-between text-[13px]">
            <span className="text-gray-500">Total</span>
            <span className="text-emerald-400 font-semibold">${((parseFloat(share) || 0) * limitPrice / 100).toFixed(2)}</span>
          </div>
        )}
        <div className="flex justify-between text-[13px]">
          <span className="text-gray-500">{side === "sell" ? "You will receive" : "To Win"}</span>
          <span className="text-emerald-400 font-semibold text-base">
            ${orderType === "market" ? toWin.toFixed(2) : ((parseFloat(share) || 0) * (1 - limitPrice / 100)).toFixed(2)}
          </span>
        </div>
        {orderType === "market" && <div className="text-[10px] text-gray-600">Average price {price.toFixed(1)}¢</div>}
      </div>

<button className="w-full py-3 rounded-lg bg-white text-black font-semibold text-[13px] hover:bg-gray-100 transition-colors mb-3">
        {side === "buy" ? "Buy" : "Sell"} {upDown === "up" ? "Up" : "Down"}
      </button>
      <p className="text-center text-[11px] text-gray-600">
        By trading, you agree to <Link href="/terms" className="underline text-gray-500 hover:text-white transition-colors">Terms of Use</Link>
      </p>
    </div>
  )
}

// ─── Position Tabs ───
function PositionTabs() {
  const [tab, setTab] = useState<"position" | "orders" | "history">("position")
  
  return (
    <div className="bg-[#111118] border border-white/[0.06] rounded-xl p-4">
      <div className="flex items-center gap-5 mb-4">
        {(["position", "orders", "history"] as const).map((t) => (
          <button key={t} onClick={() => setTab(t)} 
            className={`text-[13px] font-medium capitalize transition-colors ${tab === t ? "text-white" : "text-gray-500 hover:text-gray-300"}`}>
            {t === "orders" ? "Open Orders" : t.charAt(0).toUpperCase() + t.slice(1)}
          </button>
        ))}
      </div>
      <div className="text-center text-[13px] text-gray-600 py-8">No Records Found</div>
    </div>
  )
}

// ─── Main ───
export default function UpDownDetailPage() {
  const params = useParams()
  const id = params.id as string
  const { wallet } = useWallet()
  const [showTransfer, setShowTransfer] = useState(false)
  const [isFav, setIsFav] = useState(false)
  const [chartMode, setChartMode] = useState<"updown" | "price">("updown")
  
  const [selectedTimeSlot, setSelectedTimeSlot] = useState(0)
  const [showTimeDropdown, setShowTimeDropdown] = useState(false)
  const [showMoreDropdown, setShowMoreDropdown] = useState(false)
  const [countdown, setCountdown] = useState("00:01:08")

// Parse market info from ID
  const parts = id?.split("-") || []
  const symbol = parts[0]?.toLowerCase() || "btc"
  const symbolUpper = symbol.toUpperCase()
  const timeframeMin = parts[2] === "5" ? 5 : 15
  const timeframe = `${timeframeMin} Min`
  const marketInfo = MARKET_DATA[symbol] || MARKET_DATA.btc

// Generate time-based round info
  const now = new Date()
  const startMin = Math.floor(now.getMinutes() / timeframeMin) * timeframeMin
  const startTime = new Date(now)
  startTime.setMinutes(startMin, 0, 0)
  const endTime = new Date(startTime.getTime() + timeframeMin * 60 * 1000)

const formatTime = (date: Date) => date.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", hour12: true })
  const formatDate = (date: Date) => date.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })

// Time slots - past rounds
  const pastTimeSlots = Array.from({ length: 10 }, (_, i) => {
    const slotEnd = new Date(startTime.getTime() - i * timeframeMin * 60 * 1000)
    return {
      time: formatTime(slotEnd),
      label: `${formatTime(slotEnd)} ET`,
      date: "Today",
      ended: true,
    }
  })

// Time slots - current and future rounds
  const futureTimeSlots = Array.from({ length: 6 }, (_, i) => ({
    time: formatTime(new Date(endTime.getTime() + i * timeframeMin * 60 * 1000)),
    active: i === 0,
    ended: false,
  }))

// More time slots
  const moreTimeSlots = Array.from({ length: 8 }, (_, i) => ({
    time: formatTime(new Date(endTime.getTime() + (6 + i) * timeframeMin * 60 * 1000)),
    label: `${formatTime(new Date(endTime.getTime() + (6 + i) * timeframeMin * 60 * 1000))} ET`,
    date: "Today",
  }))

// Countdown timer
  const [isRoundEnded, setIsRoundEnded] = useState(false)
  
  useEffect(() => {
    const interval = setInterval(() => {
      const diff = endTime.getTime() - Date.now()
      if (diff > 0) {
        const mins = Math.floor(diff / 60000)
        const secs = Math.floor((diff % 60000) / 1000)
        setCountdown(`00:${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`)
        setIsRoundEnded(false)
      } else {
        setCountdown("Ended")
        setIsRoundEnded(true)
      }
    }, 100)
    return () => clearInterval(interval)
  }, [endTime])

// Close dropdowns when clicking outside
  useEffect(() => {
    const handleClick = (e: MouseEvent) => {
      const target = e.target as HTMLElement
      if (!target.closest('[data-dropdown]')) {
        setShowTimeDropdown(false)
        setShowMoreDropdown(false)
      }
    }
    document.addEventListener('click', handleClick)
    return () => document.removeEventListener('click', handleClick)
  }, [])

const targetPrice = marketInfo.price
  const currentPrice = marketInfo.price * 1.00013 // Slightly different for demo
  const upPercent = 68.5
  const downPercent = 31.5
  const upPrice = 96
  const downPrice = 4
  const tradingVolume = "$90.8k"

const title = `${symbolUpper} Up or Down - ${formatDate(now)}, ${formatTime(startTime)}-${formatTime(endTime)} ET`

// Share functionality - copy to clipboard (Web Share API often blocked in iframes)
  const handleShare = async () => {
    const url = window.location.href
    try {
      await navigator.clipboard.writeText(url)
      // Could show a toast notification here instead of alert
    } catch {
      // Fallback for older browsers
      const textArea = document.createElement("textarea")
      textArea.value = url
      document.body.appendChild(textArea)
      textArea.select()
      document.execCommand("copy")
      document.body.removeChild(textArea)
    }
  }

return (
    <main className="min-h-screen bg-[#0a0a0f] text-white">
      <PredictionTransferModal isOpen={showTransfer} onClose={() => setShowTransfer(false)} />
      <div className="max-w-[1440px] mx-auto px-4 lg:px-6 py-6">
        {/* Breadcrumb */}
        <div className="flex items-center gap-2 text-[13px] text-gray-500 mb-5">
          <Link href="/app/prediction" className="hover:text-white transition-colors">Prediction market</Link>
          <span className="text-gray-700">{">"}</span>
          <span className="text-gray-300">{title}</span>
        </div>

<div className="flex gap-5">
          {/* Left */}
          <div className="flex-1 min-w-0">
            {/* Title */}
            <div className="flex items-center gap-3.5 mb-4">
              <CryptoIcon symbol={symbol} size={48} />
              <h1 className="text-lg md:text-xl font-bold text-white flex-1 leading-tight">{title}</h1>
              <div className="flex items-center gap-1">
                <button onClick={handleShare} className="p-2 text-gray-500 hover:text-white transition-colors" title="Share">
                  <Share2 className="w-4.5 h-4.5" />
                </button>
                <a href={`https://x.com/intent/tweet?text=${encodeURIComponent(title)}&url=${encodeURIComponent(typeof window !== 'undefined' ? window.location.href : '')}`} target="_blank" rel="noopener noreferrer" className="p-2 text-gray-500 hover:text-white transition-colors" title="Share on X">
                  <ExternalLink className="w-4.5 h-4.5" />
                </a>
                <button onClick={() => setIsFav(!isFav)} className={`p-2 transition-colors ${isFav ? "text-[#F7931A]" : "text-gray-500 hover:text-white"}`}>
                  <Star className={`w-4.5 h-4.5 ${isFav ? "fill-[#F7931A]" : ""}`} />
                </button>
              </div>
            </div>

{/* Meta */}
            <div className="flex items-center gap-4 text-[13px] text-gray-500 mb-5">
              <span>Trading volume: {tradingVolume}</span>
              <span className="flex items-center gap-1"><Calendar className="w-3.5 h-3.5" />{formatDate(now)}</span>
              <span className={`flex items-center gap-1 ${isRoundEnded ? "text-red-500" : "text-[#F7931A]"}`}><Clock className="w-3.5 h-3.5" />{countdown}</span>
            </div>

{/* Up/Down Legend (for updown mode) or Price Display (for price mode) */}
            {chartMode === "updown" ? (
              <div className="flex items-center gap-6 mb-4">
                <div className="flex items-center gap-2">
                  <span className="w-2.5 h-2.5 rounded-full bg-emerald-500" />
                  <span className="text-[13px] text-white">Up {upPercent.toFixed(2)}%</span>
                </div>
                <div className="flex items-center gap-2">
                  <span className="w-2.5 h-2.5 rounded-full bg-red-500" />
                  <span className="text-[13px] text-white">Down {downPercent.toFixed(2)}%</span>
                </div>
              </div>
            ) : (
              <div className="flex items-center gap-8 mb-4">
                <div>
                  <div className="text-[11px] text-gray-500 uppercase tracking-wide mb-1">Target Price</div>
                  <div className="text-xl font-bold font-mono text-white">${targetPrice.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>
                </div>
                <div>
                  <div className="text-[11px] text-emerald-400 uppercase tracking-wide mb-1">Current Price</div>
                  <div className="text-xl font-bold font-mono text-emerald-400">${currentPrice.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>
                </div>
              </div>
            )}

{/* Chart */}
            <div className="bg-[#111118] border border-white/[0.06] rounded-xl p-4 mb-4">
              {chartMode === "updown" ? (
                <UpDownLineChart upPercent={upPercent} downPercent={downPercent} />
              ) : (
                <UpDownPriceChart targetPrice={targetPrice} currentPrice={currentPrice} symbol={symbolUpper} />
              )}
              
              {/* Time slots */}
              <div className="flex items-center gap-2 pt-4 border-t border-white/[0.04]">
                {/* Clock icon with dropdown */}
                <div className="relative" data-dropdown>
                  <button 
                    onClick={(e) => { e.stopPropagation(); setShowTimeDropdown(!showTimeDropdown); setShowMoreDropdown(false) }} 
                    className={`p-2 rounded-lg bg-[#0a0a0f] border transition-colors ${showTimeDropdown ? "border-white/20 text-white" : "border-white/[0.04] text-gray-500 hover:text-white"}`}
                  >
                    <Clock className="w-4 h-4" />
                  </button>
                  {showTimeDropdown && (
                    <div className="absolute left-0 top-full mt-2 bg-[#1a1a2e] border border-white/10 rounded-lg py-2 z-30 min-w-[180px] shadow-xl max-h-[300px] overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-white/10 hover:scrollbar-thumb-white/20 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-white/10 [&::-webkit-scrollbar-thumb]:rounded-full hover:[&::-webkit-scrollbar-thumb]:bg-white/20">
                      {pastTimeSlots.map((slot, i) => (
                        <button
                          key={i}
                          onClick={() => { setSelectedTimeSlot(-i - 1); setShowTimeDropdown(false) }}
                          className="w-full flex items-center justify-between px-4 py-2.5 text-[13px] text-gray-400 hover:bg-white/5 hover:text-white transition-colors"
                        >
                          <span className="font-semibold">{slot.label}</span>
                          <span className="text-gray-600">{slot.date}</span>
                        </button>
                      ))}
                    </div>
                  )}
                </div>

{/* Current ended slot */}
                <button className="px-3 py-1.5 rounded-lg text-[12px] font-medium bg-[#0a0a0f] border border-white/[0.04] text-white flex items-center gap-1.5">
                  <span className="w-1.5 h-1.5 rounded-full bg-red-500" />
                  Ended:{formatTime(startTime)}
                </button>

{/* Future time slots */}
                {futureTimeSlots.slice(0, 4).map((slot, i) => (
                  <button
                    key={i}
                    onClick={() => setSelectedTimeSlot(i)}
                    className={`px-3 py-1.5 rounded-lg text-[12px] font-medium transition-all flex items-center gap-1.5 ${
                      selectedTimeSlot === i
                        ? "bg-[#0a0a0f] border border-[#F7931A]/50 text-white shadow-[0_0_8px_rgba(247,147,26,0.15)]"
                        : "bg-[#0a0a0f] border border-white/[0.04] text-gray-500 hover:text-white hover:border-white/10"
                    }`}
                  >
                    {i === 0 && <span className={`w-1.5 h-1.5 rounded-full ${selectedTimeSlot === 0 ? "bg-[#F7931A] animate-pulse" : "bg-red-500"}`} />}
                    {slot.time}
                  </button>
                ))}

{/* More dropdown */}
                <div className="relative" data-dropdown>
                  <button 
                    onClick={(e) => { e.stopPropagation(); setShowMoreDropdown(!showMoreDropdown); setShowTimeDropdown(false) }}
                    className={`px-3 py-1.5 rounded-lg text-[12px] font-medium bg-[#0a0a0f] border transition-colors flex items-center gap-1 ${showMoreDropdown ? "border-white/20 text-white" : "border-white/[0.04] text-gray-500 hover:text-white"}`}
                  >
                    More {showMoreDropdown ? <ChevronUp className="w-3 h-3" /> : <ChevronDown className="w-3 h-3" />}
                  </button>
                  {showMoreDropdown && (
                    <div className="absolute left-0 top-full mt-2 bg-[#1a1a2e] border border-white/10 rounded-lg py-2 z-30 min-w-[180px] shadow-xl max-h-[300px] overflow-y-auto [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-white/10 [&::-webkit-scrollbar-thumb]:rounded-full hover:[&::-webkit-scrollbar-thumb]:bg-white/20">
                      {moreTimeSlots.map((slot, i) => (
                        <button
                          key={i}
                          onClick={() => { setSelectedTimeSlot(6 + i); setShowMoreDropdown(false) }}
                          className="w-full flex items-center justify-between px-4 py-2.5 text-[13px] text-gray-400 hover:bg-white/5 hover:text-white transition-colors"
                        >
                          <span className="font-semibold">{slot.label}</span>
                          <span className="text-gray-600">{slot.date}</span>
                        </button>
                      ))}
                    </div>
                  )}
                </div>

{/* Right side - chart mode toggle */}
                <div className="ml-auto flex items-center gap-1.5 bg-[#0a0a0f] rounded-lg border border-white/[0.04] p-1">
                  <button 
                    onClick={() => setChartMode("updown")}
                    className={`p-2 rounded-md transition-colors ${chartMode === "updown" ? "bg-white/10 text-white" : "text-gray-500 hover:text-white"}`}
                    title="Up/Down Percentage Chart"
                  >
                    <TrendingUp className="w-4 h-4" />
                  </button>
                  <button 
                    onClick={() => setChartMode("price")}
                    className={`p-1.5 rounded-md transition-colors flex items-center justify-center ${chartMode === "price" ? "bg-white/10" : "hover:bg-white/5"}`}
                    title="Price Chart"
                  >
                    <CryptoIcon symbol={symbol} size={24} />
                  </button>
                </div>
              </div>
            </div>

{/* Order Book */}
            <div className="mb-6">
              <OrderBook upPrice={upPrice} symbol={symbolUpper} tradingVolume={tradingVolume} />
            </div>

{/* Recommended */}
            <div className="bg-[#111118] border border-white/[0.06] rounded-xl p-4 mb-6">
              <h3 className="text-base font-semibold text-white mb-4">Recommended</h3>
              <div className="flex items-center gap-4 p-4 bg-[#0a0a0f] rounded-xl border border-white/[0.04]">
                <CryptoIcon symbol={symbol} size={44} />
                <div className="flex-1">
                  <div className="font-semibold text-white">{symbolUpper}USD</div>
                  <div className="text-[11px] text-gray-500">Perpetuals</div>
                </div>
                <div className="text-right">
                  <div className="text-lg font-bold text-emerald-400 font-mono">${currentPrice.toLocaleString(undefined, { minimumFractionDigits: 1 })}</div>
                </div>
                <div className="text-right">
                  <div className="text-[11px] text-gray-500">24H change</div>
                  <div className="text-[13px] text-emerald-400">+$3,203.8 (+4.77%)</div>
                </div>
                <div className="text-right">
                  <div className="text-[11px] text-gray-500">Trading volume:</div>
                  <div className="text-[13px] text-white">$1.1B</div>
                </div>
                <Link href={`/app/trade?symbol=${symbolUpper}USDB`}>
                  <Button variant="outline" className="border-white/10 text-white hover:bg-white/5 bg-transparent text-[12px] h-9">Contract</Button>
                </Link>
              </div>
            </div>

{/* Rule */}
            <div className="mb-10">
              <h3 className="text-base font-bold text-white mb-3">Rule</h3>
              <div className="text-[13px] text-gray-500 leading-relaxed">
                This market will resolve to the official {symbolUpper}/USD price at the end of the prediction window ({formatTime(endTime)} ET). 
                If the final price is higher than the starting price (${targetPrice.toLocaleString()}), "UP" wins. 
                If the final price is lower, "DOWN" wins. Settlement is automatic and payouts are distributed immediately after the round ends.
              </div>
            </div>
          </div>

{/* Right Sidebar */}
          <div className="hidden lg:flex flex-col gap-3.5 w-[320px] shrink-0">
            <div className="bg-[#111118] border border-white/[0.06] rounded-xl p-5">
              <div className="text-[13px] text-gray-500 mb-1">Balance</div>
              <div className="flex items-center justify-between mb-2.5">
                <span className="text-[22px] font-bold text-white tracking-tight">${wallet.isConnected ? wallet.totalValue.toFixed(2) : "0.00"}</span>
                <Button size="sm" variant="outline" className="border-white/10 text-white hover:bg-white/5 bg-transparent h-8 text-xs rounded-full px-4" onClick={() => setShowTransfer(true)}>Transfer</Button>
              </div>
              <div className="text-[11px] text-gray-600">
                Portfolio: ${wallet.isConnected ? wallet.totalValue.toFixed(2) : "0.00"} · Cash: ${wallet.isConnected ? (wallet.balances.find(b => b.symbol === "USDB")?.value || 0).toFixed(2) : "0.00"}
              </div>
            </div>
            <OrderForm upPrice={upPrice} downPrice={downPrice} symbol={symbolUpper} icon={symbol} />
            <PositionTabs />
          </div>
        </div>
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/components/trade/trading-chart.tsx" isMerged="true"
"use client"

import { useTradeContext, type Timeframe, type Candle } from "@/lib/trade-context"
import { useState, useRef, useEffect, useCallback } from "react"
import { ChevronDown, Settings, Maximize2 } from "lucide-react"

const TIMEFRAMES: Timeframe[] = ["1m", "5m", "15m", "1H", "4H", "1D", "1W"]

// Calculate Simple Moving Average
function calculateSMA(candles: Candle[], period: number): (number | null)[] {
  return candles.map((_, i) => {
    if (i < period - 1) return null
    const slice = candles.slice(i - period + 1, i + 1)
    const sum = slice.reduce((acc, c) => acc + c.close, 0)
    return sum / period
  })
}

// Calculate EMA
function calculateEMA(candles: Candle[], period: number): (number | null)[] {
  const multiplier = 2 / (period + 1)
  const ema: (number | null)[] = []
  
  candles.forEach((c, i) => {
    if (i < period - 1) {
      ema.push(null)
    } else if (i === period - 1) {
      const sum = candles.slice(0, period).reduce((acc, c) => acc + c.close, 0)
      ema.push(sum / period)
    } else {
      const prevEma = ema[i - 1] as number
      ema.push((c.close - prevEma) * multiplier + prevEma)
    }
  })
  
  return ema
}

// Calculate Bollinger Bands
function calculateBB(candles: Candle[], period: number = 20, stdDev: number = 2): { upper: (number | null)[], middle: (number | null)[], lower: (number | null)[] } {
  const middle = calculateSMA(candles, period)
  const upper: (number | null)[] = []
  const lower: (number | null)[] = []
  
  candles.forEach((_, i) => {
    if (i < period - 1 || middle[i] === null) {
      upper.push(null)
      lower.push(null)
    } else {
      const slice = candles.slice(i - period + 1, i + 1)
      const avg = middle[i] as number
      const variance = slice.reduce((acc, c) => acc + Math.pow(c.close - avg, 2), 0) / period
      const std = Math.sqrt(variance)
      upper.push(avg + stdDev * std)
      lower.push(avg - stdDev * std)
    }
  })
  
  return { upper, middle, lower }
}

export function TradingChart() {
  const {
    timeframe,
    setTimeframe,
    candles,
    currentPrice,
    showMA,
    setShowMA,
    showEMA,
    setShowEMA,
    showBB,
    setShowBB,
    showVolume,
    setShowVolume,
  } = useTradeContext()
  
  const containerRef = useRef<HTMLDivElement>(null)
  const [dimensions, setDimensions] = useState({ width: 800, height: 500 })
  const [hoverInfo, setHoverInfo] = useState<{ x: number; candle: Candle; index: number } | null>(null)
  const [showIndicatorMenu, setShowIndicatorMenu] = useState(false)
  const indicatorMenuRef = useRef<HTMLDivElement>(null)
  
  // Update dimensions on resize
  useEffect(() => {
    const updateDimensions = () => {
      if (containerRef.current) {
        setDimensions({
          width: containerRef.current.clientWidth,
          height: containerRef.current.clientHeight,
        })
      }
    }
    
    updateDimensions()
    window.addEventListener("resize", updateDimensions)
    return () => window.removeEventListener("resize", updateDimensions)
  }, [])
  
  // Close indicator menu when mouse leaves the menu area
  const handleIndicatorMenuMouseLeave = useCallback(() => {
    setShowIndicatorMenu(false)
  }, [])
  
  // Chart dimensions
  const padding = { top: 20, right: 80, bottom: 30, left: 10 }
  const volumeHeight = showVolume ? 60 : 0
  const chartHeight = dimensions.height - padding.top - padding.bottom - volumeHeight
  const chartWidth = dimensions.width - padding.left - padding.right
  
  // Price range
  const prices = candles.flatMap(c => [c.high, c.low])
  const minPrice = Math.min(...prices) * 0.999
  const maxPrice = Math.max(...prices) * 1.001
  const priceRange = maxPrice - minPrice
  
  // Volume range
  const maxVolume = Math.max(...candles.map(c => c.volume))
  
  // Candle width
  const candleWidth = Math.max(2, (chartWidth / candles.length) * 0.7)
  const candleGap = (chartWidth / candles.length) * 0.3
  
  // Price to Y coordinate
  const priceToY = useCallback((price: number) => {
    return padding.top + chartHeight - ((price - minPrice) / priceRange) * chartHeight
  }, [padding.top, chartHeight, minPrice, priceRange])
  
  // Index to X coordinate
  const indexToX = useCallback((index: number) => {
    return padding.left + (index / candles.length) * chartWidth + candleWidth / 2 + candleGap / 2
  }, [padding.left, candles.length, chartWidth, candleWidth, candleGap])
  
  // Calculate indicators
  const sma20 = showMA ? calculateSMA(candles, 20) : []
  const sma50 = showMA ? calculateSMA(candles, 50) : []
  const ema12 = showEMA ? calculateEMA(candles, 12) : []
  const ema26 = showEMA ? calculateEMA(candles, 26) : []
  const bb = showBB ? calculateBB(candles, 20, 2) : { upper: [], middle: [], lower: [] }
  
  // Handle mouse move
  const handleMouseMove = (e: React.MouseEvent<SVGSVGElement>) => {
    const rect = e.currentTarget.getBoundingClientRect()
    const x = e.clientX - rect.left
    
    // Find closest candle
    const index = Math.round(((x - padding.left) / chartWidth) * (candles.length - 1))
    const clampedIndex = Math.max(0, Math.min(candles.length - 1, index))
    
    if (candles[clampedIndex]) {
      setHoverInfo({
        x: indexToX(clampedIndex),
        candle: candles[clampedIndex],
        index: clampedIndex,
      })
    }
  }
  
  const handleMouseLeave = () => {
    setHoverInfo(null)
  }
  
  // Generate indicator line path
  const generateLinePath = (values: (number | null)[]) => {
    let path = ""
    values.forEach((v, i) => {
      if (v === null) return
      const x = indexToX(i)
      const y = priceToY(v)
      path += path === "" ? `M ${x} ${y}` : ` L ${x} ${y}`
    })
    return path
  }
  
  // Price axis labels
  const priceLabels = Array.from({ length: 6 }, (_, i) => {
    const price = minPrice + (priceRange * i) / 5
    return { price, y: priceToY(price) }
  })
  
  return (
    <div ref={containerRef} className="h-full bg-[#0b0e11] flex flex-col">
      {/* Chart Header */}
      <div className="h-10 border-b border-[#1e2329] flex items-center px-3 gap-2 shrink-0">
        {/* Timeframe selector */}
        <div className="flex items-center gap-1">
          {TIMEFRAMES.map((tf) => (
            <button
              key={tf}
              onClick={() => setTimeframe(tf)}
              className={`px-2 py-1 text-xs font-medium rounded transition-colors ${
                timeframe === tf
                  ? "bg-[#F7931A]/20 text-[#F7931A]"
                  : "text-gray-400 hover:text-white hover:bg-[#1e2329]"
              }`}
            >
              {tf}
            </button>
          ))}
        </div>
        
        <div className="w-px h-5 bg-[#1e2329]" />
        
        {/* Indicator menu */}
        <div 
          className="relative" 
          ref={indicatorMenuRef}
          onMouseLeave={handleIndicatorMenuMouseLeave}
        >
          <button
            onClick={() => setShowIndicatorMenu(!showIndicatorMenu)}
            className="flex items-center gap-1 px-2 py-1 text-xs text-gray-400 hover:text-white hover:bg-[#1e2329] rounded transition-colors"
          >
            Indicators
            <ChevronDown className="w-3 h-3" />
          </button>
          
          {showIndicatorMenu && (
            <div className="absolute top-full left-0 mt-1 bg-[#1e2329] border border-[#2a2e35] rounded-lg p-2 z-50 min-w-[180px] shadow-xl">
              <div className="text-[10px] text-gray-500 uppercase tracking-wide px-2 py-1 mb-1">
                Moving Averages
              </div>
              <button
                onClick={() => setShowMA(!showMA)}
                className={`w-full flex items-center justify-between px-2 py-1.5 text-xs rounded transition-colors ${
                  showMA ? "text-white bg-white/5" : "text-gray-400 hover:text-white hover:bg-white/5"
                }`}
              >
                <span>SMA (20, 50)</span>
                {showMA && <span className="text-emerald-400">ON</span>}
              </button>
              <button
                onClick={() => setShowEMA(!showEMA)}
                className={`w-full flex items-center justify-between px-2 py-1.5 text-xs rounded transition-colors ${
                  showEMA ? "text-white bg-white/5" : "text-gray-400 hover:text-white hover:bg-white/5"
                }`}
              >
                <span>EMA (12, 26)</span>
                {showEMA && <span className="text-emerald-400">ON</span>}
              </button>
              
              <div className="border-t border-[#2a2e35] my-2" />
              
              <div className="text-[10px] text-gray-500 uppercase tracking-wide px-2 py-1 mb-1">
                Overlays
              </div>
              <button
                onClick={() => setShowBB(!showBB)}
                className={`w-full flex items-center justify-between px-2 py-1.5 text-xs rounded transition-colors ${
                  showBB ? "text-white bg-white/5" : "text-gray-400 hover:text-white hover:bg-white/5"
                }`}
              >
                <span>Bollinger Bands</span>
                {showBB && <span className="text-emerald-400">ON</span>}
              </button>
              
              <div className="border-t border-[#2a2e35] my-2" />
              
              <div className="text-[10px] text-gray-500 uppercase tracking-wide px-2 py-1 mb-1">
                Volume
              </div>
              <button
                onClick={() => setShowVolume(!showVolume)}
                className={`w-full flex items-center justify-between px-2 py-1.5 text-xs rounded transition-colors ${
                  showVolume ? "text-white bg-white/5" : "text-gray-400 hover:text-white hover:bg-white/5"
                }`}
              >
                <span>Volume Bars</span>
                {showVolume && <span className="text-emerald-400">ON</span>}
              </button>
            </div>
          )}
        </div>
        
        <div className="flex-1" />
        
        {/* Settings */}
        <button className="p-1.5 text-gray-400 hover:text-white hover:bg-[#1e2329] rounded transition-colors">
          <Settings className="w-4 h-4" />
        </button>
        <button className="p-1.5 text-gray-400 hover:text-white hover:bg-[#1e2329] rounded transition-colors">
          <Maximize2 className="w-4 h-4" />
        </button>
      </div>
      
      {/* Chart Area */}
      <div className="flex-1 relative">
        <svg
          width={dimensions.width}
          height={dimensions.height - 40}
          onMouseMove={handleMouseMove}
          onMouseLeave={handleMouseLeave}
          className="cursor-crosshair"
        >
          {/* Grid lines */}
          {priceLabels.map((p, i) => (
            <g key={i}>
              <line
                x1={padding.left}
                y1={p.y}
                x2={dimensions.width - padding.right}
                y2={p.y}
                stroke="#1e2329"
                strokeDasharray="2 2"
              />
              <text
                x={dimensions.width - padding.right + 5}
                y={p.y + 4}
                fill="#5E6673"
                fontSize="10"
              >
                {p.price.toFixed(2)}
              </text>
            </g>
          ))}
          
          {/* Bollinger Bands */}
          {showBB && bb.upper.length > 0 && (
            <>
              <path
                d={generateLinePath(bb.upper)}
                fill="none"
                stroke="#8884d8"
                strokeWidth="1"
                opacity="0.5"
              />
              <path
                d={generateLinePath(bb.middle)}
                fill="none"
                stroke="#8884d8"
                strokeWidth="1"
                strokeDasharray="3 3"
                opacity="0.5"
              />
              <path
                d={generateLinePath(bb.lower)}
                fill="none"
                stroke="#8884d8"
                strokeWidth="1"
                opacity="0.5"
              />
            </>
          )}
          
          {/* SMA lines */}
          {showMA && (
            <>
              <path
                d={generateLinePath(sma20)}
                fill="none"
                stroke="#f7931a"
                strokeWidth="1.5"
              />
              <path
                d={generateLinePath(sma50)}
                fill="none"
                stroke="#82ca9d"
                strokeWidth="1.5"
              />
            </>
          )}
          
          {/* EMA lines */}
          {showEMA && (
            <>
              <path
                d={generateLinePath(ema12)}
                fill="none"
                stroke="#00C9FF"
                strokeWidth="1.5"
              />
              <path
                d={generateLinePath(ema26)}
                fill="none"
                stroke="#FF6B6B"
                strokeWidth="1.5"
              />
            </>
          )}
          
          {/* Candlesticks */}
          {candles.map((candle, i) => {
            const x = indexToX(i)
            const isGreen = candle.close >= candle.open
            const color = isGreen ? "#0ECB81" : "#F6465D"
            
            const bodyTop = priceToY(Math.max(candle.open, candle.close))
            const bodyBottom = priceToY(Math.min(candle.open, candle.close))
            const bodyHeight = Math.max(1, bodyBottom - bodyTop)
            
            return (
              <g key={i}>
                {/* Wick */}
                <line
                  x1={x}
                  y1={priceToY(candle.high)}
                  x2={x}
                  y2={priceToY(candle.low)}
                  stroke={color}
                  strokeWidth="1"
                />
                {/* Body */}
                <rect
                  x={x - candleWidth / 2}
                  y={bodyTop}
                  width={candleWidth}
                  height={bodyHeight}
                  fill={color}
                />
              </g>
            )
          })}
          
          {/* Volume bars */}
          {showVolume && candles.map((candle, i) => {
            const x = indexToX(i)
            const isGreen = candle.close >= candle.open
            const color = isGreen ? "#0ECB81" : "#F6465D"
            const volumeY = dimensions.height - 40 - padding.bottom
            const barHeight = (candle.volume / maxVolume) * volumeHeight * 0.8
            
            return (
              <rect
                key={`vol-${i}`}
                x={x - candleWidth / 2}
                y={volumeY - barHeight}
                width={candleWidth}
                height={barHeight}
                fill={color}
                opacity="0.3"
              />
            )
          })}
          
          {/* Current price line */}
          <g>
            <line
              x1={padding.left}
              y1={priceToY(currentPrice)}
              x2={dimensions.width - padding.right}
              y2={priceToY(currentPrice)}
              stroke="#F7931A"
              strokeWidth="1"
              strokeDasharray="3 3"
            />
            <rect
              x={dimensions.width - padding.right}
              y={priceToY(currentPrice) - 10}
              width={75}
              height={20}
              fill="#F7931A"
              rx="2"
            />
            <text
              x={dimensions.width - padding.right + 5}
              y={priceToY(currentPrice) + 4}
              fill="#000"
              fontSize="11"
              fontWeight="600"
            >
              {currentPrice.toFixed(2)}
            </text>
          </g>
          
          {/* Hover crosshair */}
          {hoverInfo && (
            <>
              <line
                x1={hoverInfo.x}
                y1={padding.top}
                x2={hoverInfo.x}
                y2={dimensions.height - 40 - padding.bottom}
                stroke="#5E6673"
                strokeWidth="1"
                strokeDasharray="3 3"
              />
              <line
                x1={padding.left}
                y1={priceToY(hoverInfo.candle.close)}
                x2={dimensions.width - padding.right}
                y2={priceToY(hoverInfo.candle.close)}
                stroke="#5E6673"
                strokeWidth="1"
                strokeDasharray="3 3"
              />
            </>
          )}
        </svg>
        
        {/* Hover tooltip */}
        {hoverInfo && (
          <div
            className="absolute top-2 left-2 bg-[#1e2329] border border-[#2a2e35] rounded px-3 py-2 text-xs pointer-events-none z-10"
          >
            <div className="text-gray-400 mb-1">
              {new Date(hoverInfo.candle.time).toLocaleString()}
            </div>
            <div className="grid grid-cols-2 gap-x-4 gap-y-0.5">
              <span className="text-gray-500">O:</span>
              <span className="text-white">{hoverInfo.candle.open.toFixed(2)}</span>
              <span className="text-gray-500">H:</span>
              <span className="text-white">{hoverInfo.candle.high.toFixed(2)}</span>
              <span className="text-gray-500">L:</span>
              <span className="text-white">{hoverInfo.candle.low.toFixed(2)}</span>
              <span className="text-gray-500">C:</span>
              <span className={hoverInfo.candle.close >= hoverInfo.candle.open ? "text-emerald-400" : "text-red-400"}>
                {hoverInfo.candle.close.toFixed(2)}
              </span>
              <span className="text-gray-500">Vol:</span>
              <span className="text-white">{hoverInfo.candle.volume.toFixed(2)}</span>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/trade/order-book.tsx" isMerged="true"
"use client"

import { useTradeContext } from "@/lib/trade-context"
import { useState } from "react"
import { Settings, LayoutGrid, AlignJustify, Maximize2 } from "lucide-react"

interface OrderBookProps {
  viewMode: "table" | "stacked" | "large"
  onViewModeChange: (mode: "table" | "stacked" | "large") => void
}

export function OrderBook({ viewMode, onViewModeChange }: OrderBookProps) {
  const { bids, asks, currentPrice, spread, spreadPercent } = useTradeContext()
  const [tab, setTab] = useState<"book" | "trades">("book")
  const [precision, setPrecision] = useState(2)
  
  // Max total for depth visualization
  const maxBidTotal = Math.max(...bids.map(b => b.total))
  const maxAskTotal = Math.max(...asks.map(a => a.total))
  const maxTotal = Math.max(maxBidTotal, maxAskTotal)
  
  // Display rows based on view mode
  const rowCount = viewMode === "large" ? 15 : 10
  const displayBids = bids.slice(0, rowCount)
  const displayAsks = asks.slice(0, rowCount).reverse() // Reverse for stacked view
  
  return (
    <div className="h-full flex flex-col bg-[#0b0e11]">
      {/* Header */}
      <div className="h-10 border-b border-[#1e2329] flex items-center px-2 gap-1 shrink-0">
        <button
          onClick={() => setTab("book")}
          className={`px-2 py-1 text-xs font-medium rounded transition-colors ${
            tab === "book" ? "text-white bg-[#1e2329]" : "text-gray-400 hover:text-white"
          }`}
        >
          Order Book
        </button>
        <button
          onClick={() => setTab("trades")}
          className={`px-2 py-1 text-xs font-medium rounded transition-colors ${
            tab === "trades" ? "text-white bg-[#1e2329]" : "text-gray-400 hover:text-white"
          }`}
        >
          Trades
        </button>
        
        <div className="flex-1" />
        
        {/* View mode buttons */}
        <button
          onClick={() => onViewModeChange("stacked")}
          className={`p-1 rounded transition-colors ${
            viewMode === "stacked" ? "text-[#F7931A]" : "text-gray-500 hover:text-white"
          }`}
          title="Stacked View"
        >
          <AlignJustify className="w-4 h-4" />
        </button>
        <button
          onClick={() => onViewModeChange("large")}
          className={`p-1 rounded transition-colors ${
            viewMode === "large" ? "text-[#F7931A]" : "text-gray-500 hover:text-white"
          }`}
          title="Large View"
        >
          <Maximize2 className="w-4 h-4" />
        </button>
      </div>
      
      {tab === "book" ? (
        <div className="flex-1 flex flex-col overflow-hidden">
          {/* Column headers */}
          <div className="grid grid-cols-3 px-2 py-1.5 text-[10px] text-gray-500 border-b border-[#1e2329]">
            <span>Price(USDT)</span>
            <span className="text-right">Size(BTC)</span>
            <span className="text-right">Total</span>
          </div>
          
          {/* Asks (sells) - displayed in reverse order at top */}
          <div className="flex-1 overflow-hidden flex flex-col">
            <div className="flex-1 overflow-y-auto flex flex-col justify-end">
              {displayAsks.map((ask, i) => (
                <div
                  key={`ask-${i}`}
                  className="grid grid-cols-3 px-2 py-0.5 text-[11px] relative hover:bg-white/5 cursor-pointer"
                >
                  {/* Depth bar */}
                  <div
                    className="absolute inset-y-0 right-0 bg-red-500/10"
                    style={{ width: `${(ask.total / maxTotal) * 100}%` }}
                  />
                  <span className="text-red-400 relative z-10">
                    {ask.price.toFixed(precision)}
                  </span>
                  <span className="text-right text-white relative z-10">
                    {ask.size.toFixed(4)}
                  </span>
                  <span className="text-right text-gray-400 relative z-10">
                    {ask.total.toFixed(4)}
                  </span>
                </div>
              ))}
            </div>
            
            {/* Current price / Spread */}
            <div className="py-2 px-2 border-y border-[#1e2329] bg-[#0b0e11]">
              <div className="flex items-center justify-between">
                <span className="text-lg font-bold text-emerald-400">
                  {currentPrice.toFixed(precision)}
                </span>
                <span className="text-[10px] text-gray-500">
                  Spread: {spread.toFixed(2)} ({spreadPercent.toFixed(3)}%)
                </span>
              </div>
            </div>
            
            {/* Bids (buys) */}
            <div className="flex-1 overflow-y-auto">
              {displayBids.map((bid, i) => (
                <div
                  key={`bid-${i}`}
                  className="grid grid-cols-3 px-2 py-0.5 text-[11px] relative hover:bg-white/5 cursor-pointer"
                >
                  {/* Depth bar */}
                  <div
                    className="absolute inset-y-0 right-0 bg-emerald-500/10"
                    style={{ width: `${(bid.total / maxTotal) * 100}%` }}
                  />
                  <span className="text-emerald-400 relative z-10">
                    {bid.price.toFixed(precision)}
                  </span>
                  <span className="text-right text-white relative z-10">
                    {bid.size.toFixed(4)}
                  </span>
                  <span className="text-right text-gray-400 relative z-10">
                    {bid.total.toFixed(4)}
                  </span>
                </div>
              ))}
            </div>
          </div>
        </div>
      ) : (
        <RecentTrades />
      )}
    </div>
  )
}

function RecentTrades() {
  const { recentTrades, currentPrice } = useTradeContext()
  
  return (
    <div className="flex-1 flex flex-col overflow-hidden">
      {/* Column headers */}
      <div className="grid grid-cols-3 px-2 py-1.5 text-[10px] text-gray-500 border-b border-[#1e2329]">
        <span>Price(USDT)</span>
        <span className="text-right">Size(BTC)</span>
        <span className="text-right">Time</span>
      </div>
      
      <div className="flex-1 overflow-y-auto">
        {recentTrades.map((trade) => (
          <div
            key={trade.id}
            className="grid grid-cols-3 px-2 py-0.5 text-[11px] hover:bg-white/5"
          >
            <span className={trade.side === "buy" ? "text-emerald-400" : "text-red-400"}>
              {trade.price.toFixed(2)}
            </span>
            <span className="text-right text-white">{trade.size.toFixed(4)}</span>
            <span className="text-right text-gray-500">
              {new Date(trade.time).toLocaleTimeString()}
            </span>
          </div>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/lib/trade-context.tsx" isMerged="true"
"use client"

import { createContext, useContext, useState, useEffect, useMemo, useCallback, type ReactNode } from "react"
import { extendedMarkets, type MarketData, type QuoteCurrency, getMarketPair, getMarketKey } from "./trade-data"

// ─── Chart Types ───
export interface Candle {
  time: number
  open: number
  high: number
  low: number
  close: number
  volume: number
}

export type Timeframe = "1m" | "5m" | "15m" | "1H" | "4H" | "1D" | "1W"

// ─── Position & Order Types ───
export interface Position {
  id: string
  symbol: string
  side: "long" | "short"
  size: number
  entryPrice: number
  markPrice: number
  pnl: number
  pnlPercent: number
  leverage: number
  margin: number
  liqPrice: number
  createdAt: number
}

export interface Order {
  id: string
  symbol: string
  side: "long" | "short"
  type: "limit" | "market"
  price: number
  size: number
  filled: number
  status: "open" | "filled" | "cancelled"
  createdAt: number
}

export interface TradeHistory {
  id: string
  symbol: string
  side: "long" | "short"
  type: "limit" | "market"
  price: number
  size: number
  fee: number
  pnl: number | null
  createdAt: number
}

export interface Toast {
  id: string
  type: "success" | "error" | "info"
  title: string
  message: string
}

// ─── Generate consistent candle data - SAME price range for all timeframes ───
function generateCandles(basePrice: number, timeframe: Timeframe, count: number = 100): Candle[] {
  const now = Date.now()
  const intervalMs: Record<Timeframe, number> = {
    "1m": 60 * 1000,
    "5m": 5 * 60 * 1000,
    "15m": 15 * 60 * 1000,
    "1H": 60 * 60 * 1000,
    "4H": 4 * 60 * 60 * 1000,
    "1D": 24 * 60 * 60 * 1000,
    "1W": 7 * 24 * 60 * 60 * 1000,
  }
  
  const candles: Candle[] = []
  
  // Use same seed for ALL timeframes to get consistent price levels
  const baseSeed = 12345
  
  // Start price is always relative to base price (2% lower)
  let price = basePrice * 0.98
  
  for (let i = 0; i < count; i++) {
    const seed = baseSeed + i
    const rand1 = Math.abs(Math.sin(seed * 0.1)) 
    const rand2 = Math.abs(Math.cos(seed * 0.15))
    const rand3 = Math.abs(Math.sin(seed * 0.2 + 1))
    
    const trendBias = (basePrice - price) * 0.03
    const volatility = basePrice * 0.002
    const change = (rand1 - 0.5) * volatility * 2 + trendBias
    
    const open = price
    const close = price + change
    const high = Math.max(open, close) + rand2 * volatility * 0.5
    const low = Math.min(open, close) - rand3 * volatility * 0.5
    const volume = 100 + rand1 * 500
    
    candles.push({
      time: now - (count - i) * intervalMs[timeframe],
      open,
      high,
      low,
      close,
      volume,
    })
    
    price = close
  }
  
  // Ensure last candle closes exactly at base price
  if (candles.length > 0) {
    const lastCandle = candles[candles.length - 1]
    lastCandle.close = basePrice
    lastCandle.high = Math.max(lastCandle.high, basePrice)
    lastCandle.low = Math.min(lastCandle.low, basePrice)
  }
  
  return candles
}

// ─── Order Book Types ───
export interface OrderBookLevel {
  price: number
  size: number
  total: number
}

export interface Trade {
  id: string
  price: number
  size: number
  side: "buy" | "sell"
  time: number
}

function generateOrderBook(currentPrice: number) {
  const bids: OrderBookLevel[] = []
  const asks: OrderBookLevel[] = []
  
  let bidTotal = 0
  let askTotal = 0
  
  for (let i = 0; i < 15; i++) {
    const offset = 0.0001 * (i + 1)
    const bidPrice = currentPrice * (1 - offset)
    const askPrice = currentPrice * (1 + offset)
    
    const seed = i + 1
    const bidSize = 0.1 + (Math.sin(seed * 0.5) * 0.5 + 0.5) * 2
    const askSize = 0.1 + (Math.cos(seed * 0.5) * 0.5 + 0.5) * 2
    
    bidTotal += bidSize
    askTotal += askSize
    
    bids.push({ price: bidPrice, size: bidSize, total: bidTotal })
    asks.push({ price: askPrice, size: askSize, total: askTotal })
  }
  
  return { bids, asks }
}

function generateRecentTrades(currentPrice: number, count: number = 20): Trade[] {
  const trades: Trade[] = []
  const now = Date.now()
  
  for (let i = 0; i < count; i++) {
    const seed = i + 1
    const variation = (Math.sin(seed * 0.3) * 0.5) * 0.001
    const priceVar = currentPrice * (1 + variation)
    
    trades.push({
      id: `trade-${i}`,
      price: priceVar,
      size: 0.01 + (Math.abs(Math.sin(seed * 0.7)) * 0.5),
      side: Math.sin(seed) > 0 ? "buy" : "sell",
      time: now - i * 5000,
    })
  }
  
  return trades
}

// ─── Market Info Type ───
export type MarketInfo = {
  symbol: string
  quote: QuoteCurrency
  pair: string
  price: number
  change24h: number
  changeAmount: number
  volume24h: number
  marketCap: number
  contract: string
  leverage: number
  funding8h: number
  openInterest: number
  oraclePrice: number
}

export function getTradingViewSymbol(symbol: string, quote: QuoteCurrency): string {
  const tradfiMap: Record<string, string> = {
    US500: "FOREXCOM:SPXUSD",
    SILVER: "FOREXCOM:XAGUSD",
    XYZ100: "BINANCE:BTCUSDT",
    PAXG: "BINANCE:PAXGUSDT",
    XAUT: "KRAKEN:XAUTUSDT",
  }

if (tradfiMap[symbol]) {
    return tradfiMap[symbol]
  }

const exchange = "BINANCE"

if (quote === "USDB") {
    return `${exchange}:${symbol}USDT`
  }

const usdcPairs = ["BTC", "ETH", "SOL"]

if (quote === "USDC" && usdcPairs.includes(symbol)) {
    return `${exchange}:${symbol}USDT`
  }

return `${exchange}:${symbol}${quote}`
}

function marketDataToInfo(market: MarketData): MarketInfo {
  return {
    symbol: market.symbol,
    quote: market.quote,
    pair: getMarketPair(market),
    price: market.price,
    change24h: market.change24h,
    changeAmount: Math.abs(market.price * (market.change24h / 100)),
    volume24h: market.volume24h,
    marketCap: market.openInterest * 0.8,
    contract: `0x${market.symbol.toLowerCase().slice(0, 4)}...${Math.random().toString(16).slice(2, 6)}`,
    leverage: market.leverage,
    funding8h: market.funding8h,
    openInterest: market.openInterest,
    oraclePrice: market.price * (1 + (Math.random() - 0.5) * 0.001),
  }
}

type TradeMode = "spot" | "perps"

type TradeContextType = {
  // Market selection
  selectedMarket: MarketInfo
  setSelectedMarket: (market: MarketInfo) => void
  tradingViewSymbol: string
  selectMarketByData: (market: MarketData) => void
  favorites: string[]
  toggleFavorite: (key: string) => void
  tradeMode: TradeMode
  setTradeMode: (mode: TradeMode) => void
  symbol: string
  
  // Chart data
  timeframe: Timeframe
  setTimeframe: (tf: Timeframe) => void
  candles: Candle[]
  currentPrice: number
  
  // Order book
  bids: OrderBookLevel[]
  asks: OrderBookLevel[]
  spread: number
  spreadPercent: number
  recentTrades: Trade[]
  
  // Indicators
  showMA: boolean
  setShowMA: (v: boolean) => void
  showEMA: boolean
  setShowEMA: (v: boolean) => void
  showBB: boolean
  setShowBB: (v: boolean) => void
  showVolume: boolean
  setShowVolume: (v: boolean) => void
  
  // Positions & Orders
  positions: Position[]
  orders: Order[]
  history: TradeHistory[]
  
  // Actions
  placeOrder: (order: Omit<Order, "id" | "filled" | "status" | "createdAt">) => void
  cancelOrder: (orderId: string) => void
  closePosition: (positionId: string) => void
  
  // Toasts
  toasts: Toast[]
  showToast: (type: Toast["type"], title: string, message: string) => void
  dismissToast: (id: string) => void
}

const TradeContext = createContext<TradeContextType | null>(null)

export function TradeProvider({ children }: { children: ReactNode }) {
  const defaultMarket = extendedMarkets.find((m) => m.symbol === "BTC" && m.quote === "USDT") || extendedMarkets[0]
  const [selectedMarket, setSelectedMarket] = useState<MarketInfo>(marketDataToInfo(defaultMarket))
  const [favorites, setFavorites] = useState<string[]>(
    extendedMarkets.filter((m) => m.isFavorite).map((m) => getMarketKey(m)),
  )
  const [tradeMode, setTradeMode] = useState<TradeMode>("perps")
  const [toasts, setToasts] = useState<Toast[]>([])
  
  // Chart state
  const [timeframe, setTimeframe] = useState<Timeframe>("15m")
  
  // Indicator toggles
  const [showMA, setShowMA] = useState(false)
  const [showEMA, setShowEMA] = useState(false)
  const [showBB, setShowBB] = useState(false)
  const [showVolume, setShowVolume] = useState(true)
  
  // Initial mock positions
  const [positions, setPositions] = useState<Position[]>([
    {
      id: "pos-1",
      symbol: "BTC-PERP",
      side: "long",
      size: 0.5,
      entryPrice: 83500,
      markPrice: 84235.5,
      pnl: 367.75,
      pnlPercent: 0.88,
      leverage: 10,
      margin: 4175,
      liqPrice: 75150,
      createdAt: Date.now() - 3600000,
    },
  ])
  
  // Initial mock orders
  const [orders, setOrders] = useState<Order[]>([
    {
      id: "ord-1",
      symbol: "BTC-PERP",
      side: "long",
      type: "limit",
      price: 82000,
      size: 0.2,
      filled: 0,
      status: "open",
      createdAt: Date.now() - 1800000,
    },
  ])
  
  // Trade history
  const [history, setHistory] = useState<TradeHistory[]>([
    {
      id: "hist-1",
      symbol: "BTC-PERP",
      side: "long",
      type: "market",
      price: 83500,
      size: 0.5,
      fee: 8.35,
      pnl: null,
      createdAt: Date.now() - 3600000,
    },
  ])

const tradingViewSymbol = getTradingViewSymbol(selectedMarket.symbol, selectedMarket.quote)
  const symbol = selectedMarket.pair
  const currentPrice = selectedMarket.price
  
  // Generate candles - memoized
  const candles = useMemo(() => {
    return generateCandles(currentPrice, timeframe, 100)
  }, [currentPrice, timeframe])
  
  // Generate order book
  const orderBook = useMemo(() => {
    return generateOrderBook(currentPrice)
  }, [currentPrice])
  
  // Generate recent trades
  const recentTrades = useMemo(() => {
    return generateRecentTrades(currentPrice)
  }, [currentPrice])
  
  const spread = orderBook.asks[0]?.price - orderBook.bids[0]?.price || 0
  const spreadPercent = (spread / currentPrice) * 100

// ─── Toast Functions ───
  const showToast = useCallback((type: Toast["type"], title: string, message: string) => {
    const id = Date.now().toString()
    setToasts((prev) => [...prev, { id, type, title, message }])
    setTimeout(() => {
      setToasts((prev) => prev.filter((t) => t.id !== id))
    }, 4000)
  }, [])
  
  const dismissToast = useCallback((id: string) => {
    setToasts((prev) => prev.filter((t) => t.id !== id))
  }, [])
  
  // ─── Order Functions ───
  const placeOrder = useCallback((orderData: Omit<Order, "id" | "filled" | "status" | "createdAt">) => {
    if (orderData.type === "market") {
      const newPosition: Position = {
        id: `pos-${Date.now()}`,
        symbol: orderData.symbol,
        side: orderData.side,
        size: orderData.size,
        entryPrice: orderData.price,
        markPrice: orderData.price,
        pnl: 0,
        pnlPercent: 0,
        leverage: 10,
        margin: (orderData.price * orderData.size) / 10,
        liqPrice: orderData.side === "long" 
          ? orderData.price * 0.9 
          : orderData.price * 1.1,
        createdAt: Date.now(),
      }
      
      setPositions((prev) => [...prev, newPosition])
      
      const historyEntry: TradeHistory = {
        id: `hist-${Date.now()}`,
        symbol: orderData.symbol,
        side: orderData.side,
        type: "market",
        price: orderData.price,
        size: orderData.size,
        fee: orderData.price * orderData.size * 0.0005,
        pnl: null,
        createdAt: Date.now(),
      }
      setHistory((prev) => [historyEntry, ...prev])
      
      showToast(
        "success",
        "Order Executed",
        `${orderData.side.toUpperCase()} ${orderData.size} ${orderData.symbol} @ $${orderData.price.toLocaleString()}`
      )
    } else {
      const newOrder: Order = {
        ...orderData,
        id: `ord-${Date.now()}`,
        filled: 0,
        status: "open",
        createdAt: Date.now(),
      }
      setOrders((prev) => [...prev, newOrder])
      showToast(
        "success",
        "Limit Order Placed",
        `${orderData.side.toUpperCase()} ${orderData.size} ${orderData.symbol} @ $${orderData.price.toLocaleString()}`
      )
    }
  }, [showToast])
  
  const cancelOrder = useCallback((orderId: string) => {
    const order = orders.find((o) => o.id === orderId)
    if (!order) return
    
    setOrders((prev) => prev.filter((o) => o.id !== orderId))
    showToast(
      "info",
      "Order Cancelled",
      `${order.side.toUpperCase()} ${order.size} ${order.symbol} @ $${order.price.toLocaleString()}`
    )
  }, [orders, showToast])
  
  const closePosition = useCallback((positionId: string) => {
    const position = positions.find((p) => p.id === positionId)
    if (!position) return
    
    const historyEntry: TradeHistory = {
      id: `hist-${Date.now()}`,
      symbol: position.symbol,
      side: position.side === "long" ? "short" : "long",
      type: "market",
      price: position.markPrice,
      size: position.size,
      fee: position.markPrice * position.size * 0.0005,
      pnl: position.pnl,
      createdAt: Date.now(),
    }
    setHistory((prev) => [historyEntry, ...prev])
    
    setPositions((prev) => prev.filter((p) => p.id !== positionId))
    showToast(
      "success",
      "Position Closed",
      `${position.symbol} ${position.side.toUpperCase()} ${position.size} | PnL: ${position.pnl >= 0 ? "+" : ""}$${position.pnl.toFixed(2)}`
    )
  }, [positions, showToast])

const selectMarketByData = (market: MarketData) => {
    setSelectedMarket(marketDataToInfo(market))
    if (market.category.includes("spot")) {
      setTradeMode("spot")
    } else {
      setTradeMode("perps")
    }
  }

const toggleFavorite = (key: string) => {
    setFavorites((prev) => (prev.includes(key) ? prev.filter((s) => s !== key) : [...prev, key]))
  }

return (
    <TradeContext.Provider
      value={{
        selectedMarket,
        setSelectedMarket,
        tradingViewSymbol,
        selectMarketByData,
        favorites,
        toggleFavorite,
        tradeMode,
        setTradeMode,
        symbol,
        // Chart data
        timeframe,
        setTimeframe,
        candles,
        currentPrice,
        // Order book
        bids: orderBook.bids,
        asks: orderBook.asks,
        spread,
        spreadPercent,
        recentTrades,
        // Indicators
        showMA,
        setShowMA,
        showEMA,
        setShowEMA,
        showBB,
        setShowBB,
        showVolume,
        setShowVolume,
        // Positions & Orders
        positions,
        orders,
        history,
        // Actions
        placeOrder,
        cancelOrder,
        closePosition,
        // Toasts
        toasts,
        showToast,
        dismissToast,
      }}
    >
      {children}
    </TradeContext.Provider>
  )
}

export function useTradeContext() {
  const context = useContext(TradeContext)
  if (!context) {
    throw new Error("useTradeContext must be used within a TradeProvider")
  }
  return context
}

export function useTrade() {
  const context = useTradeContext()
  return {
    ...context,
    currentMarket: context.selectedMarket,
    tradeMode: context.tradeMode,
    setTradeMode: context.setTradeMode,
  }
}
[V0_FILE]typescriptreact:file="app/app/page.tsx" isMerged="true"
"use client"

import Link from "next/link"
import { useState } from "react"
import { Button } from "@/components/ui/button"
import { useWallet } from "@/lib/wallet-context"
import { useCapitalFlow } from "@/lib/capital-flow-context"
import {
  AlertTriangle,
  TrendingUp,
  Shield,
  Eye,
  ChevronRight,
  Zap,
  AlertCircle,
  Activity,
  Bot,
  ArrowRight,
  Target,
  Wallet,
  DollarSign,
  BarChart3,
  Coins,
  LineChart,
  CircleDot,
} from "lucide-react"

export default function AppDashboard() {
  const { wallet, openLoginModal } = useWallet()
  const capitalFlow = useCapitalFlow()
  const [executionMode, setExecutionMode] = useState<"stateless" | "delegated">("stateless")
  const [showLiquidationAlert, setShowLiquidationAlert] = useState(true)
  
  // Mock recent liquidation event - in production this would come from blockchain events
  const recentLiquidation = {
    occurred: true,
    timestamp: new Date(Date.now() - 1000 * 60 * 15), // 15 minutes ago
    asset: "ETH",
    debtReduced: 1250.50,
    collateralReduced: 0.45,
    collateralAsset: "ETH",
    previousHealthFactor: 1.02,
    newHealthFactor: 2.45,
    liquidationPenalty: 62.50,
  }

const getHealthColor = (score: number) => {
    if (score >= 80) return "#00E0C6"
    if (score >= 60) return "#F7931A"
    return "#ef4444"
  }

const getRiskLevelText = (level: string) => {
    switch (level) {
      case "low": return "Low Risk"
      case "medium": return "Medium Risk"
      case "high": return "High Risk"
      case "critical": return "Critical Risk"
      default: return "Unknown"
    }
  }

const getPriorityBadge = (priority: string) => {
    switch (priority) {
      case "urgent": return "bg-red-500/20 border-red-500/30 text-red-400"
      case "high": return "bg-[#F7931A]/20 border-[#F7931A]/30 text-[#F7931A]"
      case "medium": return "bg-blue-500/20 border-blue-500/30 text-blue-400"
      default: return "bg-white/5 border-white/10 text-gray-400"
    }
  }

// Get the primary next action based on capital stage
  const nextAction = capitalFlow.getNextAction()

return (
    <main className="max-w-7xl mx-auto px-6 py-8">
      {/* Capital Flow Header */}
      <div className="flex items-center justify-between mb-8 pb-4 border-b border-white/5">
        <div className="flex items-center gap-4">
          <h1 className="text-xl font-bold text-white">Capital Command Center</h1>
          {wallet.isConnected && wallet.address && (
            <>
              <div className="h-4 w-px bg-white/10" />
              <div className="flex items-center gap-2">
                <div className="w-2 h-2 rounded-full bg-[#00E0C6]" />
                <span className="text-sm text-gray-400">
                  {wallet.address.slice(0, 6)}...{wallet.address.slice(-4)}
                </span>
              </div>
            </>
          )}
        </div>
        <div className="flex items-center gap-4">
          {capitalFlow.urgentAlerts > 0 && (
            <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-red-500/10 border border-red-500/20">
              <AlertCircle className="w-4 h-4 text-red-400" />
              <span className="text-sm text-red-400">{capitalFlow.urgentAlerts} Urgent</span>
            </div>
          )}
          <div className="flex items-center gap-2">
            <span className="text-xs text-gray-500">AI:</span>
            <div className="flex items-center gap-1">
              <div className="w-2 h-2 rounded-full bg-[#00E0C6] animate-pulse" />
              <span className="text-xs text-[#00E0C6]">Active</span>
            </div>
          </div>
        </div>
      </div>

{/* Liquidation Alert Banner */}
      {recentLiquidation.occurred && showLiquidationAlert && (
        <div className="mb-6 rounded-xl border border-[#F7931A]/30 bg-gradient-to-r from-[#F7931A]/10 to-[#F7931A]/5 overflow-hidden">
          <div className="p-4">
            <div className="flex items-start justify-between">
              <div className="flex items-start gap-4">
                <div className="w-10 h-10 rounded-lg bg-[#F7931A]/20 flex items-center justify-center shrink-0">
                  <AlertTriangle className="w-5 h-5 text-[#F7931A]" />
                </div>
                <div>
                  <div className="flex items-center gap-2 mb-1">
                    <h3 className="font-semibold text-white">Position Liquidated</h3>
                    <span className="text-xs text-gray-500">
                      {recentLiquidation.timestamp.toLocaleTimeString()}
                    </span>
                  </div>
                  <p className="text-sm text-gray-400 mb-3">
                    Your {recentLiquidation.asset} lending position was partially liquidated due to low health factor.
                  </p>
                  
                  {/* Position Update Details */}
                  <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
                    <div className="bg-[#0a0a0f] rounded-lg p-3">
                      <div className="text-xs text-gray-500 mb-1">Debt Reduced</div>
                      <div className="text-sm font-medium text-[#00E0C6]">
                        -${recentLiquidation.debtReduced.toLocaleString()}
                      </div>
                    </div>
                    <div className="bg-[#0a0a0f] rounded-lg p-3">
                      <div className="text-xs text-gray-500 mb-1">Collateral Reduced</div>
                      <div className="text-sm font-medium text-red-400">
                        -{recentLiquidation.collateralReduced} {recentLiquidation.collateralAsset}
                      </div>
                    </div>
                    <div className="bg-[#0a0a0f] rounded-lg p-3">
                      <div className="text-xs text-gray-500 mb-1">Liquidation Penalty</div>
                      <div className="text-sm font-medium text-[#F7931A]">
                        ${recentLiquidation.liquidationPenalty.toFixed(2)}
                      </div>
                    </div>
                    <div className="bg-[#0a0a0f] rounded-lg p-3">
                      <div className="text-xs text-gray-500 mb-1">Health Factor Restored</div>
                      <div className="flex items-center gap-1.5">
                        <span className="text-sm font-medium text-red-400">
                          {recentLiquidation.previousHealthFactor.toFixed(2)}
                        </span>
                        <ArrowRight className="w-3 h-3 text-gray-500" />
                        <span className="text-sm font-medium text-[#00E0C6]">
                          {recentLiquidation.newHealthFactor.toFixed(2)}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <button 
                onClick={() => setShowLiquidationAlert(false)}
                className="text-gray-500 hover:text-white transition-colors p-1"
              >
                <span className="sr-only">Dismiss</span>
                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>
            
            {/* Action buttons */}
            <div className="flex items-center gap-3 mt-4 pt-3 border-t border-white/5">
              <Link href="/app/lending">
                <Button size="sm" className="bg-[#F7931A] hover:bg-[#E8850C] text-black font-medium">
                  View Position
                </Button>
              </Link>
              <Link href="/app/lending">
                <Button size="sm" variant="outline" className="border-white/10 text-white hover:bg-white/5 bg-transparent">
                  Add Collateral
                </Button>
              </Link>
              <Link href="/app/lending">
                <Button size="sm" variant="outline" className="border-white/10 text-white hover:bg-white/5 bg-transparent">
                  Repay Debt
                </Button>
              </Link>
            </div>
          </div>
        </div>
      )}
      
      {/* Capital Stage Banner - Context-Aware CTA */}
      {nextAction && (
        <div className={`mb-6 rounded-xl p-4 border ${getPriorityBadge(nextAction.priority)}`}>
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-4">
              <div className="w-10 h-10 rounded-lg bg-white/10 flex items-center justify-center">
                {nextAction.type === "mint-usdb" && <Coins className="w-5 h-5" />}
                {nextAction.type === "trade-perp" && <LineChart className="w-5 h-5" />}
                {nextAction.type === "reduce-risk" && <Shield className="w-5 h-5" />}
                {nextAction.type === "increase-yield" && <TrendingUp className="w-5 h-5" />}
                {nextAction.type === "rebalance" && <BarChart3 className="w-5 h-5" />}
              </div>
              <div>
                <div className="flex items-center gap-2">
                  <h3 className="font-semibold text-white">{nextAction.title}</h3>
                  <span className={`text-xs px-2 py-0.5 rounded-full border ${getPriorityBadge(nextAction.priority)}`}>
                    {nextAction.priority}
                  </span>
                </div>
                <p className="text-sm text-gray-400">{nextAction.description}</p>
              </div>
            </div>
            <Link href={nextAction.action.href}>
              <Button className="bg-[#F7931A] hover:bg-[#E8850C] text-black font-medium">
                {nextAction.action.label}
                <ArrowRight className="w-4 h-4 ml-2" />
              </Button>
            </Link>
          </div>
        </div>
      )}

<div className="grid lg:grid-cols-[1fr_380px] gap-8">
        {/* LEFT PANEL - Capital Intelligence */}
        <div className="space-y-6">
          {/* Capital Overview Cards */}
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div className="bg-[#12121a] rounded-xl p-4 border border-white/5">
              <div className="flex items-center gap-2 text-gray-500 text-xs mb-2">
                <DollarSign className="w-3.5 h-3.5" />
                Total Capital
              </div>
              <div className="text-2xl font-bold text-white">
                ${capitalFlow.totalCapital.toLocaleString()}
              </div>
            </div>
            <div className="bg-[#12121a] rounded-xl p-4 border border-white/5">
              <div className="flex items-center gap-2 text-gray-500 text-xs mb-2">
                <Coins className="w-3.5 h-3.5" />
                Available USDB
              </div>
              <div className="text-2xl font-bold text-[#00E0C6]">
                ${capitalFlow.availableUsdb.toLocaleString()}
              </div>
            </div>
            <div className="bg-[#12121a] rounded-xl p-4 border border-white/5">
              <div className="flex items-center gap-2 text-gray-500 text-xs mb-2">
                <Target className="w-3.5 h-3.5" />
                Deployed
              </div>
              <div className="text-2xl font-bold text-[#F7931A]">
                ${capitalFlow.deployedUsdb.toLocaleString()}
              </div>
            </div>
            <div className="bg-[#12121a] rounded-xl p-4 border border-white/5">
              <div className="flex items-center gap-2 text-gray-500 text-xs mb-2">
                <Activity className="w-3.5 h-3.5" />
                Active Positions
              </div>
              <div className="text-2xl font-bold text-white">
                {capitalFlow.activePositionsCount}
              </div>
            </div>
          </div>

{/* Portfolio Health Score */}
          <div className="bg-[#12121a] rounded-2xl p-6 border border-white/5">
            <div className="flex items-center justify-between mb-6">
              <h2 className="text-lg font-semibold text-white flex items-center gap-2">
                <Activity className="w-5 h-5 text-[#F7931A]" />
                Portfolio Health
              </h2>
              <div className="flex items-center gap-2 text-sm">
                <span className={`font-medium ${getHealthColor(capitalFlow.portfolioHealthScore) === "#10b981" ? "text-[#00E0C6]" : getHealthColor(capitalFlow.portfolioHealthScore) === "#F7931A" ? "text-[#F7931A]" : "text-red-400"}`}>
                  {getRiskLevelText(capitalFlow.overallRiskLevel)}
                </span>
              </div>
            </div>

<div className="flex items-center gap-8">
              {/* Score Circle */}
              <div className="relative w-28 h-28 shrink-0">
                <svg className="w-full h-full -rotate-90" viewBox="0 0 100 100">
                  <circle cx="50" cy="50" r="45" fill="none" stroke="#1f1f2e" strokeWidth="8" />
                  <circle
                    cx="50"
                    cy="50"
                    r="45"
                    fill="none"
                    stroke={getHealthColor(capitalFlow.portfolioHealthScore)}
                    strokeWidth="8"
                    strokeLinecap="round"
                    strokeDasharray={`${capitalFlow.portfolioHealthScore * 2.83} 283`}
                  />
                </svg>
                <div className="absolute inset-0 flex flex-col items-center justify-center">
                  <span className="text-2xl font-bold text-white">{capitalFlow.portfolioHealthScore}</span>
                  <span className="text-xs text-gray-500">/ 100</span>
                </div>
              </div>

{/* Risk Metrics */}
              <div className="flex-1 grid grid-cols-2 gap-4">
                <div className="p-3 rounded-lg bg-[#0a0a0f]">
                  <div className="text-xs text-gray-500 mb-1">Liquidation Risk</div>
                  <div className="text-lg font-semibold text-white">{capitalFlow.liquidationRisk}%</div>
                </div>
                <div className="p-3 rounded-lg bg-[#0a0a0f]">
                  <div className="text-xs text-gray-500 mb-1">Max Drawdown</div>
                  <div className="text-lg font-semibold text-white">{capitalFlow.maxDrawdown}%</div>
                </div>
                <div className="p-3 rounded-lg bg-[#0a0a0f]">
                  <div className="text-xs text-gray-500 mb-1">Leverage Exposure</div>
                  <div className="text-lg font-semibold text-white">{capitalFlow.exposure.leverage}%</div>
                </div>
                <div className="p-3 rounded-lg bg-[#0a0a0f]">
                  <div className="text-xs text-gray-500 mb-1">At-Risk Positions</div>
                  <div className={`text-lg font-semibold ${capitalFlow.atRiskPositionsCount > 0 ? "text-red-400" : "text-[#00E0C6]"}`}>
                    {capitalFlow.atRiskPositionsCount}
                  </div>
                </div>
              </div>
            </div>
          </div>

{/* Capital Exposure */}
          <div className="bg-[#12121a] rounded-2xl p-6 border border-white/5">
            <h2 className="text-lg font-semibold text-white mb-6 flex items-center gap-2">
              <Eye className="w-5 h-5 text-[#F7931A]" />
              Capital Allocation
            </h2>

<div className="space-y-4">
              <div>
                <div className="flex items-center justify-between mb-2">
                  <span className="text-sm text-gray-300">BTC Exposure</span>
                  <span className="text-sm font-semibold text-[#F7931A]">{capitalFlow.exposure.btc}%</span>
                </div>
                <div className="h-3 bg-[#1f1f2e] rounded-full overflow-hidden">
                  <div
                    className="h-full bg-gradient-to-r from-[#F7931A] to-[#F7931A]/70 rounded-full transition-all"
                    style={{ width: `${capitalFlow.exposure.btc}%` }}
                  />
                </div>
              </div>

<div>
                <div className="flex items-center justify-between mb-2">
                  <span className="text-sm text-gray-300">Stablecoins (USDB)</span>
                  <span className="text-sm font-semibold text-[#00E0C6]">{capitalFlow.exposure.stablecoins}%</span>
                </div>
                <div className="h-3 bg-[#1f1f2e] rounded-full overflow-hidden">
                  <div
                    className="h-full bg-gradient-to-r from-[#00E0C6] to-[#00E0C6]/70 rounded-full transition-all"
                    style={{ width: `${capitalFlow.exposure.stablecoins}%` }}
                  />
                </div>
              </div>

<div>
                <div className="flex items-center justify-between mb-2">
                  <span className="text-sm text-gray-300">Yield Positions</span>
                  <span className="text-sm font-semibold text-purple-400">{capitalFlow.exposure.yield}%</span>
                </div>
                <div className="h-3 bg-[#1f1f2e] rounded-full overflow-hidden">
                  <div
                    className="h-full bg-gradient-to-r from-purple-500 to-purple-500/70 rounded-full transition-all"
                    style={{ width: `${capitalFlow.exposure.yield}%` }}
                  />
                </div>
              </div>
            </div>
          </div>

{/* Quick Actions - Capital Flow Oriented */}
          <div className="flex flex-wrap gap-3">
            <Link href="/app/vaults">
              <Button className="bg-[#F7931A] hover:bg-[#E8850C] text-black font-medium">
                <Coins className="w-4 h-4 mr-2" />
                Mint USDB
              </Button>
            </Link>
            <Link href="/app/trade">
              <Button variant="outline" className="border-[#F7931A]/30 text-[#F7931A] hover:bg-[#F7931A]/10 bg-transparent">
                <LineChart className="w-4 h-4 mr-2" />
                Trade PerpDEX
              </Button>
            </Link>
            <Link href="/app/prediction">
              <Button variant="outline" className="border-[#00E0C6]/30 text-[#00E0C6] hover:bg-[#00E0C6]/10 bg-transparent">
                <CircleDot className="w-4 h-4 mr-2" />
                Prediction Market
              </Button>
            </Link>
            <Link href="/app/portfolio">
              <Button variant="outline" className="border-white/10 text-white hover:bg-white/5 bg-transparent">
                <Eye className="w-4 h-4 mr-2" />
                Full Portfolio
              </Button>
            </Link>
          </div>

{/* Trade PerpDEX Overview - Analysis Only */}
          <div className="bg-gradient-to-br from-[#F7931A]/5 to-amber-500/5 rounded-2xl p-6 border border-[#F7931A]/10">
            <div className="flex items-center justify-between mb-5">
              <h2 className="text-lg font-semibold text-white flex items-center gap-2">
                <LineChart className="w-5 h-5 text-[#F7931A]" />
                Trade PerpDEX
              </h2>
              <Link href="/app/trade" className="text-sm text-[#F7931A] hover:underline flex items-center gap-1">
                Open Trading <ChevronRight className="w-3.5 h-3.5" />
              </Link>
            </div>

{/* Key Performance Metrics */}
            <div className="grid grid-cols-4 gap-3 mb-5">
              <div className="bg-[#0a0a0f] rounded-xl p-3 border border-white/5 text-center">
                <div className="text-lg font-bold text-[#00E0C6] mb-1">+$2,847</div>
                <div className="text-[10px] text-gray-500 uppercase tracking-wide">30D PnL</div>
              </div>
              <div className="bg-[#0a0a0f] rounded-xl p-3 border border-white/5 text-center">
                <div className="text-lg font-bold text-white mb-1">64.2%</div>
                <div className="text-[10px] text-gray-500 uppercase tracking-wide">Win Rate</div>
              </div>
              <div className="bg-[#0a0a0f] rounded-xl p-3 border border-white/5 text-center">
                <div className="text-lg font-bold text-[#F7931A] mb-1">$24.6K</div>
                <div className="text-[10px] text-gray-500 uppercase tracking-wide">Volume</div>
              </div>
              <div className="bg-[#0a0a0f] rounded-xl p-3 border border-white/5 text-center">
                <div className="text-lg font-bold text-white mb-1">5</div>
                <div className="text-[10px] text-gray-500 uppercase tracking-wide">Positions</div>
              </div>
            </div>

{/* Trading Analysis */}
            <div className="bg-[#0a0a0f] rounded-xl p-4 border border-white/5 mb-4">
              <div className="flex items-center gap-2 mb-3">
                <Activity className="w-4 h-4 text-[#F7931A]" />
                <span className="text-xs text-gray-400 font-medium uppercase tracking-wide">Position Summary</span>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <span className="text-xs text-gray-500">Long Exposure</span>
                    <span className="text-sm text-[#00E0C6] font-medium">$18,240</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-xs text-gray-500">Short Exposure</span>
                    <span className="text-sm text-red-400 font-medium">$6,380</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-xs text-gray-500">Unrealized PnL</span>
                    <span className="text-sm text-[#00E0C6] font-medium">+$542.80</span>
                  </div>
                </div>
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <span className="text-xs text-gray-500">Avg Leverage</span>
                    <span className="text-sm text-white font-medium">8.5x</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-xs text-gray-500">Margin Used</span>
                    <span className="text-sm text-[#F7931A] font-medium">42%</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-xs text-gray-500">Trades (7d)</span>
                    <span className="text-sm text-white font-medium">23</span>
                  </div>
                </div>
              </div>
            </div>

{/* Quick Action */}
            <Link href="/app/trade">
              <Button variant="outline" className="w-full border-[#F7931A]/20 text-[#F7931A] hover:bg-[#F7931A]/10 bg-transparent text-sm">
                <LineChart className="w-3.5 h-3.5 mr-2" />
                Open Trading Terminal
              </Button>
            </Link>
          </div>

{/* Prediction Market Overview - Analysis Only */}
          <div className="bg-gradient-to-br from-emerald-500/5 to-teal-500/5 rounded-2xl p-6 border border-emerald-500/10">
            <div className="flex items-center justify-between mb-5">
              <h2 className="text-lg font-semibold text-white flex items-center gap-2">
                <CircleDot className="w-5 h-5 text-[#00E0C6]" />
                Prediction Market
              </h2>
              <Link href="/app/prediction" className="text-sm text-[#00E0C6] hover:underline flex items-center gap-1">
                Trade Markets <ChevronRight className="w-3.5 h-3.5" />
              </Link>
            </div>

{/* Key Performance Metrics */}
            <div className="grid grid-cols-3 gap-3 mb-5">
              <div className="bg-[#0a0a0f] rounded-xl p-4 border border-white/5 text-center">
                <div className="text-3xl font-bold text-[#00E0C6] mb-1">75%</div>
                <div className="text-[10px] text-gray-500 uppercase tracking-wide">Win Rate</div>
              </div>
              <div className="bg-[#0a0a0f] rounded-xl p-4 border border-white/5 text-center">
                <div className="text-3xl font-bold text-[#00E0C6] mb-1">+$324</div>
                <div className="text-[10px] text-gray-500 uppercase tracking-wide">Total PnL</div>
              </div>
              <div className="bg-[#0a0a0f] rounded-xl p-4 border border-white/5 text-center">
                <div className="text-3xl font-bold text-white mb-1">4</div>
                <div className="text-[10px] text-gray-500 uppercase tracking-wide">Positions</div>
              </div>
            </div>

{/* Trending Analysis */}
            <div className="bg-[#0a0a0f] rounded-xl p-4 border border-white/5 mb-4">
              <div className="flex items-center gap-2 mb-3">
                <TrendingUp className="w-4 h-4 text-[#00E0C6]" />
                <span className="text-xs text-gray-400 font-medium uppercase tracking-wide">Market Trends</span>
              </div>
              <div className="space-y-2">
                {[
                  { category: "Crypto", trend: "Bullish", markets: 12, hot: true },
                  { category: "Politics", trend: "Active", markets: 8, hot: true },
                  { category: "Economics", trend: "Volatile", markets: 5, hot: false },
                ].map((t, i) => (
                  <div key={i} className="flex items-center justify-between py-1.5">
                    <div className="flex items-center gap-2">
                      <span className="text-sm text-white">{t.category}</span>
                      {t.hot && <span className="text-[9px] px-1.5 py-0.5 rounded-full bg-[#F7931A]/20 text-[#F7931A] font-medium">HOT</span>}
                    </div>
                    <div className="flex items-center gap-3">
                      <span className="text-xs text-gray-500">{t.markets} markets</span>
                      <span className={`text-xs font-medium ${t.trend === "Bullish" ? "text-[#00E0C6]" : t.trend === "Volatile" ? "text-[#F7931A]" : "text-blue-400"}`}>
                        {t.trend}
                      </span>
                    </div>
                  </div>
                ))}
              </div>
            </div>

{/* Quick Action */}
            <Link href="/app/prediction">
              <Button variant="outline" className="w-full border-emerald-500/20 text-[#00E0C6] hover:bg-[#00E0C6]/10 bg-transparent text-sm">
                <CircleDot className="w-3.5 h-3.5 mr-2" />
                Explore Prediction Markets
              </Button>
            </Link>
          </div>

{/* AI Trading Overview - Analysis Only */}
          <div className="bg-gradient-to-br from-purple-500/5 to-[#F7931A]/5 rounded-2xl p-6 border border-purple-500/10">
            <div className="flex items-center justify-between mb-5">
              <h2 className="text-lg font-semibold text-white flex items-center gap-2">
                <Bot className="w-5 h-5 text-purple-400" />
                AI Trading Agent
              </h2>
              <Link href="/app/ai-trading" className="text-sm text-purple-400 hover:underline flex items-center gap-1">
                Open AI Trading <ChevronRight className="w-3.5 h-3.5" />
              </Link>
            </div>

{/* Key Performance Metrics */}
            <div className="grid grid-cols-4 gap-3 mb-5">
              <div className="bg-[#0a0a0f] rounded-xl p-3 border border-white/5 text-center">
                <div className="flex items-center justify-center gap-1.5 mb-1">
                  <div className="w-2 h-2 rounded-full bg-[#00E0C6] animate-pulse" />
                  <span className="text-lg font-bold text-[#00E0C6]">Active</span>
                </div>
                <div className="text-[10px] text-gray-500 uppercase tracking-wide">Status</div>
              </div>
              <div className="bg-[#0a0a0f] rounded-xl p-3 border border-white/5 text-center">
                <div className="text-lg font-bold text-white mb-1">68.4%</div>
                <div className="text-[10px] text-gray-500 uppercase tracking-wide">Win Rate</div>
              </div>
              <div className="bg-[#0a0a0f] rounded-xl p-3 border border-white/5 text-center">
                <div className="text-lg font-bold text-[#00E0C6] mb-1">+$1.8K</div>
                <div className="text-[10px] text-gray-500 uppercase tracking-wide">30D PnL</div>
              </div>
              <div className="bg-[#0a0a0f] rounded-xl p-3 border border-white/5 text-center">
                <div className="text-lg font-bold text-white mb-1">2.14</div>
                <div className="text-[10px] text-gray-500 uppercase tracking-wide">Sharpe</div>
              </div>
            </div>

{/* AI Strategy Analysis */}
            <div className="bg-[#0a0a0f] rounded-xl p-4 border border-white/5 mb-4">
              <div className="flex items-center gap-2 mb-3">
                <Activity className="w-4 h-4 text-purple-400" />
                <span className="text-xs text-gray-400 font-medium uppercase tracking-wide">Strategy Analysis</span>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <span className="text-xs text-gray-500">Current Strategy</span>
                    <span className="text-sm text-white font-medium">Neutral</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-xs text-gray-500">Capital Deployed</span>
                    <span className="text-sm text-[#F7931A] font-medium">$24,643</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-xs text-gray-500">Open Positions</span>
                    <span className="text-sm text-white font-medium">3</span>
                  </div>
                </div>
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <span className="text-xs text-gray-500">Max Drawdown</span>
                    <span className="text-sm text-[#00E0C6] font-medium">-2.1%</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-xs text-gray-500">Avg Leverage</span>
                    <span className="text-sm text-white font-medium">4x</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-xs text-gray-500">Trade Count (7d)</span>
                    <span className="text-sm text-white font-medium">47</span>
                  </div>
                </div>
              </div>
            </div>

{/* Quick Action */}
            <Link href="/app/ai-trading">
              <Button variant="outline" className="w-full border-purple-500/20 text-purple-400 hover:bg-purple-500/10 bg-transparent text-sm">
                <Bot className="w-3.5 h-3.5 mr-2" />
                Configure AI Agent
              </Button>
            </Link>
          </div>

{/* Bots Overview - Analysis Only */}
          <div className="bg-[#12121a] rounded-2xl p-6 border border-white/5">
            <div className="flex items-center justify-between mb-5">
              <h2 className="text-lg font-semibold text-white flex items-center gap-2">
                <Zap className="w-5 h-5 text-[#F7931A]" />
                Trading Bots
              </h2>
              <Link href="/app/bots" className="text-sm text-[#F7931A] hover:underline flex items-center gap-1">
                Manage Bots <ChevronRight className="w-3.5 h-3.5" />
              </Link>
            </div>

{/* Key Performance Metrics */}
            <div className="grid grid-cols-4 gap-3 mb-5">
              <div className="bg-[#0a0a0f] rounded-xl p-3 border border-white/5 text-center">
                <div className="flex items-center justify-center gap-1.5 mb-1">
                  <div className="w-2 h-2 rounded-full bg-[#00E0C6] animate-pulse" />
                  <span className="text-lg font-bold text-white">3</span>
                </div>
                <div className="text-[10px] text-gray-500 uppercase tracking-wide">Active</div>
              </div>
              <div className="bg-[#0a0a0f] rounded-xl p-3 border border-white/5 text-center">
                <div className="text-lg font-bold text-white mb-1">72%</div>
                <div className="text-[10px] text-gray-500 uppercase tracking-wide">Win Rate</div>
              </div>
              <div className="bg-[#0a0a0f] rounded-xl p-3 border border-white/5 text-center">
                <div className="text-lg font-bold text-[#00E0C6] mb-1">+$524</div>
                <div className="text-[10px] text-gray-500 uppercase tracking-wide">7D PnL</div>
              </div>
              <div className="bg-[#0a0a0f] rounded-xl p-3 border border-white/5 text-center">
                <div className="text-lg font-bold text-[#F7931A] mb-1">25%</div>
                <div className="text-[10px] text-gray-500 uppercase tracking-wide">Avg APR</div>
              </div>
            </div>

{/* Bot Strategy Analysis */}
            <div className="bg-[#0a0a0f] rounded-xl p-4 border border-white/5 mb-4">
              <div className="flex items-center gap-2 mb-3">
                <Activity className="w-4 h-4 text-[#F7931A]" />
                <span className="text-xs text-gray-400 font-medium uppercase tracking-wide">Strategy Distribution</span>
              </div>
              <div className="space-y-2">
                {[
                  { strategy: "Grid Trading", bots: 1, pnl: "+$312", status: "active" },
                  { strategy: "DCA", bots: 1, pnl: "+$145", status: "active" },
                  { strategy: "Dip Entry", bots: 1, pnl: "+$67", status: "active" },
                ].map((s, i) => (
                  <div key={i} className="flex items-center justify-between py-1.5">
                    <div className="flex items-center gap-2">
                      <div className="w-1.5 h-1.5 rounded-full bg-[#00E0C6]" />
                      <span className="text-sm text-white">{s.strategy}</span>
                    </div>
                    <div className="flex items-center gap-3">
                      <span className="text-xs text-gray-500">{s.bots} bot</span>
                      <span className="text-xs font-medium text-[#00E0C6]">{s.pnl}</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>

{/* Quick Action */}
            <Link href="/app/bots">
              <Button variant="outline" className="w-full border-[#F7931A]/20 text-[#F7931A] hover:bg-[#F7931A]/10 bg-transparent text-sm">
                <Zap className="w-3.5 h-3.5 mr-2" />
                Manage Trading Bots
              </Button>
            </Link>
          </div>
        </div>

{/* RIGHT PANEL - AI Decision & Routing Layer */}
        <div className="space-y-6">
          {/* AI Recommendations - NOT a chatbot */}
          <div className="bg-gradient-to-br from-[#F7931A]/10 to-purple-500/5 rounded-2xl p-6 border border-[#F7931A]/20">
            <h2 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
              <Bot className="w-5 h-5 text-[#F7931A]" />
              AI Recommendations
            </h2>
            <p className="text-xs text-gray-500 mb-4">Decision & Routing Layer - Context-aware actions</p>

<div className="space-y-3">
              {capitalFlow.recommendations.slice(0, 4).map((rec) => (
                <Link key={rec.id} href={rec.action.href}>
                  <div className={`p-3 rounded-lg border transition-all hover:scale-[1.02] cursor-pointer ${getPriorityBadge(rec.priority)}`}>
                    <div className="flex items-start justify-between gap-2">
                      <div className="flex-1">
                        <div className="text-sm font-medium text-white mb-1">{rec.title}</div>
                        <div className="text-xs text-gray-400 line-clamp-2">{rec.description}</div>
                      </div>
                      <ChevronRight className="w-4 h-4 text-gray-500 shrink-0 mt-1" />
                    </div>
                  </div>
                </Link>
              ))}
            </div>

<p className="text-xs text-gray-500 mt-4 flex items-center gap-1">
              <AlertCircle className="w-3 h-3" />
              All actions require explicit user confirmation
            </p>
          </div>

{/* Execution Mode */}
          <div className="bg-[#12121a] rounded-2xl p-6 border border-white/5">
            <h2 className="text-sm font-semibold text-gray-400 uppercase tracking-wide mb-4">Execution Mode</h2>

<div className="space-y-3">
              <button
                onClick={() => setExecutionMode("stateless")}
                className={`w-full flex items-center gap-3 p-3 rounded-lg border transition-all ${
                  executionMode === "stateless"
                    ? "bg-white/5 border-white/20"
                    : "bg-transparent border-white/5 hover:border-white/10"
                }`}
              >
                <div className={`w-3 h-3 rounded-full ${executionMode === "stateless" ? "bg-white" : "bg-gray-600"}`} />
                <div className="text-left">
                  <div className="text-sm text-white">Manual Confirmation</div>
                  <div className="text-xs text-gray-500">You approve every action</div>
                </div>
              </button>

<button
                onClick={() => setExecutionMode("delegated")}
                className={`w-full flex items-center gap-3 p-3 rounded-lg border transition-all ${
                  executionMode === "delegated"
                    ? "bg-[#F7931A]/10 border-[#F7931A]/30"
                    : "bg-transparent border-white/5 hover:border-white/10"
                }`}
              >
                <div className={`w-3 h-3 rounded-full ${executionMode === "delegated" ? "bg-[#F7931A]" : "bg-gray-600"}`} />
                <div className="text-left">
                  <div className="text-sm text-white">Policy-Based Execution</div>
                  <div className="text-xs text-gray-500">AI executes within your policies</div>
                </div>
              </button>
            </div>

{executionMode === "delegated" && (
              <div className="mt-4 p-3 rounded-lg bg-[#F7931A]/5 border border-[#F7931A]/20">
                <div className="text-xs text-gray-400 space-y-1">
                  <div className="flex justify-between">
                    <span>Max tx size:</span>
                    <span className="text-white">$10,000</span>
                  </div>
                  <div className="flex justify-between">
                    <span>Daily limit:</span>
                    <span className="text-white">$50,000</span>
                  </div>
                </div>
                <button className="w-full mt-3 py-2 rounded-lg bg-red-500/10 border border-red-500/20 text-red-400 text-xs font-medium hover:bg-red-500/20 transition-colors">
                  Emergency Stop
                </button>
              </div>
            )}
          </div>

{/* Capital Flow Visual */}
          <div className="bg-[#12121a] rounded-2xl p-6 border border-white/5">
            <h2 className="text-sm font-semibold text-gray-400 uppercase tracking-wide mb-4">Capital Flow</h2>
            <div className="flex items-center justify-between text-center">
              <div className="flex-1">
                <div className="w-10 h-10 rounded-full bg-[#F7931A]/20 flex items-center justify-center mx-auto mb-2">
                  <span className="text-[#F7931A] font-bold text-sm">BTC</span>
                </div>
                <div className="text-xs text-gray-500">Collateral</div>
              </div>
              <ArrowRight className="w-4 h-4 text-gray-600" />
              <div className="flex-1">
                <div className="w-10 h-10 rounded-full bg-[#00E0C6]/20 flex items-center justify-center mx-auto mb-2">
                  <span className="text-[#00E0C6] font-bold text-sm">$</span>
                </div>
                <div className="text-xs text-gray-500">USDB</div>
              </div>
              <ArrowRight className="w-4 h-4 text-gray-600" />
              <div className="flex-1">
                <div className="w-10 h-10 rounded-full bg-purple-500/20 flex items-center justify-center mx-auto mb-2">
                  <LineChart className="w-5 h-5 text-purple-400" />
                </div>
                <div className="text-xs text-gray-500">Deploy</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/components/trade/market-bar.tsx" isMerged="true"
"use client"

import { useTradeContext } from "@/lib/trade-context"
import { ChevronDown, ExternalLink } from "lucide-react"

export function MarketBar() {
  const { selectedMarket, tradeMode } = useTradeContext()
  
  const isPositive = selectedMarket.change24h >= 0
  const priceChange = selectedMarket.price * (selectedMarket.change24h / 100)
  
  // Calculate 24h high/low based on current price and change
  const high24h = selectedMarket.price * 1.02
  const low24h = selectedMarket.price * 0.97
  
  return (
    <div className="h-14 bg-[#0b0e11] border-b border-[#1e2329] flex items-center px-4 gap-6">
      {/* Symbol Selector */}
      <button className="flex items-center gap-2 hover:bg-[#1e2329] px-3 py-1.5 rounded transition-colors">
        <div className="w-6 h-6 rounded-full bg-[#F7931A] flex items-center justify-center">
          <span className="text-white text-xs font-bold">{selectedMarket.symbol.charAt(0)}</span>
        </div>
        <span className="text-white font-semibold text-sm">{selectedMarket.pair}</span>
        <span className="text-[10px] text-gray-500 px-1.5 py-0.5 bg-[#1e2329] rounded uppercase">{tradeMode}</span>
        <ChevronDown className="w-4 h-4 text-gray-400" />
      </button>
      
      {/* Oracle/Mark Price */}
      <div className="flex flex-col">
        <span className="text-[10px] text-gray-500">Mark</span>
        <span className={`text-lg font-bold ${isPositive ? "text-emerald-400" : "text-red-400"}`}>
          ${selectedMarket.price.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
        </span>
      </div>
      
      {/* Oracle Price */}
      <div className="flex flex-col">
        <span className="text-[10px] text-gray-500">Oracle</span>
        <span className="text-sm text-white font-medium">
          ${selectedMarket.oraclePrice.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
        </span>
      </div>
      
      {/* 24h Change */}
      <div className="flex flex-col">
        <span className="text-[10px] text-gray-500">24h Change</span>
        <span className={`text-sm font-medium ${isPositive ? "text-emerald-400" : "text-red-400"}`}>
          {isPositive ? "+" : ""}{priceChange.toFixed(2)} / {isPositive ? "+" : ""}{selectedMarket.change24h.toFixed(2)}%
        </span>
      </div>
      
      {/* 24h Volume */}
      <div className="flex flex-col">
        <span className="text-[10px] text-gray-500">24H Volume</span>
        <span className="text-sm text-white font-medium">
          ${(selectedMarket.volume24h / 1e6).toFixed(1)}M
        </span>
      </div>
      
      {/* Open Interest */}
      <div className="flex flex-col">
        <span className="text-[10px] text-gray-500">Open Interest</span>
        <span className="text-sm text-white font-medium">
          ${(selectedMarket.openInterest / 1e9).toFixed(2)}B
        </span>
      </div>
      
      {/* Funding Rate */}
      <div className="flex flex-col">
        <span className="text-[10px] text-gray-500">Funding / Countdown</span>
        <span className={`text-sm font-medium ${selectedMarket.funding8h >= 0 ? "text-emerald-400" : "text-red-400"}`}>
          {selectedMarket.funding8h.toFixed(4)}% 07:23:15
        </span>
      </div>
      
      {/* View Contract */}
      <div className="ml-auto">
        <a 
          href={`https://explorer.963x.io/address/${selectedMarket.contract}`}
          target="_blank"
          rel="noopener noreferrer"
          className="flex items-center gap-1.5 text-xs text-gray-400 hover:text-[#F7931A] transition-colors px-2 py-1 rounded hover:bg-[#1e2329]"
        >
          <span className="font-mono text-[10px]">{selectedMarket.contract}</span>
          <ExternalLink className="w-3 h-3" />
        </a>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/trade-context.tsx" isMerged="true"
"use client"

import { createContext, useContext, useState, useMemo, useCallback, type ReactNode } from "react"
import { extendedMarkets, type MarketData, type QuoteCurrency, getMarketPair, getMarketKey } from "./trade-data"

// ─── Chart Types ───
export interface Candle {
  time: number
  open: number
  high: number
  low: number
  close: number
  volume: number
}

export type Timeframe = "1m" | "5m" | "15m" | "1H" | "4H" | "1D" | "1W"

export interface Toast {
  id: string
  type: "success" | "error" | "info"
  title: string
  message: string
}

// ─── Generate consistent candle data ───
function generateCandles(basePrice: number, timeframe: Timeframe, count: number = 100): Candle[] {
  const now = Date.now()
  const intervalMs: Record<Timeframe, number> = {
    "1m": 60 * 1000,
    "5m": 5 * 60 * 1000,
    "15m": 15 * 60 * 1000,
    "1H": 60 * 60 * 1000,
    "4H": 4 * 60 * 60 * 1000,
    "1D": 24 * 60 * 60 * 1000,
    "1W": 7 * 24 * 60 * 60 * 1000,
  }
  
  const candles: Candle[] = []
  const baseSeed = 12345
  let price = basePrice * 0.98
  
  for (let i = 0; i < count; i++) {
    const seed = baseSeed + i
    const rand1 = Math.abs(Math.sin(seed * 0.1)) 
    const rand2 = Math.abs(Math.cos(seed * 0.15))
    const rand3 = Math.abs(Math.sin(seed * 0.2 + 1))
    
    const trendBias = (basePrice - price) * 0.03
    const volatility = basePrice * 0.002
    const change = (rand1 - 0.5) * volatility * 2 + trendBias
    
    const open = price
    const close = price + change
    const high = Math.max(open, close) + rand2 * volatility * 0.5
    const low = Math.min(open, close) - rand3 * volatility * 0.5
    const volume = 100 + rand1 * 500
    
    candles.push({
      time: now - (count - i) * intervalMs[timeframe],
      open,
      high,
      low,
      close,
      volume,
    })
    
    price = close
  }
  
  if (candles.length > 0) {
    const lastCandle = candles[candles.length - 1]
    lastCandle.close = basePrice
    lastCandle.high = Math.max(lastCandle.high, basePrice)
    lastCandle.low = Math.min(lastCandle.low, basePrice)
  }
  
  return candles
}

// ─── Order Book Types ───
export interface OrderBookLevel {
  price: number
  size: number
  total: number
}

export interface Trade {
  id: string
  price: number
  size: number
  side: "buy" | "sell"
  time: number
}

if (tradfiMap[symbol]) return tradfiMap[symbol]

const exchange = "BINANCE"
  if (quote === "USDB") return `${exchange}:${symbol}USDT`
  
  const usdcPairs = ["BTC", "ETH", "SOL"]
  if (quote === "USDC" && usdcPairs.includes(symbol)) return `${exchange}:${symbol}USDT`

return `${exchange}:${symbol}${quote}`
}

type TradeMode = "spot" | "perps"

// Prefill data for order form (from orderbook click, position click, etc.)
export interface OrderPrefill {
  price?: number
  size?: number
  side?: "buy" | "sell"
  reduceOnly?: boolean
  symbol?: string
}

type TradeContextType = {
  selectedMarket: MarketInfo
  setSelectedMarket: (market: MarketInfo) => void
  tradingViewSymbol: string
  selectMarketByData: (market: MarketData) => void
  favorites: string[]
  toggleFavorite: (key: string) => void
  tradeMode: TradeMode
  setTradeMode: (mode: TradeMode) => void
  symbol: string
  timeframe: Timeframe
  setTimeframe: (tf: Timeframe) => void
  candles: Candle[]
  currentPrice: number
  bids: OrderBookLevel[]
  asks: OrderBookLevel[]
  spread: number
  spreadPercent: number
  recentTrades: Trade[]
  showMA: boolean
  setShowMA: (v: boolean) => void
  showEMA: boolean
  setShowEMA: (v: boolean) => void
  showBB: boolean
  setShowBB: (v: boolean) => void
  showVolume: boolean
  setShowVolume: (v: boolean) => void
  positions: Position[]
  orders: Order[]
  history: TradeHistory[]
  placeOrder: (order: Omit<Order, "id" | "filled" | "status" | "createdAt">) => void
  cancelOrder: (orderId: string) => void
  closePosition: (positionId: string) => void
  toasts: Toast[]
  showToast: (type: Toast["type"], title: string, message: string) => void
  dismissToast: (id: string) => void
  // Order prefill for UX (orderbook click, position click)
  orderPrefill: OrderPrefill | null
  setOrderPrefill: (prefill: OrderPrefill | null) => void
  prefillFromOrderbook: (price: number) => void
  prefillClosePosition: (position: Position) => void
}

const TradeContext = createContext<TradeContextType | null>(null)

export function TradeProvider({ children }: { children: ReactNode }) {
  const defaultMarket = extendedMarkets.find((m) => m.symbol === "BTC" && m.quote === "USDT") || extendedMarkets[0]
  const [selectedMarket, setSelectedMarket] = useState<MarketInfo>(marketDataToInfo(defaultMarket))
  const [favorites, setFavorites] = useState<string[]>(
    extendedMarkets.filter((m) => m.isFavorite).map((m) => getMarketKey(m)),
  )
  const [tradeMode, setTradeMode] = useState<TradeMode>("perps")
  const [toasts, setToasts] = useState<Toast[]>([])
  const [orderPrefill, setOrderPrefill] = useState<OrderPrefill | null>(null)
  const [timeframe, setTimeframe] = useState<Timeframe>("15m")
  const [showMA, setShowMA] = useState(false)
  const [showEMA, setShowEMA] = useState(false)
  const [showBB, setShowBB] = useState(false)
  const [showVolume, setShowVolume] = useState(true)
  
  const [positions, setPositions] = useState<Position[]>([
    {
      id: "pos-1",
      symbol: "BTC-PERP",
      side: "long",
      size: 0.5,
      entryPrice: 83500,
      markPrice: 84235.5,
      pnl: 367.75,
      pnlPercent: 0.88,
      leverage: 10,
      margin: 4175,
      liqPrice: 75150,
      createdAt: Date.now() - 3600000,
    },
  ])
  
  const [orders, setOrders] = useState<Order[]>([
    {
      id: "ord-1",
      symbol: "BTC-PERP",
      side: "long",
      type: "limit",
      price: 82000,
      size: 0.2,
      filled: 0,
      status: "open",
      createdAt: Date.now() - 1800000,
    },
  ])
  
  const [history, setHistory] = useState<TradeHistory[]>([
    {
      id: "hist-1",
      symbol: "BTC-PERP",
      side: "long",
      type: "market",
      price: 83500,
      size: 0.5,
      fee: 8.35,
      pnl: null,
      createdAt: Date.now() - 3600000,
    },
  ])

const tradingViewSymbol = getTradingViewSymbol(selectedMarket.symbol, selectedMarket.quote)
  const symbol = selectedMarket.pair
  const currentPrice = selectedMarket.price
  
  const candles = useMemo(() => generateCandles(currentPrice, timeframe, 100), [currentPrice, timeframe])
  const orderBook = useMemo(() => generateOrderBook(currentPrice), [currentPrice])
  const recentTrades = useMemo(() => generateRecentTrades(currentPrice), [currentPrice])
  
  const spread = orderBook.asks[0]?.price - orderBook.bids[0]?.price || 0
  const spreadPercent = (spread / currentPrice) * 100

const showToast = useCallback((type: Toast["type"], title: string, message: string) => {
    const id = Date.now().toString()
    setToasts((prev) => [...prev, { id, type, title, message }])
    setTimeout(() => setToasts((prev) => prev.filter((t) => t.id !== id)), 4000)
  }, [])
  
  const dismissToast = useCallback((id: string) => {
    setToasts((prev) => prev.filter((t) => t.id !== id))
  }, [])
  
  const placeOrder = useCallback((orderData: Omit<Order, "id" | "filled" | "status" | "createdAt">) => {
    if (orderData.type === "market") {
      const newPosition: Position = {
        id: `pos-${Date.now()}`,
        symbol: orderData.symbol,
        side: orderData.side,
        size: orderData.size,
        entryPrice: orderData.price,
        markPrice: orderData.price,
        pnl: 0,
        pnlPercent: 0,
        leverage: 10,
        margin: (orderData.price * orderData.size) / 10,
        liqPrice: orderData.side === "long" ? orderData.price * 0.9 : orderData.price * 1.1,
        createdAt: Date.now(),
      }
      
      setPositions((prev) => [...prev, newPosition])
      setHistory((prev) => [{
        id: `hist-${Date.now()}`,
        symbol: orderData.symbol,
        side: orderData.side,
        type: "market",
        price: orderData.price,
        size: orderData.size,
        fee: orderData.price * orderData.size * 0.0005,
        pnl: null,
        createdAt: Date.now(),
      }, ...prev])
      
      showToast("success", "Order Executed", `${orderData.side.toUpperCase()} ${orderData.size} ${orderData.symbol} @ $${orderData.price.toLocaleString()}`)
    } else {
      setOrders((prev) => [...prev, {
        ...orderData,
        id: `ord-${Date.now()}`,
        filled: 0,
        status: "open",
        createdAt: Date.now(),
      }])
      showToast("success", "Limit Order Placed", `${orderData.side.toUpperCase()} ${orderData.size} ${orderData.symbol} @ $${orderData.price.toLocaleString()}`)
    }
  }, [showToast])
  
  const cancelOrder = useCallback((orderId: string) => {
    const order = orders.find((o) => o.id === orderId)
    if (!order) return
    setOrders((prev) => prev.filter((o) => o.id !== orderId))
    showToast("info", "Order Cancelled", `${order.side.toUpperCase()} ${order.size} ${order.symbol} @ $${order.price.toLocaleString()}`)
  }, [orders, showToast])
  
  const closePosition = useCallback((positionId: string) => {
    const position = positions.find((p) => p.id === positionId)
    if (!position) return
    
    setHistory((prev) => [{
      id: `hist-${Date.now()}`,
      symbol: position.symbol,
      side: position.side === "long" ? "short" : "long",
      type: "market",
      price: position.markPrice,
      size: position.size,
      fee: position.markPrice * position.size * 0.0005,
      pnl: position.pnl,
      createdAt: Date.now(),
    }, ...prev])
    
    setPositions((prev) => prev.filter((p) => p.id !== positionId))
    showToast("success", "Position Closed", `${position.symbol} ${position.side.toUpperCase()} ${position.size} | PnL: ${position.pnl >= 0 ? "+" : ""}$${position.pnl.toFixed(2)}`)
  }, [positions, showToast])

// Prefill from orderbook click - auto fill limit price
  const prefillFromOrderbook = useCallback((price: number) => {
    setOrderPrefill({ price })
  }, [])

// Prefill close position - auto fill size, side, reduce only
  // Accepts any position-like object (works with both trade-context and trading-context positions)
  const prefillClosePosition = useCallback((position: { markPrice: number; size: number; side: string; symbol: string }) => {
    const positionSide = position.side.toLowerCase()
    setOrderPrefill({
      price: position.markPrice,
      size: position.size,
      side: positionSide === "long" ? "sell" : "buy", // opposite side to close
      reduceOnly: true,
      symbol: position.symbol,
    })
  }, [])
  
  // ═══════════════════════════════════════════════════════════════════════════
  // MARKET CHANGE HANDLER (PER SPEC)
  // Per spec: Market = ROOT STATE, all components must react to market change
  // This triggers: chart update, orderbook update, trade form reset, leverage load
  // ═══════════════════════════════════════════════════════════════════════════
  const selectMarketByData = useCallback((market: MarketData) => {
    const prevSymbol = selectedMarket.symbol
    const newSymbol = market.symbol
    
    // Set new market
    setSelectedMarket(marketDataToInfo(market))
    setTradeMode(market.category.includes("spot") ? "spot" : "perps")
    
    // Clear any order prefill when market changes (per spec: reset form state)
    if (prevSymbol !== newSymbol) {
      setOrderPrefill(null)
    }
  }, [selectedMarket.symbol])

const toggleFavorite = (key: string) => {
    setFavorites((prev) => (prev.includes(key) ? prev.filter((s) => s !== key) : [...prev, key]))
  }

return (
    <TradeContext.Provider
      value={{
        selectedMarket, setSelectedMarket, tradingViewSymbol, selectMarketByData, favorites, toggleFavorite,
        tradeMode, setTradeMode, symbol, timeframe, setTimeframe, candles, currentPrice,
        bids: orderBook.bids, asks: orderBook.asks, spread, spreadPercent, recentTrades,
        showMA, setShowMA, showEMA, setShowEMA, showBB, setShowBB, showVolume, setShowVolume,
        positions, orders, history, placeOrder, cancelOrder, closePosition,
    toasts, showToast, dismissToast,
    orderPrefill, setOrderPrefill, prefillFromOrderbook, prefillClosePosition,
    }}
    >
    {children}
    </TradeContext.Provider>
  )
}

export function useTradeContext() {
  const context = useContext(TradeContext)
  if (!context) throw new Error("useTradeContext must be used within a TradeProvider")
  return context
}

export function useTrade() {
  const context = useTradeContext()
  return { ...context, currentMarket: context.selectedMarket }
}
[V0_FILE]typescriptreact:file="app/components/trade/bottom-panel.tsx" isMerged="true"
"use client"

import { useState, useCallback, useEffect } from "react"
import { useTradeContext } from "@/lib/trade-context"
import { ExternalLink, X } from "lucide-react"

type TabType = "positions" | "orders" | "history" | "assets"

export function BottomPanel() {
  const [activeTab, setActiveTab] = useState<TabType>("positions")
  const { 
    positions, 
    orders, 
    history, 
    cancelOrder, 
    closePosition,
    selectedMarket 
  } = useTradeContext()
  
  // Debug log
  useEffect(() => {
    console.log("[v0] BottomPanel context:", { 
      positionsCount: positions.length,
      ordersCount: orders.length,
      hasCancelOrder: typeof cancelOrder === "function",
      hasClosePosition: typeof closePosition === "function"
    })
  }, [positions, orders, cancelOrder, closePosition])
  
  const handleCancelOrder = useCallback((orderId: string) => {
    console.log("[v0] Cancelling order:", orderId)
    cancelOrder(orderId)
  }, [cancelOrder])
  
  const handleClosePosition = useCallback((positionId: string) => {
    console.log("[v0] Closing position:", positionId)
    closePosition(positionId)
  }, [closePosition])
  
  // Mock balance data
  const totalBalance = 10000
  const inPositions = positions.reduce((sum, p) => sum + p.margin, 0)
  const available = totalBalance - inPositions
  const unrealizedPnl = positions.reduce((sum, p) => sum + p.pnl, 0)
  
  return (
    <div className="h-[250px] border-t border-[#1e2329] bg-[#0b0e11] flex flex-col">
      {/* Tabs */}
      <div className="h-10 border-b border-[#1e2329] flex items-center px-4 gap-4 shrink-0">
        {(
          [
            { key: "positions", label: "Positions", count: positions.length },
            { key: "orders", label: "Open Orders", count: orders.filter(o => o.status === "open").length },
            { key: "history", label: "Trade History", count: null },
            { key: "assets", label: "Assets", count: null },
          ] as const
        ).map((tab) => (
          <button
            key={tab.key}
            onClick={() => setActiveTab(tab.key)}
            className={`flex items-center gap-1.5 text-xs font-medium transition-colors ${
              activeTab === tab.key
                ? "text-white"
                : "text-gray-500 hover:text-gray-300"
            }`}
          >
            {tab.label}
            {tab.count !== null && tab.count > 0 && (
              <span className={`px-1.5 py-0.5 rounded text-[10px] ${
                activeTab === tab.key ? "bg-[#F7931A]/20 text-[#F7931A]" : "bg-[#1e2329] text-gray-500"
              }`}>
                {tab.count}
              </span>
            )}
          </button>
        ))}
        
        {/* View Contract Link */}
        <div className="ml-auto">
          <a 
            href={`https://explorer.963x.io/address/${selectedMarket.contract}`}
            target="_blank"
            rel="noopener noreferrer"
            className="flex items-center gap-1 text-xs text-gray-500 hover:text-[#F7931A] transition-colors"
          >
            <span>View Contract</span>
            <ExternalLink className="w-3 h-3" />
          </a>
        </div>
      </div>
      
      {/* Content */}
      <div className="flex-1 overflow-auto">
        {activeTab === "positions" && (
          <table className="w-full text-xs">
            <thead>
              <tr className="text-gray-500 border-b border-[#1e2329]">
                <th className="text-left px-4 py-2 font-medium">Symbol</th>
                <th className="text-left px-4 py-2 font-medium">Size</th>
                <th className="text-left px-4 py-2 font-medium">Entry Price</th>
                <th className="text-left px-4 py-2 font-medium">Mark Price</th>
                <th className="text-left px-4 py-2 font-medium">Liq. Price</th>
                <th className="text-left px-4 py-2 font-medium">Margin</th>
                <th className="text-right px-4 py-2 font-medium">PnL (ROE%)</th>
                <th className="text-right px-4 py-2 font-medium">Actions</th>
              </tr>
            </thead>
            <tbody>
              {positions.length === 0 ? (
                <tr>
                  <td colSpan={8} className="text-center py-8 text-gray-500">
                    No open positions
                  </td>
                </tr>
              ) : (
                positions.map((pos) => (
                  <tr key={pos.id} className="border-b border-[#1e2329] hover:bg-[#1e2329]/50">
                    <td className="px-4 py-3">
                      <div className="flex items-center gap-2">
                        <span className="text-white font-medium">{pos.symbol}</span>
                        <span className={`text-[10px] px-1 py-0.5 rounded font-semibold ${
                          pos.side === "long" ? "bg-emerald-500/20 text-emerald-400" : "bg-red-500/20 text-red-400"
                        }`}>
                          {pos.leverage}x {pos.side.toUpperCase()}
                        </span>
                      </div>
                    </td>
                    <td className="px-4 py-3 text-white">{pos.size} {pos.symbol.split("-")[0]}</td>
                    <td className="px-4 py-3 text-white">${pos.entryPrice.toLocaleString()}</td>
                    <td className="px-4 py-3 text-white">${pos.markPrice.toLocaleString()}</td>
                    <td className="px-4 py-3 text-red-400">${pos.liqPrice.toLocaleString()}</td>
                    <td className="px-4 py-3 text-white">{pos.margin.toLocaleString()} USDT</td>
                    <td className="px-4 py-3 text-right">
                      <span className={pos.pnl >= 0 ? "text-emerald-400" : "text-red-400"}>
                        {pos.pnl >= 0 ? "+" : ""}${pos.pnl.toFixed(2)}
                      </span>
                      <span className={`ml-1 text-[10px] ${pos.pnlPercent >= 0 ? "text-emerald-400" : "text-red-400"}`}>
                        ({pos.pnlPercent >= 0 ? "+" : ""}{pos.pnlPercent.toFixed(2)}%)
                      </span>
                    </td>
                    <td className="px-4 py-3 text-right">
                      <button className="text-gray-400 hover:text-white mr-3 text-xs">TP/SL</button>
                      <button 
                        onClick={() => handleClosePosition(pos.id)}
                        className="px-2 py-1 bg-red-500/20 text-red-400 hover:bg-red-500/30 rounded text-xs font-medium transition-colors"
                      >
                        Close
                      </button>
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        )}
        
        {activeTab === "orders" && (
          <table className="w-full text-xs">
            <thead>
              <tr className="text-gray-500 border-b border-[#1e2329]">
                <th className="text-left px-4 py-2 font-medium">Symbol</th>
                <th className="text-left px-4 py-2 font-medium">Type</th>
                <th className="text-left px-4 py-2 font-medium">Side</th>
                <th className="text-left px-4 py-2 font-medium">Price</th>
                <th className="text-left px-4 py-2 font-medium">Amount</th>
                <th className="text-left px-4 py-2 font-medium">Filled</th>
                <th className="text-left px-4 py-2 font-medium">Time</th>
                <th className="text-right px-4 py-2 font-medium">Actions</th>
              </tr>
            </thead>
            <tbody>
              {orders.filter(o => o.status === "open").length === 0 ? (
                <tr>
                  <td colSpan={8} className="text-center py-8 text-gray-500">
                    No open orders
                  </td>
                </tr>
              ) : (
                orders.filter(o => o.status === "open").map((order) => (
                  <tr key={order.id} className="border-b border-[#1e2329] hover:bg-[#1e2329]/50">
                    <td className="px-4 py-3 text-white font-medium">{order.symbol}</td>
                    <td className="px-4 py-3 text-gray-400 capitalize">{order.type}</td>
                    <td className="px-4 py-3">
                      <span className={order.side === "long" ? "text-emerald-400" : "text-red-400"}>
                        {order.side.toUpperCase()}
                      </span>
                    </td>
                    <td className="px-4 py-3 text-white">${order.price.toLocaleString()}</td>
                    <td className="px-4 py-3 text-white">{order.size} {order.symbol.split("-")[0]}</td>
                    <td className="px-4 py-3 text-gray-400">{order.filled}/{order.size}</td>
                    <td className="px-4 py-3 text-gray-500">{new Date(order.createdAt).toLocaleTimeString()}</td>
                    <td className="px-4 py-3 text-right">
                      <button 
                        onClick={() => handleCancelOrder(order.id)}
                        className="px-2 py-1 bg-red-500/20 text-red-400 hover:bg-red-500/30 rounded text-xs font-medium transition-colors flex items-center gap-1 ml-auto"
                      >
                        <X className="w-3 h-3" />
                        Cancel
                      </button>
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        )}
        
        {activeTab === "history" && (
          <table className="w-full text-xs">
            <thead>
              <tr className="text-gray-500 border-b border-[#1e2329]">
                <th className="text-left px-4 py-2 font-medium">Symbol</th>
                <th className="text-left px-4 py-2 font-medium">Type</th>
                <th className="text-left px-4 py-2 font-medium">Side</th>
                <th className="text-left px-4 py-2 font-medium">Price</th>
                <th className="text-left px-4 py-2 font-medium">Amount</th>
                <th className="text-left px-4 py-2 font-medium">Fee</th>
                <th className="text-left px-4 py-2 font-medium">Realized PnL</th>
                <th className="text-left px-4 py-2 font-medium">Time</th>
              </tr>
            </thead>
            <tbody>
              {history.length === 0 ? (
                <tr>
                  <td colSpan={8} className="text-center py-8 text-gray-500">
                    No trade history
                  </td>
                </tr>
              ) : (
                history.map((trade) => (
                  <tr key={trade.id} className="border-b border-[#1e2329] hover:bg-[#1e2329]/50">
                    <td className="px-4 py-3 text-white font-medium">{trade.symbol}</td>
                    <td className="px-4 py-3 text-gray-400 capitalize">{trade.type}</td>
                    <td className="px-4 py-3">
                      <span className={trade.side === "long" ? "text-emerald-400" : "text-red-400"}>
                        {trade.side.toUpperCase()}
                      </span>
                    </td>
                    <td className="px-4 py-3 text-white">${trade.price.toLocaleString()}</td>
                    <td className="px-4 py-3 text-white">{trade.size} {trade.symbol.split("-")[0]}</td>
                    <td className="px-4 py-3 text-gray-400">{trade.fee.toFixed(2)} USDT</td>
                    <td className="px-4 py-3">
                      {trade.pnl !== null ? (
                        <span className={trade.pnl >= 0 ? "text-emerald-400" : "text-red-400"}>
                          {trade.pnl >= 0 ? "+" : ""}${trade.pnl.toFixed(2)}
                        </span>
                      ) : (
                        <span className="text-gray-500">--</span>
                      )}
                    </td>
                    <td className="px-4 py-3 text-gray-500">{new Date(trade.createdAt).toLocaleString()}</td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        )}
        
        {activeTab === "assets" && (
          <div className="p-4">
            <div className="grid grid-cols-4 gap-4">
              <div className="bg-[#1e2329] rounded-lg p-4">
                <div className="text-xs text-gray-500 mb-1">Total Balance</div>
                <div className="text-lg font-semibold text-white">{totalBalance.toLocaleString()} USDT</div>
              </div>
              <div className="bg-[#1e2329] rounded-lg p-4">
                <div className="text-xs text-gray-500 mb-1">Available</div>
                <div className="text-lg font-semibold text-white">{available.toLocaleString()} USDT</div>
              </div>
              <div className="bg-[#1e2329] rounded-lg p-4">
                <div className="text-xs text-gray-500 mb-1">In Positions</div>
                <div className="text-lg font-semibold text-[#F7931A]">{inPositions.toLocaleString()} USDT</div>
              </div>
              <div className="bg-[#1e2329] rounded-lg p-4">
                <div className="text-xs text-gray-500 mb-1">Unrealized PnL</div>
                <div className={`text-lg font-semibold ${unrealizedPnl >= 0 ? "text-emerald-400" : "text-red-400"}`}>
                  {unrealizedPnl >= 0 ? "+" : ""}{unrealizedPnl.toFixed(2)} USDT
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/app/swap/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { useWallet } from "@/lib/wallet-context"
import { LoginModal } from "@/components/ui/login-modal"
import { TermsModal } from "@/components/ui/terms-modal"
import { ArrowDown, Settings, ChevronDown, RefreshCw, Check, AlertCircle } from "lucide-react"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"
import { PoolLogo } from "@/components/ui/token-logos"

// All tokens available in the project
const tokens = [
  { symbol: "USDB", name: "963X Dollar", balance: 50000, price: 1.0 },
  { symbol: "963X", name: "963X Token", balance: 10000, price: 2.45 },
  { symbol: "sUSDB", name: "Staked USDB", balance: 5000, price: 1.085 },
  { symbol: "ve963X", name: "Vote Escrowed 963X", balance: 2500, price: 3.12 },
  { symbol: "WBTC", name: "Wrapped Bitcoin", balance: 2.3, price: 95000 },
  { symbol: "btBTC", name: "Babylon Bitcoin", balance: 10.5, price: 95200 },
  { symbol: "cbBTC", name: "Coinbase Bitcoin", balance: 0.8, price: 95100 },
  { symbol: "LBTC", name: "Lombard Bitcoin", balance: 1.2, price: 95050 },
  { symbol: "tBTC", name: "Threshold Bitcoin", balance: 0.5, price: 94900 },
  { symbol: "ETH", name: "Ethereum", balance: 15.5, price: 3200 },
  { symbol: "USDT", name: "Tether USD", balance: 25000, price: 1.0 },
  { symbol: "USDC", name: "USD Coin", balance: 30000, price: 1.0 },
]

export default function SwapPage() {
  const { wallet, connect } = useWallet()
  const isConnected = wallet.isConnected
  const [showLoginModal, setShowLoginModal] = useState(false)
  const [showTermsModal, setShowTermsModal] = useState(false)
  const [pendingAddress, setPendingAddress] = useState<string | null>(null)
  const [sellToken, setSellToken] = useState(tokens[0])
  const [buyToken, setBuyToken] = useState(tokens[4])
  const [sellAmount, setSellAmount] = useState("")
  const [buyAmount, setBuyAmount] = useState("")
  const [showSellDropdown, setShowSellDropdown] = useState(false)
  const [showBuyDropdown, setShowBuyDropdown] = useState(false)
  const [slippage, setSlippage] = useState("0.5")
  const [showSettings, setShowSettings] = useState(false)

// Action states
  const [isSwapping, setIsSwapping] = useState(false)
  const [swapSuccess, setSwapSuccess] = useState(false)
  const [swapError, setSwapError] = useState("")
  const [successMessage, setSuccessMessage] = useState("")

// Login handlers
  const handleLoginSuccess = (address: string) => {
    setPendingAddress(address)
    setShowLoginModal(false)
    setShowTermsModal(true)
  }
  
  const handleTermsAccept = () => {
    if (pendingAddress) {
      connect(pendingAddress)
      setPendingAddress(null)
    }
    setShowTermsModal(false)
  }
  
  // Swap handler
  const handleSwap = async () => {
    if (!isConnected) {
      setShowLoginModal(true)
      return
    }

if (!sellAmount || Number.parseFloat(sellAmount) <= 0) return

setIsSwapping(true)
    setSwapError("")

try {
      // Simulate swap transaction
      await new Promise(resolve => setTimeout(resolve, 2000))

setSuccessMessage(`Successfully swapped ${sellAmount} ${sellToken.symbol} for ${buyAmount} ${buyToken.symbol}!`)
      setSwapSuccess(true)
      setSellAmount("")
      setBuyAmount("")

setTimeout(() => {
        setSwapSuccess(false)
        setSuccessMessage("")
      }, 5000)
    } catch (error) {
      setSwapError("Swap failed. Please try again.")
    } finally {
      setIsSwapping(false)
    }
  }

// Calculate buy amount based on sell amount
  const calculateBuyAmount = (amount: string) => {
    if (!amount || isNaN(Number.parseFloat(amount))) return ""
    const sellValue = Number.parseFloat(amount) * sellToken.price
    return (sellValue / buyToken.price).toFixed(6)
  }

const handleSellAmountChange = (value: string) => {
    const cleaned = value.replace(/[^0-9.]/g, "")
    setSellAmount(cleaned)
    setBuyAmount(calculateBuyAmount(cleaned))
  }

const handleSwapTokens = () => {
    const temp = sellToken
    setSellToken(buyToken)
    setBuyToken(temp)
    setSellAmount(buyAmount)
    setBuyAmount(sellAmount)
  }

const TokenSelector = ({
    selected,
    onSelect,
    isOpen,
    setIsOpen,
    excludeToken,
  }: {
    selected: (typeof tokens)[0]
    onSelect: (token: (typeof tokens)[0]) => void
    isOpen: boolean
    setIsOpen: (open: boolean) => void
    excludeToken: string
  }) => (
    <div className="relative">
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="flex items-center gap-2 px-3 py-2 bg-[#1a1a24] hover:bg-[#252530] rounded-full transition-colors"
      >
        <PoolLogo token1={selected.symbol} className="w-6 h-6" />
        <span className="font-medium text-white">{selected.symbol}</span>
        <ChevronDown className={cn("w-4 h-4 text-gray-400 transition-transform", isOpen && "rotate-180")} />
      </button>

{isOpen && (
        <div className="absolute top-full left-0 mt-2 w-64 bg-[#12121a] border border-white/10 rounded-xl shadow-2xl z-50 max-h-80 overflow-y-auto scrollbar-hide">
          <div className="p-2">
            {tokens
              .filter((t) => t.symbol !== excludeToken)
              .map((token) => (
                <button
                  key={token.symbol}
                  onClick={() => {
                    onSelect(token)
                    setIsOpen(false)
                  }}
                  className="w-full flex items-center gap-3 p-3 rounded-lg hover:bg-white/5 transition-colors"
                >
                  <PoolLogo token1={token.symbol} className="w-8 h-8" />
                  <div className="text-left flex-1">
                    <div className="font-medium text-white">{token.symbol}</div>
                    <div className="text-xs text-gray-500">{token.name}</div>
                  </div>
                  <div className="text-right">
                    <div className="text-sm text-white">{token.balance.toLocaleString()}</div>
                    <div className="text-xs text-gray-500">${(token.balance * token.price).toLocaleString()}</div>
                  </div>
                </button>
              ))}
          </div>
        </div>
      )}
    </div>
  )

return (
    <div className="min-h-screen bg-[#0a0a0f] pt-4">
      <main className="max-w-lg mx-auto px-4 py-12">
        <div className="text-center mb-8">
          <h1 className="text-3xl font-bold text-white mb-2">Swap</h1>
          <p className="text-gray-400">Trade tokens instantly</p>
        </div>

{/* Swap Card */}
        <div className="bg-[#12121a] rounded-2xl border border-white/5 p-6">
          {/* Settings */}
          <div className="flex justify-end mb-4">
            <button
              onClick={() => setShowSettings(!showSettings)}
              className="p-2 rounded-lg hover:bg-white/5 transition-colors"
            >
              <Settings className="w-5 h-5 text-gray-400" />
            </button>
          </div>

{showSettings && (
            <div className="mb-4 p-4 bg-[#0a0a0f] rounded-xl">
              <div className="flex items-center justify-between mb-2">
                <span className="text-sm text-gray-400">Slippage Tolerance</span>
                <div className="flex gap-2">
                  {["0.1", "0.5", "1.0"].map((val) => (
                    <button
                      key={val}
                      onClick={() => setSlippage(val)}
                      className={cn(
                        "px-3 py-1 text-sm rounded-lg",
                        slippage === val ? "bg-[#F7931A] text-black" : "bg-white/5 text-gray-400",
                      )}
                    >
                      {val}%
                    </button>
                  ))}
                </div>
              </div>
            </div>
          )}

{/* Sell Section */}
          <div className="bg-[#0a0a0f] rounded-xl p-4 mb-2">
            <div className="flex justify-between items-center mb-3">
              <span className="text-sm text-gray-400">Sell</span>
              <span className="text-sm text-gray-400">
                Balance: {sellToken.balance.toLocaleString()} {sellToken.symbol}
              </span>
            </div>
            <div className="flex items-center gap-4">
              <TokenSelector
                selected={sellToken}
                onSelect={setSellToken}
                isOpen={showSellDropdown}
                setIsOpen={setShowSellDropdown}
                excludeToken={buyToken.symbol}
              />
              <div className="flex-1 text-right">
                <input
                  type="text"
                  inputMode="decimal"
                  value={sellAmount}
                  onChange={(e) => handleSellAmountChange(e.target.value)}
                  placeholder="0"
                  className="w-full bg-transparent text-3xl text-white text-right outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
                />
                <div className="text-sm text-gray-500">
                  ~${sellAmount ? (Number.parseFloat(sellAmount) * sellToken.price).toLocaleString() : "0.0"}
                </div>
              </div>
            </div>
            <div className="flex justify-end mt-2">
              <button
                onClick={() => handleSellAmountChange(sellToken.balance.toString())}
                className="text-xs text-[#F7931A] hover:underline"
              >
                MAX
              </button>
            </div>
          </div>

{/* Swap Button */}
          <div className="flex justify-center -my-3 relative z-10">
            <button
              onClick={handleSwapTokens}
              className="w-10 h-10 bg-[#1a1a24] border-4 border-[#0a0a0f] rounded-xl flex items-center justify-center hover:bg-[#252530] transition-colors"
            >
              <ArrowDown className="w-5 h-5 text-gray-400" />
            </button>
          </div>

{/* Buy Section */}
          <div className="bg-[#0a0a0f] rounded-xl p-4 mt-2">
            <div className="flex justify-between items-center mb-3">
              <span className="text-sm text-gray-400">Buy</span>
              <span className="text-sm text-gray-400">
                Balance: {buyToken.balance.toLocaleString()} {buyToken.symbol}
              </span>
            </div>
            <div className="flex items-center gap-4">
              <TokenSelector
                selected={buyToken}
                onSelect={setBuyToken}
                isOpen={showBuyDropdown}
                setIsOpen={setShowBuyDropdown}
                excludeToken={sellToken.symbol}
              />
              <div className="flex-1 text-right">
                <input
                  type="text"
                  inputMode="decimal"
                  value={buyAmount}
                  readOnly
                  placeholder="0"
                  className="w-full bg-transparent text-3xl text-white text-right outline-none"
                />
                <div className="text-sm text-gray-500">
                  ~${buyAmount ? (Number.parseFloat(buyAmount) * buyToken.price).toLocaleString() : "0.0"}
                </div>
              </div>
            </div>
          </div>

{/* Rate Info */}
          {sellAmount && buyAmount && (
            <div className="mt-4 p-3 bg-[#0a0a0f] rounded-xl">
              <div className="flex justify-between text-sm">
                <span className="text-gray-400">Rate</span>
                <span className="text-white">
                  1 {sellToken.symbol} = {(sellToken.price / buyToken.price).toFixed(6)} {buyToken.symbol}
                </span>
              </div>
              <div className="flex justify-between text-sm mt-2">
                <span className="text-gray-400">Price Impact</span>
                <span className="text-emerald-400">{"<"}0.01%</span>
              </div>
              <div className="flex justify-between text-sm mt-2">
                <span className="text-gray-400">Min. received</span>
                <span className="text-white">
                  {(Number.parseFloat(buyAmount) * (1 - Number.parseFloat(slippage) / 100)).toFixed(6)}{" "}
                  {buyToken.symbol}
                </span>
              </div>
            </div>
          )}

{/* Swap Button */}
          <Button
            className="w-full mt-4 bg-[#F7931A] hover:bg-[#F7931A]/90 text-black font-semibold h-14 text-lg"
            disabled={isSwapping || (!isConnected ? false : !sellAmount)}
            onClick={handleSwap}
          >
            {isSwapping ? (
              <span className="flex items-center gap-2">
                <RefreshCw className="w-5 h-5 animate-spin" />
                Swapping...
              </span>
            ) : !isConnected ? (
              "Connect Wallet"
            ) : !sellAmount ? (
              "Enter amount"
            ) : (
              `Swap ${sellAmount} ${sellToken.symbol}`
            )}
          </Button>

{/* Success Message */}
          {swapSuccess && (
            <div className="mt-4 p-4 bg-emerald-500/20 border border-emerald-500/30 rounded-xl flex items-center gap-3">
              <div className="w-8 h-8 rounded-full bg-emerald-500/30 flex items-center justify-center">
                <Check className="w-5 h-5 text-emerald-400" />
              </div>
              <div>
                <p className="text-emerald-400 font-medium">Swap Successful!</p>
                <p className="text-sm text-emerald-400/80">{successMessage}</p>
              </div>
            </div>
          )}

{/* Error Message */}
          {swapError && (
            <div className="mt-4 p-4 bg-red-500/20 border border-red-500/30 rounded-xl flex items-center gap-3">
              <div className="w-8 h-8 rounded-full bg-red-500/30 flex items-center justify-center">
                <AlertCircle className="w-5 h-5 text-red-400" />
              </div>
              <div>
                <p className="text-red-400 font-medium">Swap Failed</p>
                <p className="text-sm text-red-400/80">{swapError}</p>
              </div>
            </div>
          )}
        </div>

{/* Info Section */}
        <div className="mt-6 text-center">
          <p className="text-xs text-gray-500">
            Powered by 963X DEX Aggregator. Best rates across multiple liquidity sources.
          </p>
        </div>
      </main>

{/* Login Modal */}
      <LoginModal 
        isOpen={showLoginModal} 
        onClose={() => setShowLoginModal(false)} 
        onSuccess={handleLoginSuccess} 
      />
      <TermsModal 
        isOpen={showTermsModal} 
        onAccept={handleTermsAccept} 
        onDecline={() => { setPendingAddress(null); setShowTermsModal(false) }} 
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/language-context.tsx" isMerged="true"
"use client"

import { createContext, useContext, useState, useCallback, useEffect, type ReactNode } from "react"
import { translations, type TranslationKey, type Language } from "./translations"

export type { Language, TranslationKey }

export interface LanguageOption {
  code: Language
  name: string
  nativeName: string
}

export const LANGUAGES: LanguageOption[] = [
  { code: "en", name: "English", nativeName: "English" },
  { code: "zh-CN", name: "Chinese (Simplified)", nativeName: "简体中文" },
  { code: "zh-TW", name: "Chinese (Traditional)", nativeName: "繁體中文" },
  { code: "ja", name: "Japanese", nativeName: "日本語" },
  { code: "ru", name: "Russian", nativeName: "Русский" },
  { code: "de", name: "German", nativeName: "Deutsch" },
  { code: "fr", name: "French", nativeName: "Français" },
  { code: "es", name: "Spanish", nativeName: "Español" },
  { code: "it", name: "Italian", nativeName: "Italiano" },
]

interface LanguageContextType {
  language: Language
  setLanguage: (lang: Language) => void
  t: (key: TranslationKey) => string
  languages: LanguageOption[]
}

const LanguageContext = createContext<LanguageContextType | undefined>(undefined)

export function LanguageProvider({ children }: { children: ReactNode }) {
  const [language, setLanguageState] = useState<Language>("en")

useEffect(() => {
    // Load saved language from localStorage
    const saved = localStorage.getItem("963x-language") as Language | null
    if (saved && translations[saved]) {
      setLanguageState(saved)
    }
  }, [])

const setLanguage = useCallback((lang: Language) => {
    setLanguageState(lang)
    localStorage.setItem("963x-language", lang)
  }, [])

const t = useCallback(
    (key: TranslationKey): string => {
      return translations[language]?.[key] || translations.en[key] || key
    },
    [language]
  )

return (
    <LanguageContext.Provider
      value={{
        language,
        setLanguage,
        t,
        languages: LANGUAGES,
      }}
    >
      {children}
    </LanguageContext.Provider>
  )
}

export function useLanguage() {
  const context = useContext(LanguageContext)
  if (context === undefined) {
    throw new Error("useLanguage must be used within a LanguageProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="components/ui/language-dropdown.tsx" isMerged="true"
"use client"

import { useState, useRef, useEffect } from "react"
import { Globe, Check } from "lucide-react"
import { useLanguage, type Language } from "@/lib/language-context"
import { cn } from "@/lib/utils"

export function LanguageDropdown() {
  const [isOpen, setIsOpen] = useState(false)
  const dropdownRef = useRef<HTMLDivElement>(null)
  const { language, setLanguage, languages } = useLanguage()

useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
        setIsOpen(false)
      }
    }
    document.addEventListener("mousedown", handleClickOutside)
    return () => document.removeEventListener("mousedown", handleClickOutside)
  }, [])

const handleSelectLanguage = (lang: Language) => {
    setLanguage(lang)
    setIsOpen(false)
  }

return (
    <div className="relative" ref={dropdownRef}>
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="p-2 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors"
      >
        <Globe className="w-5 h-5" />
      </button>

{isOpen && (
        <div className="absolute right-0 mt-2 w-44 bg-[#12121a] border border-white/10 rounded-xl shadow-xl z-50 overflow-hidden py-1">
          {languages.map((lang) => (
            <button
              key={lang.code}
              onClick={() => handleSelectLanguage(lang.code)}
              className={cn(
                "w-full flex items-center justify-between px-4 py-2.5 text-sm transition-colors",
                language === lang.code
                  ? "text-white bg-white/5"
                  : "text-gray-400 hover:text-white hover:bg-white/5"
              )}
            >
              <span>{lang.nativeName}</span>
              {language === lang.code && <Check className="w-4 h-4 text-[#50d2c1]" />}
            </button>
          ))}
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/notification-dropdown.tsx" isMerged="true"
"use client"

import { useState, useRef, useEffect } from "react"
import { Bell, X, Check, CheckCheck, Trash2, TrendingUp, ArrowDownToLine, ArrowUpFromLine, ArrowLeftRight, Info, AlertTriangle, CheckCircle, XCircle, Coins, Target, RefreshCw } from "lucide-react"
import { useNotifications, type Notification, type NotificationType } from "@/lib/notification-context"
import { useLanguage } from "@/lib/language-context"
import { cn } from "@/lib/utils"

const notificationIcons: Record<NotificationType, React.ReactNode> = {
  success: <CheckCircle className="w-4 h-4 text-emerald-400" />,
  error: <XCircle className="w-4 h-4 text-red-400" />,
  warning: <AlertTriangle className="w-4 h-4 text-yellow-400" />,
  info: <Info className="w-4 h-4 text-blue-400" />,
  trade: <TrendingUp className="w-4 h-4 text-[#50d2c1]" />,
  deposit: <ArrowDownToLine className="w-4 h-4 text-emerald-400" />,
  withdraw: <ArrowUpFromLine className="w-4 h-4 text-orange-400" />,
  transfer: <ArrowLeftRight className="w-4 h-4 text-blue-400" />,
  staking: <Coins className="w-4 h-4 text-purple-400" />,
  prediction: <Target className="w-4 h-4 text-yellow-400" />,
  swap: <RefreshCw className="w-4 h-4 text-teal-400" />,
}

function formatTimeAgo(date: Date, t: (key: any) => string): string {
  const now = new Date()
  const diffMs = now.getTime() - date.getTime()
  const diffMins = Math.floor(diffMs / 60000)
  const diffHours = Math.floor(diffMs / 3600000)
  const diffDays = Math.floor(diffMs / 86400000)

if (diffMins < 1) return t("now")
  if (diffMins < 60) return `${diffMins} ${t("minutesAgo")}`
  if (diffHours < 24) return `${diffHours} ${t("hoursAgo")}`
  return `${diffDays} ${t("daysAgo")}`
}

export function NotificationDropdown() {
  const [isOpen, setIsOpen] = useState(false)
  const dropdownRef = useRef<HTMLDivElement>(null)
  const { notifications, unreadCount, markAsRead, markAllAsRead, clearNotification, clearAll } = useNotifications()
  const { t } = useLanguage()

return (
    <div className="relative" ref={dropdownRef}>
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="relative p-2 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors"
      >
        <Bell className="w-5 h-5" />
        {unreadCount > 0 && (
          <span className="absolute -top-0.5 -right-0.5 w-4 h-4 bg-red-500 rounded-full text-[10px] font-bold text-white flex items-center justify-center">
            {unreadCount > 9 ? "9+" : unreadCount}
          </span>
        )}
      </button>

{isOpen && (
        <div className="absolute right-0 mt-2 w-80 bg-[#12121a] border border-white/10 rounded-xl shadow-xl z-50 overflow-hidden">
          {/* Header */}
          <div className="flex items-center justify-between px-4 py-3 border-b border-white/10">
            <h3 className="text-sm font-semibold text-white">{t("notifications")}</h3>
            <button
              onClick={() => setIsOpen(false)}
              className="p-1 rounded hover:bg-white/10 text-gray-400 hover:text-white transition-colors"
            >
              <X className="w-4 h-4" />
            </button>
          </div>

{/* Actions */}
          {notifications.length > 0 && (
            <div className="flex items-center gap-2 px-4 py-2 border-b border-white/5">
              <button
                onClick={markAllAsRead}
                className="flex items-center gap-1.5 text-xs text-gray-400 hover:text-white transition-colors"
              >
                <CheckCheck className="w-3.5 h-3.5" />
                {t("markAllRead")}
              </button>
              <span className="text-gray-600">|</span>
              <button
                onClick={clearAll}
                className="flex items-center gap-1.5 text-xs text-gray-400 hover:text-red-400 transition-colors"
              >
                <Trash2 className="w-3.5 h-3.5" />
                {t("clearAll")}
              </button>
            </div>
          )}

{/* Notification List */}
          <div className="max-h-[320px] overflow-y-auto scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent hover:scrollbar-thumb-white/20" style={{ scrollbarWidth: 'thin', scrollbarColor: 'rgba(255,255,255,0.1) transparent' }}>
            {notifications.length === 0 ? (
              <div className="flex flex-col items-center justify-center py-12 text-gray-500">
                <Bell className="w-10 h-10 mb-3 opacity-30" />
                <p className="text-sm">{t("noNotifications")}</p>
              </div>
            ) : (
              notifications.map((notification) => (
                <NotificationItem
                  key={notification.id}
                  notification={notification}
                  onRead={() => markAsRead(notification.id)}
                  onClear={() => clearNotification(notification.id)}
                  t={t}
                />
              ))
            )}
          </div>
        </div>
      )}
    </div>
  )
}

function NotificationItem({
  notification,
  onRead,
  onClear,
  t,
}: {
  notification: Notification
  onRead: () => void
  onClear: () => void
  t: (key: any) => string
}) {
  return (
    <div
      className={cn(
        "flex items-start gap-3 px-4 py-3 border-b border-white/5 hover:bg-white/5 transition-colors cursor-pointer group",
        !notification.read && "bg-[#50d2c1]/5"
      )}
      onClick={onRead}
    >
      <div className="mt-0.5">{notificationIcons[notification.type]}</div>
      <div className="flex-1 min-w-0">
        <p className={cn("text-sm font-medium", notification.read ? "text-gray-300" : "text-white")}>
          {notification.title}
        </p>
        <p className="text-xs text-gray-500 mt-0.5 line-clamp-2">{notification.message}</p>
        <p className="text-[10px] text-gray-600 mt-1">{formatTimeAgo(notification.timestamp, t)}</p>
      </div>
      <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
        {!notification.read && (
          <button
            onClick={(e) => {
              e.stopPropagation()
              onRead()
            }}
            className="p-1 rounded hover:bg-white/10 text-gray-400 hover:text-emerald-400"
          >
            <Check className="w-3.5 h-3.5" />
          </button>
        )}
        <button
          onClick={(e) => {
            e.stopPropagation()
            onClear()
          }}
          className="p-1 rounded hover:bg-white/10 text-gray-400 hover:text-red-400"
        >
          <X className="w-3.5 h-3.5" />
        </button>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="lib/translations.ts" isMerged="true"
// Comprehensive translations for 963x platform
export const translations = {
  en: {
    // Navigation
    dashboard: "Dashboard",
    trade: "Trade",
    prediction: "Prediction",
    portfolio: "Portfolio",
    swap: "Swap",
    staking: "Staking",
    earn: "Earn",
    lending: "Lending",
    aiTrading: "AI Trading",
    bots: "Bots",
    leaderboard: "Leaderboard",
    referral: "Referral",
    points: "Points",
    
    // API
    apiManagement: "API Management",
    createApiAccount: "Create API Account",
    accountName: "Account Name",
    accountId: "Account ID",
    l2Key: "L2 Key",
    createdAt: "Created at",
    privateKey: "Private Key",
    publicKey: "Public Key",
    settings: "Settings",
    
    // Wallet
    connectWallet: "Connect Wallet",
    disconnect: "Disconnect",
    deposit: "Deposit",
    withdraw: "Withdraw",
    transfer: "Transfer",
    balance: "Balance",
    available: "Available",
    inPosition: "In Position",
    walletBalance: "Wallet Balance",
    totalBalance: "Total Balance",
    
    // Trading
    buy: "Buy",
    sell: "Sell",
    long: "Long",
    short: "Short",
    buyLong: "Buy / Long",
    sellShort: "Sell / Short",
    market: "Market",
    limit: "Limit",
    stopLoss: "Stop Loss",
    takeProfit: "Take Profit",
    leverage: "Leverage",
    size: "Size",
    price: "Price",
    amount: "Amount",
    total: "Total",
    fee: "Fee",
    placeOrder: "Place Order",
    openOrders: "Open Orders",
    orderHistory: "Order History",
    positions: "Positions",
    cross: "Cross",
    isolated: "Isolated",
    classic: "Classic",
    pro: "Pro",
    reduceOnly: "Reduce Only",
    availableToTrade: "Available to Trade",
    currentPosition: "Current Position",
    liquidationPrice: "Liquidation Price",
    entryPrice: "Entry Price",
    markPrice: "Mark Price",
    pnl: "PnL",
    unrealizedPnl: "Unrealized PnL",
    realizedPnl: "Realized PnL",
    margin: "Margin",
    orderValue: "Order Value",
    
    // Swap
    swapTokens: "Swap Tokens",
    tradeTokensInstantly: "Trade tokens instantly",
    from: "From",
    to: "To",
    swapFee: "Swap Fee",
    priceImpact: "Price Impact",
    minimumReceived: "Minimum Received",
    route: "Route",
    slippage: "Slippage",
    
    // Prediction
    predictionMarket: "Prediction Market",
    tradingBasedOnRealWorld: "Trading based on real-world events and outcomes",
    trending: "Trending",
    favorite: "Favorite",
    latest: "Latest",
    crypto: "Crypto",
    finance: "Finance",
    technology: "Technology",
    world: "World",
    economy: "Economy",
    culture: "Culture",
    politics: "Politics",
    geopolitics: "Geopolitics",
    tradingVolume: "Trading Volume",
    allTrades: "All Trades",
    myTrades: "My Trades",
    
    // Staking
    stakingTitle: "Staking",
    stakeYourTokens: "Stake your tokens to earn rewards",
    totalStaked: "Total Staked",
    yourStake: "Your Stake",
    rewards: "Rewards",
    apr: "APR",
    apy: "APY",
    stake: "Stake",
    unstake: "Unstake",
    claimRewards: "Claim Rewards",
    lockPeriod: "Lock Period",
    
    // Earn / Vaults
    vaults: "Vaults",
    earnYield: "Earn yield on your crypto",
    tvl: "TVL",
    dailyYield: "Daily Yield",
    weeklyYield: "Weekly Yield",
    depositToVault: "Deposit to Vault",
    withdrawFromVault: "Withdraw from Vault",
    yourDeposit: "Your Deposit",
    
    // Lending
    lendingMarkets: "Lending Markets",
    supplyAndBorrow: "Supply and borrow crypto assets",
    supply: "Supply",
    borrow: "Borrow",
    repay: "Repay",
    supplyApy: "Supply APY",
    borrowApy: "Borrow APY",
    collateral: "Collateral",
    liquidity: "Liquidity",
    utilization: "Utilization",
    maxLtv: "Max LTV",
    healthFactor: "Health Factor",
    
    // AI Trading
    aiTradingTitle: "AI Trading",
    automatedStrategies: "Automated trading strategies powered by AI",
    activateBot: "Activate Bot",
    deactivateBot: "Deactivate Bot",
    botPerformance: "Bot Performance",
    totalProfit: "Total Profit",
    winRate: "Win Rate",
    totalTrades: "Total Trades",
    
    // Bots
    tradingBots: "Trading Bots",
    createBot: "Create Bot",
    myBots: "My Bots",
    botStatus: "Bot Status",
    running: "Running",
    stopped: "Stopped",
    
    // Leaderboard
    topTraders: "Top Traders",
    rank: "Rank",
    trader: "Trader",
    volume: "Volume",
    profit: "Profit",
    trades: "Trades",
    
    // Referral
    referralProgram: "Referral Program",
    inviteFriends: "Invite friends and earn rewards",
    yourReferralCode: "Your Referral Code",
    totalReferrals: "Total Referrals",
    totalEarnings: "Total Earnings",
    copyLink: "Copy Link",
    
    // Points
    pointsTitle: "Points",
    earnPointsByTrading: "Earn points by trading",
    totalPoints: "Total Points",
    dailyTasks: "Daily Tasks",
    weeklyTasks: "Weekly Tasks",
    
    // Dashboard
    welcomeBack: "Welcome Back",
    accountOverview: "Account Overview",
    recentActivity: "Recent Activity",
    marketOverview: "Market Overview",
    topGainers: "Top Gainers",
    topLosers: "Top Losers",
    
    // Notifications
    notifications: "Notifications",
    noNotifications: "You have no notifications",
    markAllRead: "Mark all as read",
    clearAll: "Clear all",
    newNotification: "New Notification",
    
    // Notification messages
    orderPlaced: "Order Placed",
    orderFilled: "Order Filled",
    orderCancelled: "Order Cancelled",
    depositSuccess: "Deposit Successful",
    withdrawSuccess: "Withdrawal Successful",
    transferSuccess: "Transfer Successful",
    stakingSuccess: "Staking Successful",
    unstakingSuccess: "Unstaking Successful",
    swapSuccess: "Swap Successful",
    predictionPlaced: "Prediction Placed",
    
    // Common
    cancel: "Cancel",
    confirm: "Confirm",
    close: "Close",
    save: "Save",
    edit: "Edit",
    delete: "Delete",
    search: "Search",
    filter: "Filter",
    sort: "Sort",
    loading: "Loading...",
    error: "Error",
    success: "Success",
    warning: "Warning",
    info: "Info",
    yes: "Yes",
    no: "No",
    max: "MAX",
    min: "MIN",
    all: "All",
    none: "None",
    back: "Back",
    next: "Next",
    submit: "Submit",
    reset: "Reset",
    refresh: "Refresh",
    view: "View",
    details: "Details",
    more: "More",
    less: "Less",
    show: "Show",
    hide: "Hide",
    copy: "Copy",
    copied: "Copied!",
    share: "Share",
    download: "Download",
    upload: "Upload",
    
    // Time
    now: "Just now",
    minutesAgo: "minutes ago",
    hoursAgo: "hours ago",
    daysAgo: "days ago",
    daily: "Daily",
    weekly: "Weekly",
    monthly: "Monthly",
    yearly: "Yearly",
    
    // Status
    active: "Active",
    inactive: "Inactive",
    pending: "Pending",
    completed: "Completed",
    failed: "Failed",
    processing: "Processing",
    confirmed: "Confirmed",
    cancelled: "Cancelled",
    
    // Numbers/Stats
    change24h: "24h Change",
    high24h: "24h High",
    low24h: "24h Low",
    volume24h: "24h Volume",
    
    // Portfolio
    overview: "Overview",
    perpetuals: "Perpetuals",
    spot: "Spot",
    assets: "Assets",
    history: "History",
    
    // Errors
    insufficientBalance: "Insufficient balance",
    invalidAmount: "Invalid amount",
    networkError: "Network error",
    tryAgain: "Try again",
    
    // Settings
    settings: "Settings",
    language: "Language",
    theme: "Theme",
    darkMode: "Dark Mode",
    lightMode: "Light Mode",
  },
  "zh-CN": {
    // Navigation
    dashboard: "仪表板",
    trade: "交易",
    prediction: "预测",
    portfolio: "投资组合",
    swap: "兑换",
    staking: "质押",
    earn: "赚取",
    lending: "借贷",
    aiTrading: "AI交易",
    bots: "机器人",
    leaderboard: "排行榜",
    referral: "推荐",
    points: "积分",
    
    // Wallet
    connectWallet: "连接钱包",
    disconnect: "断开连接",
    deposit: "存款",
    withdraw: "取款",
    transfer: "转账",
    balance: "余额",
    available: "可用",
    inPosition: "持仓中",
    walletBalance: "钱包余额",
    totalBalance: "总余额",
    
    // Trading
    buy: "买入",
    sell: "卖出",
    long: "做多",
    short: "做空",
    buyLong: "买入/做多",
    sellShort: "卖出/做空",
    market: "市价",
    limit: "限价",
    stopLoss: "止损",
    takeProfit: "止盈",
    leverage: "杠杆",
    size: "数量",
    price: "价格",
    amount: "金额",
    total: "总计",
    fee: "手续费",
    placeOrder: "下单",
    openOrders: "当前订单",
    orderHistory: "历史订单",
    positions: "持仓",
    cross: "全仓",
    isolated: "逐仓",
    classic: "经典",
    pro: "专业",
    reduceOnly: "只减仓",
    availableToTrade: "可交易",
    currentPosition: "当前持仓",
    liquidationPrice: "清算价格",
    entryPrice: "入场价格",
    markPrice: "标记价格",
    pnl: "盈亏",
    unrealizedPnl: "未实现盈亏",
    realizedPnl: "已实现盈亏",
    margin: "保证金",
    orderValue: "订单价值",
    
    // Swap
    swapTokens: "代币兑换",
    tradeTokensInstantly: "即时交易代币",
    from: "从",
    to: "到",
    swapFee: "兑换费用",
    priceImpact: "价格影响",
    minimumReceived: "最小接收",
    route: "路由",
    slippage: "滑点",
    
    // Prediction
    predictionMarket: "预测市场",
    tradingBasedOnRealWorld: "基于现实世界事件和结果的交易",
    trending: "热门",
    favorite: "收藏",
    latest: "最新",
    crypto: "加密货币",
    finance: "金融",
    technology: "科技",
    world: "世界",
    economy: "经济",
    culture: "文化",
    politics: "政治",
    geopolitics: "地缘政治",
    tradingVolume: "交易量",
    allTrades: "所有交易",
    myTrades: "我的交易",
    
    // Staking
    stakingTitle: "质押",
    stakeYourTokens: "质押代币以赚取奖励",
    totalStaked: "总质押量",
    yourStake: "您的质押",
    rewards: "奖励",
    apr: "年化收益率",
    apy: "复合年化收益率",
    stake: "质押",
    unstake: "解除质押",
    claimRewards: "领取奖励",
    lockPeriod: "锁定期",
    
    // Earn / Vaults
    vaults: "金库",
    earnYield: "赚取加密货币收益",
    tvl: "总锁仓量",
    dailyYield: "日收益",
    weeklyYield: "周收益",
    depositToVault: "存入金库",
    withdrawFromVault: "从金库提取",
    yourDeposit: "您的存款",
    
    // Lending
    lendingMarkets: "借贷市场",
    supplyAndBorrow: "供应和借入加密资产",
    supply: "供应",
    borrow: "借入",
    repay: "偿还",
    supplyApy: "供应年化",
    borrowApy: "借入年化",
    collateral: "抵押品",
    liquidity: "流动性",
    utilization: "利用率",
    maxLtv: "最大抵押率",
    healthFactor: "健康因子",
    
    // AI Trading
    aiTradingTitle: "AI交易",
    automatedStrategies: "AI驱动的自动化交易策略",
    activateBot: "激活机器人",
    deactivateBot: "停用机器人",
    botPerformance: "机器人表现",
    totalProfit: "总利润",
    winRate: "胜率",
    totalTrades: "总交易次数",
    
    // Bots
    tradingBots: "交易机器人",
    createBot: "创建机器人",
    myBots: "我的机器人",
    botStatus: "机器人状态",
    running: "运行中",
    stopped: "已停止",
    
    // Leaderboard
    topTraders: "顶级交易员",
    rank: "排名",
    trader: "交易员",
    volume: "交易量",
    profit: "利润",
    trades: "交易次数",
    
    // Referral
    referralProgram: "推荐计划",
    inviteFriends: "邀请朋友并获得奖励",
    yourReferralCode: "您的推荐码",
    totalReferrals: "总推荐人数",
    totalEarnings: "总收益",
    copyLink: "复制链接",
    
    // Points
    pointsTitle: "积分",
    earnPointsByTrading: "通过交易赚取积分",
    totalPoints: "总积分",
    dailyTasks: "每日任务",
    weeklyTasks: "每周任务",
    
    // Dashboard
    welcomeBack: "欢迎回来",
    accountOverview: "账户概览",
    recentActivity: "最近活动",
    marketOverview: "市场概览",
    topGainers: "涨幅榜",
    topLosers: "跌幅榜",
    
    // Notifications
    notifications: "通知",
    noNotifications: "暂无通知",
    markAllRead: "全部标为已读",
    clearAll: "清除全部",
    newNotification: "新通知",
    
    // Notification messages
    orderPlaced: "订单已下",
    orderFilled: "订单已成交",
    orderCancelled: "订单已取消",
    depositSuccess: "存款成功",
    withdrawSuccess: "取款成功",
    transferSuccess: "转账成功",
    stakingSuccess: "质押成功",
    unstakingSuccess: "解除质押成功",
    swapSuccess: "兑换成功",
    predictionPlaced: "预测已下单",
    
    // Common
    cancel: "取消",
    confirm: "确认",
    close: "关闭",
    save: "保存",
    edit: "编辑",
    delete: "删除",
    search: "搜索",
    filter: "筛选",
    sort: "排序",
    loading: "加载中...",
    error: "错误",
    success: "成功",
    warning: "警告",
    info: "信息",
    yes: "是",
    no: "否",
    max: "最大",
    min: "最小",
    all: "全部",
    none: "无",
    back: "返回",
    next: "下一步",
    submit: "提交",
    reset: "重置",
    refresh: "刷新",
    view: "查看",
    details: "详情",
    more: "更多",
    less: "收起",
    show: "显示",
    hide: "隐藏",
    copy: "复制",
    copied: "已复制！",
    share: "分享",
    download: "下载",
    upload: "上传",
    
    // Time
    now: "刚刚",
    minutesAgo: "分钟前",
    hoursAgo: "小时前",
    daysAgo: "天前",
    daily: "每日",
    weekly: "每周",
    monthly: "每月",
    yearly: "每年",
    
    // Status
    active: "活跃",
    inactive: "未激活",
    pending: "待处理",
    completed: "已完成",
    failed: "失败",
    processing: "处理中",
    confirmed: "已确认",
    cancelled: "已取消",
    
    // Numbers/Stats
    change24h: "24小时涨跌",
    high24h: "24小时最高",
    low24h: "24小时最低",
    volume24h: "24小时交易量",
    
    // Portfolio
    overview: "概览",
    perpetuals: "永续合约",
    spot: "现货",
    assets: "资产",
    history: "历史",
    
    // Errors
    insufficientBalance: "余额不足",
    invalidAmount: "无效金额",
    networkError: "网络错误",
    tryAgain: "重试",
    
    // Settings
    settings: "设置",
    language: "语言",
    theme: "主题",
    darkMode: "深色模式",
    lightMode: "浅色模式",
  },
  "zh-TW": {
    // Navigation
    dashboard: "儀表板",
    trade: "交易",
    prediction: "預測",
    portfolio: "投資組合",
    swap: "兌換",
    staking: "質押",
    earn: "賺取",
    lending: "借貸",
    aiTrading: "AI交易",
    bots: "機器人",
    leaderboard: "排行榜",
    referral: "推薦",
    points: "積分",
    
    // Wallet
    connectWallet: "連接錢包",
    disconnect: "斷開連接",
    deposit: "存款",
    withdraw: "取款",
    transfer: "轉帳",
    balance: "餘額",
    available: "可用",
    inPosition: "持倉中",
    walletBalance: "錢包餘額",
    totalBalance: "總餘額",
    
    // Trading
    buy: "買入",
    sell: "賣出",
    long: "做多",
    short: "做空",
    buyLong: "買入/做多",
    sellShort: "賣出/做空",
    market: "市價",
    limit: "限價",
    stopLoss: "止損",
    takeProfit: "止盈",
    leverage: "槓桿",
    size: "數量",
    price: "價格",
    amount: "金額",
    total: "總計",
    fee: "手續費",
    placeOrder: "下單",
    openOrders: "當前訂單",
    orderHistory: "歷史訂單",
    positions: "持倉",
    cross: "全倉",
    isolated: "逐倉",
    classic: "經典",
    pro: "專業",
    reduceOnly: "只減倉",
    availableToTrade: "可交易",
    currentPosition: "當前持倉",
    liquidationPrice: "清算價格",
    entryPrice: "入場價格",
    markPrice: "標記價格",
    pnl: "盈虧",
    unrealizedPnl: "未實現盈虧",
    realizedPnl: "已實現盈虧",
    margin: "保證金",
    orderValue: "訂單價值",
    
    // Swap
    swapTokens: "代幣兌換",
    tradeTokensInstantly: "即時交易代幣",
    from: "從",
    to: "到",
    swapFee: "兌換費用",
    priceImpact: "價格影響",
    minimumReceived: "最小接收",
    route: "路由",
    slippage: "滑點",
    
    // Prediction
    predictionMarket: "預測市場",
    tradingBasedOnRealWorld: "基於現實世界事件和結果的交易",
    trending: "熱門",
    favorite: "收藏",
    latest: "最新",
    crypto: "加密貨幣",
    finance: "金融",
    technology: "科技",
    world: "世界",
    economy: "經濟",
    culture: "文化",
    politics: "政治",
    geopolitics: "地緣政治",
    tradingVolume: "交易量",
    allTrades: "所有交易",
    myTrades: "我的交易",
    
    // Staking
    stakingTitle: "質押",
    stakeYourTokens: "質押代幣以賺取獎勵",
    totalStaked: "總質押量",
    yourStake: "您的質押",
    rewards: "獎勵",
    apr: "年化收益率",
    apy: "複合年化收益率",
    stake: "質押",
    unstake: "解除質押",
    claimRewards: "領取獎勵",
    lockPeriod: "鎖定期",
    
    // Earn / Vaults
    vaults: "金庫",
    earnYield: "賺取加密貨幣收益",
    tvl: "總鎖倉量",
    dailyYield: "日收益",
    weeklyYield: "週收益",
    depositToVault: "存入金庫",
    withdrawFromVault: "從金庫提取",
    yourDeposit: "您的存款",
    
    // Lending
    lendingMarkets: "借貸市場",
    supplyAndBorrow: "供應和借入加密資產",
    supply: "供應",
    borrow: "借入",
    repay: "償還",
    supplyApy: "供應年化",
    borrowApy: "借入年化",
    collateral: "抵押品",
    liquidity: "流動性",
    utilization: "利用率",
    maxLtv: "最大抵押率",
    healthFactor: "健康因子",
    
    // AI Trading
    aiTradingTitle: "AI交易",
    automatedStrategies: "AI驅動的自動化交易策略",
    activateBot: "啟動機器人",
    deactivateBot: "停用機器人",
    botPerformance: "機器人表現",
    totalProfit: "總利潤",
    winRate: "勝率",
    totalTrades: "總交易次數",
    
    // Bots
    tradingBots: "交易機器人",
    createBot: "創建機器人",
    myBots: "我的機器人",
    botStatus: "機器人狀態",
    running: "運行中",
    stopped: "已停止",
    
    // Leaderboard
    topTraders: "頂級交易員",
    rank: "排名",
    trader: "交易員",
    volume: "交易量",
    profit: "利潤",
    trades: "交易次數",
    
    // Referral
    referralProgram: "推薦計劃",
    inviteFriends: "邀請朋友並獲得獎勵",
    yourReferralCode: "您的推薦碼",
    totalReferrals: "總推薦人數",
    totalEarnings: "總收益",
    copyLink: "複製連結",
    
    // Points
    pointsTitle: "積分",
    earnPointsByTrading: "通過交易賺取積分",
    totalPoints: "總積分",
    dailyTasks: "每日任務",
    weeklyTasks: "每週任務",
    
    // Dashboard
    welcomeBack: "歡迎回來",
    accountOverview: "帳戶概覽",
    recentActivity: "最近活動",
    marketOverview: "市場概覽",
    topGainers: "漲幅榜",
    topLosers: "跌幅榜",
    
    // Notifications
    notifications: "通知",
    noNotifications: "暫無通知",
    markAllRead: "全部標為已讀",
    clearAll: "清除全部",
    newNotification: "新通知",
    
    // Notification messages
    orderPlaced: "訂單已下",
    orderFilled: "訂單已成交",
    orderCancelled: "訂單已取消",
    depositSuccess: "存款成功",
    withdrawSuccess: "取款成功",
    transferSuccess: "轉帳成功",
    stakingSuccess: "質押成功",
    unstakingSuccess: "解除質押成功",
    swapSuccess: "兌換成功",
    predictionPlaced: "預測已下單",
    
    // Common
    cancel: "取消",
    confirm: "確認",
    close: "關閉",
    save: "保存",
    edit: "編輯",
    delete: "刪除",
    search: "搜索",
    filter: "篩選",
    sort: "排序",
    loading: "載入中...",
    error: "錯誤",
    success: "成功",
    warning: "警告",
    info: "資訊",
    yes: "是",
    no: "否",
    max: "最大",
    min: "最小",
    all: "全部",
    none: "無",
    back: "返回",
    next: "下一步",
    submit: "提交",
    reset: "重置",
    refresh: "刷新",
    view: "查看",
    details: "詳情",
    more: "更多",
    less: "收起",
    show: "顯示",
    hide: "隱藏",
    copy: "複製",
    copied: "已複製！",
    share: "分享",
    download: "下載",
    upload: "上傳",
    
    // Time
    now: "剛剛",
    minutesAgo: "分鐘前",
    hoursAgo: "小時前",
    daysAgo: "天前",
    daily: "每日",
    weekly: "每週",
    monthly: "每月",
    yearly: "每年",
    
    // Status
    active: "活躍",
    inactive: "未啟動",
    pending: "待處理",
    completed: "已完成",
    failed: "失敗",
    processing: "處理中",
    confirmed: "已確認",
    cancelled: "已取消",
    
    // Numbers/Stats
    change24h: "24小時漲跌",
    high24h: "24小時最高",
    low24h: "24小時最低",
    volume24h: "24小時交易量",
    
    // Portfolio
    overview: "概覽",
    perpetuals: "永續合約",
    spot: "現貨",
    assets: "資產",
    history: "歷史",
    
    // Errors
    insufficientBalance: "餘額不足",
    invalidAmount: "無效金額",
    networkError: "網絡錯誤",
    tryAgain: "重試",
    
    // Settings
    settings: "設置",
    language: "語言",
    theme: "主題",
    darkMode: "深色模式",
    lightMode: "淺色模式",
  },
  ja: {
    // Navigation
    dashboard: "ダッシュボード",
    trade: "取引",
    prediction: "予測",
    portfolio: "ポートフォリオ",
    swap: "スワップ",
    staking: "ステーキング",
    earn: "収益",
    lending: "レンディング",
    aiTrading: "AI取引",
    bots: "ボット",
    leaderboard: "リーダーボード",
    referral: "紹介",
    points: "ポイント",
    
    // Wallet
    connectWallet: "ウォレット接続",
    disconnect: "切断",
    deposit: "入金",
    withdraw: "出金",
    transfer: "送金",
    balance: "残高",
    available: "利用可能",
    inPosition: "ポジション中",
    walletBalance: "ウォレット残高",
    totalBalance: "総残高",
    
    // Trading
    buy: "買い",
    sell: "売り",
    long: "ロング",
    short: "ショート",
    buyLong: "買い/ロング",
    sellShort: "売り/ショート",
    market: "成行",
    limit: "指値",
    stopLoss: "損切り",
    takeProfit: "利確",
    leverage: "レバレッジ",
    size: "サイズ",
    price: "価格",
    amount: "数量",
    total: "合計",
    fee: "手数料",
    placeOrder: "注文する",
    openOrders: "オープン注文",
    orderHistory: "注文履歴",
    positions: "ポジション",
    cross: "クロス",
    isolated: "分離",
    classic: "クラシック",
    pro: "プロ",
    reduceOnly: "決済のみ",
    availableToTrade: "取引可能",
    currentPosition: "現在のポジション",
    liquidationPrice: "清算価格",
    entryPrice: "参入価格",
    markPrice: "マーク価格",
    pnl: "損益",
    unrealizedPnl: "未実現損益",
    realizedPnl: "実現損益",
    margin: "証拠金",
    orderValue: "注文額",
    
    // Swap
    swapTokens: "トークンスワップ",
    tradeTokensInstantly: "即時トークン取引",
    from: "から",
    to: "へ",
    swapFee: "スワップ手数料",
    priceImpact: "価格影響",
    minimumReceived: "最小受取量",
    route: "ルート",
    slippage: "スリッページ",
    
    // Prediction
    predictionMarket: "予測市場",
    tradingBasedOnRealWorld: "現実世界のイベントと結果に基づく取引",
    trending: "トレンド",
    favorite: "お気に入り",
    latest: "最新",
    crypto: "暗号資産",
    finance: "金融",
    technology: "テクノロジー",
    world: "世界",
    economy: "経済",
    culture: "文化",
    politics: "政治",
    geopolitics: "地政学",
    tradingVolume: "取引量",
    allTrades: "すべての取引",
    myTrades: "マイ取引",
    
    // Staking
    stakingTitle: "ステーキング",
    stakeYourTokens: "トークンをステークして報酬を獲得",
    totalStaked: "総ステーク量",
    yourStake: "あなたのステーク",
    rewards: "報酬",
    apr: "年利",
    apy: "複利年利",
    stake: "ステーク",
    unstake: "アンステーク",
    claimRewards: "報酬を受け取る",
    lockPeriod: "ロック期間",
    
    // Earn / Vaults
    vaults: "ボールト",
    earnYield: "暗号資産で利回りを獲得",
    tvl: "TVL",
    dailyYield: "日次利回り",
    weeklyYield: "週次利回り",
    depositToVault: "ボールトに預ける",
    withdrawFromVault: "ボールトから引き出す",
    yourDeposit: "あなたの預金",
    
    // Lending
    lendingMarkets: "レンディング市場",
    supplyAndBorrow: "暗号資産の供給と借入",
    supply: "供給",
    borrow: "借入",
    repay: "返済",
    supplyApy: "供給APY",
    borrowApy: "借入APY",
    collateral: "担保",
    liquidity: "流動性",
    utilization: "利用率",
    maxLtv: "最大LTV",
    healthFactor: "健全性係数",
    
    // AI Trading
    aiTradingTitle: "AI取引",
    automatedStrategies: "AIによる自動取引戦略",
    activateBot: "ボットを起動",
    deactivateBot: "ボットを停止",
    botPerformance: "ボットパフォーマンス",
    totalProfit: "総利益",
    winRate: "勝率",
    totalTrades: "総取引数",
    
    // Bots
    tradingBots: "取引ボット",
    createBot: "ボット作成",
    myBots: "マイボット",
    botStatus: "ボット状態",
    running: "稼働中",
    stopped: "停止中",
    
    // Leaderboard
    topTraders: "トップトレーダー",
    rank: "ランク",
    trader: "トレーダー",
    volume: "取引量",
    profit: "利益",
    trades: "取引数",
    
    // Referral
    referralProgram: "紹介プログラム",
    inviteFriends: "友達を招待して報酬を獲得",
    yourReferralCode: "あなたの紹介コード",
    totalReferrals: "総紹介数",
    totalEarnings: "総収益",
    copyLink: "リンクをコピー",
    
    // Points
    pointsTitle: "ポイント",
    earnPointsByTrading: "取引でポイントを獲得",
    totalPoints: "総ポイント",
    dailyTasks: "デイリータスク",
    weeklyTasks: "ウィークリータスク",
    
    // Dashboard
    welcomeBack: "おかえりなさい",
    accountOverview: "アカウント概要",
    recentActivity: "最近の活動",
    marketOverview: "市場概要",
    topGainers: "上昇銘柄",
    topLosers: "下落銘柄",
    
    // Notifications
    notifications: "通知",
    noNotifications: "通知はありません",
    markAllRead: "すべて既読にする",
    clearAll: "すべてクリア",
    newNotification: "新着通知",
    
    // Notification messages
    orderPlaced: "注文完了",
    orderFilled: "注文約定",
    orderCancelled: "注文キャンセル",
    depositSuccess: "入金完了",
    withdrawSuccess: "出金完了",
    transferSuccess: "送金完了",
    stakingSuccess: "ステーキング完了",
    unstakingSuccess: "アンステーキング完了",
    swapSuccess: "スワップ完了",
    predictionPlaced: "予測注文完了",
    
    // Common
    cancel: "キャンセル",
    confirm: "確認",
    close: "閉じる",
    save: "保存",
    edit: "編集",
    delete: "削除",
    search: "検索",
    filter: "フィルター",
    sort: "並べ替え",
    loading: "読み込み中...",
    error: "エラー",
    success: "成功",
    warning: "警告",
    info: "情報",
    yes: "はい",
    no: "いいえ",
    max: "最大",
    min: "最小",
    all: "すべて",
    none: "なし",
    back: "戻る",
    next: "次へ",
    submit: "送信",
    reset: "リセット",
    refresh: "更新",
    view: "表示",
    details: "詳細",
    more: "もっと見る",
    less: "閉じる",
    show: "表示",
    hide: "非表示",
    copy: "コピー",
    copied: "コピーしました！",
    share: "共有",
    download: "ダウンロード",
    upload: "アップロード",
    
    // Time
    now: "たった今",
    minutesAgo: "分前",
    hoursAgo: "時間前",
    daysAgo: "日前",
    daily: "毎日",
    weekly: "毎週",
    monthly: "毎月",
    yearly: "毎年",
    
    // Status
    active: "アクティブ",
    inactive: "非アクティブ",
    pending: "保留中",
    completed: "完了",
    failed: "失敗",
    processing: "処理中",
    confirmed: "確認済み",
    cancelled: "キャンセル済み",
    
    // Numbers/Stats
    change24h: "24時間変動",
    high24h: "24時間高値",
    low24h: "24時間安値",
    volume24h: "24時間取引量",
    
    // Portfolio
    overview: "概要",
    perpetuals: "無期限先物",
    spot: "現物",
    assets: "資産",
    history: "履歴",
    
    // Errors
    insufficientBalance: "残高不足",
    invalidAmount: "無効な金額",
    networkError: "ネットワークエラー",
    tryAgain: "再試行",
    
    // Settings
    settings: "設定",
    language: "言語",
    theme: "テーマ",
    darkMode: "ダークモード",
    lightMode: "ライトモード",
  },
  ru: {
    // Navigation
    dashboard: "Панель",
    trade: "Торговля",
    prediction: "Прогноз",
    portfolio: "Портфель",
    swap: "Обмен",
    staking: "Стейкинг",
    earn: "Заработок",
    lending: "Кредитование",
    aiTrading: "AI Торговля",
    bots: "Боты",
    leaderboard: "Рейтинг",
    referral: "Рефералы",
    points: "Баллы",
    
    // Wallet
    connectWallet: "Подключить кошелёк",
    disconnect: "Отключить",
    deposit: "Депозит",
    withdraw: "Вывод",
    transfer: "Перевод",
    balance: "Баланс",
    available: "Доступно",
    inPosition: "В позиции",
    walletBalance: "Баланс кошелька",
    totalBalance: "Общий баланс",
    
    // Trading
    buy: "Купить",
    sell: "Продать",
    long: "Лонг",
    short: "Шорт",
    buyLong: "Купить/Лонг",
    sellShort: "Продать/Шорт",
    market: "Рыночный",
    limit: "Лимитный",
    stopLoss: "Стоп-лосс",
    takeProfit: "Тейк-профит",
    leverage: "Плечо",
    size: "Размер",
    price: "Цена",
    amount: "Сумма",
    total: "Итого",
    fee: "Комиссия",
    placeOrder: "Разместить ордер",
    openOrders: "Открытые ордера",
    orderHistory: "История ордеров",
    positions: "Позиции",
    cross: "Кросс",
    isolated: "Изолированная",
    classic: "Классический",
    pro: "Про",
    reduceOnly: "Только уменьшение",
    availableToTrade: "Доступно для торговли",
    currentPosition: "Текущая позиция",
    liquidationPrice: "Цена ликвидации",
    entryPrice: "Цена входа",
    markPrice: "Маркировочная цена",
    pnl: "PnL",
    unrealizedPnl: "Нереализованный PnL",
    realizedPnl: "Реализованный PnL",
    margin: "Маржа",
    orderValue: "Стоимость ордера",
    
    // Swap
    swapTokens: "Обмен токенов",
    tradeTokensInstantly: "Мгновенная торговля токенами",
    from: "Из",
    to: "В",
    swapFee: "Комиссия обмена",
    priceImpact: "Влияние на цену",
    minimumReceived: "Минимум получите",
    route: "Маршрут",
    slippage: "Проскальзывание",
    
    // Prediction
    predictionMarket: "Рынок прогнозов",
    tradingBasedOnRealWorld: "Торговля на основе реальных событий",
    trending: "Популярное",
    favorite: "Избранное",
    latest: "Последние",
    crypto: "Крипто",
    finance: "Финансы",
    technology: "Технологии",
    world: "Мир",
    economy: "Экономика",
    culture: "Культура",
    politics: "Политика",
    geopolitics: "Геополитика",
    tradingVolume: "Объём торгов",
    allTrades: "Все сделки",
    myTrades: "Мои сделки",
    
    // Staking
    stakingTitle: "Стейкинг",
    stakeYourTokens: "Стейкайте токены для получения наград",
    totalStaked: "Всего застейкано",
    yourStake: "Ваш стейк",
    rewards: "Награды",
    apr: "APR",
    apy: "APY",
    stake: "Стейк",
    unstake: "Анстейк",
    claimRewards: "Получить награды",
    lockPeriod: "Период блокировки",
    
    // Earn / Vaults
    vaults: "Хранилища",
    earnYield: "Зарабатывайте на криптовалюте",
    tvl: "TVL",
    dailyYield: "Дневная доходность",
    weeklyYield: "Недельная доходность",
    depositToVault: "Внести в хранилище",
    withdrawFromVault: "Вывести из хранилища",
    yourDeposit: "Ваш депозит",
    
    // Lending
    lendingMarkets: "Рынки кредитования",
    supplyAndBorrow: "Предоставляйте и занимайте криптоактивы",
    supply: "Предоставить",
    borrow: "Занять",
    repay: "Погасить",
    supplyApy: "APY предоставления",
    borrowApy: "APY займа",
    collateral: "Залог",
    liquidity: "Ликвидность",
    utilization: "Использование",
    maxLtv: "Макс. LTV",
    healthFactor: "Фактор здоровья",
    
    // AI Trading
    aiTradingTitle: "AI Торговля",
    automatedStrategies: "Автоматизированные стратегии на базе AI",
    activateBot: "Активировать бота",
    deactivateBot: "Деактивировать бота",
    botPerformance: "Производительность бота",
    totalProfit: "Общая прибыль",
    winRate: "Процент побед",
    totalTrades: "Всего сделок",
    
    // Bots
    tradingBots: "Торговые боты",
    createBot: "Создать бота",
    myBots: "Мои боты",
    botStatus: "Статус бота",
    running: "Работает",
    stopped: "Остановлен",
    
    // Leaderboard
    topTraders: "Лучшие трейдеры",
    rank: "Ранг",
    trader: "Трейдер",
    volume: "Объём",
    profit: "Прибыль",
    trades: "Сделки",
    
    // Referral
    referralProgram: "Реферальная программа",
    inviteFriends: "Приглашайте друзей и получайте награды",
    yourReferralCode: "Ваш реферальный код",
    totalReferrals: "Всего рефералов",
    totalEarnings: "Общий заработок",
    copyLink: "Копировать ссылку",
    
    // Points
    pointsTitle: "Баллы",
    earnPointsByTrading: "Зарабатывайте баллы торговлей",
    totalPoints: "Всего баллов",
    dailyTasks: "Ежедневные задания",
    weeklyTasks: "Еженедельные задания",
    
    // Dashboard
    welcomeBack: "С возвращением",
    accountOverview: "Обзор аккаунта",
    recentActivity: "Недавняя активность",
    marketOverview: "Обзор рынка",
    topGainers: "Лидеры роста",
    topLosers: "Лидеры падения",
    
    // Notifications
    notifications: "Уведомления",
    noNotifications: "Нет уведомлений",
    markAllRead: "Отметить все как прочитанные",
    clearAll: "Очистить все",
    newNotification: "Новое уведомление",
    
    // Notification messages
    orderPlaced: "Ордер размещён",
    orderFilled: "Ордер исполнен",
    orderCancelled: "Ордер отменён",
    depositSuccess: "Депозит успешен",
    withdrawSuccess: "Вывод успешен",
    transferSuccess: "Перевод успешен",
    stakingSuccess: "Стейкинг успешен",
    unstakingSuccess: "Анстейкинг успешен",
    swapSuccess: "Обмен успешен",
    predictionPlaced: "Прогноз размещён",
    
    // Common
    cancel: "Отмена",
    confirm: "Подтвердить",
    close: "Закрыть",
    save: "Сохранить",
    edit: "Редактировать",
    delete: "Удалить",
    search: "Поиск",
    filter: "Фильтр",
    sort: "Сортировка",
    loading: "Загрузка...",
    error: "Ошибка",
    success: "Успех",
    warning: "Предупреждение",
    info: "Информация",
    yes: "Да",
    no: "Нет",
    max: "МАКС",
    min: "МИН",
    all: "Все",
    none: "Нет",
    back: "Назад",
    next: "Далее",
    submit: "Отправить",
    reset: "Сброс",
    refresh: "Обновить",
    view: "Просмотр",
    details: "Детали",
    more: "Ещё",
    less: "Меньше",
    show: "Показать",
    hide: "Скрыть",
    copy: "Копировать",
    copied: "Скопировано!",
    share: "Поделиться",
    download: "Скачать",
    upload: "Загрузить",
    
    // Time
    now: "Только что",
    minutesAgo: "минут назад",
    hoursAgo: "часов назад",
    daysAgo: "дней назад",
    daily: "Ежедневно",
    weekly: "Еженедельно",
    monthly: "Ежемесячно",
    yearly: "Ежегодно",
    
    // Status
    active: "Активно",
    inactive: "Неактивно",
    pending: "В ожидании",
    completed: "Завершено",
    failed: "Ошибка",
    processing: "Обработка",
    confirmed: "Подтверждено",
    cancelled: "Отменено",
    
    // Numbers/Stats
    change24h: "Изм. за 24ч",
    high24h: "Макс. за 24ч",
    low24h: "Мин. за 24ч",
    volume24h: "Объём за 24ч",
    
    // Portfolio
    overview: "Обзор",
    perpetuals: "Бессрочные",
    spot: "Спот",
    assets: "Активы",
    history: "История",
    
    // Errors
    insufficientBalance: "Недостаточно средств",
    invalidAmount: "Неверная сумма",
    networkError: "Ошибка сети",
    tryAgain: "Попробуйте снова",
    
    // Settings
    settings: "Настройки",
    language: "Язык",
    theme: "Тема",
    darkMode: "Тёмный режим",
    lightMode: "Светлый режим",
  },
  de: {
    dashboard: "Dashboard", trade: "Handel", prediction: "Vorhersage", portfolio: "Portfolio", swap: "Tauschen", staking: "Staking", earn: "Verdienen", lending: "Verleihen", aiTrading: "KI-Handel", bots: "Bots", leaderboard: "Rangliste", referral: "Empfehlung", points: "Punkte",
    connectWallet: "Wallet verbinden", disconnect: "Trennen", deposit: "Einzahlen", withdraw: "Auszahlen", transfer: "Übertragen", balance: "Guthaben", available: "Verfügbar", inPosition: "In Position", walletBalance: "Wallet-Guthaben", totalBalance: "Gesamtguthaben",
    buy: "Kaufen", sell: "Verkaufen", long: "Long", short: "Short", buyLong: "Kaufen/Long", sellShort: "Verkaufen/Short", market: "Markt", limit: "Limit", stopLoss: "Stop-Loss", takeProfit: "Take-Profit", leverage: "Hebel", size: "Größe", price: "Preis", amount: "Betrag", total: "Gesamt", fee: "Gebühr", placeOrder: "Order platzieren", openOrders: "Offene Orders", orderHistory: "Order-Historie", positions: "Positionen", cross: "Cross", isolated: "Isoliert", classic: "Klassisch", pro: "Pro", reduceOnly: "Nur reduzieren", availableToTrade: "Handelbar", currentPosition: "Aktuelle Position", liquidationPrice: "Liquidationspreis", entryPrice: "Einstiegspreis", markPrice: "Markpreis", pnl: "PnL", unrealizedPnl: "Unrealisierter PnL", realizedPnl: "Realisierter PnL", margin: "Margin", orderValue: "Orderwert",
    swapTokens: "Token tauschen", tradeTokensInstantly: "Token sofort handeln", from: "Von", to: "Nach", swapFee: "Tauschgebühr", priceImpact: "Preisauswirkung", minimumReceived: "Minimum erhalten", route: "Route", slippage: "Slippage",
    predictionMarket: "Vorhersagemarkt", tradingBasedOnRealWorld: "Handel basierend auf realen Ereignissen", trending: "Trending", favorite: "Favoriten", latest: "Neueste", crypto: "Krypto", finance: "Finanzen", technology: "Technologie", world: "Welt", economy: "Wirtschaft", culture: "Kultur", politics: "Politik", geopolitics: "Geopolitik", tradingVolume: "Handelsvolumen", allTrades: "Alle Trades", myTrades: "Meine Trades",
    stakingTitle: "Staking", stakeYourTokens: "Staken Sie Token für Belohnungen", totalStaked: "Gesamt gestaked", yourStake: "Ihr Stake", rewards: "Belohnungen", apr: "APR", apy: "APY", stake: "Staken", unstake: "Entstaken", claimRewards: "Belohnungen beanspruchen", lockPeriod: "Sperrzeit",
    vaults: "Vaults", earnYield: "Verdienen Sie Rendite auf Krypto", tvl: "TVL", dailyYield: "Tägliche Rendite", weeklyYield: "Wöchentliche Rendite", depositToVault: "In Vault einzahlen", withdrawFromVault: "Aus Vault abheben", yourDeposit: "Ihre Einlage",
    lendingMarkets: "Kreditmarkt", supplyAndBorrow: "Krypto bereitstellen und leihen", supply: "Bereitstellen", borrow: "Leihen", repay: "Zurückzahlen", supplyApy: "Bereitstellungs-APY", borrowApy: "Leih-APY", collateral: "Sicherheit", liquidity: "Liquidität", utilization: "Auslastung", maxLtv: "Max. LTV", healthFactor: "Gesundheitsfaktor",
    aiTradingTitle: "KI-Handel", automatedStrategies: "Automatisierte KI-Handelsstrategien", activateBot: "Bot aktivieren", deactivateBot: "Bot deaktivieren", botPerformance: "Bot-Leistung", totalProfit: "Gesamtgewinn", winRate: "Gewinnrate", totalTrades: "Gesamte Trades",
    tradingBots: "Handelsbots", createBot: "Bot erstellen", myBots: "Meine Bots", botStatus: "Bot-Status", running: "Läuft", stopped: "Gestoppt",
    topTraders: "Top-Händler", rank: "Rang", trader: "Händler", volume: "Volumen", profit: "Gewinn", trades: "Trades",
    referralProgram: "Empfehlungsprogramm", inviteFriends: "Freunde einladen und verdienen", yourReferralCode: "Ihr Empfehlungscode", totalReferrals: "Gesamt Empfehlungen", totalEarnings: "Gesamtverdienst", copyLink: "Link kopieren",
    pointsTitle: "Punkte", earnPointsByTrading: "Punkte durch Handel verdienen", totalPoints: "Gesamtpunkte", dailyTasks: "Tägliche Aufgaben", weeklyTasks: "Wöchentliche Aufgaben",
    welcomeBack: "Willkommen zurück", accountOverview: "Kontoübersicht", recentActivity: "Letzte Aktivität", marketOverview: "Marktübersicht", topGainers: "Top Gewinner", topLosers: "Top Verlierer",
    notifications: "Benachrichtigungen", noNotifications: "Keine Benachrichtigungen", markAllRead: "Alle als gelesen markieren", clearAll: "Alle löschen", newNotification: "Neue Benachrichtigung",
    orderPlaced: "Order platziert", orderFilled: "Order ausgeführt", orderCancelled: "Order storniert", depositSuccess: "Einzahlung erfolgreich", withdrawSuccess: "Auszahlung erfolgreich", transferSuccess: "Übertragung erfolgreich", stakingSuccess: "Staking erfolgreich", unstakingSuccess: "Entstaking erfolgreich", swapSuccess: "Tausch erfolgreich", predictionPlaced: "Vorhersage platziert",
    cancel: "Abbrechen", confirm: "Bestätigen", close: "Schließen", save: "Speichern", edit: "Bearbeiten", delete: "Löschen", search: "Suchen", filter: "Filter", sort: "Sortieren", loading: "Laden...", error: "Fehler", success: "Erfolg", warning: "Warnung", info: "Info", yes: "Ja", no: "Nein", max: "MAX", min: "MIN", all: "Alle", none: "Keine", back: "Zurück", next: "Weiter", submit: "Absenden", reset: "Zurücksetzen", refresh: "Aktualisieren", view: "Ansehen", details: "Details", more: "Mehr", less: "Weniger", show: "Anzeigen", hide: "Ausblenden", copy: "Kopieren", copied: "Kopiert!", share: "Teilen", download: "Herunterladen", upload: "Hochladen",
    now: "Gerade eben", minutesAgo: "Minuten her", hoursAgo: "Stunden her", daysAgo: "Tage her", daily: "Täglich", weekly: "Wöchentlich", monthly: "Monatlich", yearly: "Jährlich",
    active: "Aktiv", inactive: "Inaktiv", pending: "Ausstehend", completed: "Abgeschlossen", failed: "Fehlgeschlagen", processing: "Verarbeitung", confirmed: "Bestätigt", cancelled: "Abgebrochen",
    change24h: "24h Änderung", high24h: "24h Hoch", low24h: "24h Tief", volume24h: "24h Volumen",
    overview: "Übersicht", perpetuals: "Perpetuals", spot: "Spot", assets: "Vermögen", history: "Historie",
    insufficientBalance: "Unzureichendes Guthaben", invalidAmount: "Ungültiger Betrag", networkError: "Netzwerkfehler", tryAgain: "Erneut versuchen",
    settings: "Einstellungen", language: "Sprache", theme: "Design", darkMode: "Dunkelmodus", lightMode: "Hellmodus",
  },
  fr: {
    dashboard: "Tableau de bord", trade: "Trading", prediction: "Prédiction", portfolio: "Portefeuille", swap: "Échanger", staking: "Staking", earn: "Gagner", lending: "Prêt", aiTrading: "Trading IA", bots: "Bots", leaderboard: "Classement", referral: "Parrainage", points: "Points",
    connectWallet: "Connecter portefeuille", disconnect: "Déconnecter", deposit: "Déposer", withdraw: "Retirer", transfer: "Transférer", balance: "Solde", available: "Disponible", inPosition: "En position", walletBalance: "Solde portefeuille", totalBalance: "Solde total",
    buy: "Acheter", sell: "Vendre", long: "Long", short: "Short", buyLong: "Acheter/Long", sellShort: "Vendre/Short", market: "Marché", limit: "Limite", stopLoss: "Stop-Loss", takeProfit: "Take-Profit", leverage: "Effet de levier", size: "Taille", price: "Prix", amount: "Montant", total: "Total", fee: "Frais", placeOrder: "Passer l'ordre", openOrders: "Ordres ouverts", orderHistory: "Historique des ordres", positions: "Positions", cross: "Cross", isolated: "Isolé", classic: "Classique", pro: "Pro", reduceOnly: "Réduction uniquement", availableToTrade: "Disponible au trading", currentPosition: "Position actuelle", liquidationPrice: "Prix de liquidation", entryPrice: "Prix d'entrée", markPrice: "Prix de marque", pnl: "PnL", unrealizedPnl: "PnL non réalisé", realizedPnl: "PnL réalisé", margin: "Marge", orderValue: "Valeur de l'ordre",
    swapTokens: "Échanger des tokens", tradeTokensInstantly: "Trader des tokens instantanément", from: "De", to: "Vers", swapFee: "Frais d'échange", priceImpact: "Impact sur le prix", minimumReceived: "Minimum reçu", route: "Route", slippage: "Slippage",
    predictionMarket: "Marché de prédiction", tradingBasedOnRealWorld: "Trading basé sur des événements réels", trending: "Tendances", favorite: "Favoris", latest: "Récent", crypto: "Crypto", finance: "Finance", technology: "Technologie", world: "Monde", economy: "Économie", culture: "Culture", politics: "Politique", geopolitics: "Géopolitique", tradingVolume: "Volume de trading", allTrades: "Tous les trades", myTrades: "Mes trades",
    stakingTitle: "Staking", stakeYourTokens: "Stakez vos tokens pour des récompenses", totalStaked: "Total staké", yourStake: "Votre stake", rewards: "Récompenses", apr: "APR", apy: "APY", stake: "Staker", unstake: "Unstaker", claimRewards: "Réclamer récompenses", lockPeriod: "Période de verrouillage",
    vaults: "Coffres", earnYield: "Gagnez du rendement sur la crypto", tvl: "TVL", dailyYield: "Rendement journalier", weeklyYield: "Rendement hebdomadaire", depositToVault: "Déposer dans le coffre", withdrawFromVault: "Retirer du coffre", yourDeposit: "Votre dépôt",
    lendingMarkets: "Marchés de prêt", supplyAndBorrow: "Fournir et emprunter des actifs crypto", supply: "Fournir", borrow: "Emprunter", repay: "Rembourser", supplyApy: "APY fourniture", borrowApy: "APY emprunt", collateral: "Collatéral", liquidity: "Liquidité", utilization: "Utilisation", maxLtv: "LTV max", healthFactor: "Facteur de santé",
    aiTradingTitle: "Trading IA", automatedStrategies: "Stratégies automatisées par IA", activateBot: "Activer le bot", deactivateBot: "Désactiver le bot", botPerformance: "Performance du bot", totalProfit: "Profit total", winRate: "Taux de réussite", totalTrades: "Total des trades",
    tradingBots: "Bots de trading", createBot: "Créer un bot", myBots: "Mes bots", botStatus: "Statut du bot", running: "En cours", stopped: "Arrêté",
    topTraders: "Top traders", rank: "Rang", trader: "Trader", volume: "Volume", profit: "Profit", trades: "Trades",
    referralProgram: "Programme de parrainage", inviteFriends: "Invitez des amis et gagnez", yourReferralCode: "Votre code de parrainage", totalReferrals: "Total parrainages", totalEarnings: "Gains totaux", copyLink: "Copier le lien",
    pointsTitle: "Points", earnPointsByTrading: "Gagnez des points en tradant", totalPoints: "Points totaux", dailyTasks: "Tâches quotidiennes", weeklyTasks: "Tâches hebdomadaires",
    welcomeBack: "Bon retour", accountOverview: "Aperçu du compte", recentActivity: "Activité récente", marketOverview: "Aperçu du marché", topGainers: "Top hausses", topLosers: "Top baisses",
    notifications: "Notifications", noNotifications: "Aucune notification", markAllRead: "Tout marquer comme lu", clearAll: "Tout effacer", newNotification: "Nouvelle notification",
    orderPlaced: "Ordre passé", orderFilled: "Ordre exécuté", orderCancelled: "Ordre annulé", depositSuccess: "Dépôt réussi", withdrawSuccess: "Retrait réussi", transferSuccess: "Transfert réussi", stakingSuccess: "Staking réussi", unstakingSuccess: "Unstaking réussi", swapSuccess: "Échange réussi", predictionPlaced: "Prédiction placée",
    cancel: "Annuler", confirm: "Confirmer", close: "Fermer", save: "Sauvegarder", edit: "Modifier", delete: "Supprimer", search: "Rechercher", filter: "Filtrer", sort: "Trier", loading: "Chargement...", error: "Erreur", success: "Succès", warning: "Avertissement", info: "Info", yes: "Oui", no: "Non", max: "MAX", min: "MIN", all: "Tout", none: "Aucun", back: "Retour", next: "Suivant", submit: "Soumettre", reset: "Réinitialiser", refresh: "Actualiser", view: "Voir", details: "Détails", more: "Plus", less: "Moins", show: "Afficher", hide: "Masquer", copy: "Copier", copied: "Copié!", share: "Partager", download: "Télécharger", upload: "Charger",
    now: "À l'instant", minutesAgo: "minutes", hoursAgo: "heures", daysAgo: "jours", daily: "Quotidien", weekly: "Hebdomadaire", monthly: "Mensuel", yearly: "Annuel",
    active: "Actif", inactive: "Inactif", pending: "En attente", completed: "Terminé", failed: "Échoué", processing: "En cours", confirmed: "Confirmé", cancelled: "Annulé",
    change24h: "Var. 24h", high24h: "Max 24h", low24h: "Min 24h", volume24h: "Volume 24h",
    overview: "Aperçu", perpetuals: "Perpétuels", spot: "Spot", assets: "Actifs", history: "Historique",
    insufficientBalance: "Solde insuffisant", invalidAmount: "Montant invalide", networkError: "Erreur réseau", tryAgain: "Réessayer",
    settings: "Paramètres", language: "Langue", theme: "Thème", darkMode: "Mode sombre", lightMode: "Mode clair",
  },
  es: {
    dashboard: "Panel", trade: "Comercio", prediction: "Predicción", portfolio: "Cartera", swap: "Intercambiar", staking: "Staking", earn: "Ganar", lending: "Préstamo", aiTrading: "Trading IA", bots: "Bots", leaderboard: "Clasificación", referral: "Referidos", points: "Puntos",
    connectWallet: "Conectar billetera", disconnect: "Desconectar", deposit: "Depositar", withdraw: "Retirar", transfer: "Transferir", balance: "Balance", available: "Disponible", inPosition: "En posición", walletBalance: "Balance billetera", totalBalance: "Balance total",
    buy: "Comprar", sell: "Vender", long: "Long", short: "Short", buyLong: "Comprar/Long", sellShort: "Vender/Short", market: "Mercado", limit: "Límite", stopLoss: "Stop-Loss", takeProfit: "Take-Profit", leverage: "Apalancamiento", size: "Tamaño", price: "Precio", amount: "Cantidad", total: "Total", fee: "Comisión", placeOrder: "Colocar orden", openOrders: "Órdenes abiertas", orderHistory: "Historial de órdenes", positions: "Posiciones", cross: "Cross", isolated: "Aislado", classic: "Clásico", pro: "Pro", reduceOnly: "Solo reducir", availableToTrade: "Disponible para operar", currentPosition: "Posición actual", liquidationPrice: "Precio de liquidación", entryPrice: "Precio de entrada", markPrice: "Precio de marca", pnl: "PnL", unrealizedPnl: "PnL no realizado", realizedPnl: "PnL realizado", margin: "Margen", orderValue: "Valor de la orden",
    swapTokens: "Intercambiar tokens", tradeTokensInstantly: "Operar tokens instantáneamente", from: "De", to: "A", swapFee: "Comisión de intercambio", priceImpact: "Impacto en precio", minimumReceived: "Mínimo recibido", route: "Ruta", slippage: "Deslizamiento",
    predictionMarket: "Mercado de predicción", tradingBasedOnRealWorld: "Trading basado en eventos del mundo real", trending: "Tendencias", favorite: "Favoritos", latest: "Últimos", crypto: "Cripto", finance: "Finanzas", technology: "Tecnología", world: "Mundo", economy: "Economía", culture: "Cultura", politics: "Política", geopolitics: "Geopolítica", tradingVolume: "Volumen de trading", allTrades: "Todos los trades", myTrades: "Mis trades",
    stakingTitle: "Staking", stakeYourTokens: "Stakea tus tokens para obtener recompensas", totalStaked: "Total stakeado", yourStake: "Tu stake", rewards: "Recompensas", apr: "APR", apy: "APY", stake: "Stakear", unstake: "Desstakear", claimRewards: "Reclamar recompensas", lockPeriod: "Período de bloqueo",
    vaults: "Vaults", earnYield: "Gana rendimiento en cripto", tvl: "TVL", dailyYield: "Rendimiento diario", weeklyYield: "Rendimiento semanal", depositToVault: "Depositar en vault", withdrawFromVault: "Retirar de vault", yourDeposit: "Tu depósito",
    lendingMarkets: "Mercados de préstamo", supplyAndBorrow: "Proveer y pedir prestado cripto", supply: "Proveer", borrow: "Pedir prestado", repay: "Pagar", supplyApy: "APY provisión", borrowApy: "APY préstamo", collateral: "Colateral", liquidity: "Liquidez", utilization: "Utilización", maxLtv: "LTV máximo", healthFactor: "Factor de salud",
    aiTradingTitle: "Trading IA", automatedStrategies: "Estrategias automatizadas por IA", activateBot: "Activar bot", deactivateBot: "Desactivar bot", botPerformance: "Rendimiento del bot", totalProfit: "Ganancia total", winRate: "Tasa de éxito", totalTrades: "Total de trades",
    tradingBots: "Bots de trading", createBot: "Crear bot", myBots: "Mis bots", botStatus: "Estado del bot", running: "Ejecutando", stopped: "Detenido",
    topTraders: "Top traders", rank: "Rango", trader: "Trader", volume: "Volumen", profit: "Ganancia", trades: "Trades",
    referralProgram: "Programa de referidos", inviteFriends: "Invita amigos y gana", yourReferralCode: "Tu código de referido", totalReferrals: "Total referidos", totalEarnings: "Ganancias totales", copyLink: "Copiar enlace",
    pointsTitle: "Puntos", earnPointsByTrading: "Gana puntos operando", totalPoints: "Puntos totales", dailyTasks: "Tareas diarias", weeklyTasks: "Tareas semanales",
    welcomeBack: "Bienvenido de nuevo", accountOverview: "Resumen de cuenta", recentActivity: "Actividad reciente", marketOverview: "Resumen del mercado", topGainers: "Mayores subidas", topLosers: "Mayores bajadas",
    notifications: "Notificaciones", noNotifications: "No tienes notificaciones", markAllRead: "Marcar todo como leído", clearAll: "Borrar todo", newNotification: "Nueva notificación",
    orderPlaced: "Orden colocada", orderFilled: "Orden ejecutada", orderCancelled: "Orden cancelada", depositSuccess: "Depósito exitoso", withdrawSuccess: "Retiro exitoso", transferSuccess: "Transferencia exitosa", stakingSuccess: "Staking exitoso", unstakingSuccess: "Desstaking exitoso", swapSuccess: "Intercambio exitoso", predictionPlaced: "Predicción colocada",
    cancel: "Cancelar", confirm: "Confirmar", close: "Cerrar", save: "Guardar", edit: "Editar", delete: "Eliminar", search: "Buscar", filter: "Filtrar", sort: "Ordenar", loading: "Cargando...", error: "Error", success: "Éxito", warning: "Advertencia", info: "Info", yes: "Sí", no: "No", max: "MÁX", min: "MÍN", all: "Todo", none: "Ninguno", back: "Atrás", next: "Siguiente", submit: "Enviar", reset: "Restablecer", refresh: "Actualizar", view: "Ver", details: "Detalles", more: "Más", less: "Menos", show: "Mostrar", hide: "Ocultar", copy: "Copiar", copied: "¡Copiado!", share: "Compartir", download: "Descargar", upload: "Subir",
    now: "Ahora mismo", minutesAgo: "minutos", hoursAgo: "horas", daysAgo: "días", daily: "Diario", weekly: "Semanal", monthly: "Mensual", yearly: "Anual",
    active: "Activo", inactive: "Inactivo", pending: "Pendiente", completed: "Completado", failed: "Fallido", processing: "Procesando", confirmed: "Confirmado", cancelled: "Cancelado",
    change24h: "Cambio 24h", high24h: "Máx 24h", low24h: "Mín 24h", volume24h: "Volumen 24h",
    overview: "Resumen", perpetuals: "Perpetuos", spot: "Spot", assets: "Activos", history: "Historial",
    insufficientBalance: "Saldo insuficiente", invalidAmount: "Cantidad inválida", networkError: "Error de red", tryAgain: "Intentar de nuevo",
    settings: "Configuración", language: "Idioma", theme: "Tema", darkMode: "Modo oscuro", lightMode: "Modo claro",
  },
  it: {
    dashboard: "Dashboard", trade: "Trading", prediction: "Previsione", portfolio: "Portafoglio", swap: "Scambia", staking: "Staking", earn: "Guadagna", lending: "Prestito", aiTrading: "Trading IA", bots: "Bot", leaderboard: "Classifica", referral: "Referral", points: "Punti",
    connectWallet: "Connetti portafoglio", disconnect: "Disconnetti", deposit: "Deposita", withdraw: "Preleva", transfer: "Trasferisci", balance: "Saldo", available: "Disponibile", inPosition: "In posizione", walletBalance: "Saldo portafoglio", totalBalance: "Saldo totale",
    buy: "Compra", sell: "Vendi", long: "Long", short: "Short", buyLong: "Compra/Long", sellShort: "Vendi/Short", market: "Mercato", limit: "Limite", stopLoss: "Stop-Loss", takeProfit: "Take-Profit", leverage: "Leva", size: "Dimensione", price: "Prezzo", amount: "Importo", total: "Totale", fee: "Commissione", placeOrder: "Piazza ordine", openOrders: "Ordini aperti", orderHistory: "Storico ordini", positions: "Posizioni", cross: "Cross", isolated: "Isolato", classic: "Classico", pro: "Pro", reduceOnly: "Solo riduzione", availableToTrade: "Disponibile per trading", currentPosition: "Posizione attuale", liquidationPrice: "Prezzo liquidazione", entryPrice: "Prezzo entrata", markPrice: "Prezzo di marca", pnl: "PnL", unrealizedPnl: "PnL non realizzato", realizedPnl: "PnL realizzato", margin: "Margine", orderValue: "Valore ordine",
    swapTokens: "Scambia token", tradeTokensInstantly: "Scambia token istantaneamente", from: "Da", to: "A", swapFee: "Commissione scambio", priceImpact: "Impatto sul prezzo", minimumReceived: "Minimo ricevuto", route: "Route", slippage: "Slippage",
    predictionMarket: "Mercato previsioni", tradingBasedOnRealWorld: "Trading basato su eventi del mondo reale", trending: "Tendenze", favorite: "Preferiti", latest: "Ultimi", crypto: "Crypto", finance: "Finanza", technology: "Tecnologia", world: "Mondo", economy: "Economia", culture: "Cultura", politics: "Politica", geopolitics: "Geopolitica", tradingVolume: "Volume trading", allTrades: "Tutti i trade", myTrades: "I miei trade",
    stakingTitle: "Staking", stakeYourTokens: "Metti in stake i token per ottenere ricompense", totalStaked: "Totale in stake", yourStake: "Il tuo stake", rewards: "Ricompense", apr: "APR", apy: "APY", stake: "Stake", unstake: "Unstake", claimRewards: "Riscuoti ricompense", lockPeriod: "Periodo di blocco",
    vaults: "Vault", earnYield: "Guadagna rendimento sulle crypto", tvl: "TVL", dailyYield: "Rendimento giornaliero", weeklyYield: "Rendimento settimanale", depositToVault: "Deposita nel vault", withdrawFromVault: "Preleva dal vault", yourDeposit: "Il tuo deposito",
    lendingMarkets: "Mercati prestito", supplyAndBorrow: "Fornisci e prendi in prestito crypto", supply: "Fornisci", borrow: "Prendi in prestito", repay: "Ripaga", supplyApy: "APY fornitura", borrowApy: "APY prestito", collateral: "Collaterale", liquidity: "Liquidità", utilization: "Utilizzo", maxLtv: "LTV max", healthFactor: "Fattore di salute",
    aiTradingTitle: "Trading IA", automatedStrategies: "Strategie automatizzate con IA", activateBot: "Attiva bot", deactivateBot: "Disattiva bot", botPerformance: "Performance bot", totalProfit: "Profitto totale", winRate: "Tasso di vittoria", totalTrades: "Trade totali",
    tradingBots: "Bot di trading", createBot: "Crea bot", myBots: "I miei bot", botStatus: "Stato bot", running: "In esecuzione", stopped: "Fermato",
    topTraders: "Top trader", rank: "Posizione", trader: "Trader", volume: "Volume", profit: "Profitto", trades: "Trade",
    referralProgram: "Programma referral", inviteFriends: "Invita amici e guadagna", yourReferralCode: "Il tuo codice referral", totalReferrals: "Referral totali", totalEarnings: "Guadagni totali", copyLink: "Copia link",
    pointsTitle: "Punti", earnPointsByTrading: "Guadagna punti facendo trading", totalPoints: "Punti totali", dailyTasks: "Compiti giornalieri", weeklyTasks: "Compiti settimanali",
    welcomeBack: "Bentornato", accountOverview: "Panoramica account", recentActivity: "Attività recente", marketOverview: "Panoramica mercato", topGainers: "Maggiori rialzi", topLosers: "Maggiori ribassi",
    notifications: "Notifiche", noNotifications: "Non hai notifiche", markAllRead: "Segna tutto come letto", clearAll: "Cancella tutto", newNotification: "Nuova notifica",
    orderPlaced: "Ordine piazzato", orderFilled: "Ordine eseguito", orderCancelled: "Ordine annullato", depositSuccess: "Deposito riuscito", withdrawSuccess: "Prelievo riuscito", transferSuccess: "Trasferimento riuscito", stakingSuccess: "Staking riuscito", unstakingSuccess: "Unstaking riuscito", swapSuccess: "Scambio riuscito", predictionPlaced: "Previsione piazzata",
    cancel: "Annulla", confirm: "Conferma", close: "Chiudi", save: "Salva", edit: "Modifica", delete: "Elimina", search: "Cerca", filter: "Filtra", sort: "Ordina", loading: "Caricamento...", error: "Errore", success: "Successo", warning: "Avviso", info: "Info", yes: "Sì", no: "No", max: "MAX", min: "MIN", all: "Tutto", none: "Nessuno", back: "Indietro", next: "Avanti", submit: "Invia", reset: "Reimposta", refresh: "Aggiorna", view: "Visualizza", details: "Dettagli", more: "Altro", less: "Meno", show: "Mostra", hide: "Nascondi", copy: "Copia", copied: "Copiato!", share: "Condividi", download: "Scarica", upload: "Carica",
    now: "Adesso", minutesAgo: "minuti fa", hoursAgo: "ore fa", daysAgo: "giorni fa", daily: "Giornaliero", weekly: "Settimanale", monthly: "Mensile", yearly: "Annuale",
    active: "Attivo", inactive: "Inattivo", pending: "In attesa", completed: "Completato", failed: "Fallito", processing: "Elaborazione", confirmed: "Confermato", cancelled: "Annullato",
    change24h: "Var. 24h", high24h: "Max 24h", low24h: "Min 24h", volume24h: "Volume 24h",
    overview: "Panoramica", perpetuals: "Perpetui", spot: "Spot", assets: "Asset", history: "Storico",
    insufficientBalance: "Saldo insufficiente", invalidAmount: "Importo non valido", networkError: "Errore di rete", tryAgain: "Riprova",
    settings: "Impostazioni", language: "Lingua", theme: "Tema", darkMode: "Modalità scura", lightMode: "Modalità chiara",
  },
} as const

export type TranslationKey = keyof typeof translations.en
export type Language = keyof typeof translations
[V0_FILE]typescriptreact:file="app/app/api-keys/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { useWallet } from "@/lib/wallet-context"
import { useLanguage } from "@/lib/language-context"
import { useNotifications } from "@/lib/notification-context"
import { LoginModal } from "@/components/ui/login-modal"
import { TermsModal } from "@/components/ui/terms-modal"
import { 
  Key, 
  Copy, 
  Check, 
  Eye, 
  EyeOff, 
  Plus, 
  Trash2, 
  AlertTriangle,
  Wallet,
  Clock,
  Shield,
  ExternalLink,
  FileText,
  Lock,
  ArrowDownToLine
} from "lucide-react"
import { useTradingStore } from "@/lib/trading-store"
import { cn } from "@/lib/utils"

interface APIAccount {
  accountId: string
  accountName: string
  privateKey: string
  publicKey: string
  publicKeyYCoordinate: string
  createdAt: Date
  lastLogin?: Date
}

// Generate random hex string
function generateHex(length: number): string {
  const chars = '0123456789abcdef'
  let result = ''
  for (let i = 0; i < length; i++) {
    result += chars[Math.floor(Math.random() * chars.length)]
  }
  return result
}

// Generate account ID (numeric)
function generateAccountId(): string {
  return Array.from({ length: 18 }, () => Math.floor(Math.random() * 10)).join('')
}

// Format date
function formatDate(date: Date): string {
  return date.toISOString().replace('T', ' ').slice(0, 19)
}

// Truncate key for display
  function truncateKey(key: string | undefined, start: number = 6, end: number = 6): string {
    if (!key) return '—'
    if (key.length <= start + end + 3) return key
    return `${key.slice(0, start)}...${key.slice(-end)}`
  }

const MAX_API_ACCOUNTS = 5

export default function APIKeysPage() {
  const { wallet, connect } = useWallet()
  const { t } = useLanguage()
  const { addNotification } = useNotifications()
  const tradingState = useTradingStore()
  const isConnected = wallet.isConnected
  
  // Check if user has made a deposit (has balance > 0)
  const hasDeposited = tradingState.perpetualsBalance > 0 || tradingState.spotBalance > 0 || tradingState.predictionBalance > 0
  
  const [accounts, setAccounts] = useState<APIAccount[]>([])
  const [showDocumentation, setShowDocumentation] = useState(false)
  const [showLoginModal, setShowLoginModal] = useState(false)
  const [showTermsModal, setShowTermsModal] = useState(false)
  const [pendingAddress, setPendingAddress] = useState<string | null>(null)
  const [showCreateModal, setShowCreateModal] = useState(false)
  const [newAccountName, setNewAccountName] = useState("")
  const [createdPrivateKey, setCreatedPrivateKey] = useState<string | null>(null)
  const [showPrivateKey, setShowPrivateKey] = useState(false)
  const [copiedId, setCopiedId] = useState<string | null>(null)
  const [viewingKey, setViewingKey] = useState<string | null>(null)
  const [showDeleteConfirm, setShowDeleteConfirm] = useState<string | null>(null)

// Load accounts from localStorage on mount
  useEffect(() => {
    if (isConnected && wallet.address) {
      const saved = localStorage.getItem(`api_accounts_${wallet.address}`)
      if (saved) {
        const parsed = JSON.parse(saved)
        setAccounts(parsed.map((acc: any) => ({
          ...acc,
          createdAt: new Date(acc.createdAt),
          lastLogin: acc.lastLogin ? new Date(acc.lastLogin) : undefined
        })))
      } else {
        // Create default "Main Account" for first time users
        const privateKey = '0x' + generateHex(64)
        const publicKey = '0x' + generateHex(40)
        const defaultAccount: APIAccount = {
          accountId: generateAccountId(),
          accountName: "Main Account",
          privateKey,
          publicKey,
          publicKeyYCoordinate: '0x' + generateHex(64),
          createdAt: new Date(),
        }
        setAccounts([defaultAccount])
        localStorage.setItem(`api_accounts_${wallet.address}`, JSON.stringify([defaultAccount]))
      }
    }
  }, [isConnected, wallet.address])

// Save accounts to localStorage
  const saveAccounts = (newAccounts: APIAccount[]) => {
    if (wallet.address) {
      localStorage.setItem(`api_accounts_${wallet.address}`, JSON.stringify(newAccounts))
    }
    setAccounts(newAccounts)
  }

const handleLoginSuccess = (address: string) => {
    setPendingAddress(address)
    setShowLoginModal(false)
    setShowTermsModal(true)
  }

const handleTermsAccept = () => {
    if (pendingAddress) {
      connect(pendingAddress)
      setPendingAddress(null)
    }
    setShowTermsModal(false)
  }

const handleCreateAccount = () => {
    if (!newAccountName.trim()) return
    
    // Check limit
    if (accounts.length >= MAX_API_ACCOUNTS) {
      addNotification({
        type: "error",
        title: "Limit Reached",
        message: `Maximum ${MAX_API_ACCOUNTS} API accounts allowed per wallet.`
      })
      return
    }

// Generate keypair (simulated secp256k1)
    const privateKey = '0x' + generateHex(64)
    const publicKey = '0x' + generateHex(40)
    const publicKeyYCoordinate = '0x' + generateHex(64)

const newAccount: APIAccount = {
      accountId: generateAccountId(),
      accountName: newAccountName.trim(),
      privateKey,
      publicKey,
      publicKeyYCoordinate,
      createdAt: new Date(),
    }

saveAccounts([...accounts, newAccount])
    setCreatedPrivateKey(privateKey)
    setNewAccountName("")
    
    addNotification({
      type: "success",
      title: "API Account Created",
      message: `Account "${newAccount.accountName}" has been created successfully. Save your private key now!`
    })
  }

const handleDeleteAccount = (accountId: string) => {
    const account = accounts.find(a => a.accountId === accountId)
    saveAccounts(accounts.filter(a => a.accountId !== accountId))
    setShowDeleteConfirm(null)
    
    addNotification({
      type: "warning",
      title: "API Account Deleted",
      message: `Account "${account?.accountName}" has been deleted.`
    })
  }

const copyToClipboard = (text: string, id: string) => {
    navigator.clipboard.writeText(text)
    setCopiedId(id)
    setTimeout(() => setCopiedId(null), 2000)
  }

const closeCreateModal = () => {
    setShowCreateModal(false)
    setNewAccountName("")
    setCreatedPrivateKey(null)
    setShowPrivateKey(false)
  }

return (
    <>
      <LoginModal isOpen={showLoginModal} onClose={() => setShowLoginModal(false)} onSuccess={handleLoginSuccess} />
      <TermsModal isOpen={showTermsModal} onAccept={handleTermsAccept} onDecline={() => { setPendingAddress(null); setShowTermsModal(false) }} />

<main className="max-w-[1400px] mx-auto px-4 py-6">
        {/* Not Connected State */}
        {!isConnected ? (
          <div className="flex flex-col items-center justify-center min-h-[60vh]">
            <Button
              onClick={() => setShowLoginModal(true)}
              className="px-8 py-3 text-base bg-[#50d2c1] hover:bg-[#45b8a8] text-black font-medium"
            >
              Connect Wallet
            </Button>
          </div>
        ) : (
          <>
            {/* Header */}
            <div className="flex items-center justify-between mb-6">
              <div>
                <h1 className="text-2xl font-bold text-white flex items-center gap-3">
                  <Key className="w-7 h-7 text-[#F7931A]" />
                  API Management
                </h1>
                <p className="text-sm text-gray-400 mt-1">
                  Manage your API credentials for programmatic trading access
                  <span className="ml-2 text-gray-500">({accounts.length}/{MAX_API_ACCOUNTS} accounts)</span>
                </p>
              </div>
              <div className="flex items-center gap-3">
                <Button
                  onClick={() => setShowDocumentation(true)}
                  variant="outline"
                  className="border-white/10 text-gray-300 hover:bg-white/5"
                >
                  <FileText className="w-4 h-4 mr-2" />
                  API Docs
                </Button>
                {!hasDeposited ? (
                  <Button
                    onClick={() => window.location.href = '/app/portfolio'}
                    className="bg-[#F7931A] hover:bg-[#E8850C] text-black font-medium"
                  >
                    <ArrowDownToLine className="w-4 h-4 mr-2" />
                    Deposit First
                  </Button>
                ) : accounts.length >= MAX_API_ACCOUNTS ? (
                  <Button
                    disabled
                    className="bg-gray-600 text-gray-400 cursor-not-allowed"
                  >
                    <Lock className="w-4 h-4 mr-2" />
                    Limit Reached
                  </Button>
                ) : (
                  <Button
                    onClick={() => setShowCreateModal(true)}
                    className="bg-[#F7931A] hover:bg-[#E8850C] text-black font-medium"
                  >
                    <Plus className="w-4 h-4 mr-2" />
                    Create API Account
                  </Button>
                )}
              </div>
            </div>
            
            {/* Deposit Required Notice */}
            {!hasDeposited && (
              <div className="bg-[#12121a] border border-[#F7931A]/30 rounded-xl p-4 mb-6">
                <div className="flex items-start gap-3">
                  <ArrowDownToLine className="w-5 h-5 text-[#F7931A] mt-0.5 shrink-0" />
                  <div>
                    <h3 className="text-sm font-medium text-[#F7931A]">Deposit Required</h3>
                    <p className="text-xs text-gray-400 mt-1">
                      You need to make a deposit before creating API keys. This helps ensure account security and prevents abuse.
                    </p>
                  </div>
                </div>
              </div>
            )}

{/* Security Info */}
            <div className="bg-[#12121a] border border-yellow-500/20 rounded-xl p-4 mb-6">
              <div className="flex items-start gap-3">
                <Shield className="w-5 h-5 text-yellow-500 mt-0.5 shrink-0" />
                <div>
                  <h3 className="text-sm font-medium text-yellow-500">Security Notice</h3>
                  <p className="text-xs text-gray-400 mt-1">
                    Your private key is shown only once during account creation. Store it securely - it cannot be recovered.
                    All API requests must be signed using ECDSA secp256k1 algorithm.
                  </p>
                </div>
              </div>
            </div>

{/* API Accounts Table */}
            <div className="bg-[#12121a] border border-white/10 rounded-xl overflow-hidden">
              <div className="overflow-x-auto">
                <table className="w-full">
                  <thead>
                    <tr className="border-b border-white/10">
                      <th className="text-left text-xs font-medium text-gray-400 px-6 py-4">Account Name</th>
                      <th className="text-left text-xs font-medium text-gray-400 px-6 py-4">Account ID</th>
                      <th className="text-left text-xs font-medium text-gray-400 px-6 py-4">L2 Key</th>
                      <th className="text-left text-xs font-medium text-gray-400 px-6 py-4">Private Key</th>
                      <th className="text-left text-xs font-medium text-gray-400 px-6 py-4">Created at</th>
                      <th className="text-right text-xs font-medium text-gray-400 px-6 py-4">Actions</th>
                    </tr>
                  </thead>
                  <tbody>
                    {accounts.length === 0 ? (
                      <tr>
                        <td colSpan={6} className="text-center py-12 text-gray-500">
                          <Key className="w-10 h-10 mx-auto mb-3 opacity-30" />
                          <p>No API accounts created yet</p>
                        </td>
                      </tr>
                    ) : (
                      accounts.map((account) => (
                        <tr key={account.accountId} className="border-b border-white/5 hover:bg-white/[0.02]">
                          <td className="px-6 py-4">
                            <div className="flex items-center gap-2">
                              <div className="w-8 h-8 rounded-lg bg-[#F7931A]/10 flex items-center justify-center">
                                <Wallet className="w-4 h-4 text-[#F7931A]" />
                              </div>
                              <span className="text-sm font-medium text-white">{account.accountName}</span>
                            </div>
                          </td>
                          <td className="px-6 py-4">
                            <div className="flex items-center gap-2">
                              <span className="text-sm text-gray-300 font-mono">{account.accountId}</span>
                              <button
                                onClick={() => copyToClipboard(account.accountId, `id-${account.accountId}`)}
                                className="p-1 rounded hover:bg-white/10 text-gray-500 hover:text-white transition-colors"
                              >
                                {copiedId === `id-${account.accountId}` ? (
                                  <Check className="w-3.5 h-3.5 text-emerald-400" />
                                ) : (
                                  <Copy className="w-3.5 h-3.5" />
                                )}
                              </button>
                            </div>
                          </td>
                          <td className="px-6 py-4">
                            <div className="flex items-center gap-2">
                              <span className="text-sm text-gray-300 font-mono">
                                {truncateKey(account.publicKey)}
                              </span>
                              <button
                                onClick={() => setViewingKey(viewingKey === account.accountId ? null : account.accountId)}
                                className="text-xs text-emerald-400 hover:text-emerald-300 transition-colors"
                              >
                                View
                              </button>
                            </div>
                            {viewingKey === account.accountId && (
                              <div className="mt-2 p-2 bg-black/30 rounded-lg">
                                <p className="text-[10px] text-gray-500 mb-1">Public Key:</p>
                                <div className="flex items-center gap-2">
                                  <code className="text-xs text-gray-300 break-all">{account.publicKey}</code>
                                  <button
                                    onClick={() => copyToClipboard(account.publicKey, `pk-${account.accountId}`)}
                                    className="p-1 rounded hover:bg-white/10 text-gray-500 hover:text-white transition-colors shrink-0"
                                  >
                                    {copiedId === `pk-${account.accountId}` ? (
                                      <Check className="w-3 h-3 text-emerald-400" />
                                    ) : (
                                      <Copy className="w-3 h-3" />
                                    )}
                                  </button>
                                </div>
                                <p className="text-[10px] text-gray-500 mb-1 mt-2">Y Coordinate:</p>
                                <div className="flex items-center gap-2">
                                  <code className="text-xs text-gray-300 break-all">{account.publicKeyYCoordinate}</code>
                                  <button
                                    onClick={() => copyToClipboard(account.publicKeyYCoordinate, `yc-${account.accountId}`)}
                                    className="p-1 rounded hover:bg-white/10 text-gray-500 hover:text-white transition-colors shrink-0"
                                  >
                                    {copiedId === `yc-${account.accountId}` ? (
                                      <Check className="w-3 h-3 text-emerald-400" />
                                    ) : (
                                      <Copy className="w-3 h-3" />
                                    )}
                                  </button>
                                </div>
                              </div>
                            )}
                          </td>
                          <td className="px-6 py-4">
                            <div className="flex items-center gap-2">
                              <span className="text-sm text-gray-300 font-mono">
                                {truncateKey(account.privateKey)}
                              </span>
                              {account.privateKey && (
                              <button
                                onClick={() => copyToClipboard(account.privateKey!, `priv-${account.accountId}`)}
                                className="p-1 rounded hover:bg-white/10 text-gray-500 hover:text-white transition-colors"
                              >
                                {copiedId === `priv-${account.accountId}` ? (
                                  <Check className="w-3.5 h-3.5 text-emerald-400" />
                                ) : (
                                  <Copy className="w-3.5 h-3.5" />
                                )}
                              </button>
                              )}
                            </div>
                          </td>
                          <td className="px-6 py-4">
                            <span className="text-sm text-gray-400">{formatDate(account.createdAt)}</span>
                          </td>
                          <td className="px-6 py-4">
                            <div className="flex items-center justify-end gap-2">
                              <button
                                onClick={() => setShowDeleteConfirm(account.accountId)}
                                className="p-2 rounded-lg hover:bg-red-500/10 text-gray-500 hover:text-red-400 transition-colors"
                              >
                                <Trash2 className="w-4 h-4" />
                              </button>
                            </div>
                          </td>
                        </tr>
                      ))
                    )}
                  </tbody>
                </table>
              </div>
            </div>

{/* API Documentation Link */}
            <div className="mt-6 flex items-center gap-4">
              <button
                onClick={() => setShowDocumentation(true)}
                className="flex items-center gap-2 text-sm text-[#F7931A] hover:text-[#FFB347] transition-colors"
              >
                <FileText className="w-4 h-4" />
                View API Documentation
              </button>
              <span className="text-gray-600">|</span>
              <span className="text-xs text-gray-500">
                Signature Algorithm: ECDSA secp256k1 | Headers: X-ACCOUNT-ID, X-PUBLIC-KEY, X-SIGNATURE, X-TIMESTAMP
              </span>
            </div>
          </>
        )}
      </main>

{/* Create Account Modal */}
      {showCreateModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center">
          <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={closeCreateModal} />
          <div className="relative bg-[#12121a] border border-white/10 rounded-2xl p-6 w-full max-w-md mx-4 shadow-2xl">
            {!createdPrivateKey ? (
              <>
                <h2 className="text-lg font-semibold text-white mb-4">Create API Account</h2>
                <div className="space-y-4">
                  <div>
                    <label className="text-sm text-gray-400 mb-2 block">Account Name</label>
                    <input
                      type="text"
                      value={newAccountName}
                      onChange={(e) => setNewAccountName(e.target.value)}
                      placeholder="e.g., Trading Bot, Market Maker"
                      className="w-full bg-[#0a0a0f] border border-white/10 rounded-lg px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:border-[#50d2c1]/50"
                    />
                  </div>
                  <div className="bg-yellow-500/10 border border-yellow-500/20 rounded-lg p-3">
                    <div className="flex items-start gap-2">
                      <AlertTriangle className="w-4 h-4 text-yellow-500 mt-0.5 shrink-0" />
                      <p className="text-xs text-yellow-500/80">
                        Your private key will be shown only once after creation. Make sure to save it securely.
                      </p>
                    </div>
                  </div>
                  <div className="flex gap-3">
                    <Button
                      variant="outline"
                      onClick={closeCreateModal}
                      className="flex-1 border-white/10 text-gray-400 hover:bg-white/5"
                    >
                      Cancel
                    </Button>
                    <Button
                      onClick={handleCreateAccount}
                      disabled={!newAccountName.trim()}
                      className="flex-1 bg-[#50d2c1] hover:bg-[#45b8a8] text-black font-medium disabled:opacity-50"
                    >
                      Create Account
                    </Button>
                  </div>
                </div>
              </>
            ) : (
              <>
                <div className="flex items-center gap-3 mb-4">
                  <div className="w-10 h-10 rounded-full bg-emerald-500/10 flex items-center justify-center">
                    <Check className="w-5 h-5 text-emerald-400" />
                  </div>
                  <div>
                    <h2 className="text-lg font-semibold text-white">Account Created!</h2>
                    <p className="text-xs text-gray-400">Save your private key now</p>
                  </div>
                </div>
                
                <div className="space-y-4">
                  <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-3">
                    <div className="flex items-start gap-2">
                      <AlertTriangle className="w-4 h-4 text-red-400 mt-0.5 shrink-0" />
                      <p className="text-xs text-red-400">
                        This is the only time your private key will be shown. Copy and store it securely. It cannot be recovered!
                      </p>
                    </div>
                  </div>
                  
                  <div>
                    <label className="text-sm text-gray-400 mb-2 block">Private Key</label>
                    <div className="bg-[#0a0a0f] border border-white/10 rounded-lg p-3">
                      <div className="flex items-center justify-between gap-2">
                        <code className="text-xs text-gray-300 break-all">
                          {showPrivateKey ? createdPrivateKey : '•'.repeat(66)}
                        </code>
                        <div className="flex items-center gap-1 shrink-0">
                          <button
                            onClick={() => setShowPrivateKey(!showPrivateKey)}
                            className="p-1.5 rounded hover:bg-white/10 text-gray-500 hover:text-white transition-colors"
                          >
                            {showPrivateKey ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                          </button>
                          <button
                            onClick={() => copyToClipboard(createdPrivateKey, 'private-key')}
                            className="p-1.5 rounded hover:bg-white/10 text-gray-500 hover:text-white transition-colors"
                          >
                            {copiedId === 'private-key' ? (
                              <Check className="w-4 h-4 text-emerald-400" />
                            ) : (
                              <Copy className="w-4 h-4" />
                            )}
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>

<Button
                    onClick={closeCreateModal}
                    className="w-full bg-[#50d2c1] hover:bg-[#45b8a8] text-black font-medium"
                  >
                    I've Saved My Private Key
                  </Button>
                </div>
              </>
            )}
          </div>
        </div>
      )}

{/* Delete Confirmation Modal */}
      {showDeleteConfirm && (
        <div className="fixed inset-0 z-50 flex items-center justify-center">
          <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={() => setShowDeleteConfirm(null)} />
          <div className="relative bg-[#12121a] border border-white/10 rounded-2xl p-6 w-full max-w-sm mx-4 shadow-2xl">
            <div className="flex items-center gap-3 mb-4">
              <div className="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center">
                <AlertTriangle className="w-5 h-5 text-red-400" />
              </div>
              <div>
                <h2 className="text-lg font-semibold text-white">Delete Account?</h2>
                <p className="text-xs text-gray-400">This action cannot be undone</p>
              </div>
            </div>
            <p className="text-sm text-gray-400 mb-4">
              Are you sure you want to delete this API account? All associated API access will be revoked immediately.
            </p>
            <div className="flex gap-3">
              <Button
                variant="outline"
                onClick={() => setShowDeleteConfirm(null)}
                className="flex-1 border-white/10 text-gray-400 hover:bg-white/5"
              >
                Cancel
              </Button>
              <Button
                onClick={() => handleDeleteAccount(showDeleteConfirm)}
                className="flex-1 bg-red-500 hover:bg-red-600 text-white font-medium"
              >
                Delete
              </Button>
            </div>
          </div>
        </div>
      )}

{/* API Documentation Modal */}
      {showDocumentation && (
        <div className="fixed inset-0 z-50 flex items-center justify-center">
          <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={() => setShowDocumentation(false)} />
          <div className="relative bg-[#12121a] border border-white/10 rounded-2xl w-full max-w-3xl mx-4 shadow-2xl max-h-[85vh] overflow-hidden flex flex-col">
            <div className="flex items-center justify-between p-6 border-b border-white/10">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-lg bg-[#F7931A]/10 flex items-center justify-center">
                  <FileText className="w-5 h-5 text-[#F7931A]" />
                </div>
                <div>
                  <h2 className="text-lg font-semibold text-white">API Documentation</h2>
                  <p className="text-xs text-gray-400">963X Trading API v1.0</p>
                </div>
              </div>
              <button
                onClick={() => setShowDocumentation(false)}
                className="p-2 rounded-lg hover:bg-white/5 text-gray-400 hover:text-white transition-colors"
              >
                <Eye className="w-5 h-5" />
              </button>
            </div>
            
            <div className="p-6 overflow-y-auto flex-1" style={{ scrollbarWidth: 'thin', scrollbarColor: 'rgba(255,255,255,0.1) transparent' }}>
              <div className="space-y-6">
                {/* Quick Start */}
                <div className="bg-[#F7931A]/10 border border-[#F7931A]/20 rounded-xl p-4">
                  <h3 className="text-sm font-medium text-[#F7931A] mb-2">Quick Start</h3>
                  <ol className="text-xs text-gray-400 space-y-1.5 list-decimal list-inside">
                    <li>Create an API account and save your private key securely</li>
                    <li>Use ECDSA secp256k1 to sign your requests with the private key</li>
                    <li>Include required headers (X-ACCOUNT-ID, X-PUBLIC-KEY, X-SIGNATURE, X-TIMESTAMP)</li>
                    <li>Make API calls to https://api.963x.xyz/v1</li>
                  </ol>
                </div>

{/* Base URL */}
                <div>
                  <h3 className="text-sm font-medium text-white mb-2">Base URL</h3>
                  <div className="bg-[#0a0a0f] border border-white/10 rounded-lg p-3 flex items-center justify-between">
                    <code className="text-sm text-[#50d2c1]">https://api.963x.xyz/v1</code>
                    <span className="text-[10px] text-gray-500 px-2 py-0.5 bg-emerald-500/10 text-emerald-400 rounded">Production</span>
                  </div>
                </div>

{/* Authentication */}
                <div>
                  <h3 className="text-sm font-medium text-white mb-2">Authentication</h3>
                  <p className="text-xs text-gray-400 mb-3">
                    All private API requests must be signed using ECDSA secp256k1. Include these headers:
                  </p>
                  <div className="bg-[#0a0a0f] border border-white/10 rounded-lg p-3 space-y-2">
                    <div className="flex items-start gap-2">
                      <span className="text-xs text-[#F7931A] w-32 shrink-0">X-ACCOUNT-ID:</span>
                      <code className="text-xs text-gray-300">Your 18-digit account ID</code>
                    </div>
                    <div className="flex items-start gap-2">
                      <span className="text-xs text-[#F7931A] w-32 shrink-0">X-PUBLIC-KEY:</span>
                      <code className="text-xs text-gray-300">Your L2 public key (0x...)</code>
                    </div>
                    <div className="flex items-start gap-2">
                      <span className="text-xs text-[#F7931A] w-32 shrink-0">X-SIGNATURE:</span>
                      <code className="text-xs text-gray-300">ECDSA signature of SHA256(timestamp + method + path + body)</code>
                    </div>
                    <div className="flex items-start gap-2">
                      <span className="text-xs text-[#F7931A] w-32 shrink-0">X-TIMESTAMP:</span>
                      <code className="text-xs text-gray-300">Unix timestamp in milliseconds (valid for 30 seconds)</code>
                    </div>
                  </div>
                </div>

{/* Markets Endpoints */}
                <div>
                  <h3 className="text-sm font-medium text-white mb-3">Markets Endpoints</h3>
                  <div className="space-y-3">
                    <div className="bg-[#0a0a0f] border border-white/10 rounded-lg p-4">
                      <div className="flex items-center gap-2 mb-2">
                        <span className="px-2 py-0.5 text-xs font-medium bg-emerald-500/20 text-emerald-400 rounded">GET</span>
                        <code className="text-sm text-gray-300">/markets</code>
                        <span className="text-[10px] text-gray-500 ml-auto">Public</span>
                      </div>
                      <p className="text-xs text-gray-500">Get all available trading markets</p>
                    </div>
                    <div className="bg-[#0a0a0f] border border-white/10 rounded-lg p-4">
                      <div className="flex items-center gap-2 mb-2">
                        <span className="px-2 py-0.5 text-xs font-medium bg-emerald-500/20 text-emerald-400 rounded">GET</span>
                        <code className="text-sm text-gray-300">/markets/:symbol</code>
                        <span className="text-[10px] text-gray-500 ml-auto">Public</span>
                      </div>
                      <p className="text-xs text-gray-500">Get market details and 24h stats</p>
                    </div>
                    <div className="bg-[#0a0a0f] border border-white/10 rounded-lg p-4">
                      <div className="flex items-center gap-2 mb-2">
                        <span className="px-2 py-0.5 text-xs font-medium bg-emerald-500/20 text-emerald-400 rounded">GET</span>
                        <code className="text-sm text-gray-300">/markets/:symbol/orderbook</code>
                        <span className="text-[10px] text-gray-500 ml-auto">Public</span>
                      </div>
                      <p className="text-xs text-gray-500">Get orderbook with bids and asks</p>
                    </div>
                  </div>
                </div>

{/* Trading Endpoints */}
                <div>
                  <h3 className="text-sm font-medium text-white mb-3">Trading Endpoints</h3>
                  <div className="space-y-3">
                    <div className="bg-[#0a0a0f] border border-white/10 rounded-lg p-4">
                      <div className="flex items-center gap-2 mb-2">
                        <span className="px-2 py-0.5 text-xs font-medium bg-blue-500/20 text-blue-400 rounded">POST</span>
                        <code className="text-sm text-gray-300">/orders</code>
                        <span className="text-[10px] text-gray-500 ml-auto">Private</span>
                      </div>
                      <p className="text-xs text-gray-500 mb-2">Create a new order</p>
                      <div className="bg-black/30 rounded p-2 mt-2">
                        <code className="text-[10px] text-gray-400 block whitespace-pre">{`{
  "market": "BTC-USD",
  "side": "buy",           // buy | sell
  "type": "limit",         // limit | market | stop_limit | stop_market
  "size": "0.1",
  "price": "50000",        // required for limit orders
  "timeInForce": "GTC",    // GTC | IOC | FOK
  "postOnly": false,
  "reduceOnly": false
}`}</code>
                      </div>
                    </div>
                    <div className="bg-[#0a0a0f] border border-white/10 rounded-lg p-4">
                      <div className="flex items-center gap-2 mb-2">
                        <span className="px-2 py-0.5 text-xs font-medium bg-emerald-500/20 text-emerald-400 rounded">GET</span>
                        <code className="text-sm text-gray-300">/orders</code>
                        <span className="text-[10px] text-gray-500 ml-auto">Private</span>
                      </div>
                      <p className="text-xs text-gray-500">Get all open orders. Optional: ?market=BTC-USD&status=open</p>
                    </div>
                    <div className="bg-[#0a0a0f] border border-white/10 rounded-lg p-4">
                      <div className="flex items-center gap-2 mb-2">
                        <span className="px-2 py-0.5 text-xs font-medium bg-red-500/20 text-red-400 rounded">DELETE</span>
                        <code className="text-sm text-gray-300">/orders/:orderId</code>
                        <span className="text-[10px] text-gray-500 ml-auto">Private</span>
                      </div>
                      <p className="text-xs text-gray-500">Cancel an order by ID</p>
                    </div>
                    <div className="bg-[#0a0a0f] border border-white/10 rounded-lg p-4">
                      <div className="flex items-center gap-2 mb-2">
                        <span className="px-2 py-0.5 text-xs font-medium bg-red-500/20 text-red-400 rounded">DELETE</span>
                        <code className="text-sm text-gray-300">/orders</code>
                        <span className="text-[10px] text-gray-500 ml-auto">Private</span>
                      </div>
                      <p className="text-xs text-gray-500">Cancel all orders. Optional: ?market=BTC-USD</p>
                    </div>
                  </div>
                </div>

{/* Account Endpoints */}
                <div>
                  <h3 className="text-sm font-medium text-white mb-3">Account Endpoints</h3>
                  <div className="space-y-3">
                    <div className="bg-[#0a0a0f] border border-white/10 rounded-lg p-4">
                      <div className="flex items-center gap-2 mb-2">
                        <span className="px-2 py-0.5 text-xs font-medium bg-emerald-500/20 text-emerald-400 rounded">GET</span>
                        <code className="text-sm text-gray-300">/account/balance</code>
                        <span className="text-[10px] text-gray-500 ml-auto">Private</span>
                      </div>
                      <p className="text-xs text-gray-500">Get account balances for all assets</p>
                    </div>
                    <div className="bg-[#0a0a0f] border border-white/10 rounded-lg p-4">
                      <div className="flex items-center gap-2 mb-2">
                        <span className="px-2 py-0.5 text-xs font-medium bg-emerald-500/20 text-emerald-400 rounded">GET</span>
                        <code className="text-sm text-gray-300">/account/positions</code>
                        <span className="text-[10px] text-gray-500 ml-auto">Private</span>
                      </div>
                      <p className="text-xs text-gray-500">Get all open positions with PnL</p>
                    </div>
                    <div className="bg-[#0a0a0f] border border-white/10 rounded-lg p-4">
                      <div className="flex items-center gap-2 mb-2">
                        <span className="px-2 py-0.5 text-xs font-medium bg-blue-500/20 text-blue-400 rounded">POST</span>
                        <code className="text-sm text-gray-300">/account/withdraw</code>
                        <span className="text-[10px] text-gray-500 ml-auto">Private</span>
                      </div>
                      <p className="text-xs text-gray-500">Initiate a withdrawal request</p>
                    </div>
                  </div>
                </div>

{/* WebSocket */}
                <div>
                  <h3 className="text-sm font-medium text-white mb-3">WebSocket</h3>
                  <div className="bg-[#0a0a0f] border border-white/10 rounded-lg p-4">
                    <div className="flex items-center gap-2 mb-2">
                      <span className="px-2 py-0.5 text-xs font-medium bg-purple-500/20 text-purple-400 rounded">WS</span>
                      <code className="text-sm text-gray-300">wss://ws.963x.xyz/v1</code>
                    </div>
                    <p className="text-xs text-gray-500 mb-3">Real-time market data and account updates</p>
                    <div className="text-xs text-gray-400 space-y-1">
                      <p><span className="text-[#50d2c1]">orderbook:</span> Real-time orderbook updates</p>
                      <p><span className="text-[#50d2c1]">trades:</span> Recent trades stream</p>
                      <p><span className="text-[#50d2c1]">ticker:</span> 24h price statistics</p>
                      <p><span className="text-[#50d2c1]">account:</span> Account balance & order updates (authenticated)</p>
                    </div>
                  </div>
                </div>

{/* Rate Limits */}
                <div>
                  <h3 className="text-sm font-medium text-white mb-2">Rate Limits</h3>
                  <div className="bg-[#0a0a0f] border border-white/10 rounded-lg overflow-hidden">
                    <table className="w-full text-xs">
                      <thead>
                        <tr className="border-b border-white/10 bg-white/[0.02]">
                          <th className="text-left text-gray-500 px-3 py-2">Tier</th>
                          <th className="text-center text-gray-500 px-3 py-2">Public</th>
                          <th className="text-center text-gray-500 px-3 py-2">Private</th>
                          <th className="text-center text-gray-500 px-3 py-2">Orders</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr className="border-b border-white/5">
                          <td className="text-gray-300 px-3 py-2">Free</td>
                          <td className="text-center text-gray-400 px-3 py-2">100/min</td>
                          <td className="text-center text-gray-400 px-3 py-2">300/min</td>
                          <td className="text-center text-gray-400 px-3 py-2">10/sec</td>
                        </tr>
                        <tr className="border-b border-white/5">
                          <td className="text-gray-300 px-3 py-2">Pro</td>
                          <td className="text-center text-gray-400 px-3 py-2">500/min</td>
                          <td className="text-center text-gray-400 px-3 py-2">1000/min</td>
                          <td className="text-center text-gray-400 px-3 py-2">50/sec</td>
                        </tr>
                        <tr>
                          <td className="text-[#F7931A] px-3 py-2">Enterprise</td>
                          <td className="text-center text-gray-400 px-3 py-2">Unlimited</td>
                          <td className="text-center text-gray-400 px-3 py-2">Unlimited</td>
                          <td className="text-center text-gray-400 px-3 py-2">200/sec</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>

{/* Code Example */}
                <div>
                  <h3 className="text-sm font-medium text-white mb-2">Python Example</h3>
                  <div className="bg-[#0a0a0f] border border-white/10 rounded-lg p-3 overflow-x-auto">
                    <code className="text-[10px] text-gray-400 block whitespace-pre">{`import hashlib
import time
import requests
from eth_account import Account

PRIVATE_KEY = "your_private_key"
ACCOUNT_ID = "your_account_id"
BASE_URL = "https://api.963x.xyz/v1"

def sign_request(method, path, body=""):
    timestamp = str(int(time.time() * 1000))
    message = timestamp + method + path + body
    message_hash = hashlib.sha256(message.encode()).hexdigest()
    signed = Account.sign_message(message_hash, PRIVATE_KEY)
    return timestamp, signed.signature.hex()

def get_balance():
    path = "/account/balance"
    timestamp, signature = sign_request("GET", path)
    headers = {
        "X-ACCOUNT-ID": ACCOUNT_ID,
        "X-PUBLIC-KEY": Account.from_key(PRIVATE_KEY).address,
        "X-SIGNATURE": signature,
        "X-TIMESTAMP": timestamp
    }
    return requests.get(BASE_URL + path, headers=headers).json()`}</code>
                  </div>
                </div>

{/* Error Codes */}
                <div>
                  <h3 className="text-sm font-medium text-white mb-2">Error Codes</h3>
                  <div className="bg-[#0a0a0f] border border-white/10 rounded-lg p-3 space-y-2">
                    <div className="flex items-center gap-3 text-xs">
                      <span className="text-emerald-400 font-mono w-12">200</span>
                      <span className="text-gray-400">Success</span>
                    </div>
                    <div className="flex items-center gap-3 text-xs">
                      <span className="text-yellow-400 font-mono w-12">400</span>
                      <span className="text-gray-400">Bad Request - Invalid parameters</span>
                    </div>
                    <div className="flex items-center gap-3 text-xs">
                      <span className="text-red-400 font-mono w-12">401</span>
                      <span className="text-gray-400">Unauthorized - Invalid or expired signature</span>
                    </div>
                    <div className="flex items-center gap-3 text-xs">
                      <span className="text-red-400 font-mono w-12">403</span>
                      <span className="text-gray-400">Forbidden - Insufficient permissions or balance</span>
                    </div>
                    <div className="flex items-center gap-3 text-xs">
                      <span className="text-red-400 font-mono w-12">404</span>
                      <span className="text-gray-400">Not Found - Resource does not exist</span>
                    </div>
                    <div className="flex items-center gap-3 text-xs">
                      <span className="text-orange-400 font-mono w-12">429</span>
                      <span className="text-gray-400">Too Many Requests - Rate limit exceeded</span>
                    </div>
                    <div className="flex items-center gap-3 text-xs">
                      <span className="text-red-400 font-mono w-12">500</span>
                      <span className="text-gray-400">Internal Server Error</span>
                    </div>
                  </div>
                </div>

{/* Best Practices */}
                <div>
                  <h3 className="text-sm font-medium text-white mb-2">Best Practices</h3>
                  <div className="bg-[#0a0a0f] border border-white/10 rounded-lg p-3">
                    <ul className="text-xs text-gray-400 space-y-1.5 list-disc list-inside">
                      <li>Never share or expose your private key</li>
                      <li>Use environment variables for credentials</li>
                      <li>Implement exponential backoff for rate limits</li>
                      <li>Cache market data to reduce API calls</li>
                      <li>Use WebSocket for real-time data instead of polling</li>
                      <li>Handle all error responses gracefully</li>
                      <li>API keys expire after 90 days - rotate regularly</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            
            <div className="p-4 border-t border-white/10 bg-[#0a0a0f]">
              <Button
                onClick={() => setShowDocumentation(false)}
                className="w-full bg-[#F7931A] hover:bg-[#E8850C] text-black font-medium"
              >
                Close Documentation
              </Button>
            </div>
          </div>
        </div>
      )}
    </>
  )
}
[V0_FILE]typescriptreact:file="components/ui/login-modal.tsx" isMerged="true"
"use client"

import { useState, useEffect, useRef } from "react"
import { Button } from "@/components/ui/button"
import { SunBitLogo } from "@/components/ui/sunbit-logo"
import { X, ArrowLeft, Fingerprint, Loader2, Mail } from "lucide-react"
import Link from "next/link"

interface LoginModalProps {
  isOpen: boolean
  onClose: () => void
  onSuccess: (address: string) => void
}

// EIP-6963 types
interface EIP6963ProviderInfo {
  uuid: string
  name: string
  icon: string
  rdns: string
}

interface EIP6963ProviderDetail {
  info: EIP6963ProviderInfo
  provider: any
}

interface EIP6963AnnounceProviderEvent extends CustomEvent {
  detail: EIP6963ProviderDetail
}

const WALLET_LOGOS: Record<string, string> = {
  metamask: "https://upload.wikimedia.org/wikipedia/commons/3/36/MetaMask_Fox.svg",
  backpack: "https://backpack.app/favicon.ico",
  keplr: "https://wallet.keplr.app/favicon.ico",
  okx: "https://static.okx.com/cdn/assets/imgs/221/C5E8D768569D14D7.png",
  phantom: "https://phantom.app/img/phantom-logo.svg",
  safepal: "https://www.safepal.com/favicon.ico",
  walletconnect: "https://avatars.githubusercontent.com/u/37784886",
  coinbase: "https://altcoinsbox.com/wp-content/uploads/2022/12/coinbase-wallet-logo.png",
  trust: "https://trustwallet.com/assets/images/media/assets/trust_platform.svg",
  rabby: "https://rabby.io/assets/images/logo-128.png",
  rainbow: "https://avatars.githubusercontent.com/u/48327834",
  bitget: "https://img.bitgetimg.com/image/third/1701681377125.png",
  tronlink: "https://www.tronlink.org/favicon.ico",
}

const WALLET_CONFIGS: Record<string, { name: string; rdns?: string }> = {
  metamask: { name: "MetaMask", rdns: "io.metamask" },
  backpack: { name: "Backpack", rdns: "app.backpack" },
  keplr: { name: "Keplr", rdns: "app.keplr" },
  okx: { name: "OKX Wallet", rdns: "com.okex.wallet" },
  phantom: { name: "Phantom", rdns: "app.phantom" },
  safepal: { name: "SafePal", rdns: "io.safepal" },
  walletconnect: { name: "WalletConnect" },
  coinbase: { name: "Coinbase Wallet", rdns: "com.coinbase.wallet" },
  trust: { name: "Trust Wallet", rdns: "com.trustwallet.app" },
  rabby: { name: "Rabby", rdns: "io.rabby" },
  rainbow: { name: "Rainbow", rdns: "me.rainbow" },
  bitget: { name: "Bitget Wallet", rdns: "com.bitget.web3wallet" },
  tronlink: { name: "TronLink", rdns: "io.tronlink" },
}

const WALLET_ORDER = [
  "metamask",
  "backpack",
  "keplr",
  "okx",
  "phantom",
  "tronlink",
  "safepal",
  "walletconnect",
  "coinbase",
  "trust",
  "rabby",
  "rainbow",
  "bitget",
]

function WalletLogo({ walletId, size = 32, eip6963Icon }: { walletId: string; size?: number; eip6963Icon?: string }) {
  const [imgError, setImgError] = useState(false)
  const config = WALLET_CONFIGS[walletId]
  const logoUrl = eip6963Icon || WALLET_LOGOS[walletId]

if (imgError || !logoUrl) {
    return (
      <div
        className="rounded-xl flex items-center justify-center bg-gradient-to-br from-zinc-600 to-zinc-700 text-white font-bold"
        style={{ width: size, height: size, fontSize: size * 0.4 }}
      >
        {config?.name?.charAt(0) || "?"}
      </div>
    )
  }

return (
    <div
      style={{ width: size, height: size }}
      className="rounded-xl overflow-hidden bg-white/5 flex items-center justify-center"
    >
      <img
        src={logoUrl}
        alt={config?.name || walletId}
        className="w-full h-full object-contain"
        onError={() => setImgError(true)}
      />
    </div>
  )
}

export function LoginModal({ isOpen, onClose, onSuccess }: LoginModalProps) {
  const [currentView, setCurrentView] = useState<"main" | "email-input" | "email-code" | "passkey" | "wallet-connecting" | "wallet-error">("main")
  const [email, setEmail] = useState("")
  const [verificationCode, setVerificationCode] = useState(["", "", "", "", "", ""])
  const [isLoading, setIsLoading] = useState(false)
  const [isConnecting, setIsConnecting] = useState(false)
  const [connectingId, setConnectingId] = useState<string | null>(null)
  const [connectingWalletName, setConnectingWalletName] = useState<string>("")
  const [passkeyStep, setPasskeyStep] = useState<"choose" | "creating" | "logging">("choose")
  const [eip6963Providers, setEip6963Providers] = useState<Map<string, EIP6963ProviderDetail>>(new Map())
  const codeInputRefs = useRef<(HTMLInputElement | null)[]>([])

// Listen for EIP-6963 wallet announcements
  useEffect(() => {
    if (!isOpen) return

const providers = new Map<string, EIP6963ProviderDetail>()

const handleAnnounce = (event: EIP6963AnnounceProviderEvent) => {
      const { info, provider } = event.detail
      providers.set(info.rdns, { info, provider })
      setEip6963Providers(new Map(providers))
    }

window.addEventListener("eip6963:announceProvider", handleAnnounce as EventListener)
    window.dispatchEvent(new Event("eip6963:requestProvider"))

return () => {
      window.removeEventListener("eip6963:announceProvider", handleAnnounce as EventListener)
    }
  }, [isOpen])

// Handle email submission
  const handleEmailSubmit = async () => {
    if (!email || !email.includes("@")) return
    setIsLoading(true)
    
    // Simulate sending verification code
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    setIsLoading(false)
    setCurrentView("email-code")
  }

// Handle verification code input
  const handleCodeChange = (index: number, value: string) => {
    if (value.length > 1) {
      // Handle paste
      const chars = value.slice(0, 6).split("")
      const newCode = [...verificationCode]
      chars.forEach((char, i) => {
        if (index + i < 6) {
          newCode[index + i] = char
        }
      })
      setVerificationCode(newCode)
      const nextIndex = Math.min(index + chars.length, 5)
      codeInputRefs.current[nextIndex]?.focus()
    } else {
      const newCode = [...verificationCode]
      newCode[index] = value
      setVerificationCode(newCode)
      
      // Auto-focus next input
      if (value && index < 5) {
        codeInputRefs.current[index + 1]?.focus()
      }
    }
  }

const handleCodeKeyDown = (index: number, e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Backspace" && !verificationCode[index] && index > 0) {
      codeInputRefs.current[index - 1]?.focus()
    }
  }

// Verify code and login
  const handleVerifyCode = async () => {
    const code = verificationCode.join("")
    if (code.length !== 6) return
    
    setIsLoading(true)
    await new Promise(resolve => setTimeout(resolve, 1500))
    
    // Generate mock address for email login
    const mockAddress = "0x" + Array.from(crypto.getRandomValues(new Uint8Array(20)))
      .map((b) => b.toString(16).padStart(2, "0"))
      .join("")
    
    onSuccess(mockAddress)
    onClose()
  }

// Auto-verify when code is complete
  useEffect(() => {
    if (verificationCode.every(c => c !== "") && currentView === "email-code") {
      handleVerifyCode()
    }
  }, [verificationCode, currentView])

// Resend code
  const handleResendCode = async () => {
    setVerificationCode(["", "", "", "", "", ""])
    setIsLoading(true)
    await new Promise(resolve => setTimeout(resolve, 1000))
    setIsLoading(false)
  }

const handleWalletConnect = async (walletId: string) => {
    // Prevent multiple simultaneous connection attempts
    if (isConnecting) return
    
    const config = WALLET_CONFIGS[walletId]
    setIsConnecting(true)
    setConnectingId(walletId)
    setConnectingWalletName(config?.name || walletId)
    setCurrentView("wallet-connecting")

try {
      let provider: any = null

// First check EIP-6963 providers
      if (config?.rdns && eip6963Providers.has(config.rdns)) {
        provider = eip6963Providers.get(config.rdns)?.provider
      }

// Fallback to legacy detection
      if (!provider) {
        const ethereum = (window as any).ethereum

switch (walletId) {
          case "metamask":
            if (ethereum?.providers) {
              provider = ethereum.providers.find((p: any) => p.isMetaMask && !p.isOKExWallet && !p.isBitKeep)
            } else if (ethereum?.isMetaMask && !ethereum.isOKExWallet) {
              provider = ethereum
            }
            break
          case "okx":
            provider = (window as any).okxwallet || (ethereum?.isOKExWallet ? ethereum : null)
            break
          case "phantom":
            provider = (window as any).phantom?.ethereum || (window as any).solana
            break
          case "coinbase":
            if (ethereum?.providers) {
              provider = ethereum.providers.find((p: any) => p.isCoinbaseWallet)
            } else if (ethereum?.isCoinbaseWallet) {
              provider = ethereum
            }
            break
          case "trust":
            provider = (window as any).trustwallet || (ethereum?.isTrust ? ethereum : null)
            break
          case "rabby":
            provider = (window as any).rabby || (ethereum?.isRabby ? ethereum : null)
            break
          case "bitget":
            provider = (window as any).bitkeep?.ethereum || (ethereum?.isBitKeep ? ethereum : null)
            break
          case "tronlink":
            // TronLink uses tronWeb instead of ethereum provider
            const tronWeb = (window as any).tronWeb
            if (tronWeb && tronWeb.defaultAddress?.base58) {
              // TronLink is already connected
              onSuccess(tronWeb.defaultAddress.base58)
              onClose()
              return
            } else if ((window as any).tronLink) {
              // Request connection
              try {
                const res = await (window as any).tronLink.request({ method: 'tron_requestAccounts' })
                if (res?.code === 200 || (window as any).tronWeb?.defaultAddress?.base58) {
                  onSuccess((window as any).tronWeb.defaultAddress.base58)
                  onClose()
                  return
                }
              } catch {
                // Fall through to simulation
              }
            }
            provider = null
            break
          default:
            provider = ethereum
        }
      }

if (provider && provider.request) {
        const accounts = await provider.request({ method: "eth_requestAccounts" })
        if (accounts && accounts.length > 0) {
          onSuccess(accounts[0])
          onClose()
        }
      } else {
        // Simulate wallet connection for demo
        await new Promise(resolve => setTimeout(resolve, 2000))
        const mockAddress = "0x" + Array.from(crypto.getRandomValues(new Uint8Array(20)))
          .map((b) => b.toString(16).padStart(2, "0"))
          .join("")
        onSuccess(mockAddress)
        onClose()
      }
    } catch (error: any) {
      // Check for pending request first - don't log or show error
      if (error.message?.includes("already pending") || error.code === -32002) {
        // Request already pending - just wait, don't show error or reset state
        return
      }
      
      console.error("Wallet connection error:", error)
      // User rejected or error occurred - show error view
      if (error.code === 4001) {
        // User rejected the connection
        setCurrentView("wallet-error")
      } else {
        // Other error - still show error view
        setCurrentView("wallet-error")
      }
      setIsConnecting(false)
    }
  }
  
  const handleRetryConnection = () => {
    if (connectingId) {
      handleWalletConnect(connectingId)
    } else {
      setCurrentView("main")
    }
  }

// Check if WebAuthn is available
  const isWebAuthnAvailable = typeof window !== "undefined" && 
    window.PublicKeyCredential !== undefined &&
    typeof window.PublicKeyCredential === "function"

const handlePasskeyCreate = async () => {
    setPasskeyStep("creating")
    
    if (!isWebAuthnAvailable) {
      await new Promise(resolve => setTimeout(resolve, 1500))
      const mockAddress = "0x" + Array.from(crypto.getRandomValues(new Uint8Array(20)))
        .map((b) => b.toString(16).padStart(2, "0"))
        .join("")
      onSuccess(mockAddress)
      onClose()
      return
    }
    
    try {
      const challenge = new Uint8Array(32)
      crypto.getRandomValues(challenge)

const credential = await navigator.credentials.create({
        publicKey: {
          challenge,
          rp: { name: "963X", id: window.location.hostname },
          user: {
            id: new Uint8Array(16),
            name: "user@963x.xyz",
            displayName: "963X User",
          },
          pubKeyCredParams: [
            { alg: -7, type: "public-key" },
            { alg: -257, type: "public-key" },
          ],
          authenticatorSelection: {
            authenticatorAttachment: "platform",
            userVerification: "required",
          },
          timeout: 60000,
        },
      })

if (credential) {
        const mockAddress = "0x" + Array.from(crypto.getRandomValues(new Uint8Array(20)))
          .map((b) => b.toString(16).padStart(2, "0"))
          .join("")
        onSuccess(mockAddress)
        onClose()
      }
    } catch (error: any) {
      if (error?.name === "NotAllowedError" || error?.message?.includes("publickey-credentials")) {
        await new Promise(resolve => setTimeout(resolve, 1000))
        const mockAddress = "0x" + Array.from(crypto.getRandomValues(new Uint8Array(20)))
          .map((b) => b.toString(16).padStart(2, "0"))
          .join("")
        onSuccess(mockAddress)
        onClose()
        return
      }
      console.error("Passkey creation error:", error)
      setPasskeyStep("choose")
    }
  }

const handlePasskeyLogin = async () => {
    setPasskeyStep("logging")
    
    if (!isWebAuthnAvailable) {
      await new Promise(resolve => setTimeout(resolve, 1500))
      const mockAddress = "0x" + Array.from(crypto.getRandomValues(new Uint8Array(20)))
        .map((b) => b.toString(16).padStart(2, "0"))
        .join("")
      onSuccess(mockAddress)
      onClose()
      return
    }
    
    try {
      const challenge = new Uint8Array(32)
      crypto.getRandomValues(challenge)

const credential = await navigator.credentials.get({
        publicKey: {
          challenge,
          rpId: window.location.hostname,
          userVerification: "required",
          timeout: 60000,
        },
      })

if (credential) {
        const mockAddress = "0x" + Array.from(crypto.getRandomValues(new Uint8Array(20)))
          .map((b) => b.toString(16).padStart(2, "0"))
          .join("")
        onSuccess(mockAddress)
        onClose()
      }
    } catch (error: any) {
      if (error?.name === "NotAllowedError" || error?.message?.includes("publickey-credentials")) {
        await new Promise(resolve => setTimeout(resolve, 1000))
        const mockAddress = "0x" + Array.from(crypto.getRandomValues(new Uint8Array(20)))
          .map((b) => b.toString(16).padStart(2, "0"))
          .join("")
        onSuccess(mockAddress)
        onClose()
        return
      }
      console.error("Passkey login error:", error)
      setPasskeyStep("choose")
    }
  }

const resetView = () => {
    setCurrentView("main")
    setEmail("")
    setVerificationCode(["", "", "", "", "", ""])
    setPasskeyStep("choose")
    setConnectingId(null)
    setConnectingWalletName("")
  }

if (!isOpen) return null

return (
      <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
        <div className="absolute inset-0 bg-black/80 backdrop-blur-sm" onClick={onClose} />
        <div className="relative bg-[#0f0f14] border border-white/10 rounded-2xl w-full max-w-[420px] shadow-2xl overflow-hidden">
        {/* Header with back/close buttons */}
        {currentView !== "main" && (
          <button 
            onClick={resetView} 
            className="absolute top-4 left-4 text-gray-400 hover:text-white transition-colors z-10"
          >
            <ArrowLeft className="w-5 h-5" />
          </button>
        )}
        <button
          onClick={onClose}
          className="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors z-10"
        >
          <X className="w-5 h-5" />
        </button>

{/* Main View */}
        {currentView === "main" && (
          <div className="p-8 pt-12">
            {/* Centered Logo with proper spacing */}
            <div className="flex flex-col items-center justify-center mb-10">
              <SunBitLogo height={48} />
            </div>

{/* Log in with email */}
            <button
              onClick={() => setCurrentView("email-input")}
              className="w-full flex items-center gap-3 p-4 bg-[#1a1a24] border border-white/10 rounded-xl hover:bg-white/5 transition-colors mb-4"
            >
              <Mail className="w-5 h-5 text-gray-400" />
              <span className="text-white font-medium">Log in with email</span>
            </button>

{/* Divider */}
            <div className="flex items-center gap-4 my-6">
              <div className="flex-1 h-px bg-white/10" />
              <span className="text-gray-500 text-sm">OR</span>
              <div className="flex-1 h-px bg-white/10" />
            </div>

{/* Wallet List */}
            <div className="max-h-72 overflow-y-auto scrollbar-hide space-y-2">
              {WALLET_ORDER.map((walletId) => {
                const config = WALLET_CONFIGS[walletId]
                const eip6963 = config?.rdns ? eip6963Providers.get(config.rdns) : null
                const isLoading = isConnecting && connectingId === walletId

return (
                  <button
                    key={walletId}
                    onClick={() => handleWalletConnect(walletId)}
                    disabled={isConnecting}
                    className="w-full flex items-center gap-3 p-3 bg-[#1a1a24] border border-white/10 rounded-xl hover:bg-white/5 transition-colors disabled:opacity-50"
                  >
                    <WalletLogo walletId={walletId} size={32} eip6963Icon={eip6963?.info?.icon} />
                    <span className="text-white font-medium flex-1 text-left">{config?.name}</span>
                    {eip6963 && (
                      <span className="text-xs text-[#00E0C6] flex items-center gap-1">
                        <span className="w-1.5 h-1.5 bg-emerald-400 rounded-full" />
                        Installed
                      </span>
                    )}
                    {isLoading && <Loader2 className="w-4 h-4 text-[#50d2c1] animate-spin" />}
                  </button>
                )
              })}
            </div>

{/* Passkey link */}
            <button
              onClick={() => setCurrentView("passkey")}
              className="w-full flex items-center justify-center gap-2 p-3 text-gray-400 hover:text-white transition-colors mt-4"
            >
              <Fingerprint className="w-4 h-4" />
              <span className="text-sm underline">I have a passkey</span>
            </button>

<p className="text-center text-gray-500 text-xs mt-6">
              By logging in I agree to the{" "}
              <Link href="/terms" className="text-[#50d2c1] hover:underline">
                Terms of Use
              </Link>{" "}
              &{" "}
              <Link href="/privacy" className="text-[#50d2c1] hover:underline">
                Privacy Policy
              </Link>
            </p>
          </div>
        )}

{/* Email Input View */}
        {currentView === "email-input" && (
          <div className="p-8 pt-14">
            <div className="flex flex-col items-center justify-center mb-10">
              <SunBitLogo height={48} />
              <h2 className="text-xl font-semibold text-white mt-6">Log in or sign up</h2>
            </div>

<div className="relative mb-6">
              <div className="flex items-center gap-3 p-4 bg-[#1a1a24] border border-white/10 rounded-xl focus-within:border-[#50d2c1]">
                <Mail className="w-5 h-5 text-gray-400" />
                <input
                  type="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="your@email.com"
                  className="flex-1 bg-transparent text-white placeholder-gray-500 focus:outline-none"
                  onKeyDown={(e) => e.key === "Enter" && handleEmailSubmit()}
                />
                <button
                  onClick={handleEmailSubmit}
                  disabled={!email || !email.includes("@") || isLoading}
                  className="text-gray-400 hover:text-white disabled:opacity-30 disabled:cursor-not-allowed transition-colors font-medium"
                >
                  {isLoading ? <Loader2 className="w-5 h-5 animate-spin" /> : "Submit"}
                </button>
              </div>
            </div>

<p className="text-center text-gray-500 text-xs">
              Protected by <span className="text-gray-400">963X</span>
            </p>
          </div>
        )}

{/* Email Code Verification View */}
        {currentView === "email-code" && (
          <div className="p-8 pt-14">
            <div className="flex flex-col items-center justify-center mb-10">
              <div className="w-16 h-16 rounded-full bg-[#1a1a24] flex items-center justify-center">
                <Mail className="w-8 h-8 text-gray-400" />
              </div>
              <h2 className="text-xl font-semibold text-white mt-6 mb-2">Enter confirmation code</h2>
              <p className="text-gray-400 text-sm">
                Please check <span className="text-white font-medium">{email}</span> for an email from 963X and enter your code below.
              </p>
            </div>

{/* Code Input */}
            <div className="flex justify-center gap-2 mb-8">
              {verificationCode.map((digit, index) => (
                <input
                  key={index}
                  ref={(el) => { codeInputRefs.current[index] = el }}
                  type="text"
                  inputMode="numeric"
                  maxLength={6}
                  value={digit}
                  onChange={(e) => handleCodeChange(index, e.target.value.replace(/\D/g, ""))}
                  onKeyDown={(e) => handleCodeKeyDown(index, e)}
                  className={`w-12 h-14 text-center text-xl font-semibold bg-[#1a1a24] border-2 rounded-xl text-white focus:outline-none transition-colors ${
                    digit ? "border-emerald-500" : "border-white/10 focus:border-emerald-500"
                  }`}
                />
              ))}
            </div>

{isLoading && (
              <div className="flex justify-center mb-6">
                <Loader2 className="w-6 h-6 text-[#50d2c1] animate-spin" />
              </div>
            )}

{/* Resend */}
            <div className="flex items-center justify-between text-sm">
              <span className="text-gray-500">{"Didn't get an email?"}</span>
              <button
                onClick={handleResendCode}
                disabled={isLoading}
                className="text-[#00E0C6] hover:text-emerald-300 font-medium disabled:opacity-50"
              >
                Resend code
              </button>
            </div>

<p className="text-center text-gray-500 text-xs mt-8">
              Protected by <span className="text-gray-400">963X</span>
            </p>
          </div>
        )}

{/* Passkey View */}
        {currentView === "passkey" && (
          <div className="p-6 pt-12">
            {passkeyStep === "choose" && (
              <div className="text-center">
                <div className="w-16 h-16 rounded-full bg-[#50d2c1]/10 flex items-center justify-center mx-auto mb-4">
                  <Fingerprint className="w-8 h-8 text-[#50d2c1]" />
                </div>
                <h2 className="text-xl font-semibold text-white mb-2">Log in or create a new account?</h2>
                <p className="text-gray-400 text-sm mb-6">
                  Create a new account with a passkey or use a passkey to log in to an existing account.
                </p>

<div className="space-y-3">
                  <Button
                    onClick={handlePasskeyCreate}
                    className="w-full h-12 bg-[#50d2c1] hover:bg-[#40c2b1] text-black font-semibold"
                  >
                    Create new account
                  </Button>
                  <Button
                    onClick={handlePasskeyLogin}
                    variant="outline"
                    className="w-full h-12 border-white/20 text-white hover:bg-white/5 bg-transparent"
                  >
                    Log in with a passkey
                  </Button>
                </div>

<p className="text-gray-500 text-xs mt-6">Protected by WebAuthn</p>
              </div>
            )}

{(passkeyStep === "creating" || passkeyStep === "logging") && (
              <div className="text-center py-8">
                <Loader2 className="w-12 h-12 text-[#50d2c1] animate-spin mx-auto mb-4" />
                <p className="text-white">
                  {passkeyStep === "creating" ? "Creating passkey..." : "Verifying passkey..."}
                </p>
                <p className="text-gray-400 text-sm mt-2">Follow the prompts on your device</p>
              </div>
            )}
          </div>
        )}

{/* Wallet Connecting View */}
        {currentView === "wallet-connecting" && (
          <div className="p-8 min-h-[400px] flex flex-col items-center justify-center">
            {/* Animated Spinner */}
            <div className="relative w-16 h-16 mb-8">
              <div className="absolute inset-0 rounded-full border-2 border-white/10" />
              <div className="absolute inset-0 rounded-full border-2 border-transparent border-t-white animate-spin" />
            </div>
            
            <h2 className="text-xl font-semibold text-white">Requesting Connection</h2>
            <p className="text-gray-400 text-sm mt-2 text-center">
              Please approve the connection in your {connectingWalletName} wallet
            </p>
          </div>
        )}

{/* Wallet Error View */}
        {currentView === "wallet-error" && (
          <div className="p-8 min-h-[400px] flex flex-col items-center justify-center">
            {/* Error Icon */}
            <div className="w-20 h-20 rounded-full bg-red-500 flex items-center justify-center mb-6">
              <X className="w-10 h-10 text-white" strokeWidth={3} />
            </div>
            
            <h2 className="text-xl font-semibold text-white mb-8">Failed to connect</h2>
            
            <Button
              onClick={handleRetryConnection}
              className="w-full max-w-[280px] h-12 bg-white hover:bg-gray-100 text-black font-semibold rounded-full"
            >
              Retry
            </Button>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/app/leaderboard/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useWallet } from "@/lib/wallet-context"
import { useLeaderboardStore } from "@/lib/stores/leaderboard-store"
import { TraderCardModal } from "@/components/trade/trader-card"
import { Button } from "@/components/ui/button"
import {
  Trophy,
  Users,
  Zap,
  Target,
  Clock,
  ChevronDown,
  Search,
  ArrowLeft,
  Check,
  X,
  Medal,
  TrendingUp,
  DollarSign,
  Star,
} from "lucide-react"
import { useSearchParams } from "next/navigation"
import { Suspense } from "react"

type MainTab = "leaderboard" | "competitions"
type LeaderboardTab = "perpdex" | "tvl" | "pnl" | "sb"

const ITEMS_PER_PAGE = 10
const TOTAL_ENTRIES = 26089
const TOTAL_PAGES = Math.ceil(TOTAL_ENTRIES / ITEMS_PER_PAGE)

const leaderboardData = {
  perpdex: [
    { rank: 1, username: "Anonymous", address: "0xa4f2...3a48", value: "$368.89M", avatar: "gold" },
    { rank: 2, username: "Anonymous", address: "0xa9ba...63df", value: "$332.11M", avatar: "silver" },
    { rank: 3, username: "For retire", address: "0x0c5d...3c3d", value: "$318.15M", avatar: "bronze" },
    { rank: 4, username: "Anonymous", address: "0x1aa7...9ed9", value: "$277.97M" },
    { rank: 5, username: "Anonymous", address: "0xa8dc...bb7f", value: "$213.05M" },
    { rank: 6, username: "Anonymous", address: "0x56e5...cece", value: "$139.45M" },
    { rank: 7, username: "More", address: "0x89b5...a4e6", value: "$130.78M" },
    { rank: 8, username: "Anonymous", address: "0xb647...0e1d", value: "$124.86M" },
    { rank: 9, username: "Anonymous", address: "0x4cb1...d22e", value: "$120.39M" },
    { rank: 10, username: "Anonymous", address: "0x4099...6262", value: "$115.45M" },
  ],
  tvl: [
    { rank: 1, username: "whale_btc", address: "0xf123...4567", value: "$45.2M", avatar: "gold" },
    { rank: 2, username: "hodler_max", address: "0xa234...5678", value: "$38.7M", avatar: "silver" },
    { rank: 3, username: "defi_king", address: "0xb345...6789", value: "$31.5M", avatar: "bronze" },
  ],
  pnl: [
    { rank: 1, username: "profit_hunter", address: "0xc456...7890", value: "+$2.45M", avatar: "gold" },
    { rank: 2, username: "alpha_trader", address: "0xd567...8901", value: "+$1.89M", avatar: "silver" },
    { rank: 3, username: "smart_money", address: "0xe678...9012", value: "+$1.52M", avatar: "bronze" },
  ],
  sb: [
    { rank: 1, username: "sb_master", address: "0xf789...0123", value: "1,250,000 XP", avatar: "gold" },
    { rank: 2, username: "point_king", address: "0x0890...1234", value: "980,500 XP", avatar: "silver" },
    { rank: 3, username: "grinder", address: "0x1901...2345", value: "875,200 XP", avatar: "bronze" },
  ],
}

const leaderboardDescriptions = {
  perpdex: "Trade more volume on PerpDEX to climb the ranks. Top traders earn exclusive rewards and recognition.",
  tvl: "Deposit more assets across 963X products. Higher TVL = better tier benefits and priority access.",
  pnl: "Showcase your trading skills. Highest profit traders win weekly prizes and VIP status.",
  sb: "Earn XP points through trading, staking, referrals, and competitions. Redeem for exclusive perks.",
}

const competitions = [
  {
    id: 5,
    name: "Trade War #1",
    status: "open",
    type: "tradewar",
    startDate: "2026-04-01",
    endDate: "2026-04-05",
    daysLeft: "15d 6h",
    minBalance: "$100",
    participants: 892,
    isXpBoost: true,
    rewardType: "XP",
    xpRewards: {
      top1: "20,000 XP",
      top10: "10,000 XP",
      top100: "2,000 XP",
      maxPerEvent: "50,000 XP cap"
    },
    xpBoosts: [
      { condition: "Normal trade", boost: "1.5x XP" },
      { condition: "Position over $1,000", boost: "2x XP" },
      { condition: "Hold over 10 min", boost: "+20% XP" },
    ],
    maxMultiplier: "3x XP",
    description: "Compete with traders worldwide. Trade eligible perp pairs (BTC, ETH, SOL, BNB) and earn boosted XP. Runs every 2 weeks.",
    rules: [
      "Eligible pairs: BTC-PERP, ETH-PERP, SOL-PERP, BNB-PERP",
      "Min position: $50",
      "Min holding: 1 minute for XP",
      "No wash trading or stablecoin pairs",
      "Max 50,000 XP per event",
    ],
    frequency: "Every 2 weeks (continuous)"
  },
  {
    id: 4,
    name: "Perp Liquidity Week",
    status: "open",
    type: "liquidity",
    startDate: "2026-04-01",
    endDate: "2026-04-07",
    daysLeft: "16d 6h",
    minBalance: "$500",
    participants: 428,
    isXpBoost: true,
    rewardType: "XP",
    xpBoosts: [
      { action: "Vault LP Deposit", boost: "2x XP" },
      { action: "BTC-PERP Trades", boost: "2x XP" },
      { action: "Volume over $100k", boost: "2x XP" },
      { action: "Position over $10k", boost: "2x XP" },
    ],
    maxMultiplier: "5x XP",
    description: "Provide liquidity and trade during the Perp Liquidity Week. Earn boosted XP on LP deposits and trades.",
  },
  {
    id: 1,
    name: "963X Genesis Cup",
    status: "ended",
    type: "genesis",
    endDate: "2026-01-22",
    participants: 186,
    rewardType: "Cash",
    prizePool: "$25,000",
  },
  {
    id: 2,
    name: "PerpDEX Masters Season 1",
    status: "ended",
    type: "season",
    endDate: "2026-01-15",
    participants: 2453,
    rewardType: "Cash",
    prizePool: "$50,000",
  },
  {
    id: 3,
    name: "BTC Yield Championship",
    status: "ended",
    type: "yield",
    endDate: "2026-01-10",
    participants: 3105,
    rewardType: "Cash",
    prizePool: "$40,000",
  },
]

const competitionLeaderboard = [
  { rank: 1, trader: "BULLETPROOF-TERMITE-AMBER", roi: "+48.86%", pnl: "+$553.04", volume: "$945,408" },
  { rank: 2, trader: "FAT-RINGMASTER-FISH", roi: "+42.10%", pnl: "+$420.00", volume: "$86,744" },
  { rank: 3, trader: "CLEVER-RESIN-TURQUOISE", roi: "+37.40%", pnl: "+$368.80", volume: "$67,616" },
  { rank: 4, trader: "LINGUISTIC-ELEPHANT-IVORY", roi: "+34.28%", pnl: "+$342.40", volume: "$56,148" },
  { rank: 5, trader: "ESTABLISHED-ROBIN-TOMATO", roi: "+29.11%", pnl: "+$291.13", volume: "$44,794" },
]

const prizeBreakdown = [
  { place: "1st Place", prize: "$3,023", percentage: "21% of pool" },
  { place: "2nd Place", prize: "$2,447", percentage: "17% of pool" },
  { place: "3rd Place", prize: "$1,871", percentage: "13% of pool" },
  { place: "4th Place", prize: "$1,439", percentage: "10% of pool" },
  { place: "5th Place", prize: "$1,295", percentage: "9% of pool" },
]

const Loading = () => null;

export default function LeaderboardPage() {
  const { wallet } = useWallet()
  const [mainTab, setMainTab] = useState<MainTab>("leaderboard")
  const [leaderboardTab, setLeaderboardTab] = useState<LeaderboardTab>("perpdex")
  const [selectedCompetition, setSelectedCompetition] = useState<number | null>(null)
  const [searchQuery, setSearchQuery] = useState("")
  const [registeredCompetitions, setRegisteredCompetitions] = useState<Set<number>>(new Set())
  const [registrationLoading, setRegistrationLoading] = useState<Set<number>>(new Set())
  const [currentPage, setCurrentPage] = useState(1)
  
  // Pagination handlers
  const goToPage = (page: number) => {
    if (page >= 1 && page <= TOTAL_PAGES) {
      setCurrentPage(page)
    }
  }
  
  const getVisiblePages = () => {
    const pages: (number | string)[] = []
    if (TOTAL_PAGES <= 7) {
      for (let i = 1; i <= TOTAL_PAGES; i++) pages.push(i)
    } else {
      if (currentPage <= 3) {
        pages.push(1, 2, 3, "...", TOTAL_PAGES)
      } else if (currentPage >= TOTAL_PAGES - 2) {
        pages.push(1, "...", TOTAL_PAGES - 2, TOTAL_PAGES - 1, TOTAL_PAGES)
      } else {
        pages.push(1, "...", currentPage - 1, currentPage, currentPage + 1, "...", TOTAL_PAGES)
      }
    }
    return pages
  }
  
  // Handle competition registration
  const handleRegisterCompetition = async (compId: number) => {
    setRegistrationLoading(prev => new Set(prev).add(compId))
    // Simulate registration
    await new Promise(resolve => setTimeout(resolve, 800))
    setRegisteredCompetitions(prev => {
      const newSet = new Set(prev)
      newSet.add(compId)
      return newSet
    })
    setRegistrationLoading(prev => {
      const newSet = new Set(prev)
      newSet.delete(compId)
      return newSet
    })
  }

const currentData = leaderboardData[leaderboardTab]
  const userRank = 28306

const selectedComp = competitions.find(c => c.id === selectedCompetition)

return (
    <Suspense fallback={<Loading />}>
      <div className="min-h-screen bg-[#0a0a0f] text-white p-6">
        <div className="max-w-7xl mx-auto">
          {/* Main Tabs */}
          <div className="flex gap-4 mb-8">
            <button
              onClick={() => { setMainTab("leaderboard"); setSelectedCompetition(null) }}
              className={`text-2xl font-bold transition-colors ${
                mainTab === "leaderboard" ? "text-[#F7931A]" : "text-gray-500 hover:text-gray-300"
              }`}
            >
              Leaderboard
            </button>
            <button
              onClick={() => { setMainTab("competitions"); setSelectedCompetition(null) }}
              className={`text-2xl font-bold transition-colors ${
                mainTab === "competitions" ? "text-[#F7931A]" : "text-gray-500 hover:text-gray-300"
              }`}
            >
              Competitions
            </button>
          </div>

{mainTab === "leaderboard" && (
            <>
              {/* Leaderboard Sub-tabs */}
              <div className="flex items-center gap-2 mb-6">
                {(["perpdex", "tvl", "pnl", "sb"] as const).map((tab) => (
                  <button
                    key={tab}
                    onClick={() => setLeaderboardTab(tab)}
                    className={`px-4 py-2 rounded-lg text-sm font-medium uppercase transition-colors ${
                      leaderboardTab === tab
                        ? "bg-[#F7931A] text-black"
                        : "bg-[#1a1a24] text-gray-400 hover:text-white"
                    }`}
                  >
                    {tab === "sb" ? "XP Points" : tab}
                  </button>
                ))}
              </div>

{/* Description */}
              <div className="bg-[#12121a] border border-white/10 rounded-xl p-4 mb-6">
                <div className="flex items-center gap-2 text-[#F7931A] mb-1">
                  <TrendingUp className="w-4 h-4" />
                  <span className="text-sm font-semibold">How to climb the ranks</span>
                </div>
                <p className="text-sm text-gray-400">{leaderboardDescriptions[leaderboardTab]}</p>
              </div>

{/* Top 3 Podium */}
              <div className="flex justify-center items-end gap-4 mb-8">
                {/* 2nd Place */}
                <div className="flex flex-col items-center">
                  <div className="relative">
                    <div className="w-20 h-20 rounded-full bg-gradient-to-b from-gray-300 to-gray-500 flex items-center justify-center">
                      <span className="text-2xl">2</span>
                    </div>
                    <div className="absolute -top-2 -right-2 w-6 h-6 bg-gray-400 rounded-full flex items-center justify-center">
                      <Star className="w-4 h-4 text-white" />
                    </div>
                  </div>
                  <div className="bg-[#12121a] border border-white/10 rounded-xl p-4 mt-3 text-center min-w-[160px]">
                    <p className="font-medium">{currentData[1]?.username || "---"}</p>
                    <p className="text-xs text-gray-500 font-mono">{currentData[1]?.address || "---"}</p>
                    <p className="text-lg font-bold text-gray-300 mt-1">{currentData[1]?.value || "---"}</p>
                  </div>
                </div>

{/* 1st Place */}
                <div className="flex flex-col items-center -mt-8">
                  <div className="relative">
                    <div className="w-24 h-24 rounded-full bg-gradient-to-b from-yellow-400 to-yellow-600 flex items-center justify-center border-4 border-[#F7931A]">
                      <span className="text-3xl">1</span>
                    </div>
                    <div className="absolute -top-3 left-1/2 -translate-x-1/2">
                      <Trophy className="w-8 h-8 text-yellow-400" />
                    </div>
                  </div>
                  <div className="bg-[#12121a] border-2 border-[#F7931A] rounded-xl p-4 mt-3 text-center min-w-[180px]">
                    <p className="font-medium">{currentData[0]?.username || "---"}</p>
                    <p className="text-xs text-gray-500 font-mono">{currentData[0]?.address || "---"}</p>
                    <p className="text-xl font-bold text-[#F7931A] mt-1">{currentData[0]?.value || "---"}</p>
                  </div>
                </div>

{/* 3rd Place */}
                <div className="flex flex-col items-center">
                  <div className="relative">
                    <div className="w-20 h-20 rounded-full bg-gradient-to-b from-amber-600 to-amber-800 flex items-center justify-center">
                      <span className="text-2xl">3</span>
                    </div>
                    <div className="absolute -top-2 -right-2 w-6 h-6 bg-amber-600 rounded-full flex items-center justify-center">
                      <Medal className="w-4 h-4 text-white" />
                    </div>
                  </div>
                  <div className="bg-[#12121a] border border-white/10 rounded-xl p-4 mt-3 text-center min-w-[160px]">
                    <p className="font-medium">{currentData[2]?.username || "---"}</p>
                    <p className="text-xs text-gray-500 font-mono">{currentData[2]?.address || "---"}</p>
                    <p className="text-lg font-bold text-amber-500 mt-1">{currentData[2]?.value || "---"}</p>
                  </div>
                </div>
              </div>

{/* Your Position */}
              {wallet.isConnected && (
                <div className="bg-[#1a1a24] border border-[#F7931A]/30 rounded-xl mb-4 overflow-hidden">
                  <table className="w-full">
                    <tbody>
                      <tr className="bg-[#F7931A]/10">
                        <td className="px-4 py-3 text-sm">
                          <span className="mr-2">{userRank}</span>
                          <span className="bg-[#F7931A] text-black text-xs px-2 py-0.5 rounded font-medium">YOU</span>
                        </td>
                        <td className="px-4 py-3 text-sm">Anonymous</td>
                        <td className="px-4 py-3 text-sm font-mono text-gray-400">
                          {wallet.address?.slice(0, 6)}...{wallet.address?.slice(-4)}
                        </td>
                        <td className="px-4 py-3 text-sm text-right">$0</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              )}

{/* Leaderboard Table */}
              <div className="bg-[#12121a] border border-white/10 rounded-xl overflow-hidden">
                <table className="w-full">
                  <thead>
                    <tr className="border-b border-white/10">
                      <th className="text-left text-xs font-semibold text-gray-400 uppercase tracking-wider px-4 py-3">Rank</th>
                      <th className="text-left text-xs font-semibold text-gray-400 uppercase tracking-wider px-4 py-3">Username</th>
                      <th className="text-left text-xs font-semibold text-gray-400 uppercase tracking-wider px-4 py-3">Address</th>
                      <th className="text-right text-xs font-semibold text-gray-400 uppercase tracking-wider px-4 py-3">
                        {leaderboardTab === "perpdex" ? "Volume" : leaderboardTab === "tvl" ? "TVL" : leaderboardTab === "pnl" ? "PnL" : "Points"}
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    {currentData.slice(3).map((item, idx) => (
                      <tr key={idx} className="border-b border-white/5 hover:bg-white/5">
                        <td className="px-4 py-3 text-sm">{item.rank}</td>
                        <td className="px-4 py-3 text-sm">{item.username}</td>
                        <td className="px-4 py-3 text-sm font-mono text-gray-400">{item.address}</td>
                        <td className="px-4 py-3 text-sm text-right font-medium text-[#F7931A]">{item.value}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
                <div className="flex items-center justify-between px-4 py-3 border-t border-white/10">
                  <p className="text-sm text-gray-500">
                    Showing page {currentPage} of {TOTAL_PAGES.toLocaleString()} ({TOTAL_ENTRIES.toLocaleString()} total entries)
                  </p>
                  <div className="flex items-center gap-1">
                    <Button 
                      variant="outline" 
                      size="sm" 
                      className="bg-transparent border-white/20 text-gray-400 hover:text-white disabled:opacity-50 disabled:cursor-not-allowed"
                      disabled={currentPage === 1}
                      onClick={() => goToPage(currentPage - 1)}
                    >
                      Previous
                    </Button>
                    {getVisiblePages().map((page, idx) => (
                      typeof page === "number" ? (
                        <Button 
                          key={idx}
                          size="sm" 
                          className={currentPage === page 
                            ? "bg-[#F7931A] text-black hover:bg-[#E8850C]" 
                            : "bg-transparent border border-white/20 text-gray-400 hover:text-white hover:bg-white/5"
                          }
                          onClick={() => goToPage(page)}
                        >
                          {page}
                        </Button>
                      ) : (
                        <span key={idx} className="text-gray-500 px-2">...</span>
                      )
                    ))}
                    <Button 
                      variant="outline" 
                      size="sm" 
                      className="bg-transparent border-white/20 text-gray-400 hover:text-white disabled:opacity-50 disabled:cursor-not-allowed"
                      disabled={currentPage === TOTAL_PAGES}
                      onClick={() => goToPage(currentPage + 1)}
                    >
                      Next
                    </Button>
                  </div>
                </div>
              </div>
            </>
          )}

{mainTab === "competitions" && !selectedCompetition && (
            <>
              {/* Header */}
              <div className="text-center mb-8">
                <h2 className="text-3xl font-bold mb-2">Trading Competitions</h2>
                <p className="text-gray-400">Compete with elite traders worldwide. Showcase your skills. Win incredible prizes.</p>
              </div>

{/* Total Prize Pool */}
              <div className="bg-[#12121a] border border-white/10 rounded-xl p-6 mb-8 max-w-xl mx-auto text-center">
                <p className="text-sm text-[#F7931A] uppercase tracking-wider mb-2">Total Prize Pool</p>
                <p className="text-5xl font-bold mb-2">Up to</p>
                <p className="text-3xl font-bold">
                  <span className="text-[#F7931A]">$115K+</span>
                  <span className="text-gray-500 mx-2">+</span>
                  <span className="text-cyan-400">XP Rewards</span>
                </p>
                <p className="text-gray-400 mt-2">Cash prizes for past events + unlimited XP for active competitions</p>

<div className="grid grid-cols-3 gap-4 mt-6">
                  <div className="bg-[#1a1a24] rounded-lg p-3">
                    <Users className="w-5 h-5 text-gray-500 mx-auto mb-1" />
                    <p className="text-xl font-bold">6,864</p>
                    <p className="text-xs text-gray-500">Total Participants</p>
                  </div>
                  <div className="bg-[#1a1a24] rounded-lg p-3">
                    <Zap className="w-5 h-5 text-cyan-400 mx-auto mb-1" />
                    <p className="text-xl font-bold">2</p>
                    <p className="text-xs text-gray-500">Active XP Events</p>
                  </div>
                  <div className="bg-[#1a1a24] rounded-lg p-3">
                    <Target className="w-5 h-5 text-[#00E0C6] mx-auto mb-1" />
                    <p className="text-xl font-bold">3</p>
                    <p className="text-xs text-gray-500">Cash Prize Events</p>
                  </div>
                </div>
              </div>

{/* Search & Filter */}
              <div className="flex items-center gap-3 mb-6">
                <div className="relative flex-1 max-w-sm">
                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
                  <input
                    type="text"
                    placeholder="Search competitions..."
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    className="w-full bg-[#1a1a24] border border-white/10 rounded-lg pl-10 pr-4 py-2 text-sm text-white placeholder-gray-500 focus:outline-none focus:border-[#F7931A]/50"
                  />
                </div>
                <Button variant="outline" size="sm" className="bg-transparent border-white/20 text-gray-400">
                  My Competitions
                </Button>
                <div className="ml-auto">
                  <Button variant="outline" size="sm" className="bg-transparent border-white/20 text-gray-400">
                    All <ChevronDown className="w-4 h-4 ml-1" />
                  </Button>
                </div>
              </div>

{/* Competition Cards */}
              <div className="grid grid-cols-3 gap-4">
                {competitions.map((comp) => {
                  const isRegistered = registeredCompetitions.has(comp.id)
                  const isLoading = registrationLoading.has(comp.id)
                  
                  return (
                    <div key={comp.id} className={`bg-[#12121a] border rounded-xl p-5 transition-all ${
                      comp.isXpBoost 
                        ? 'border-cyan-500/30 ring-1 ring-cyan-500/20' 
                        : comp.status === "ended"
                        ? 'border-gray-700/50 opacity-70'
                        : 'border-white/10'
                    }`}>
                      <div className="flex items-center justify-between mb-4">
                        <div className="flex items-center gap-2">
                          <span className={`px-3 py-1 rounded-full text-xs font-medium ${
                            comp.status === "open" 
                              ? "bg-[#00E0C6]/20 text-[#00E0C6]" 
                              : "bg-gray-500/20 text-gray-400"
                          }`}>
                            {comp.status === "open" ? "Live" : "Ended"}
                          </span>
                          {comp.isXpBoost && (
                            <span className="px-2 py-1 rounded-full text-xs font-bold bg-gradient-to-r from-cyan-500/20 to-purple-500/20 text-cyan-400 border border-cyan-500/30">
                              BOOST XP
                            </span>
                          )}
                        </div>
                        {comp.rewardType && (
                          <div className="text-right">
                            <p className="text-xs text-gray-500">{comp.rewardType === "Cash" ? "PRIZE POOL" : "REWARD"}</p>
                            <p className={`text-lg font-bold ${comp.rewardType === "Cash" ? "text-[#00E0C6]" : "text-cyan-400"}`}>
                              {comp.rewardType === "Cash" ? comp.prizePool : comp.rewardType}
                            </p>
                          </div>
                        )}
                      </div>

<h3 className="text-lg font-semibold mb-2">{comp.name}</h3>
                      {comp.description && (
                        <p className="text-xs text-gray-400 mb-3">{comp.description}</p>
                      )}

{comp.status === "open" ? (
                        <>
                          {/* XP Boost Info */}
                          {comp.isXpBoost && comp.xpBoosts && (
                            <div className="bg-gradient-to-r from-cyan-500/10 to-purple-500/10 border border-cyan-500/30 rounded-lg p-3 mb-3">
                              <div className="flex items-center justify-between mb-2">
                                <div className="flex items-center gap-2 text-cyan-400">
                                  <Zap className="w-4 h-4" />
                                  <span className="text-sm font-bold">XP Boosters</span>
                                </div>
                                <span className="text-xs font-bold text-purple-400 bg-purple-500/20 px-2 py-0.5 rounded">
                                  Max {comp.maxMultiplier}
                                </span>
                              </div>
                              <div className="space-y-1">
                                {comp.xpBoosts.slice(0, 3).map((boost, i) => (
                                  <div key={i} className="flex items-center justify-between text-xs">
                                    <span className="text-gray-400">{boost.condition || boost.action}</span>
                                    <span className="text-cyan-400 font-medium">{boost.boost}</span>
                                  </div>
                                ))}
                              </div>
                            </div>
                          )}
                          
                          {/* XP Rewards */}
                          {comp.xpRewards && (
                            <div className="bg-[#00E0C6]/10 border border-emerald-500/30 rounded-lg p-2.5 mb-3 text-xs space-y-1">
                              <p className="text-[#00E0C6] font-semibold">Leaderboard Rewards:</p>
                              <div className="flex justify-between text-gray-300">
                                <span>🥇 Top 1:</span>
                                <span className="text-[#00E0C6]">{comp.xpRewards.top1}</span>
                              </div>
                              <div className="flex justify-between text-gray-300">
                                <span>🥈-🥉 Top 10:</span>
                                <span className="text-[#00E0C6]">{comp.xpRewards.top10}</span>
                              </div>
                              <div className="flex justify-between text-gray-300">
                                <span>📊 Top 100:</span>
                                <span className="text-[#00E0C6]">{comp.xpRewards.top100}</span>
                              </div>
                              <p className="text-gray-500 text-[10px] pt-1">Cap: {comp.xpRewards.maxPerEvent}</p>
                            </div>
                          )}
                          
                          {/* Timeline */}
                          <div className="flex items-center gap-2 text-sm text-gray-400 mb-4">
                            <Clock className="w-4 h-4" />
                            <span>{comp.daysLeft}</span>
                            {comp.frequency && (
                              <span className="ml-auto text-xs text-gray-500 bg-gray-900 px-2 py-0.5 rounded">
                                {comp.frequency}
                              </span>
                            )}
                          </div>
                          
                          {/* Min balance */}
                          {comp.minBalance && (
                            <div className="flex items-center gap-2 text-xs text-gray-500 mb-3">
                              <span>Min: {comp.minBalance}</span>
                              <span className="flex items-center gap-1 ml-auto">
                                <Users className="w-3 h-3" /> {comp.participants}
                              </span>
                            </div>
                          )}
                        </>
                      ) : (
                        <div className="flex items-center gap-1 text-xs text-gray-500 mb-4">
                          <Users className="w-3 h-3" /> {comp.participants} participants
                        </div>
                      )}

{/* Registration Button */}
                      {comp.status === "open" && (
                        <Button 
                          onClick={() => handleRegisterCompetition(comp.id)}
                          disabled={isRegistered || isLoading || !wallet}
                          className={`w-full transition-all ${
                            isRegistered
                              ? 'bg-[#00E0C6]/20 border border-emerald-500/30 text-[#00E0C6] hover:bg-[#00E0C6]/20'
                              : 'bg-gradient-to-r from-cyan-600 to-purple-600 hover:from-cyan-500 hover:to-purple-500 text-white border-0'
                          }`}
                        >
                          {isLoading ? (
                            <span className="flex items-center gap-2">
                              <span className="w-3 h-3 border-2 border-current border-t-transparent rounded-full animate-spin" />
                              Registering...
                            </span>
                          ) : isRegistered ? (
                            <span className="flex items-center gap-2">
                              <Check className="w-4 h-4" />
                              Registered
                            </span>
                          ) : !wallet ? (
                            "Connect Wallet"
                          ) : (
                            "Register & Earn XP"
                          )}
                        </Button>
                      )}
                      
                      {comp.status === "open" && (
                        <Button 
                          onClick={() => setSelectedCompetition(comp.id)}
                          variant="ghost"
                          className="w-full mt-2 text-gray-400 hover:text-white border border-white/10 hover:bg-white/5"
                        >
                          View Details
                        </Button>
                      )}
                    </div>
                  )
                })}
              </div>
            </>
          )}

{mainTab === "competitions" && selectedCompetition && selectedComp && (
            <>
              {/* Back Button */}
              <button 
                onClick={() => setSelectedCompetition(null)}
                className="flex items-center gap-2 text-gray-400 hover:text-white mb-6"
              >
                <ArrowLeft className="w-4 h-4" />
                Back to Competitions
              </button>

{/* Competition Header */}
              <div className="flex items-center gap-3 mb-6">
                <h2 className="text-2xl font-bold">{selectedComp.name}</h2>
                <span className={`px-3 py-1 rounded-full text-xs font-medium ${
                  selectedComp.status === "open" 
                    ? "bg-[#00E0C6]/20 text-[#00E0C6]" 
                    : "bg-gray-500/20 text-gray-400"
                }`}>
                  {selectedComp.status === "open" ? "Registration Open" : "Ended"}
                </span>
              </div>

<p className="text-sm text-gray-400 mb-6">
                {selectedComp.type === "tradewar" 
                  ? "Trade eligible perp pairs and hold positions to earn boosted XP. Auto-repeats every 2 weeks."
                  : selectedComp.type === "liquidity"
                  ? "Provide liquidity and trade during this event to earn boosted XP rewards."
                  : "Compete and earn rewards based on your trading performance."
                }
              </p>

{/* Stats Row */}
              <div className="grid grid-cols-4 gap-4 mb-6">
                <div className="bg-[#12121a] border border-white/10 rounded-xl p-4">
                  <div className="flex items-center gap-2 mb-2">
                    <Trophy className="w-5 h-5 text-[#F7931A]" />
                    <span className="text-xs text-gray-500">{selectedComp.type === "tradewar" || selectedComp.type === "liquidity" ? "Total XP" : "Prizes"}</span>
                  </div>
                  <p className="text-xl font-bold text-[#F7931A]">{selectedComp.xpRewards?.maxPerEvent || selectedComp.prizePool || "XP"}</p>
                </div>
                <div className="bg-[#12121a] border border-white/10 rounded-xl p-4">
                  <div className="flex items-center gap-2 mb-2">
                    <Users className="w-5 h-5 text-gray-500" />
                    <span className="text-xs text-gray-500">Participants</span>
                  </div>
                  <p className="text-xl font-bold">{selectedComp.participants}</p>
                </div>
                <div className="bg-[#12121a] border border-white/10 rounded-xl p-4">
                  <div className="flex items-center gap-2 mb-2">
                    <Clock className="w-5 h-5 text-gray-500" />
                    <span className="text-xs text-gray-500">Time Left</span>
                  </div>
                  <p className="text-xl font-bold">{selectedComp.daysLeft || "Ended"}</p>
                </div>
                <div className="bg-[#12121a] border border-white/10 rounded-xl p-4">
                  <div className="flex items-center gap-2 mb-2">
                    <Check className="w-5 h-5 text-[#00E0C6]" />
                    <span className="text-xs text-gray-500">Your Status</span>
                  </div>
                  <p className={`text-xl font-bold ${registeredCompetitions.has(selectedComp.id) ? "text-[#00E0C6]" : "text-gray-400"}`}>
                    {registeredCompetitions.has(selectedComp.id) ? "Registered" : "Not Registered"}
                  </p>
                </div>
              </div>

<div className="grid grid-cols-3 gap-6">
                {/* Leaderboard / Trades Info */}
                <div className="col-span-2">
                  {selectedComp.type === "tradewar" ? (
                    <div className="bg-[#12121a] border border-white/10 rounded-xl p-5">
                      <h3 className="font-semibold mb-4">Volume & Score Leaderboard</h3>
                      <p className="text-xs text-gray-400 mb-4">Score calculated based on trading volume × holding multiplier. Positions held over 10 min get 1.2x multiplier.</p>
                      
                      <table className="w-full">
                        <thead>
                          <tr className="border-b border-white/10">
                            <th className="text-left text-xs font-semibold text-gray-400 uppercase px-3 py-2">Rank</th>
                            <th className="text-left text-xs font-semibold text-gray-400 uppercase px-3 py-2">Trader</th>
                            <th className="text-right text-xs font-semibold text-gray-400 uppercase px-3 py-2">Volume</th>
                            <th className="text-right text-xs font-semibold text-gray-400 uppercase px-3 py-2">Score</th>
                            <th className="text-right text-xs font-semibold text-gray-400 uppercase px-3 py-2">Trades</th>
                          </tr>
                        </thead>
                        <tbody>
                          {[
                            { rank: 1, trader: "SWIFT-TRADING-PHOENIX", volume: "$487,200", score: "584,640", trades: 245 },
                            { rank: 2, trader: "MOMENTUM-EAGLE-GOLD", volume: "$320,150", score: "384,180", trades: 156 },
                            { rank: 3, trader: "PRECISION-HAWK-SILVER", volume: "$298,750", score: "358,500", trades: 143 },
                            { rank: 4, trader: "VOLUME-MASTER-BRONZE", volume: "$215,600", score: "258,720", trades: 98 },
                            { rank: 5, trader: "STEADY-TRADER-ALPHA", volume: "$187,300", score: "224,760", trades: 84 },
                          ].map((item) => (
                            <tr key={item.rank} className="border-b border-white/5 hover:bg-white/5">
                              <td className="px-3 py-3 text-sm">
                                <div className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold ${
                                  item.rank === 1 ? "bg-yellow-500 text-black" :
                                  item.rank === 2 ? "bg-gray-400 text-black" :
                                  item.rank === 3 ? "bg-amber-600 text-black" :
                                  "bg-[#1a1a24] text-gray-400"
                                }`}>
                                  {item.rank}
                                </div>
                              </td>
                              <td className="px-3 py-3 text-sm font-mono">{item.trader}</td>
                              <td className="px-3 py-3 text-sm text-right text-[#F7931A]">{item.volume}</td>
                              <td className="px-3 py-3 text-sm text-right text-cyan-400 font-medium">{item.score}</td>
                              <td className="px-3 py-3 text-sm text-right text-gray-400">{item.trades}</td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  ) : (
                    <div className="bg-[#12121a] border border-white/10 rounded-xl p-5">
                      <div className="flex items-center justify-between mb-4">
                        <h3 className="font-semibold">Leaderboard</h3>
                        <span className="text-xs text-gray-500">Ordered by return on investment</span>
                      </div>

<table className="w-full">
                        <thead>
                          <tr className="border-b border-white/10">
                            <th className="text-left text-xs font-semibold text-gray-400 uppercase px-3 py-2">Rank</th>
                            <th className="text-left text-xs font-semibold text-gray-400 uppercase px-3 py-2">Trader</th>
                            <th className="text-right text-xs font-semibold text-gray-400 uppercase px-3 py-2">ROI</th>
                            <th className="text-right text-xs font-semibold text-gray-400 uppercase px-3 py-2">PnL</th>
                            <th className="text-right text-xs font-semibold text-gray-400 uppercase px-3 py-2">Volume</th>
                          </tr>
                        </thead>
                        <tbody>
                          {competitionLeaderboard.map((item) => (
                            <tr key={item.rank} className="border-b border-white/5 hover:bg-white/5">
                              <td className="px-3 py-3 text-sm">
                                <div className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold ${
                                  item.rank === 1 ? "bg-yellow-500 text-black" :
                                  item.rank === 2 ? "bg-gray-400 text-black" :
                                  item.rank === 3 ? "bg-amber-600 text-black" :
                                  "bg-[#1a1a24] text-gray-400"
                                }`}>
                                  {item.rank}
                                </div>
                              </td>
                              <td className="px-3 py-3 text-sm font-mono">{item.trader}</td>
                              <td className="px-3 py-3 text-sm text-right text-[#00E0C6]">{item.roi}</td>
                              <td className="px-3 py-3 text-sm text-right text-[#00E0C6]">{item.pnl}</td>
                              <td className="px-3 py-3 text-sm text-right">{item.volume}</td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  )}
                </div>

{/* Right Panel */}
                <div className="space-y-4">
                  {/* Registration / XP Rewards */}
                  <div className="bg-[#12121a] border border-white/10 rounded-xl p-5">
                    {selectedComp.type === "tradewar" ? (
                      <>
                        <div className="flex items-center gap-2 text-cyan-400 mb-3">
                          <Zap className="w-5 h-5" />
                          <span className="font-semibold">Trade War Rules</span>
                        </div>
                        
                        <div className="bg-gradient-to-r from-cyan-500/10 to-purple-500/10 border border-cyan-500/30 rounded-lg p-3 mb-4">
                          <p className="text-sm text-cyan-400 font-medium mb-2">XP Rewards (Per Event)</p>
                          <div className="space-y-1 text-xs text-gray-300">
                            <div className="flex justify-between">
                              <span>🥇 1st Place</span>
                              <span className="text-cyan-400 font-medium">{selectedComp.xpRewards?.top1}</span>
                            </div>
                            <div className="flex justify-between">
                              <span>🥈 Top 10</span>
                              <span className="text-cyan-400 font-medium">{selectedComp.xpRewards?.top10}</span>
                            </div>
                            <div className="flex justify-between">
                              <span>📊 Top 100</span>
                              <span className="text-cyan-400 font-medium">{selectedComp.xpRewards?.top100}</span>
                            </div>
                          </div>
                        </div>
                        
                        {selectedComp.rules && (
                          <div className="mb-4">
                            <h4 className="text-sm font-medium text-[#F7931A] mb-2">Trading Rules</h4>
                            <div className="space-y-1">
                              {selectedComp.rules.map((rule, idx) => (
                                <p key={idx} className="text-xs text-gray-400 flex items-start gap-2">
                                  <span className="text-cyan-400 mt-0.5">•</span>
                                  {rule}
                                </p>
                              ))}
                            </div>
                          </div>
                        )}
                        
                        <Button 
                          onClick={() => handleRegisterCompetition(selectedComp.id)}
                          disabled={registeredCompetitions.has(selectedComp.id) || registrationLoading.has(selectedComp.id) || !wallet}
                          className={`w-full ${registeredCompetitions.has(selectedComp.id) ? 'bg-[#00E0C6]/20 text-[#00E0C6] border border-emerald-500/30' : 'bg-gradient-to-r from-cyan-600 to-purple-600 hover:from-cyan-500 hover:to-purple-500 text-white border-0'}`}
                        >
                          {registrationLoading.has(selectedComp.id) ? "Registering..." : registeredCompetitions.has(selectedComp.id) ? "Registered" : "Register & Earn XP"}
                        </Button>
                      </>
                    ) : selectedComp.type === "liquidity" ? (
                      <>
                        <div className="flex items-center gap-2 text-[#00E0C6] mb-3">
                          <Check className="w-5 h-5" />
                          <span className="font-semibold">XP Boosters</span>
                        </div>
                        
                        {selectedComp.xpBoosts && (
                          <div className="bg-gradient-to-r from-emerald-500/10 to-cyan-500/10 border border-emerald-500/30 rounded-lg p-3 mb-4">
                            <p className="text-sm text-[#00E0C6] font-medium mb-2">Active XP Multipliers</p>
                            <div className="space-y-1 text-xs text-gray-300">
                              {selectedComp.xpBoosts.map((boost, idx) => (
                                <div key={idx} className="flex justify-between">
                                  <span>{boost.action}</span>
                                  <span className="text-[#00E0C6] font-medium">{boost.boost}</span>
                                </div>
                              ))}
                            </div>
                            <p className="text-xs text-gray-500 mt-2">Max combined multiplier: {selectedComp.maxMultiplier}</p>
                          </div>
                        )}
                        
                        <Button 
                          onClick={() => handleRegisterCompetition(selectedComp.id)}
                          disabled={registeredCompetitions.has(selectedComp.id) || registrationLoading.has(selectedComp.id) || !wallet}
                          className={`w-full ${registeredCompetitions.has(selectedComp.id) ? 'bg-[#00E0C6]/20 text-[#00E0C6] border border-emerald-500/30' : 'bg-gradient-to-r from-emerald-600 to-cyan-600 hover:from-emerald-500 hover:to-cyan-500 text-white border-0'}`}
                        >
                          {registrationLoading.has(selectedComp.id) ? "Registering..." : registeredCompetitions.has(selectedComp.id) ? "Registered" : "Join Event"}
                        </Button>
                      </>
                    ) : (
                      <>
                        <div className="flex items-center gap-2 text-[#00E0C6] mb-3">
                          <Check className="w-5 h-5" />
                          <span className="font-semibold">Registration Open</span>
                        </div>
                        <p className="text-sm text-gray-400 mb-4">Join the competition and compete with other traders!</p>

<div className="bg-red-500/10 border border-red-500/30 rounded-lg p-3 mb-4">
                          <p className="text-sm text-red-400 font-medium">Registration Requirements Not Met</p>
                          <p className="text-xs text-red-400/70">Minimum account balance of {selectedComp.minBalance} required</p>
                        </div>

<Button disabled className="w-full bg-gray-600 text-gray-400 cursor-not-allowed">
                          Register Now
                        </Button>
                      </>
                    )}
                  </div>

{/* Prize Breakdown */}
                  <div className="bg-[#12121a] border border-white/10 rounded-xl p-5">
                    <h3 className="font-semibold mb-4">Prize Breakdown</h3>
                    <div className="space-y-3">
                      {prizeBreakdown.map((prize, idx) => (
                        <div key={idx} className="flex items-center justify-between">
                          <div className="flex items-center gap-2">
                            <div className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold ${
                              idx === 0 ? "bg-yellow-500 text-black" :
                              idx === 1 ? "bg-gray-400 text-black" :
                              idx === 2 ? "bg-amber-600 text-black" :
                              "bg-[#1a1a24] text-gray-400"
                            }`}>
                              {idx + 1}
                            </div>
                            <span className="text-sm">{prize.place}</span>
                          </div>
                          <div className="text-right">
                            <p className="text-sm font-bold text-[#F7931A]">{prize.prize}</p>
                            <p className="text-xs text-gray-500">{prize.percentage}</p>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>

{/* ROI Competition Methodology */}
                  <div className="bg-[#12121a] border border-white/10 rounded-xl p-5">
                    <h3 className="font-semibold mb-3">ROI Competition</h3>
                    <p className="text-xs text-gray-400 mb-4">Winners are determined by highest return on investment (ROI) during the competition period.</p>
                    
                    <h4 className="text-sm font-medium text-[#F7931A] mb-2">Methodology</h4>
                    <p className="text-xs text-gray-400 mb-4">We use time-weighted average account values to calculate ROI, preventing manipulation and ensuring fair competition.</p>
                    
                    <div className="grid grid-cols-2 gap-2 mb-4">
                      <div className="bg-[#1a1a24] rounded-lg p-2">
                        <p className="text-xs font-medium text-[#F7931A]">Portfolio Tracking</p>
                        <p className="text-[10px] text-gray-500">Continuous snapshots from registration to end</p>
                      </div>
                      <div className="bg-[#1a1a24] rounded-lg p-2">
                        <p className="text-xs font-medium text-[#F7931A]">Fair Calculation</p>
                        <p className="text-[10px] text-gray-500">ROI = (PnL / TWA) x 100</p>
                      </div>
                      <div className="bg-[#1a1a24] rounded-lg p-2">
                        <p className="text-xs font-medium text-[#F7931A]">Time-Weighted Average</p>
                        <p className="text-[10px] text-gray-500">Account duration at each value matters</p>
                      </div>
                      <div className="bg-[#1a1a24] rounded-lg p-2">
                        <p className="text-xs font-medium text-[#F7931A]">Gaming Prevention</p>
                        <p className="text-[10px] text-gray-500">Eliminates deposit timing manipulation</p>
                      </div>
                    </div>

<div className="bg-[#F7931A]/10 border border-[#F7931A]/30 rounded-lg p-3 mb-4">
                      <p className="text-xs text-[#F7931A] font-medium">Why this matters</p>
                      <p className="text-[10px] text-gray-400">Your entire competition performance is evaluated, not just starting/ending balances. Strategic deposits or withdrawals won't artificially inflate your ROI.</p>
                    </div>

<div className="border-t border-white/10 pt-3">
                      <p className="text-xs font-medium mb-1">Terms & Conditions</p>
                      <p className="text-[10px] text-gray-500">Prize distribution is subject to competition rules. Final rankings determined at competition end. Prizes distributed within 3 business days.</p>
                    </div>
                  </div>
                </div>
              </div>
            </>
          )}
        </div>
      </div>
    </Suspense>
  )
}
[V0_FILE]typescriptreact:file="components/earn/yield-trading.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { useWallet } from "@/lib/wallet-context"
import {
  TrendingUp,
  ArrowDown,
  RefreshCw,
  Clock,
  Droplets,
  BarChart3,
  Layers,
  Lock,
  Unlock,
  AlertTriangle,
  ChevronDown,
  ArrowUpDown,
  Plus,
  Minus,
  Gift,
  History,
  ExternalLink,
  Info,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"
import { CoinLogo } from "@/components/ui/coin-logo"
import { useMemo } from "react"
import {
  AreaChart,
  Area,
  LineChart,
  Line,
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip as RTooltip,
  ResponsiveContainer,
  ReferenceLine,
  ComposedChart,
} from "recharts"

// ===== TYPES =====
interface Market {
  id: string
  asset: string
  symbol: string
  maturity: string
  maturityDate: string
  daysLeft: number
  ptPrice: number
  ytPrice: number
  impliedApy: number
  ptFixedApy: number
  tvl: string
  volume24h: string
  underlying: string
}

interface Position {
  id: string
  type: "PT" | "YT" | "LP"
  asset: string
  symbol: string
  amount: number
  value: number
  price: number
  maturity: string
  daysLeft: number
  earned?: number
  claimed?: number
  poolShare?: number
  apr?: number
}

interface TxHistory {
  id: string
  type: "Mint" | "Trade" | "Redeem" | "Add LP" | "Remove LP" | "Claim"
  asset: string
  amount: string
  value: string
  time: string
  txHash: string
}

// ===== MOCK DATA =====
const MARKETS: Market[] = [
  {
    id: "stbtc-180d",
    asset: "stBTC",
    symbol: "BTC",
    maturity: "Aug 22, 2026",
    maturityDate: "2026-08-22",
    daysLeft: 180,
    ptPrice: 0.85,
    ytPrice: 0.15,
    impliedApy: 35.2,
    ptFixedApy: 17.6,
    tvl: "$2.3M",
    volume24h: "$145K",
    underlying: "stBTC",
  },
  {
    id: "lbtc-90d",
    asset: "LBTC",
    symbol: "LBTC",
    maturity: "May 24, 2026",
    maturityDate: "2026-05-24",
    daysLeft: 90,
    ptPrice: 0.92,
    ytPrice: 0.08,
    impliedApy: 18.7,
    ptFixedApy: 8.7,
    tvl: "$850K",
    volume24h: "$67K",
    underlying: "LBTC",
  },
  {
    id: "wbtc-365d",
    asset: "WBTC",
    symbol: "WBTC",
    maturity: "Feb 23, 2027",
    maturityDate: "2027-02-23",
    daysLeft: 365,
    ptPrice: 0.78,
    ytPrice: 0.22,
    impliedApy: 42.1,
    ptFixedApy: 22.0,
    tvl: "$5.1M",
    volume24h: "$312K",
    underlying: "WBTC",
  },
]

const MOCK_POSITIONS: Position[] = [
  { id: "1", type: "PT", asset: "PT-stBTC-180D", symbol: "BTC", amount: 10.5, value: 892, price: 0.85, maturity: "Aug 22, 2026", daysLeft: 180 },
  { id: "2", type: "PT", asset: "PT-LBTC-90D", symbol: "LBTC", amount: 5.2, value: 358, price: 0.92, maturity: "May 24, 2026", daysLeft: 90 },
  { id: "3", type: "YT", asset: "YT-stBTC-180D", symbol: "BTC", amount: 10.5, value: 380, price: 0.15, maturity: "Aug 22, 2026", daysLeft: 180, earned: 0.35, claimed: 0.12 },
  { id: "4", type: "LP", asset: "stBTC-PT / stBTC", symbol: "BTC", amount: 50.2, value: 890, price: 17.73, maturity: "Aug 22, 2026", daysLeft: 180, poolShare: 0.15, apr: 12.5 },
]

const MOCK_TX_HISTORY: TxHistory[] = [
  { id: "1", type: "Mint", asset: "PT-stBTC + YT-stBTC", amount: "10.5", value: "$9,975", time: "2 hours ago", txHash: "0x1a2b...3c4d" },
  { id: "2", type: "Trade", asset: "Buy PT-LBTC", amount: "5.2 PT", value: "$4,784", time: "5 hours ago", txHash: "0x5e6f...7g8h" },
  { id: "3", type: "Add LP", asset: "stBTC-PT / stBTC", amount: "50.2 LP", value: "$890", time: "1 day ago", txHash: "0x9i0j...1k2l" },
  { id: "4", type: "Claim", asset: "YT-stBTC yield", amount: "0.12 stBTC", value: "$11.4", time: "2 days ago", txHash: "0x3m4n...5o6p" },
]

export function YieldTradingContent() {
  const { wallet } = useWallet()
  // Use both isConnected and address check for reliability
  const isConnected = wallet.isConnected || !!wallet.address

const [mainTab, setMainTab] = useState<MainTab>("markets")
  const [selectedMarket, setSelectedMarket] = useState<Market>(MARKETS[0])

// Mint state
  const [mintAmount, setMintAmount] = useState("")
  const [mintAsset, setMintAsset] = useState<string>(MARKETS[0].id)
  const [mintApproved, setMintApproved] = useState(false)

// Trade state
  const [tradeMode, setTradeMode] = useState<"buy" | "sell">("buy")
  const [tradeTokenType, setTradeTokenType] = useState<"PT" | "YT">("PT")
  const [tradeAmount, setTradeAmount] = useState("")
  const [slippage, setSlippage] = useState("0.5")
  const [showSlippage, setShowSlippage] = useState(false)

// Liquidity state
  const [lpMode, setLpMode] = useState<"add" | "remove">("add")
  const [lpAmountPT, setLpAmountPT] = useState("")
  const [lpAmountUnderlying, setLpAmountUnderlying] = useState("")
  const [lpRemoveAmount, setLpRemoveAmount] = useState("")

// Redeem state
  const [redeemMode, setRedeemMode] = useState<"early" | "maturity">("early")
  const [redeemAmount, setRedeemAmount] = useState("")

// Portfolio tab
  const [portfolioTab, setPortfolioTab] = useState<"pt" | "yt" | "lp" | "history">("pt")

// Chart state
  const [chartTimeframe, setChartTimeframe] = useState<"1D" | "7D" | "30D" | "90D" | "ALL">("30D")
  const [chartView, setChartView] = useState<"price" | "apy" | "volume" | "depth">("price")

// Generate chart data based on selected market and timeframe
  const chartData = useMemo(() => {
    const seed = selectedMarket.id.charCodeAt(0)
    const days = chartTimeframe === "1D" ? 24 : chartTimeframe === "7D" ? 7 : chartTimeframe === "30D" ? 30 : chartTimeframe === "90D" ? 90 : 180
    const isHourly = chartTimeframe === "1D"

return Array.from({ length: days }, (_, i) => {
      const noise = Math.sin(seed + i * 0.7) * 0.03 + Math.cos(i * 0.3) * 0.02
      const trend = i / days * 0.08
      const ptBase = selectedMarket.ptPrice - 0.05 + trend + noise
      const ytBase = selectedMarket.ytPrice + 0.03 - trend * 0.5 + Math.sin(i * 0.5) * 0.015
      const apyBase = selectedMarket.impliedApy + Math.sin(seed + i * 0.4) * 8 - trend * 15
      const volumeBase = Number.parseFloat(selectedMarket.volume24h.replace(/[$K]/g, "")) * (0.6 + Math.random() * 0.8)

const now = new Date()
      const date = new Date(now)
      if (isHourly) {
        date.setHours(now.getHours() - (days - i))
      } else {
        date.setDate(now.getDate() - (days - i))
      }

return {
        time: isHourly
          ? `${date.getHours().toString().padStart(2, "0")}:00`
          : `${(date.getMonth() + 1).toString().padStart(2, "0")}/${date.getDate().toString().padStart(2, "0")}`,
        ptPrice: Math.max(0.5, Math.min(0.99, ptBase)),
        ytPrice: Math.max(0.01, Math.min(0.49, ytBase)),
        impliedApy: Math.max(5, Math.min(80, apyBase)),
        ptFixedApy: Math.max(3, Math.min(40, apyBase * 0.5)),
        volume: Math.max(10, volumeBase),
        buyVolume: Math.max(5, volumeBase * (0.4 + Math.random() * 0.3)),
        sellVolume: Math.max(5, volumeBase * (0.2 + Math.random() * 0.3)),
        ma7: 0,
        ma25: 0,
      }
    }).map((d, i, arr) => {
      // Calculate MAs
      const ma7Window = arr.slice(Math.max(0, i - 6), i + 1)
      const ma25Window = arr.slice(Math.max(0, i - 24), i + 1)
      d.ma7 = ma7Window.reduce((s, x) => s + x.ptPrice, 0) / ma7Window.length
      d.ma25 = ma25Window.reduce((s, x) => s + x.ptPrice, 0) / ma25Window.length
      return d
    })
  }, [selectedMarket, chartTimeframe])

// Analysis metrics
  const chartAnalysis = useMemo(() => {
    if (chartData.length < 2) return null
    const first = chartData[0]
    const last = chartData[chartData.length - 1]
    const ptChange = ((last.ptPrice - first.ptPrice) / first.ptPrice * 100)
    const ytChange = ((last.ytPrice - first.ytPrice) / first.ytPrice * 100)
    const apyChange = last.impliedApy - first.impliedApy
    const avgVolume = chartData.reduce((s, d) => s + d.volume, 0) / chartData.length
    const maxPt = Math.max(...chartData.map(d => d.ptPrice))
    const minPt = Math.min(...chartData.map(d => d.ptPrice))
    const maxYt = Math.max(...chartData.map(d => d.ytPrice))
    const minYt = Math.min(...chartData.map(d => d.ytPrice))
    const volatility = ((maxPt - minPt) / minPt * 100)
    // RSI approximation
    const gains = chartData.slice(1).filter((d, i) => d.ptPrice > chartData[i].ptPrice).length
    const rsi = (gains / (chartData.length - 1)) * 100

return { ptChange, ytChange, apyChange, avgVolume, maxPt, minPt, maxYt, minYt, volatility, rsi }
  }, [chartData])

// Processing
  const [isProcessing, setIsProcessing] = useState(false)
  const [successMsg, setSuccessMsg] = useState("")
  const [errorMsg, setErrorMsg] = useState("")

const showSuccess = (msg: string) => {
    setSuccessMsg(msg)
    setErrorMsg("")
    setTimeout(() => setSuccessMsg(""), 5000)
  }

const showError = (msg: string) => {
  setErrorMsg(msg)
  setSuccessMsg("")
  }
  
  // Mock balances - connected wallet has these balances
  const MOCK_BALANCES = {
    PT: isConnected ? 10.5 : 0,
    YT: isConnected ? 10.5 : 0,
    underlying: isConnected ? 10.0 : 0,
    LP: isConnected ? 50.2 : 0,
  }
  
  const simulateAction = async (action: () => void) => {
    setIsProcessing(true)
    setErrorMsg("")
    try {
      await new Promise((r) => setTimeout(r, 2000))
      action()
    } catch {
      showError("Transaction failed. Please try again.")
    } finally {
      setIsProcessing(false)
    }
  }

const market = MARKETS.find((m) => m.id === mintAsset) || selectedMarket

// Computed trade values
  const tradeAmountNum = Number.parseFloat(tradeAmount || "0")
  const tokenPrice = tradeTokenType === "PT" ? selectedMarket.ptPrice : selectedMarket.ytPrice
  const estimatedReceive = tradeMode === "buy" ? tradeAmountNum / tokenPrice : tradeAmountNum * tokenPrice
  const priceImpact = tradeAmountNum > 0 ? Math.min(tradeAmountNum * 0.001, 2.5) : 0
  const fee = tradeAmountNum * 0.003
  const minReceived = estimatedReceive * (1 - Number.parseFloat(slippage) / 100)

// Computed mint values
  const mintAmountNum = Number.parseFloat(mintAmount || "0")

// Portfolio totals
  const ptValue = MOCK_POSITIONS.filter((p) => p.type === "PT").reduce((s, p) => s + p.value, 0)
  const ytValue = MOCK_POSITIONS.filter((p) => p.type === "YT").reduce((s, p) => s + p.value, 0)
  const lpValue = MOCK_POSITIONS.filter((p) => p.type === "LP").reduce((s, p) => s + p.value, 0)
  const totalPortfolioValue = ptValue + ytValue + lpValue

const tabs: { id: MainTab; label: string; icon: typeof TrendingUp }[] = [
    { id: "markets", label: "Markets", icon: BarChart3 },
    { id: "mint", label: "Mint PT-YT", icon: Plus },
    { id: "trade", label: "Trade PT/YT", icon: ArrowUpDown },
    { id: "liquidity", label: "Liquidity", icon: Droplets },
    { id: "portfolio", label: "Portfolio", icon: Layers },
    { id: "redeem", label: "Redeem", icon: Unlock },
  ]

return (
    <div>
      {/* Header */}
      <div className="text-center mb-6">
        <div className="flex items-center justify-center gap-2 mb-2">
          <TrendingUp className="w-8 h-8 text-[#F7931A]" />
          <h1 className="text-3xl font-bold text-white">Yield Trading</h1>
        </div>
        <p className="text-gray-400">
          Separate principal and yield from BTC yield-bearing assets. Trade PT and YT for optimized strategies.
        </p>
      </div>

{/* Stats Row */}
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-6">
        <div className="bg-[#12121a] rounded-xl p-4 border border-white/5 text-center">
          <div className="text-xs text-gray-500 mb-1">Total Value Locked</div>
          <div className="text-lg font-bold text-white">$8.25M</div>
        </div>
        <div className="bg-[#12121a] rounded-xl p-4 border border-white/5 text-center">
          <div className="text-xs text-gray-500 mb-1">24h Volume</div>
          <div className="text-lg font-bold text-white">$524K</div>
        </div>
        <div className="bg-[#12121a] rounded-xl p-4 border border-white/5 text-center">
          <div className="text-xs text-gray-500 mb-1">Active Markets</div>
          <div className="text-lg font-bold text-[#F7931A]">3</div>
        </div>
        <div className="bg-[#12121a] rounded-xl p-4 border border-white/5 text-center">
          <div className="text-xs text-gray-500 mb-1">Your Portfolio</div>
          <div className="text-lg font-bold text-[#00E0C6]">{isConnected ? `$${totalPortfolioValue.toLocaleString()}` : "$0"}</div>
        </div>
      </div>

{/* Sub Tabs */}
      <div className="flex gap-1 mb-6 overflow-x-auto pb-1 scrollbar-hide">
        {tabs.map((tab) => (
          <button
            key={tab.id}
            onClick={() => setMainTab(tab.id)}
            className={cn(
              "flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-colors",
              mainTab === tab.id
                ? "bg-[#F7931A] text-black"
                : "bg-[#12121a] text-gray-400 hover:text-white border border-white/5",
            )}
          >
            <tab.icon className="w-3.5 h-3.5" />
            {tab.label}
          </button>
        ))}
      </div>

{/* Global Messages */}
      {successMsg && (
        <div className="mb-4 p-3 bg-emerald-500/20 border border-emerald-500/30 rounded-lg text-[#00E0C6] text-sm text-center">
          {successMsg}
        </div>
      )}
      {errorMsg && (
        <div className="mb-4 p-3 bg-red-500/20 border border-red-500/30 rounded-lg text-red-400 text-sm text-center">
          {errorMsg}
        </div>
      )}

{/* ===== MARKETS TAB ===== */}
      {mainTab === "markets" && (
        <div className="bg-[#12121a] rounded-2xl border border-white/5 overflow-hidden">
          <div className="px-6 py-4 border-b border-white/5">
            <h2 className="font-bold text-white">All Markets</h2>
          </div>
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-white/5">
                  <th className="text-left px-6 py-3 text-[11px] font-medium text-gray-500 uppercase tracking-wider">Asset</th>
                  <th className="text-right px-4 py-3 text-[11px] font-medium text-gray-500 uppercase tracking-wider">Maturity</th>
                  <th className="text-right px-4 py-3 text-[11px] font-medium text-gray-500 uppercase tracking-wider">PT Price</th>
                  <th className="text-right px-4 py-3 text-[11px] font-medium text-gray-500 uppercase tracking-wider">YT Price</th>
                  <th className="text-right px-4 py-3 text-[11px] font-medium text-gray-500 uppercase tracking-wider">Implied APY</th>
                  <th className="text-right px-4 py-3 text-[11px] font-medium text-gray-500 uppercase tracking-wider">Fixed APY (PT)</th>
                  <th className="text-right px-4 py-3 text-[11px] font-medium text-gray-500 uppercase tracking-wider">TVL</th>
                  <th className="text-right px-4 py-3 text-[11px] font-medium text-gray-500 uppercase tracking-wider">Volume 24h</th>
                  <th className="text-right px-4 py-3 text-[11px] font-medium text-gray-500 uppercase tracking-wider">Time Left</th>
                  <th className="text-center px-4 py-3 text-[11px] font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                </tr>
              </thead>
              <tbody>
                {MARKETS.map((m) => (
                  <tr key={m.id} className="border-b border-white/[0.03] hover:bg-white/[0.02] transition-colors">
                    <td className="px-6 py-4">
                      <div className="flex items-center gap-3">
                        <CoinLogo symbol={m.symbol} size={28} />
                        <div>
                          <div className="font-medium text-white">{m.asset}</div>
                          <div className="text-[11px] text-gray-500">{m.underlying}</div>
                        </div>
                      </div>
                    </td>
                    <td className="text-right px-4 py-4 text-white">{m.maturity}</td>
                    <td className="text-right px-4 py-4 text-[#F7931A] font-medium">{m.ptPrice} {m.asset}</td>
                    <td className="text-right px-4 py-4 text-[#00E0C6] font-medium">{m.ytPrice} {m.asset}</td>
                    <td className="text-right px-4 py-4 text-[#00E0C6] font-bold">{m.impliedApy}%</td>
                    <td className="text-right px-4 py-4 text-[#F7931A] font-bold">{m.ptFixedApy}%</td>
                    <td className="text-right px-4 py-4 text-white">{m.tvl}</td>
                    <td className="text-right px-4 py-4 text-white">{m.volume24h}</td>
                    <td className="text-right px-4 py-4">
                      <div className="flex items-center gap-1 text-gray-400">
                        <Clock className="w-3 h-3" />
                        <span className="text-xs">{m.daysLeft}d</span>
                      </div>
                    </td>
                    <td className="text-center px-4 py-4">
                      <div className="flex items-center justify-center gap-1.5">
                        <button
                          onClick={() => { setSelectedMarket(m); setMintAsset(m.id); setMainTab("mint") }}
                          className="px-2.5 py-1 rounded-md bg-[#F7931A]/10 text-[#F7931A] text-xs font-medium hover:bg-[#F7931A]/20 transition-colors"
                        >
                          Mint
                        </button>
                        <button
                          onClick={() => { setSelectedMarket(m); setMainTab("trade") }}
                          className="px-2.5 py-1 rounded-md bg-emerald-500/10 text-[#00E0C6] text-xs font-medium hover:bg-emerald-500/20 transition-colors"
                        >
                          Trade
                        </button>
                        <button
                          onClick={() => { setSelectedMarket(m); setMainTab("liquidity") }}
                          className="px-2.5 py-1 rounded-md bg-white/5 text-gray-300 text-xs font-medium hover:bg-white/10 transition-colors"
                        >
                          LP
                        </button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

{/* ===== MINT PT-YT TAB ===== */}
      {mainTab === "mint" && (
        <div className="grid lg:grid-cols-5 gap-6">
          <div className="lg:col-span-3">
            <div className="bg-[#12121a] rounded-2xl p-6 border border-white/5">
              <h2 className="text-lg font-bold text-white mb-1">Mint Principal & Yield Tokens</h2>
              <p className="text-sm text-gray-500 mb-6">Split yield-bearing BTC assets into PT + YT in 1:1 ratio</p>

{/* Asset Selector */}
              <div className="mb-4">
                <label className="text-xs text-gray-500 uppercase tracking-wider mb-2 block">Select Asset</label>
                <div className="flex gap-2">
                  {MARKETS.map((m) => (
                    <button
                      key={m.id}
                      onClick={() => { setMintAsset(m.id); setSelectedMarket(m); setMintApproved(false) }}
                      className={cn(
                        "flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm font-medium transition-colors",
                        mintAsset === m.id
                          ? "bg-[#F7931A]/20 border border-[#F7931A]/30 text-[#F7931A]"
                          : "bg-[#0a0a0f] border border-white/5 text-gray-400 hover:border-white/10",
                      )}
                    >
                      <CoinLogo symbol={m.symbol} size={20} />
                      {m.asset}
                    </button>
                  ))}
                </div>
              </div>

{/* Input */}
              <div className="bg-[#0a0a0f] rounded-xl p-4 border border-white/5 mb-3">
                <div className="flex items-center justify-between mb-2">
                  <span className="text-xs text-gray-500">You deposit</span>
                  <span className="text-xs text-gray-500">Balance: {isConnected ? "10.5" : "0.0"} {market.asset}</span>
                </div>
                <div className="flex items-center gap-3">
                  <input
                    type="text"
                    inputMode="decimal"
                    value={mintAmount}
                    onChange={(e) => setMintAmount(e.target.value.replace(/[^0-9.]/g, ""))}
                    placeholder="0.0"
                    className="flex-1 bg-transparent text-2xl text-white outline-none"
                  />
                  <div className="flex items-center gap-2 px-3 py-1.5 bg-white/5 rounded-lg">
                    <CoinLogo symbol={market.symbol} size={20} />
                    <span className="text-sm font-medium text-white">{market.asset}</span>
                  </div>
                </div>
                <div className="flex gap-2 mt-2">
                  {[25, 50, 75, 100].map((pct) => (
                    <button
                      key={pct}
                      onClick={() => setMintAmount(((10.5 * pct) / 100).toFixed(4))}
                      className="px-2 py-0.5 rounded text-[10px] font-medium bg-white/5 text-gray-400 hover:text-white transition-colors"
                    >
                      {pct === 100 ? "MAX" : `${pct}%`}
                    </button>
                  ))}
                </div>
              </div>

{/* Arrow */}
              <div className="flex justify-center my-2">
                <div className="w-8 h-8 rounded-full bg-[#1e2329] flex items-center justify-center">
                  <ArrowDown className="w-4 h-4 text-[#F7931A]" />
                </div>
              </div>

{/* Output */}
              <div className="bg-[#0a0a0f] rounded-xl p-4 border border-[#F7931A]/20 mb-4">
                <div className="text-xs text-gray-500 mb-3">You will receive</div>
                <div className="space-y-3">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <div className="w-6 h-6 rounded-full bg-[#F7931A]/20 flex items-center justify-center">
                        <span className="text-[10px] font-bold text-[#F7931A]">PT</span>
                      </div>
                      <span className="text-sm text-white">PT-{market.asset}-{market.daysLeft}D</span>
                    </div>
                    <span className="text-lg font-bold text-white">{mintAmountNum > 0 ? mintAmountNum.toFixed(4) : "0.0"}</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <div className="w-6 h-6 rounded-full bg-emerald-500/20 flex items-center justify-center">
                        <span className="text-[10px] font-bold text-[#00E0C6]">YT</span>
                      </div>
                      <span className="text-sm text-white">YT-{market.asset}-{market.daysLeft}D</span>
                    </div>
                    <span className="text-lg font-bold text-white">{mintAmountNum > 0 ? mintAmountNum.toFixed(4) : "0.0"}</span>
                  </div>
                </div>
              </div>

{/* Details */}
              <div className="bg-[#0a0a0f] rounded-xl p-4 border border-white/5 mb-6 space-y-2 text-sm">
                <div className="flex justify-between"><span className="text-gray-500">Maturity</span><span className="text-white">{market.maturity} ({market.daysLeft} days)</span></div>
                <div className="flex justify-between"><span className="text-gray-500">Implied APY</span><span className="text-[#00E0C6]">{market.impliedApy}%</span></div>
                <div className="flex justify-between"><span className="text-gray-500">Estimated Yield (YT)</span><span className="text-white">{mintAmountNum > 0 ? (mintAmountNum * market.ytPrice * (market.daysLeft / 365)).toFixed(4) : "0.0"} {market.asset}</span></div>
                <div className="flex justify-between"><span className="text-gray-500">Ratio</span><span className="text-white">1 {market.asset} = 1 PT + 1 YT</span></div>
                <div className="flex justify-between"><span className="text-gray-500">Gas Estimate</span><span className="text-gray-400">~$0.15</span></div>
              </div>

{/* Info */}
              <div className="bg-[#F7931A]/5 border border-[#F7931A]/10 rounded-xl p-3 mb-6 flex gap-2">
                <Info className="w-4 h-4 text-[#F7931A] flex-shrink-0 mt-0.5" />
                <p className="text-xs text-[#F7931A]/80">You will receive both PT and YT in 1:1 ratio. PT represents the principal redeemable at maturity. YT represents the yield earned until maturity. You can trade or hold them independently.</p>
              </div>

{/* Buttons */}
              <div className="flex gap-3">
                {!mintApproved ? (
                  <Button
                    className="flex-1 bg-white/10 hover:bg-white/20 text-white font-semibold"
                    onClick={() => simulateAction(() => { setMintApproved(true); showSuccess(`Approved ${market.asset} for minting!`) })}
                    disabled={isProcessing || !mintAmount || mintAmountNum <= 0}
                  >
                    {isProcessing ? <span className="flex items-center gap-2"><RefreshCw className="w-4 h-4 animate-spin" />Approving...</span> : `1. Approve ${market.asset}`}
                  </Button>
                ) : (
                  <Button
                    className="flex-1 bg-[#F7931A] hover:bg-[#F7931A]/90 text-black font-semibold"
onClick={() => {
  const amount = Number.parseFloat(mintAmount || "0")
  if (amount > MOCK_BALANCES.underlying) {
    showError(`Insufficient ${market.asset} balance. You have ${MOCK_BALANCES.underlying} ${market.asset} available.`)
    return
  }
  simulateAction(() => {
    showSuccess(`Minted ${mintAmount} PT-${market.asset} + ${mintAmount} YT-${market.asset}!`)
    setMintAmount("")
    setMintApproved(false)
  })
}}
  disabled={isProcessing || !mintAmount || mintAmountNum <= 0 || mintAmountNum > MOCK_BALANCES.underlying}
                  >
                    {isProcessing ? <span className="flex items-center gap-2"><RefreshCw className="w-4 h-4 animate-spin" />Minting...</span> : `2. Mint PT + YT`}
                  </Button>
                )}
              </div>
            </div>
          </div>

{/* Right Sidebar */}
          <div className="lg:col-span-2 space-y-4">
            <div className="bg-gradient-to-b from-[#F7931A]/10 to-transparent rounded-2xl p-5 border border-[#F7931A]/10">
              <div className="flex items-center gap-3 mb-4">
                <CoinLogo symbol={market.symbol} size={32} />
                <div>
                  <div className="text-lg font-bold text-white">{market.asset}</div>
                  <div className="text-sm text-gray-400">{market.underlying}</div>
                </div>
              </div>
              <div className="grid grid-cols-2 gap-3">
                <div className="bg-[#0a0a0f] rounded-lg p-3"><div className="text-[11px] text-gray-500">PT Price</div><div className="font-bold text-[#F7931A]">{market.ptPrice}</div></div>
                <div className="bg-[#0a0a0f] rounded-lg p-3"><div className="text-[11px] text-gray-500">YT Price</div><div className="font-bold text-[#00E0C6]">{market.ytPrice}</div></div>
                <div className="bg-[#0a0a0f] rounded-lg p-3"><div className="text-[11px] text-gray-500">Implied APY</div><div className="font-bold text-[#00E0C6]">{market.impliedApy}%</div></div>
                <div className="bg-[#0a0a0f] rounded-lg p-3"><div className="text-[11px] text-gray-500">Days Left</div><div className="font-bold text-white">{market.daysLeft}d</div></div>
              </div>
            </div>

<div className="bg-[#12121a] rounded-2xl p-5 border border-white/5">
              <h3 className="font-bold text-white mb-3 text-sm">How Minting Works</h3>
              <div className="space-y-3 text-xs text-gray-400">
                <div className="flex gap-2"><div className="w-5 h-5 rounded-full bg-[#F7931A]/20 flex items-center justify-center flex-shrink-0 text-[10px] text-[#F7931A] font-bold">1</div><span>Deposit your yield-bearing BTC asset (stBTC, LBTC, or WBTC)</span></div>
                <div className="flex gap-2"><div className="w-5 h-5 rounded-full bg-[#F7931A]/20 flex items-center justify-center flex-shrink-0 text-[10px] text-[#F7931A] font-bold">2</div><span>Receive PT (Principal Token) + YT (Yield Token) in 1:1 ratio</span></div>
                <div className="flex gap-2"><div className="w-5 h-5 rounded-full bg-[#F7931A]/20 flex items-center justify-center flex-shrink-0 text-[10px] text-[#F7931A] font-bold">3</div><span>PT is redeemable 1:1 at maturity. YT earns yield until maturity</span></div>
                <div className="flex gap-2"><div className="w-5 h-5 rounded-full bg-[#F7931A]/20 flex items-center justify-center flex-shrink-0 text-[10px] text-[#F7931A] font-bold">4</div><span>Trade, hold, or provide liquidity with your PT/YT independently</span></div>
              </div>
            </div>
          </div>
        </div>
      )}

{/* ===== TRADE PT/YT TAB ===== */}
      {mainTab === "trade" && (
        <div className="grid lg:grid-cols-5 gap-6">
          <div className="lg:col-span-3 space-y-4">
            {/* Market Selector */}
            <div className="bg-[#12121a] rounded-2xl p-4 border border-white/5">
              <div className="flex items-center gap-3 overflow-x-auto scrollbar-hide">
                {MARKETS.map((m) => (
                  <button
                    key={m.id}
                    onClick={() => setSelectedMarket(m)}
                    className={cn(
                      "flex items-center gap-2 px-4 py-2 rounded-xl text-sm whitespace-nowrap transition-colors",
                      selectedMarket.id === m.id
                        ? "bg-[#F7931A]/20 border border-[#F7931A]/30 text-white"
                        : "bg-[#0a0a0f] border border-white/5 text-gray-400 hover:text-white",
                    )}
                  >
                    <CoinLogo symbol={m.symbol} size={20} />
                    <span className="font-medium">{m.asset}</span>
                    <span className="text-xs text-gray-500">{m.daysLeft}d</span>
                  </button>
                ))}
              </div>
            </div>

{/* Live Chart */}
            <div className="bg-[#12121a] rounded-2xl border border-white/5 overflow-hidden">
              {/* Chart Header */}
              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 px-5 py-4 border-b border-white/5">
                <div className="flex items-center gap-4">
                  <div className="flex items-center gap-2">
                    <CoinLogo symbol={selectedMarket.symbol} size={24} />
                    <div>
                      <span className="text-sm font-bold text-white">{tradeTokenType}-{selectedMarket.asset}</span>
                      <span className="text-xs text-gray-500 ml-2">/ {selectedMarket.asset}</span>
                    </div>
                  </div>
                  <div className="flex items-center gap-3">
                    <div>
                      <div className="text-lg font-bold text-white">{(tradeTokenType === "PT" ? selectedMarket.ptPrice : selectedMarket.ytPrice).toFixed(4)}</div>
                    </div>
                    {chartAnalysis && (
                      <span className={cn("text-xs font-medium px-1.5 py-0.5 rounded", (tradeTokenType === "PT" ? chartAnalysis.ptChange : chartAnalysis.ytChange) >= 0 ? "bg-emerald-500/20 text-[#00E0C6]" : "bg-red-500/20 text-red-400")}>
                        {(tradeTokenType === "PT" ? chartAnalysis.ptChange : chartAnalysis.ytChange) >= 0 ? "+" : ""}{(tradeTokenType === "PT" ? chartAnalysis.ptChange : chartAnalysis.ytChange).toFixed(2)}%
                      </span>
                    )}
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  {/* Chart View Tabs */}
                  <div className="flex gap-1 bg-[#0a0a0f] rounded-lg p-0.5">
                    {(["price", "apy", "volume", "depth"] as const).map(v => (
                      <button key={v} onClick={() => setChartView(v)} className={cn("px-2.5 py-1 rounded-md text-[11px] font-medium transition-colors capitalize", chartView === v ? "bg-[#F7931A] text-black" : "text-gray-500 hover:text-white")}>{v}</button>
                    ))}
                  </div>
                  {/* Timeframe */}
                  <div className="flex gap-1 bg-[#0a0a0f] rounded-lg p-0.5">
                    {(["1D", "7D", "30D", "90D", "ALL"] as const).map(tf => (
                      <button key={tf} onClick={() => setChartTimeframe(tf)} className={cn("px-2 py-1 rounded-md text-[11px] font-medium transition-colors", chartTimeframe === tf ? "bg-white/10 text-white" : "text-gray-500 hover:text-white")}>{tf}</button>
                    ))}
                  </div>
                </div>
              </div>

{/* Chart Area */}
              <div className="px-4 pt-4 pb-2" style={{ height: 320 }}>
                <ResponsiveContainer width="100%" height="100%">
                  {chartView === "price" ? (
                    <ComposedChart data={chartData} margin={{ top: 5, right: 5, bottom: 5, left: 5 }}>
                      <CartesianGrid strokeDasharray="3 3" stroke="#1e2329" />
                      <XAxis dataKey="time" tick={{ fill: "#5e6673", fontSize: 10 }} tickLine={false} axisLine={false} />
                      <YAxis domain={["auto", "auto"]} tick={{ fill: "#5e6673", fontSize: 10 }} tickLine={false} axisLine={false} tickFormatter={(v: number) => v.toFixed(2)} />
                      <RTooltip
                        contentStyle={{ backgroundColor: "#1a1a2e", border: "1px solid rgba(255,255,255,0.1)", borderRadius: 8, fontSize: 12 }}
                        labelStyle={{ color: "#848e9c" }}
                        formatter={(value: number, name: string) => [value.toFixed(4), name === "ptPrice" ? "PT Price" : name === "ytPrice" ? "YT Price" : name === "ma7" ? "MA(7)" : "MA(25)"]}
                      />
                      <Area type="monotone" dataKey="ptPrice" stroke="#F7931A" fill="#F7931A" fillOpacity={0.08} strokeWidth={2} name="ptPrice" />
                      <Area type="monotone" dataKey="ytPrice" stroke="#34d399" fill="#34d399" fillOpacity={0.05} strokeWidth={2} name="ytPrice" />
                      <Line type="monotone" dataKey="ma7" stroke="#FFD700" strokeWidth={1} strokeDasharray="4 2" dot={false} name="ma7" />
                      <Line type="monotone" dataKey="ma25" stroke="#9333ea" strokeWidth={1} strokeDasharray="4 2" dot={false} name="ma25" />
                    </ComposedChart>
                  ) : chartView === "apy" ? (
                    <AreaChart data={chartData} margin={{ top: 5, right: 5, bottom: 5, left: 5 }}>
                      <CartesianGrid strokeDasharray="3 3" stroke="#1e2329" />
                      <XAxis dataKey="time" tick={{ fill: "#5e6673", fontSize: 10 }} tickLine={false} axisLine={false} />
                      <YAxis tick={{ fill: "#5e6673", fontSize: 10 }} tickLine={false} axisLine={false} tickFormatter={(v: number) => `${v.toFixed(0)}%`} />
                      <RTooltip contentStyle={{ backgroundColor: "#1a1a2e", border: "1px solid rgba(255,255,255,0.1)", borderRadius: 8, fontSize: 12 }} formatter={(value: number, name: string) => [`${value.toFixed(1)}%`, name === "impliedApy" ? "Implied APY" : "Fixed APY (PT)"]} />
                      <ReferenceLine y={selectedMarket.impliedApy} stroke="#F7931A" strokeDasharray="6 3" label={{ value: `Current ${selectedMarket.impliedApy}%`, fill: "#F7931A", fontSize: 10, position: "insideTopRight" }} />
                      <Area type="monotone" dataKey="impliedApy" stroke="#34d399" fill="#34d399" fillOpacity={0.1} strokeWidth={2} name="impliedApy" />
                      <Area type="monotone" dataKey="ptFixedApy" stroke="#F7931A" fill="#F7931A" fillOpacity={0.05} strokeWidth={1.5} name="ptFixedApy" />
                    </AreaChart>
                  ) : chartView === "volume" ? (
                    <BarChart data={chartData} margin={{ top: 5, right: 5, bottom: 5, left: 5 }}>
                      <CartesianGrid strokeDasharray="3 3" stroke="#1e2329" />
                      <XAxis dataKey="time" tick={{ fill: "#5e6673", fontSize: 10 }} tickLine={false} axisLine={false} />
                      <YAxis tick={{ fill: "#5e6673", fontSize: 10 }} tickLine={false} axisLine={false} tickFormatter={(v: number) => `$${v.toFixed(0)}K`} />
                      <RTooltip contentStyle={{ backgroundColor: "#1a1a2e", border: "1px solid rgba(255,255,255,0.1)", borderRadius: 8, fontSize: 12 }} formatter={(value: number, name: string) => [`$${value.toFixed(1)}K`, name === "buyVolume" ? "Buy Volume" : "Sell Volume"]} />
                      <Bar dataKey="buyVolume" fill="#34d399" fillOpacity={0.8} radius={[2, 2, 0, 0]} stackId="vol" name="buyVolume" />
                      <Bar dataKey="sellVolume" fill="#ef5350" fillOpacity={0.8} radius={[2, 2, 0, 0]} stackId="vol" name="sellVolume" />
                    </BarChart>
                  ) : (
                    /* Depth / Orderbook visualization */
                    <AreaChart data={(() => {
                      const mid = tradeTokenType === "PT" ? selectedMarket.ptPrice : selectedMarket.ytPrice
                      return Array.from({ length: 40 }, (_, i) => {
                        const pct = (i - 20) / 200
                        const price = mid * (1 + pct)
                        const bidDepth = i < 20 ? Math.pow(20 - i, 1.5) * 5 : 0
                        const askDepth = i >= 20 ? Math.pow(i - 19, 1.5) * 5 : 0
                        return { price: price.toFixed(4), bid: bidDepth, ask: askDepth }
                      })
                    })()} margin={{ top: 5, right: 5, bottom: 5, left: 5 }}>
                      <CartesianGrid strokeDasharray="3 3" stroke="#1e2329" />
                      <XAxis dataKey="price" tick={{ fill: "#5e6673", fontSize: 10 }} tickLine={false} axisLine={false} />
                      <YAxis tick={{ fill: "#5e6673", fontSize: 10 }} tickLine={false} axisLine={false} />
                      <RTooltip contentStyle={{ backgroundColor: "#1a1a2e", border: "1px solid rgba(255,255,255,0.1)", borderRadius: 8, fontSize: 12 }} formatter={(value: number, name: string) => [value.toFixed(1), name === "bid" ? "Bid Depth" : "Ask Depth"]} />
                      <Area type="stepAfter" dataKey="bid" stroke="#34d399" fill="#34d399" fillOpacity={0.15} strokeWidth={1.5} name="bid" />
                      <Area type="stepAfter" dataKey="ask" stroke="#ef5350" fill="#ef5350" fillOpacity={0.15} strokeWidth={1.5} name="ask" />
                    </AreaChart>
                  )}
                </ResponsiveContainer>
              </div>

{/* Analysis Bar */}
              {chartAnalysis && (
                <div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 gap-px bg-white/5 border-t border-white/5">
                  <div className="bg-[#12121a] px-3 py-2.5 text-center">
                    <div className="text-[10px] text-gray-500 mb-0.5">PT Chg</div>
                    <div className={cn("text-xs font-bold", chartAnalysis.ptChange >= 0 ? "text-[#00E0C6]" : "text-red-400")}>
                      {chartAnalysis.ptChange >= 0 ? "+" : ""}{chartAnalysis.ptChange.toFixed(2)}%
                    </div>
                  </div>
                  <div className="bg-[#12121a] px-3 py-2.5 text-center">
                    <div className="text-[10px] text-gray-500 mb-0.5">YT Chg</div>
                    <div className={cn("text-xs font-bold", chartAnalysis.ytChange >= 0 ? "text-[#00E0C6]" : "text-red-400")}>
                      {chartAnalysis.ytChange >= 0 ? "+" : ""}{chartAnalysis.ytChange.toFixed(2)}%
                    </div>
                  </div>
                  <div className="bg-[#12121a] px-3 py-2.5 text-center">
                    <div className="text-[10px] text-gray-500 mb-0.5">APY Chg</div>
                    <div className={cn("text-xs font-bold", chartAnalysis.apyChange >= 0 ? "text-[#00E0C6]" : "text-red-400")}>
                      {chartAnalysis.apyChange >= 0 ? "+" : ""}{chartAnalysis.apyChange.toFixed(1)}%
                    </div>
                  </div>
                  <div className="bg-[#12121a] px-3 py-2.5 text-center">
                    <div className="text-[10px] text-gray-500 mb-0.5">Avg Vol</div>
                    <div className="text-xs font-bold text-white">${chartAnalysis.avgVolume.toFixed(0)}K</div>
                  </div>
                  <div className="bg-[#12121a] px-3 py-2.5 text-center">
                    <div className="text-[10px] text-gray-500 mb-0.5">PT High</div>
                    <div className="text-xs font-bold text-[#F7931A]">{chartAnalysis.maxPt.toFixed(4)}</div>
                  </div>
                  <div className="bg-[#12121a] px-3 py-2.5 text-center">
                    <div className="text-[10px] text-gray-500 mb-0.5">PT Low</div>
                    <div className="text-xs font-bold text-gray-300">{chartAnalysis.minPt.toFixed(4)}</div>
                  </div>
                  <div className="bg-[#12121a] px-3 py-2.5 text-center">
                    <div className="text-[10px] text-gray-500 mb-0.5">Volatility</div>
                    <div className={cn("text-xs font-bold", chartAnalysis.volatility > 10 ? "text-red-400" : chartAnalysis.volatility > 5 ? "text-yellow-400" : "text-[#00E0C6]")}>
                      {chartAnalysis.volatility.toFixed(1)}%
                    </div>
                  </div>
                  <div className="bg-[#12121a] px-3 py-2.5 text-center">
                    <div className="text-[10px] text-gray-500 mb-0.5">RSI</div>
                    <div className={cn("text-xs font-bold", chartAnalysis.rsi > 70 ? "text-red-400" : chartAnalysis.rsi < 30 ? "text-[#00E0C6]" : "text-white")}>
                      {chartAnalysis.rsi.toFixed(0)}
                    </div>
                  </div>
                </div>
              )}
            </div>

{/* Trade Panel */}
            <div className="bg-[#12121a] rounded-2xl p-6 border border-white/5">
              <div className="flex items-center justify-between mb-4">
                <h2 className="text-lg font-bold text-white">Trade {tradeTokenType} Tokens</h2>
                <button onClick={() => setShowSlippage(!showSlippage)} className="text-xs text-gray-400 hover:text-white flex items-center gap-1 transition-colors">
                  Slippage: {slippage}% <ChevronDown className={cn("w-3 h-3 transition-transform", showSlippage && "rotate-180")} />
                </button>
              </div>

{showSlippage && (
                <div className="flex gap-2 mb-4 p-3 bg-[#0a0a0f] rounded-lg border border-white/5">
                  {["0.1", "0.5", "1", "2"].map((s) => (
                    <button key={s} onClick={() => setSlippage(s)} className={cn("px-3 py-1 rounded text-xs font-medium transition-colors", slippage === s ? "bg-[#F7931A] text-black" : "bg-white/5 text-gray-400 hover:text-white")}>{s}%</button>
                  ))}
                  <input type="text" value={slippage} onChange={(e) => setSlippage(e.target.value.replace(/[^0-9.]/g, ""))} className="w-16 px-2 py-1 bg-white/5 rounded text-xs text-white outline-none text-center" placeholder="Custom" />
                </div>
              )}

{/* PT / YT Toggle */}
              <div className="flex gap-2 mb-4">
                {(["PT", "YT"] as const).map((t) => (
                  <button
                    key={t}
                    onClick={() => setTradeTokenType(t)}
                    className={cn(
                      "flex-1 py-2 rounded-lg text-sm font-medium transition-colors",
                      tradeTokenType === t
                        ? t === "PT" ? "bg-[#F7931A]/20 text-[#F7931A] border border-[#F7931A]/30" : "bg-emerald-500/20 text-[#00E0C6] border border-emerald-500/30"
                        : "bg-[#0a0a0f] text-gray-400 border border-white/5",
                    )}
                  >
                    {t === "PT" ? "Principal Token (PT)" : "Yield Token (YT)"}
                  </button>
                ))}
              </div>

{/* Buy / Sell Toggle */}
              <div className="flex gap-2 mb-4">
                <button onClick={() => setTradeMode("buy")} className={cn("flex-1 py-2.5 rounded-lg text-sm font-bold transition-colors", tradeMode === "buy" ? "bg-emerald-500 text-white" : "bg-[#0a0a0f] text-gray-400")}>Buy {tradeTokenType}</button>
                <button onClick={() => setTradeMode("sell")} className={cn("flex-1 py-2.5 rounded-lg text-sm font-bold transition-colors", tradeMode === "sell" ? "bg-red-500 text-white" : "bg-[#0a0a0f] text-gray-400")}>Sell {tradeTokenType}</button>
              </div>

{/* From */}
              <div className="bg-[#0a0a0f] rounded-xl p-4 border border-white/5 mb-2">
<div className="flex items-center justify-between mb-2">
  <span className="text-xs text-gray-500">From</span>
  <span className="text-xs text-gray-500">Balance: {(tradeMode === "buy" ? MOCK_BALANCES.underlying : (tradeTokenType === "PT" ? MOCK_BALANCES.PT : MOCK_BALANCES.YT)).toFixed(2)}</span>
  </div>
  <div className="flex items-center gap-3">
  <input type="text" inputMode="decimal" value={tradeAmount} onChange={(e) => { setTradeAmount(e.target.value.replace(/[^0-9.]/g, "")); setErrorMsg("") }} placeholder="0.0" className={`flex-1 bg-transparent text-2xl outline-none ${tradeAmount && Number.parseFloat(tradeAmount) > (tradeMode === "buy" ? MOCK_BALANCES.underlying : (tradeTokenType === "PT" ? MOCK_BALANCES.PT : MOCK_BALANCES.YT)) ? "text-red-400" : "text-white"}`} />
                  <div className="flex items-center gap-2 px-3 py-1.5 bg-white/5 rounded-lg">
                    <CoinLogo symbol={selectedMarket.symbol} size={18} />
                    <span className="text-sm font-medium text-white">{tradeMode === "buy" ? selectedMarket.asset : `${tradeTokenType}-${selectedMarket.asset}`}</span>
                  </div>
                </div>
                {tradeAmount && Number.parseFloat(tradeAmount) > (tradeMode === "buy" ? MOCK_BALANCES.underlying : (tradeTokenType === "PT" ? MOCK_BALANCES.PT : MOCK_BALANCES.YT)) && (
                  <p className="text-red-400 text-xs mt-2 flex items-center gap-1">
                    <AlertTriangle className="w-3 h-3" />
                    Insufficient balance. Maximum: {(tradeMode === "buy" ? MOCK_BALANCES.underlying : (tradeTokenType === "PT" ? MOCK_BALANCES.PT : MOCK_BALANCES.YT)).toFixed(2)}
                  </p>
                )}
              </div>

{/* To */}
              <div className="bg-[#0a0a0f] rounded-xl p-4 border border-[#F7931A]/10 mb-4">
                <div className="flex items-center justify-between mb-2">
                  <span className="text-xs text-gray-500">To (estimated)</span>
                </div>
                <div className="flex items-center gap-3">
                  <span className="flex-1 text-2xl font-medium text-white">{tradeAmountNum > 0 ? estimatedReceive.toFixed(4) : "0.0"}</span>
                  <div className="flex items-center gap-2 px-3 py-1.5 bg-white/5 rounded-lg">
                    <CoinLogo symbol={selectedMarket.symbol} size={18} />
                    <span className="text-sm font-medium text-white">{tradeMode === "buy" ? `${tradeTokenType}-${selectedMarket.asset}` : selectedMarket.asset}</span>
                  </div>
                </div>
              </div>

{/* Trade Details */}
              <div className="bg-[#0a0a0f] rounded-xl p-4 border border-white/5 mb-4 space-y-2 text-sm">
                <div className="flex justify-between"><span className="text-gray-500">Price</span><span className="text-white">1 {tradeTokenType} = {tokenPrice} {selectedMarket.asset} ({tradeTokenType === "PT" ? `-${((1 - tokenPrice) * 100).toFixed(0)}% discount` : "yield premium"})</span></div>
                <div className="flex justify-between"><span className="text-gray-500">Price Impact</span><span className={cn(priceImpact > 1 ? "text-red-400" : "text-gray-400")}>{priceImpact.toFixed(2)}%</span></div>
                <div className="flex justify-between"><span className="text-gray-500">Fee (0.3%)</span><span className="text-gray-400">{fee.toFixed(4)} {selectedMarket.asset}</span></div>
                <div className="flex justify-between"><span className="text-gray-500">Min Received</span><span className="text-white">{tradeAmountNum > 0 ? minReceived.toFixed(4) : "0.0"} {tradeMode === "buy" ? tradeTokenType : selectedMarket.asset}</span></div>
              </div>

<Button
  className={cn("w-full font-semibold", tradeMode === "buy" ? "bg-emerald-500 hover:bg-emerald-600 text-white" : "bg-red-500 hover:bg-red-600 text-white")}
  onClick={() => {
    const amount = Number.parseFloat(tradeAmount || "0")
    // For buy: need underlying to buy PT/YT, for sell: need PT/YT tokens
    const balance = tradeMode === "buy" ? MOCK_BALANCES.underlying : (tradeTokenType === "PT" ? MOCK_BALANCES.PT : MOCK_BALANCES.YT)
    const tokenName = tradeMode === "buy" ? selectedMarket.asset : `${tradeTokenType}-${selectedMarket.asset}`
    if (amount > balance) {
      showError(`Insufficient ${tokenName} balance. You have ${balance} ${tokenName} available.`)
      return
    }
    simulateAction(() => {
      showSuccess(`${tradeMode === "buy" ? "Bought" : "Sold"} ${tradeAmount} ${tradeTokenType}-${selectedMarket.asset}!`)
      setTradeAmount("")
    })
  }}
  disabled={isProcessing || !tradeAmount || tradeAmountNum <= 0 || tradeAmountNum > (tradeMode === "buy" ? MOCK_BALANCES.underlying : (tradeTokenType === "PT" ? MOCK_BALANCES.PT : MOCK_BALANCES.YT))}
  >
                {isProcessing ? <span className="flex items-center gap-2"><RefreshCw className="w-4 h-4 animate-spin" />Processing...</span> : !isConnected ? "Connect Wallet" : `${tradeMode === "buy" ? "Buy" : "Sell"} ${tradeTokenType}-${selectedMarket.asset}`}
              </Button>
            </div>
          </div>

{/* Right Sidebar - Market Info */}
          <div className="lg:col-span-2 space-y-4">
            <div className="bg-gradient-to-b from-[#F7931A]/10 to-transparent rounded-2xl p-5 border border-[#F7931A]/10">
              <div className="flex items-center gap-3 mb-4">
                <CoinLogo symbol={selectedMarket.symbol} size={32} />
                <div>
                  <div className="text-lg font-bold text-white">{selectedMarket.asset}</div>
                  <div className="text-sm text-gray-400">Maturity: {selectedMarket.maturity}</div>
                </div>
              </div>
              <div className="grid grid-cols-2 gap-3">
                <div className="bg-[#0a0a0f] rounded-lg p-3"><div className="text-[11px] text-gray-500">PT Price</div><div className="font-bold text-[#F7931A]">{selectedMarket.ptPrice}</div></div>
                <div className="bg-[#0a0a0f] rounded-lg p-3"><div className="text-[11px] text-gray-500">YT Price</div><div className="font-bold text-[#00E0C6]">{selectedMarket.ytPrice}</div></div>
                <div className="bg-[#0a0a0f] rounded-lg p-3"><div className="text-[11px] text-gray-500">Implied APY</div><div className="font-bold text-[#00E0C6]">{selectedMarket.impliedApy}%</div></div>
                <div className="bg-[#0a0a0f] rounded-lg p-3"><div className="text-[11px] text-gray-500">Fixed APY</div><div className="font-bold text-[#F7931A]">{selectedMarket.ptFixedApy}%</div></div>
                <div className="bg-[#0a0a0f] rounded-lg p-3"><div className="text-[11px] text-gray-500">TVL</div><div className="font-bold text-white">{selectedMarket.tvl}</div></div>
                <div className="bg-[#0a0a0f] rounded-lg p-3"><div className="text-[11px] text-gray-500">Volume 24h</div><div className="font-bold text-white">{selectedMarket.volume24h}</div></div>
              </div>
            </div>

{/* Market Signals */}
            {chartAnalysis && (
              <div className="bg-[#12121a] rounded-2xl p-5 border border-white/5">
                <h3 className="font-bold text-white mb-3 text-sm">Market Signals</h3>
                <div className="space-y-2.5">
                  <div className="flex items-center justify-between">
                    <span className="text-xs text-gray-500">Trend</span>
                    <span className={cn("text-xs font-bold px-2 py-0.5 rounded", chartAnalysis.ptChange > 2 ? "bg-emerald-500/20 text-[#00E0C6]" : chartAnalysis.ptChange < -2 ? "bg-red-500/20 text-red-400" : "bg-white/10 text-gray-300")}>
                      {chartAnalysis.ptChange > 2 ? "Bullish" : chartAnalysis.ptChange < -2 ? "Bearish" : "Neutral"}
                    </span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-xs text-gray-500">RSI ({chartAnalysis.rsi.toFixed(0)})</span>
                    <span className={cn("text-xs font-bold px-2 py-0.5 rounded", chartAnalysis.rsi > 70 ? "bg-red-500/20 text-red-400" : chartAnalysis.rsi < 30 ? "bg-emerald-500/20 text-[#00E0C6]" : "bg-white/10 text-gray-300")}>
                      {chartAnalysis.rsi > 70 ? "Overbought" : chartAnalysis.rsi < 30 ? "Oversold" : "Normal"}
                    </span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-xs text-gray-500">Volatility</span>
                    <span className={cn("text-xs font-bold px-2 py-0.5 rounded", chartAnalysis.volatility > 10 ? "bg-red-500/20 text-red-400" : chartAnalysis.volatility > 5 ? "bg-yellow-500/20 text-yellow-400" : "bg-emerald-500/20 text-[#00E0C6]")}>
                      {chartAnalysis.volatility > 10 ? "High" : chartAnalysis.volatility > 5 ? "Medium" : "Low"}
                    </span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-xs text-gray-500">MA(7) vs MA(25)</span>
                    {(() => {
                      const last = chartData[chartData.length - 1]
                      const cross = last.ma7 > last.ma25
                      return (
                        <span className={cn("text-xs font-bold px-2 py-0.5 rounded", cross ? "bg-emerald-500/20 text-[#00E0C6]" : "bg-red-500/20 text-red-400")}>
                          {cross ? "Golden Cross" : "Death Cross"}
                        </span>
                      )
                    })()}
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-xs text-gray-500">Volume Trend</span>
                    {(() => {
                      const recent = chartData.slice(-5)
                      const older = chartData.slice(-10, -5)
                      const recentAvg = recent.reduce((s, d) => s + d.volume, 0) / recent.length
                      const olderAvg = older.length > 0 ? older.reduce((s, d) => s + d.volume, 0) / older.length : recentAvg
                      const increasing = recentAvg > olderAvg * 1.1
                      return (
                        <span className={cn("text-xs font-bold px-2 py-0.5 rounded", increasing ? "bg-emerald-500/20 text-[#00E0C6]" : "bg-white/10 text-gray-300")}>
                          {increasing ? "Increasing" : "Stable"}
                        </span>
                      )
                    })()}
                  </div>
                </div>
                {/* PT Discount Analysis */}
                <div className="mt-4 pt-3 border-t border-white/5">
                  <div className="text-xs text-gray-500 mb-2">PT Discount to Maturity</div>
                  <div className="flex items-end gap-2">
                    <span className="text-xl font-bold text-[#F7931A]">{((1 - selectedMarket.ptPrice) * 100).toFixed(1)}%</span>
                    <span className="text-xs text-gray-500 mb-0.5">discount</span>
                  </div>
                  <div className="w-full h-2 bg-white/5 rounded-full mt-2 overflow-hidden">
                    <div className="h-full bg-gradient-to-r from-[#F7931A] to-emerald-400 rounded-full" style={{ width: `${selectedMarket.ptPrice * 100}%` }} />
                  </div>
                  <div className="flex justify-between mt-1 text-[10px] text-gray-500">
                    <span>Current: {selectedMarket.ptPrice}</span>
                    <span>Maturity: 1.0000</span>
                  </div>
                </div>
              </div>
            )}

<div className="bg-[#12121a] rounded-2xl p-5 border border-white/5">
              <h3 className="font-bold text-white mb-3 text-sm">Strategy Guide</h3>
              <div className="space-y-3 text-xs">
                <div><div className="text-[#F7931A] font-medium">Buy PT = Fixed Yield</div><div className="text-gray-400">Buy PT at discount, redeem 1:1 at maturity for guaranteed fixed return.</div></div>
                <div><div className="text-[#00E0C6] font-medium">Buy YT = Leveraged Yield</div><div className="text-gray-400">Buy YT for leveraged yield exposure. Higher risk, higher reward if yields rise.</div></div>
                <div><div className="text-purple-400 font-medium">Sell YT = Lock Yield</div><div className="text-gray-400">Sell your future yield now at current implied rate. Locks in today's yield.</div></div>
              </div>
            </div>
          </div>
        </div>
      )}

{/* ===== LIQUIDITY TAB ===== */}
      {mainTab === "liquidity" && (
        <div className="grid lg:grid-cols-5 gap-6">
          <div className="lg:col-span-3">
            <div className="bg-[#12121a] rounded-2xl p-6 border border-white/5">
              <h2 className="text-lg font-bold text-white mb-1">Provide Liquidity</h2>
              <p className="text-sm text-gray-500 mb-6">Earn trading fees and rewards by providing liquidity to PT AMM pools</p>

{/* Pool Selector */}
              <div className="flex gap-2 mb-4 overflow-x-auto scrollbar-hide">
                {MARKETS.map((m) => (
                  <button key={m.id} onClick={() => setSelectedMarket(m)} className={cn("flex items-center gap-2 px-4 py-2 rounded-xl text-sm whitespace-nowrap transition-colors", selectedMarket.id === m.id ? "bg-[#F7931A]/20 border border-[#F7931A]/30 text-white" : "bg-[#0a0a0f] border border-white/5 text-gray-400 hover:text-white")}>
                    <CoinLogo symbol={m.symbol} size={18} />
                    <span>{m.asset}-PT / {m.asset}</span>
                  </button>
                ))}
              </div>

{/* Pool Stats */}
              <div className="grid grid-cols-4 gap-3 mb-6">
                <div className="bg-[#0a0a0f] rounded-lg p-3 text-center"><div className="text-[11px] text-gray-500">TVL</div><div className="font-bold text-white text-sm">{selectedMarket.tvl}</div></div>
                <div className="bg-[#0a0a0f] rounded-lg p-3 text-center"><div className="text-[11px] text-gray-500">Volume 24h</div><div className="font-bold text-white text-sm">{selectedMarket.volume24h}</div></div>
                <div className="bg-[#0a0a0f] rounded-lg p-3 text-center"><div className="text-[11px] text-gray-500">APR</div><div className="font-bold text-[#00E0C6] text-sm">12.5% + 8.2%</div></div>
                <div className="bg-[#0a0a0f] rounded-lg p-3 text-center"><div className="text-[11px] text-gray-500">Your Share</div><div className="font-bold text-[#F7931A] text-sm">{isConnected ? "0.15%" : "0%"}</div></div>
              </div>

{/* Add / Remove Toggle */}
              <div className="flex gap-2 mb-4">
                <button onClick={() => setLpMode("add")} className={cn("flex-1 py-2.5 rounded-lg text-sm font-bold transition-colors flex items-center justify-center gap-1.5", lpMode === "add" ? "bg-[#F7931A] text-black" : "bg-[#0a0a0f] text-gray-400")}><Plus className="w-3.5 h-3.5" />Add Liquidity</button>
                <button onClick={() => setLpMode("remove")} className={cn("flex-1 py-2.5 rounded-lg text-sm font-bold transition-colors flex items-center justify-center gap-1.5", lpMode === "remove" ? "bg-red-500 text-white" : "bg-[#0a0a0f] text-gray-400")}><Minus className="w-3.5 h-3.5" />Remove Liquidity</button>
              </div>

{lpMode === "add" ? (
                <>
                  <div className="space-y-3 mb-4">
                    <div className="bg-[#0a0a0f] rounded-xl p-4 border border-white/5">
                      <div className="flex items-center justify-between mb-2"><span className="text-xs text-gray-500">PT-{selectedMarket.asset}</span><span className="text-xs text-gray-500">Balance: {isConnected ? "10.5" : "0.0"}</span></div>
                      <div className="flex items-center gap-3">
                        <input type="text" inputMode="decimal" value={lpAmountPT} onChange={(e) => { setLpAmountPT(e.target.value.replace(/[^0-9.]/g, "")); setLpAmountUnderlying((Number.parseFloat(e.target.value || "0") * selectedMarket.ptPrice).toFixed(4)) }} placeholder="0.0" className="flex-1 bg-transparent text-xl text-white outline-none" />
                        <button className="px-2 py-0.5 rounded text-[10px] bg-white/5 text-gray-400 hover:text-white" onClick={() => { setLpAmountPT("10.5"); setLpAmountUnderlying((10.5 * selectedMarket.ptPrice).toFixed(4)) }}>MAX</button>
                      </div>
                    </div>
                    <div className="bg-[#0a0a0f] rounded-xl p-4 border border-white/5">
                      <div className="flex items-center justify-between mb-2"><span className="text-xs text-gray-500">{selectedMarket.asset}</span><span className="text-xs text-gray-500">Balance: {isConnected ? "10.0" : "0.0"}</span></div>
                      <div className="flex items-center gap-3">
                        <input type="text" inputMode="decimal" value={lpAmountUnderlying} onChange={(e) => setLpAmountUnderlying(e.target.value.replace(/[^0-9.]/g, ""))} placeholder="Auto-calculated" className="flex-1 bg-transparent text-xl text-white outline-none" />
                        <span className="text-xs text-gray-500">AUTO</span>
                      </div>
                    </div>
                  </div>
                  <div className="bg-[#0a0a0f] rounded-xl p-4 border border-white/5 mb-4 space-y-2 text-sm">
                    <div className="flex justify-between"><span className="text-gray-500">Pool Ratio</span><span className="text-white">1 PT = {selectedMarket.ptPrice} {selectedMarket.asset}</span></div>
                    <div className="flex justify-between"><span className="text-gray-500">LP Tokens</span><span className="text-white">~{(Number.parseFloat(lpAmountPT || "0") * 4.78).toFixed(1)}</span></div>
                    <div className="flex justify-between"><span className="text-gray-500">Pool Share</span><span className="text-[#F7931A]">~0.15%</span></div>
                  </div>
                  <div className="bg-yellow-500/5 border border-yellow-500/10 rounded-xl p-3 mb-4 flex gap-2">
                    <AlertTriangle className="w-4 h-4 text-yellow-400 flex-shrink-0 mt-0.5" />
                    <p className="text-xs text-yellow-400/80">Providing liquidity carries impermanent loss risk. PT price converges to 1.0 at maturity, which may affect your position value.</p>
                  </div>
                  <Button className="w-full bg-[#F7931A] hover:bg-[#F7931A]/90 text-black font-semibold" onClick={() => {
  const ptAmount = Number.parseFloat(lpAmountPT || "0")
  const underlyingAmount = Number.parseFloat(lpAmountUnderlying || "0")
  if (ptAmount > MOCK_BALANCES.PT) {
    showError(`Insufficient PT balance. You have ${MOCK_BALANCES.PT} PT-${selectedMarket.asset} available.`)
    return
  }
  if (underlyingAmount > MOCK_BALANCES.underlying) {
    showError(`Insufficient ${selectedMarket.asset} balance. You have ${MOCK_BALANCES.underlying} ${selectedMarket.asset} available.`)
    return
  }
  simulateAction(() => { showSuccess(`Added liquidity to ${selectedMarket.asset}-PT pool!`); setLpAmountPT(""); setLpAmountUnderlying("") })
}} disabled={isProcessing || !lpAmountPT || Number.parseFloat(lpAmountPT || "0") > MOCK_BALANCES.PT}>
                    {isProcessing ? <span className="flex items-center gap-2"><RefreshCw className="w-4 h-4 animate-spin" />Adding...</span> : "Add Liquidity"}
                  </Button>
                </>
              ) : (
                <>
                  <div className="bg-[#0a0a0f] rounded-xl p-4 border border-white/5 mb-4">
                    <div className="flex items-center justify-between mb-2"><span className="text-xs text-gray-500">LP Tokens to Remove</span><span className="text-xs text-gray-500">Balance: {isConnected ? "50.2" : "0.0"}</span></div>
                    <div className="flex items-center gap-3">
                      <input type="text" inputMode="decimal" value={lpRemoveAmount} onChange={(e) => setLpRemoveAmount(e.target.value.replace(/[^0-9.]/g, ""))} placeholder="0.0" className="flex-1 bg-transparent text-xl text-white outline-none" />
                      <button className="px-2 py-0.5 rounded text-[10px] bg-white/5 text-gray-400 hover:text-white" onClick={() => setLpRemoveAmount("50.2")}>MAX</button>
                    </div>
                    <div className="flex gap-2 mt-2">
                      {[25, 50, 75, 100].map((pct) => (
                        <button key={pct} onClick={() => setLpRemoveAmount(((50.2 * pct) / 100).toFixed(1))} className={cn("px-2.5 py-0.5 rounded text-[10px] font-medium transition-colors", lpRemoveAmount === ((50.2 * pct) / 100).toFixed(1) ? "bg-[#F7931A] text-black" : "bg-white/5 text-gray-400 hover:text-white")}>{pct}%</button>
                      ))}
                    </div>
                  </div>
                  <div className="bg-[#0a0a0f] rounded-xl p-4 border border-white/5 mb-4 space-y-2 text-sm">
                    <div className="flex justify-between"><span className="text-gray-500">You Receive (PT)</span><span className="text-white">{(Number.parseFloat(lpRemoveAmount || "0") * 0.21).toFixed(4)} PT-{selectedMarket.asset}</span></div>
                    <div className="flex justify-between"><span className="text-gray-500">You Receive (Underlying)</span><span className="text-white">{(Number.parseFloat(lpRemoveAmount || "0") * 0.17).toFixed(4)} {selectedMarket.asset}</span></div>
                    <div className="flex justify-between"><span className="text-gray-500">Accrued Fees</span><span className="text-[#00E0C6]">+0.024 {selectedMarket.asset}</span></div>
                  </div>
                  <Button className="w-full bg-red-500 hover:bg-red-600 text-white font-semibold" onClick={() => {
  const amount = Number.parseFloat(lpRemoveAmount || "0")
  if (amount > MOCK_BALANCES.LP) {
    showError(`Insufficient LP balance. You have ${MOCK_BALANCES.LP} LP tokens available.`)
    return
  }
  simulateAction(() => { showSuccess(`Removed ${lpRemoveAmount} LP tokens from ${selectedMarket.asset}-PT pool!`); setLpRemoveAmount("") })
}} disabled={isProcessing || !lpRemoveAmount || Number.parseFloat(lpRemoveAmount || "0") > MOCK_BALANCES.LP}>
                    {isProcessing ? <span className="flex items-center gap-2"><RefreshCw className="w-4 h-4 animate-spin" />Removing...</span> : "Remove Liquidity"}
                  </Button>
                </>
              )}
            </div>
          </div>

{/* LP Positions */}
          <div className="lg:col-span-2">
            <div className="bg-[#12121a] rounded-2xl p-5 border border-white/5">
              <h3 className="font-bold text-white mb-4 text-sm">Your LP Positions</h3>
              {MOCK_POSITIONS.filter((p) => p.type === "LP").length > 0 ? (
                <div className="space-y-3">
                  {MOCK_POSITIONS.filter((p) => p.type === "LP").map((pos) => (
                    <div key={pos.id} className="bg-[#0a0a0f] rounded-xl p-4 border border-white/5">
                      <div className="flex items-center justify-between mb-2">
                        <div className="flex items-center gap-2">
                          <CoinLogo symbol={pos.symbol} size={20} />
                          <span className="text-sm font-medium text-white">{pos.asset}</span>
                        </div>
                        <span className="text-sm font-bold text-white">${pos.value.toLocaleString()}</span>
                      </div>
                      <div className="grid grid-cols-3 gap-2 text-xs">
                        <div><span className="text-gray-500">LP Amount</span><div className="text-white">{pos.amount}</div></div>
                        <div><span className="text-gray-500">Pool Share</span><div className="text-[#F7931A]">{pos.poolShare}%</div></div>
                        <div><span className="text-gray-500">APR</span><div className="text-[#00E0C6]">{pos.apr}%</div></div>
                      </div>
                      <button className="mt-2 w-full py-1.5 rounded-lg bg-emerald-500/10 text-[#00E0C6] text-xs font-medium hover:bg-emerald-500/20 transition-colors">Claim Fees</button>
                    </div>
                  ))}
                </div>
              ) : (
                <div className="text-center py-8 text-gray-500 text-sm">No LP positions yet</div>
              )}
            </div>
          </div>
        </div>
      )}

{/* ===== PORTFOLIO TAB ===== */}
      {mainTab === "portfolio" && (
        <div>
          {/* Summary Cards */}
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-6">
            <div className="bg-[#12121a] rounded-xl p-4 border border-white/5 text-center"><div className="text-xs text-gray-500 mb-1">PT Value</div><div className="text-lg font-bold text-[#F7931A]">${ptValue.toLocaleString()}</div></div>
            <div className="bg-[#12121a] rounded-xl p-4 border border-white/5 text-center"><div className="text-xs text-gray-500 mb-1">YT Value</div><div className="text-lg font-bold text-[#00E0C6]">${ytValue.toLocaleString()}</div></div>
            <div className="bg-[#12121a] rounded-xl p-4 border border-white/5 text-center"><div className="text-xs text-gray-500 mb-1">LP Value</div><div className="text-lg font-bold text-purple-400">${lpValue.toLocaleString()}</div></div>
            <div className="bg-[#12121a] rounded-xl p-4 border border-white/5 text-center"><div className="text-xs text-gray-500 mb-1">Total</div><div className="text-lg font-bold text-white">${totalPortfolioValue.toLocaleString()}</div></div>
          </div>

{/* Portfolio Sub-Tabs */}
          <div className="flex gap-2 mb-4">
            {([
              { id: "pt" as const, label: "PT Holdings" },
              { id: "yt" as const, label: "YT Holdings" },
              { id: "lp" as const, label: "LP Positions" },
              { id: "history" as const, label: "History" },
            ]).map((t) => (
              <button key={t.id} onClick={() => setPortfolioTab(t.id)} className={cn("px-4 py-2 rounded-lg text-sm font-medium transition-colors", portfolioTab === t.id ? "bg-white/10 text-white" : "text-gray-400 hover:text-white")}>{t.label}</button>
            ))}
          </div>

<div className="bg-[#12121a] rounded-2xl border border-white/5 overflow-hidden">
            {portfolioTab === "pt" && (
              <table className="w-full text-sm">
                <thead><tr className="border-b border-white/5"><th className="text-left px-6 py-3 text-[11px] text-gray-500 uppercase">Asset</th><th className="text-right px-4 py-3 text-[11px] text-gray-500 uppercase">Amount</th><th className="text-right px-4 py-3 text-[11px] text-gray-500 uppercase">Value</th><th className="text-right px-4 py-3 text-[11px] text-gray-500 uppercase">Price</th><th className="text-right px-4 py-3 text-[11px] text-gray-500 uppercase">Maturity</th><th className="text-center px-4 py-3 text-[11px] text-gray-500 uppercase">Action</th></tr></thead>
                <tbody>
                  {MOCK_POSITIONS.filter((p) => p.type === "PT").map((pos) => (
                    <tr key={pos.id} className="border-b border-white/[0.03] hover:bg-white/[0.02]">
                      <td className="px-6 py-3.5"><div className="flex items-center gap-2"><div className="w-6 h-6 rounded-full bg-[#F7931A]/20 flex items-center justify-center"><span className="text-[9px] font-bold text-[#F7931A]">PT</span></div><span className="text-white font-medium">{pos.asset}</span></div></td>
                      <td className="text-right px-4 py-3.5 text-white">{pos.amount}</td>
                      <td className="text-right px-4 py-3.5 text-white font-bold">${pos.value}</td>
                      <td className="text-right px-4 py-3.5 text-gray-400">{pos.price}</td>
                      <td className="text-right px-4 py-3.5"><div className="text-gray-400">{pos.maturity}</div><div className="text-[11px] text-gray-500">{pos.daysLeft}d left</div></td>
                      <td className="text-center px-4 py-3.5"><div className="flex justify-center gap-1.5"><button onClick={() => { setRedeemAmount(String(pos.amount)); setMainTab("redeem") }} className="px-2.5 py-1 rounded-md bg-[#F7931A]/10 text-[#F7931A] text-xs font-medium hover:bg-[#F7931A]/20">Redeem</button><button onClick={() => { setSelectedMarket(MARKETS[0]); setTradeTokenType("PT"); setTradeMode("sell"); setMainTab("trade") }} className="px-2.5 py-1 rounded-md bg-white/5 text-gray-300 text-xs font-medium hover:bg-white/10">Sell</button></div></td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}

{portfolioTab === "yt" && (
              <table className="w-full text-sm">
                <thead><tr className="border-b border-white/5"><th className="text-left px-6 py-3 text-[11px] text-gray-500 uppercase">Asset</th><th className="text-right px-4 py-3 text-[11px] text-gray-500 uppercase">Amount</th><th className="text-right px-4 py-3 text-[11px] text-gray-500 uppercase">Yield Earned</th><th className="text-right px-4 py-3 text-[11px] text-gray-500 uppercase">Claimed</th><th className="text-right px-4 py-3 text-[11px] text-gray-500 uppercase">Unclaimed</th><th className="text-center px-4 py-3 text-[11px] text-gray-500 uppercase">Action</th></tr></thead>
                <tbody>
                  {MOCK_POSITIONS.filter((p) => p.type === "YT").map((pos) => (
                    <tr key={pos.id} className="border-b border-white/[0.03] hover:bg-white/[0.02]">
                      <td className="px-6 py-3.5"><div className="flex items-center gap-2"><div className="w-6 h-6 rounded-full bg-emerald-500/20 flex items-center justify-center"><span className="text-[9px] font-bold text-[#00E0C6]">YT</span></div><span className="text-white font-medium">{pos.asset}</span></div></td>
                      <td className="text-right px-4 py-3.5 text-white">{pos.amount}</td>
                      <td className="text-right px-4 py-3.5 text-[#00E0C6]">{pos.earned} stBTC</td>
                      <td className="text-right px-4 py-3.5 text-gray-400">{pos.claimed} stBTC</td>
                      <td className="text-right px-4 py-3.5 text-[#F7931A] font-medium">{((pos.earned || 0) - (pos.claimed || 0)).toFixed(4)} stBTC</td>
                      <td className="text-center px-4 py-3.5"><button onClick={() => simulateAction(() => showSuccess(`Claimed ${((pos.earned || 0) - (pos.claimed || 0)).toFixed(4)} stBTC yield!`))} className="px-3 py-1 rounded-md bg-emerald-500/10 text-[#00E0C6] text-xs font-medium hover:bg-emerald-500/20">Claim</button></td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}

{portfolioTab === "lp" && (
              <table className="w-full text-sm">
                <thead><tr className="border-b border-white/5"><th className="text-left px-6 py-3 text-[11px] text-gray-500 uppercase">Pool</th><th className="text-right px-4 py-3 text-[11px] text-gray-500 uppercase">LP Amount</th><th className="text-right px-4 py-3 text-[11px] text-gray-500 uppercase">Value</th><th className="text-right px-4 py-3 text-[11px] text-gray-500 uppercase">Pool Share</th><th className="text-right px-4 py-3 text-[11px] text-gray-500 uppercase">APR</th><th className="text-center px-4 py-3 text-[11px] text-gray-500 uppercase">Action</th></tr></thead>
                <tbody>
                  {MOCK_POSITIONS.filter((p) => p.type === "LP").map((pos) => (
                    <tr key={pos.id} className="border-b border-white/[0.03] hover:bg-white/[0.02]">
                      <td className="px-6 py-3.5"><div className="flex items-center gap-2"><CoinLogo symbol={pos.symbol} size={20} /><span className="text-white font-medium">{pos.asset}</span></div></td>
                      <td className="text-right px-4 py-3.5 text-white">{pos.amount}</td>
                      <td className="text-right px-4 py-3.5 text-white font-bold">${pos.value}</td>
                      <td className="text-right px-4 py-3.5 text-[#F7931A]">{pos.poolShare}%</td>
                      <td className="text-right px-4 py-3.5 text-[#00E0C6]">{pos.apr}%</td>
                      <td className="text-center px-4 py-3.5"><button onClick={() => { setLpRemoveAmount(String(pos.amount)); setLpMode("remove"); setMainTab("liquidity") }} className="px-3 py-1 rounded-md bg-red-500/10 text-red-400 text-xs font-medium hover:bg-red-500/20">Remove</button></td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}

{portfolioTab === "history" && (
              <table className="w-full text-sm">
                <thead><tr className="border-b border-white/5"><th className="text-left px-6 py-3 text-[11px] text-gray-500 uppercase">Type</th><th className="text-left px-4 py-3 text-[11px] text-gray-500 uppercase">Asset</th><th className="text-right px-4 py-3 text-[11px] text-gray-500 uppercase">Amount</th><th className="text-right px-4 py-3 text-[11px] text-gray-500 uppercase">Value</th><th className="text-right px-4 py-3 text-[11px] text-gray-500 uppercase">Time</th><th className="text-right px-4 py-3 text-[11px] text-gray-500 uppercase">Tx</th></tr></thead>
                <tbody>
                  {MOCK_TX_HISTORY.map((tx) => (
                    <tr key={tx.id} className="border-b border-white/[0.03] hover:bg-white/[0.02]">
                      <td className="px-6 py-3.5"><span className={cn("px-2 py-0.5 rounded text-xs font-medium", tx.type === "Mint" ? "bg-[#F7931A]/20 text-[#F7931A]" : tx.type === "Trade" ? "bg-emerald-500/20 text-[#00E0C6]" : tx.type === "Claim" ? "bg-purple-500/20 text-purple-400" : "bg-white/10 text-gray-300")}>{tx.type}</span></td>
                      <td className="px-4 py-3.5 text-white">{tx.asset}</td>
                      <td className="text-right px-4 py-3.5 text-white">{tx.amount}</td>
                      <td className="text-right px-4 py-3.5 text-gray-400">{tx.value}</td>
                      <td className="text-right px-4 py-3.5 text-gray-500">{tx.time}</td>
                      <td className="text-right px-4 py-3.5"><button className="text-[#F7931A] text-xs hover:underline flex items-center gap-1 ml-auto">{tx.txHash} <ExternalLink className="w-3 h-3" /></button></td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
          </div>
        </div>
      )}

{/* ===== REDEEM TAB ===== */}
      {mainTab === "redeem" && (
        <div className="grid lg:grid-cols-5 gap-6">
          <div className="lg:col-span-3">
            <div className="bg-[#12121a] rounded-2xl p-6 border border-white/5">
              <h2 className="text-lg font-bold text-white mb-1">Redeem Tokens</h2>
              <p className="text-sm text-gray-500 mb-6">Burn PT and/or YT to recover your underlying BTC assets</p>

{/* Early vs Maturity */}
              <div className="flex gap-2 mb-6">
                <button onClick={() => setRedeemMode("early")} className={cn("flex-1 py-2.5 rounded-lg text-sm font-bold transition-colors", redeemMode === "early" ? "bg-[#F7931A] text-black" : "bg-[#0a0a0f] text-gray-400")}>Early Redeem</button>
                <button onClick={() => setRedeemMode("maturity")} className={cn("flex-1 py-2.5 rounded-lg text-sm font-bold transition-colors", redeemMode === "maturity" ? "bg-emerald-500 text-white" : "bg-[#0a0a0f] text-gray-400")}>Maturity Redeem</button>
              </div>

{/* Market Selector */}
              <div className="flex gap-2 mb-4">
                {MARKETS.map((m) => (
                  <button key={m.id} onClick={() => setSelectedMarket(m)} className={cn("flex items-center gap-2 px-3 py-2 rounded-xl text-sm transition-colors", selectedMarket.id === m.id ? "bg-[#F7931A]/20 border border-[#F7931A]/30 text-white" : "bg-[#0a0a0f] border border-white/5 text-gray-400")}>
                    <CoinLogo symbol={m.symbol} size={18} />
                    {m.asset}
                  </button>
                ))}
              </div>

{redeemMode === "early" ? (
                <>
                  <div className="bg-yellow-500/5 border border-yellow-500/10 rounded-xl p-3 mb-4 flex gap-2">
                    <AlertTriangle className="w-4 h-4 text-yellow-400 flex-shrink-0 mt-0.5" />
                    <div className="text-xs text-yellow-400/80">
                      <strong>Early redemption requires equal amounts of PT and YT.</strong> Both tokens will be burned to recover the underlying asset before maturity.
                    </div>
                  </div>

<div className="bg-[#0a0a0f] rounded-xl p-4 border border-white/5 mb-4">
                    <div className="flex items-center justify-between mb-2"><span className="text-xs text-gray-500">Amount to Redeem</span><span className="text-xs text-gray-500">PT Balance: {isConnected ? "10.5" : "0.0"} | YT Balance: {isConnected ? "10.5" : "0.0"}</span></div>
                    <div className="flex items-center gap-3">
                      <input type="text" inputMode="decimal" value={redeemAmount} onChange={(e) => setRedeemAmount(e.target.value.replace(/[^0-9.]/g, ""))} placeholder="0.0" className="flex-1 bg-transparent text-2xl text-white outline-none" />
                      <button className="px-2 py-0.5 rounded text-[10px] bg-white/5 text-gray-400 hover:text-white" onClick={() => setRedeemAmount("10.5")}>MAX</button>
                    </div>
                  </div>

<div className="bg-[#0a0a0f] rounded-xl p-4 border border-[#F7931A]/10 mb-4 space-y-2 text-sm">
                    <div className="flex justify-between"><span className="text-gray-500">Burn PT</span><span className="text-white">{redeemAmount || "0"} PT-{selectedMarket.asset}</span></div>
                    <div className="flex justify-between"><span className="text-gray-500">Burn YT</span><span className="text-white">{redeemAmount || "0"} YT-{selectedMarket.asset}</span></div>
                    <div className="border-t border-white/5 pt-2 flex justify-between"><span className="text-gray-500">You Receive</span><span className="text-[#00E0C6] font-bold">{redeemAmount || "0"} {selectedMarket.asset}</span></div>
                    <div className="flex justify-between"><span className="text-gray-500">Time to Maturity</span><span className="text-gray-400">{selectedMarket.daysLeft} days</span></div>
                  </div>

<Button className="w-full bg-[#F7931A] hover:bg-[#F7931A]/90 text-black font-semibold" onClick={() => {
  const amount = Number.parseFloat(redeemAmount || "0")
  // Early redeem requires both PT and YT
  if (amount > MOCK_BALANCES.PT) {
    showError(`Insufficient PT balance. You have ${MOCK_BALANCES.PT} PT-${selectedMarket.asset} available.`)
    return
  }
  if (amount > MOCK_BALANCES.YT) {
    showError(`Insufficient YT balance. You have ${MOCK_BALANCES.YT} YT-${selectedMarket.asset} available.`)
    return
  }
  simulateAction(() => { showSuccess(`Redeemed ${redeemAmount} ${selectedMarket.asset}!`); setRedeemAmount("") })
}} disabled={isProcessing || !redeemAmount || Number.parseFloat(redeemAmount) <= 0 || Number.parseFloat(redeemAmount || "0") > Math.min(MOCK_BALANCES.PT, MOCK_BALANCES.YT)}>
  {isProcessing ? <span className="flex items-center gap-2"><RefreshCw className="w-4 h-4 animate-spin" />Redeeming...</span> : "Redeem Early (PT + YT)"}
                  </Button>
                </>
              ) : (
                <>
                  <div className="bg-[#0a0a0f] rounded-xl p-6 border border-white/5 text-center mb-4">
                    <Lock className="w-10 h-10 text-gray-500 mx-auto mb-3" />
                    <div className="text-lg font-bold text-white mb-1">Maturity Redemption</div>
                    <p className="text-sm text-gray-400 mb-3">Burn PT only to receive underlying 1:1 after maturity</p>
                    <div className="inline-flex items-center gap-2 px-4 py-2 bg-[#F7931A]/10 rounded-lg">
                      <Clock className="w-4 h-4 text-[#F7931A]" />
                      <span className="text-sm text-[#F7931A] font-medium">Available after: {selectedMarket.maturity}</span>
                    </div>
                    <div className="mt-3 flex items-center justify-center gap-1.5">
                      <Lock className="w-3.5 h-3.5 text-gray-500" />
                      <span className="text-sm text-gray-500">{selectedMarket.daysLeft} days remaining</span>
                    </div>
                  </div>

<div className="bg-[#0a0a0f] rounded-xl p-4 border border-white/5 mb-4">
                    <div className="flex items-center justify-between mb-2"><span className="text-xs text-gray-500">PT Amount</span><span className="text-xs text-gray-500">Balance: {isConnected ? "10.5" : "0.0"}</span></div>
                    <div className="flex items-center gap-3">
                      <input type="text" inputMode="decimal" value={redeemAmount} onChange={(e) => setRedeemAmount(e.target.value.replace(/[^0-9.]/g, ""))} placeholder="0.0" className="flex-1 bg-transparent text-2xl text-white outline-none" />
                      <button className="px-2 py-0.5 rounded text-[10px] bg-white/5 text-gray-400 hover:text-white" onClick={() => setRedeemAmount("10.5")}>MAX</button>
                    </div>
                  </div>

<div className="bg-[#0a0a0f] rounded-xl p-4 border border-white/5 mb-4 space-y-2 text-sm">
                    <div className="flex justify-between"><span className="text-gray-500">Burn PT</span><span className="text-white">{redeemAmount || "0"} PT-{selectedMarket.asset}</span></div>
                    <div className="flex justify-between"><span className="text-gray-500">You Receive</span><span className="text-[#00E0C6] font-bold">{redeemAmount || "0"} {selectedMarket.asset} (1:1)</span></div>
                  </div>

<Button className="w-full font-semibold bg-gray-600 text-gray-300 cursor-not-allowed" disabled>
                    <Lock className="w-4 h-4 mr-2" /> Locked - {selectedMarket.daysLeft} days remaining
                  </Button>
                </>
              )}
            </div>
          </div>

{/* Redeem Info Sidebar */}
          <div className="lg:col-span-2 space-y-4">
            <div className="bg-[#12121a] rounded-2xl p-5 border border-white/5">
              <h3 className="font-bold text-white mb-3 text-sm">Redemption Types</h3>
              <div className="space-y-4 text-xs">
                <div className="p-3 bg-[#F7931A]/5 rounded-lg border border-[#F7931A]/10">
                  <div className="text-[#F7931A] font-bold mb-1">Early Redemption</div>
                  <div className="text-gray-400">Burn both PT + YT in equal amounts before maturity to recover underlying asset. Available anytime.</div>
                </div>
                <div className="p-3 bg-emerald-500/5 rounded-lg border border-emerald-500/10">
                  <div className="text-[#00E0C6] font-bold mb-1">Maturity Redemption</div>
                  <div className="text-gray-400">After maturity date, burn PT only to receive underlying 1:1. No YT required. Best return if held to maturity.</div>
                </div>
              </div>
            </div>

<div className="bg-[#12121a] rounded-2xl p-5 border border-white/5">
              <h3 className="font-bold text-white mb-3 text-sm">Your Redeemable Positions</h3>
              <div className="space-y-2">
                {MOCK_POSITIONS.filter((p) => p.type === "PT").map((pos) => (
                  <div key={pos.id} className="flex items-center justify-between p-3 bg-[#0a0a0f] rounded-lg border border-white/5">
                    <div className="flex items-center gap-2">
                      <div className="w-5 h-5 rounded-full bg-[#F7931A]/20 flex items-center justify-center"><span className="text-[8px] font-bold text-[#F7931A]">PT</span></div>
                      <div>
                        <div className="text-xs text-white font-medium">{pos.asset}</div>
                        <div className="text-[10px] text-gray-500">{pos.daysLeft}d to maturity</div>
                      </div>
                    </div>
                    <div className="text-right">
                      <div className="text-xs text-white font-medium">{pos.amount}</div>
                      <div className="text-[10px] text-gray-500">${pos.value}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/auth-context.tsx" isMerged="true"
"use client"

import { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from "react"

// ─── Types ───

export type AuthMethod = "email" | "wallet" | "passkey"
export type AuthStatus = "unauthenticated" | "authenticating" | "authenticated"

// User Profile Model (Section 5)
export interface UserProfile {
  userId: string
  email: string | null
  walletAddresses: WalletAddress[]
  passkeys: PasskeyCredential[]
  createdAt: number
  lastLogin: number
  displayName?: string
  avatar?: string
}

export interface WalletAddress {
  address: string
  chainId: number
  walletType: string // metamask, phantom, etc.
  isPrimary: boolean
  linkedAt: number
}

export interface PasskeyCredential {
  credentialId: string
  publicKey: string
  deviceName: string
  createdAt: number
  lastUsed: number
}

// Email OTP State (Section 2)
export interface OTPState {
  email: string
  code: string | null
  expiresAt: number
  attempts: number
  maxAttempts: number
  sentAt: number
  lockedUntil: number | null // Cooldown after max attempts
}

// Rate limit state for OTP
interface OTPRateLimitState {
  [email: string]: {
    attempts: number
    lastAttempt: number
    lockedUntil: number | null
  }
}

// Login History
export interface LoginHistoryEntry {
  id: string
  method: AuthMethod
  timestamp: number
  ipAddress?: string
  userAgent?: string
  success: boolean
  walletAddress?: string
  email?: string
}

// Session
export interface Session {
  sessionId: string
  userId: string
  createdAt: number
  expiresAt: number
  lastActivity: number
  method: AuthMethod
}

// Auth Context Type
interface AuthContextType {
  // State
  status: AuthStatus
  user: UserProfile | null
  session: Session | null
  loginHistory: LoginHistoryEntry[]
  
  // Email OTP Methods (Section 2)
  sendOTP: (email: string) => Promise<{ success: boolean; error?: string }>
  verifyOTP: (email: string, code: string) => Promise<{ success: boolean; error?: string }>
  otpState: OTPState | null
  
  // Wallet Login Methods (Section 4)
  connectWallet: (provider: any, walletType: string) => Promise<{ success: boolean; address?: string; error?: string }>
  disconnectWallet: (address: string) => Promise<boolean>
  signMessage: (message: string, address: string) => Promise<{ success: boolean; signature?: string; error?: string }>
  
  // Passkey Methods (Section 3)
  createPasskey: (deviceName?: string) => Promise<{ success: boolean; credentialId?: string; error?: string }>
  loginWithPasskey: () => Promise<{ success: boolean; error?: string }>
  removePasskey: (credentialId: string) => Promise<boolean>
  
  // Session Management (Section 17)
  logout: () => void
  refreshSession: () => void
  isSessionValid: () => boolean
  
  // Profile Management
  linkWallet: (provider: any, walletType: string) => Promise<{ success: boolean; error?: string }>
  linkEmail: (email: string, code: string) => Promise<{ success: boolean; error?: string }>
  updateProfile: (updates: Partial<Pick<UserProfile, "displayName" | "avatar">>) => void
  
  // Security (Section 17)
  requireAuthVerification: (action: "withdrawal" | "large_transfer" | "account_change") => Promise<boolean>
}

const AuthContext = createContext<AuthContextType | null>(null)

// ─── Constants ───

const OTP_EXPIRY_MS = 5 * 60 * 1000 // 5 minutes
const OTP_MAX_ATTEMPTS = 5
const OTP_COOLDOWN_MS = 60 * 1000 // 60 seconds cooldown after max attempts
const SESSION_TIMEOUT_MS = 30 * 60 * 1000 // 30 minutes inactivity
const SESSION_MAX_DURATION_MS = 24 * 60 * 60 * 1000 // 24 hours max

// ─── Helper Functions ───

const generateId = () => `${Date.now().toString(36)}-${Math.random().toString(36).substring(2, 9)}`
const generateUserId = () => `USR-${Date.now().toString(36).toUpperCase()}-${Math.random().toString(36).substring(2, 6).toUpperCase()}`
const generateSessionId = () => `SES-${Date.now().toString(36).toUpperCase()}-${Math.random().toString(36).substring(2, 8).toUpperCase()}`
const generateOTP = () => Math.floor(100000 + Math.random() * 900000).toString()

// Generate login message for wallet signature
const generateLoginMessage = (nonce: string) => `Sign this message to log in to 963X Exchange.\n\nNonce: ${nonce}\nTimestamp: ${new Date().toISOString()}`

// ─── Provider ───

export function AuthProvider({ children }: { children: ReactNode }) {
  const [status, setStatus] = useState<AuthStatus>("unauthenticated")
  const [user, setUser] = useState<UserProfile | null>(null)
  const [session, setSession] = useState<Session | null>(null)
  const [loginHistory, setLoginHistory] = useState<LoginHistoryEntry[]>([])
  const [otpState, setOtpState] = useState<OTPState | null>(null)
  const [otpRateLimit, setOtpRateLimit] = useState<OTPRateLimitState>({})

// ─── Load persisted session on mount ───
  useEffect(() => {
    const savedSession = localStorage.getItem("963x_session")
    const savedUser = localStorage.getItem("963x_user")
    
    if (savedSession && savedUser) {
      try {
        const sessionData = JSON.parse(savedSession) as Session
        const userData = JSON.parse(savedUser) as UserProfile
        
        // Check if session is still valid
        const now = Date.now()
        if (sessionData.expiresAt > now && now - sessionData.lastActivity < SESSION_TIMEOUT_MS) {
          setSession(sessionData)
          setUser(userData)
          setStatus("authenticated")
          
          // Update last activity
          const updatedSession = { ...sessionData, lastActivity: now }
          setSession(updatedSession)
          localStorage.setItem("963x_session", JSON.stringify(updatedSession))
        } else {
          // Session expired, clear storage
          localStorage.removeItem("963x_session")
          localStorage.removeItem("963x_user")
        }
      } catch (e) {
        console.error("Failed to restore session:", e)
        localStorage.removeItem("963x_session")
        localStorage.removeItem("963x_user")
      }
    }
    
    // Load login history
    const savedHistory = localStorage.getItem("963x_login_history")
    if (savedHistory) {
      try {
        setLoginHistory(JSON.parse(savedHistory))
      } catch (e) {
        console.error("Failed to load login history:", e)
      }
    }
  }, [])

// ─── Session Activity Monitor ───
  useEffect(() => {
    if (!session) return
    
    const checkSession = () => {
      const now = Date.now()
      if (now - session.lastActivity >= SESSION_TIMEOUT_MS || now >= session.expiresAt) {
        logout()
      }
    }
    
    const interval = setInterval(checkSession, 60000) // Check every minute
    return () => clearInterval(interval)
  }, [session])

// ─── Record Login History ───
  const recordLogin = useCallback((method: AuthMethod, success: boolean, details: { walletAddress?: string; email?: string } = {}) => {
    const entry: LoginHistoryEntry = {
      id: generateId(),
      method,
      timestamp: Date.now(),
      success,
      ...details,
    }
    
    setLoginHistory(prev => {
      const updated = [entry, ...prev].slice(0, 100) // Keep last 100 entries
      localStorage.setItem("963x_login_history", JSON.stringify(updated))
      return updated
    })
  }, [])

// ─── Create Session ───
  const createSession = useCallback((userId: string, method: AuthMethod): Session => {
    const now = Date.now()
    const newSession: Session = {
      sessionId: generateSessionId(),
      userId,
      createdAt: now,
      expiresAt: now + SESSION_MAX_DURATION_MS,
      lastActivity: now,
      method,
    }
    
    setSession(newSession)
    localStorage.setItem("963x_session", JSON.stringify(newSession))
    return newSession
  }, [])

// ─── Create or Get User Profile ───
  const getOrCreateUser = useCallback((identifier: { email?: string; walletAddress?: string; walletType?: string }): UserProfile => {
    // Check if user exists in localStorage
    const savedUsers = localStorage.getItem("963x_users")
    const users: UserProfile[] = savedUsers ? JSON.parse(savedUsers) : []
    
    // Find existing user by email or wallet
    let existingUser = users.find(u => {
      if (identifier.email && u.email === identifier.email) return true
      if (identifier.walletAddress && u.walletAddresses.some(w => w.address.toLowerCase() === identifier.walletAddress?.toLowerCase())) return true
      return false
    })
    
    if (existingUser) {
      // Update last login
      existingUser.lastLogin = Date.now()
      
      // Add new wallet if logging in with a new one
      if (identifier.walletAddress && !existingUser.walletAddresses.some(w => w.address.toLowerCase() === identifier.walletAddress?.toLowerCase())) {
        existingUser.walletAddresses.push({
          address: identifier.walletAddress,
          chainId: 1,
          walletType: identifier.walletType || "unknown",
          isPrimary: existingUser.walletAddresses.length === 0,
          linkedAt: Date.now(),
        })
      }
      
      // Save updated user
      const updatedUsers = users.map(u => u.userId === existingUser!.userId ? existingUser! : u)
      localStorage.setItem("963x_users", JSON.stringify(updatedUsers))
      
      return existingUser
    }
    
    // Create new user
    const now = Date.now()
    const newUser: UserProfile = {
      userId: generateUserId(),
      email: identifier.email || null,
      walletAddresses: identifier.walletAddress ? [{
        address: identifier.walletAddress,
        chainId: 1,
        walletType: identifier.walletType || "unknown",
        isPrimary: true,
        linkedAt: now,
      }] : [],
      passkeys: [],
      createdAt: now,
      lastLogin: now,
    }
    
    // Save new user
    users.push(newUser)
    localStorage.setItem("963x_users", JSON.stringify(users))
    
    return newUser
  }, [])

// ─── Email OTP Methods (Section 2) ───
  
  const sendOTP = useCallback(async (email: string): Promise<{ success: boolean; error?: string }> => {
    // Check if locked due to too many failed attempts
    const rateLimit = otpRateLimit[email]
    if (rateLimit?.lockedUntil && Date.now() < rateLimit.lockedUntil) {
      const remainingSeconds = Math.ceil((rateLimit.lockedUntil - Date.now()) / 1000)
      return { success: false, error: `Too many failed attempts. Please wait ${remainingSeconds} seconds.` }
    }
    
    // Rate limiting check for resend
    if (otpState && otpState.email === email) {
      const timeSinceLastSend = Date.now() - otpState.sentAt
      if (timeSinceLastSend < 60000) { // 1 minute cooldown for resend
        return { success: false, error: `Please wait ${Math.ceil((60000 - timeSinceLastSend) / 1000)} seconds before requesting a new code` }
      }
    }
    
    // Generate and store OTP
    const code = generateOTP()
    const now = Date.now()
    
    // Reset rate limit when sending new OTP
    setOtpRateLimit(prev => ({
      ...prev,
      [email]: { attempts: 0, lastAttempt: now, lockedUntil: null }
    }))
    
    const newOtpState: OTPState = {
      email,
      code,
      expiresAt: now + OTP_EXPIRY_MS,
      attempts: 0,
      maxAttempts: OTP_MAX_ATTEMPTS,
      sentAt: now,
      lockedUntil: null,
    }
    
    setOtpState(newOtpState)
    
    // In production, send email via API
    // For demo, log the code
    console.log(`[963X Auth] OTP for ${email}: ${code}`)
    
    // Simulate API delay
    await new Promise(resolve => setTimeout(resolve, 500))
    
    return { success: true }
  }, [otpState, otpRateLimit])

const verifyOTP = useCallback(async (email: string, code: string): Promise<{ success: boolean; error?: string }> => {
    if (!otpState || otpState.email !== email) {
      return { success: false, error: "No verification code sent for this email" }
    }
    
    // Check if locked due to too many attempts
    const rateLimit = otpRateLimit[email]
    if (rateLimit?.lockedUntil && Date.now() < rateLimit.lockedUntil) {
      const remainingSeconds = Math.ceil((rateLimit.lockedUntil - Date.now()) / 1000)
      return { success: false, error: `Too many attempts. Please wait ${remainingSeconds} seconds.` }
    }
    
    // Check expiry
    if (Date.now() > otpState.expiresAt) {
      setOtpState(null)
      return { success: false, error: "Verification code has expired. Please request a new one." }
    }
    
    // Check attempts (brute force prevention) - 5 attempts max
    if (otpState.attempts >= OTP_MAX_ATTEMPTS) {
      // Lock for 60 seconds
      setOtpRateLimit(prev => ({
        ...prev,
        [email]: {
          attempts: OTP_MAX_ATTEMPTS,
          lastAttempt: Date.now(),
          lockedUntil: Date.now() + OTP_COOLDOWN_MS
        }
      }))
      setOtpState(null)
      return { success: false, error: `Too many attempts. Please wait 60 seconds before trying again.` }
    }
    
    // Verify code
    if (code !== otpState.code) {
      const newAttempts = otpState.attempts + 1
      setOtpState(prev => prev ? { ...prev, attempts: newAttempts } : null)
      
      // Update rate limit tracking
      setOtpRateLimit(prev => ({
        ...prev,
        [email]: {
          attempts: newAttempts,
          lastAttempt: Date.now(),
          lockedUntil: newAttempts >= OTP_MAX_ATTEMPTS ? Date.now() + OTP_COOLDOWN_MS : null
        }
      }))
      
      const remaining = OTP_MAX_ATTEMPTS - newAttempts
      if (remaining <= 0) {
        return { success: false, error: `Too many attempts. Please wait 60 seconds before trying again.` }
      }
      return { success: false, error: `Invalid code. ${remaining} attempt${remaining > 1 ? 's' : ''} remaining.` }
    }
    
    // Success - create user and session
    setStatus("authenticating")
    
    try {
      const userProfile = getOrCreateUser({ email })
      setUser(userProfile)
      localStorage.setItem("963x_user", JSON.stringify(userProfile))
      
      createSession(userProfile.userId, "email")
      
      recordLogin("email", true, { email })
      setOtpState(null)
      setStatus("authenticated")
      
      return { success: true }
    } catch (e) {
      setStatus("unauthenticated")
      recordLogin("email", false, { email })
      return { success: false, error: "Failed to create session" }
    }
  }, [otpState, otpRateLimit, getOrCreateUser, createSession, recordLogin])

// ─── Wallet Login Methods (Section 4) ───

const connectWallet = useCallback(async (provider: any, walletType: string): Promise<{ success: boolean; address?: string; error?: string }> => {
    setStatus("authenticating")
    
    try {
      // Request accounts
      const accounts = await provider.request({ method: "eth_requestAccounts" })
      if (!accounts || accounts.length === 0) {
        setStatus("unauthenticated")
        recordLogin("wallet", false)
        return { success: false, error: "No accounts found" }
      }
      
      const address = accounts[0]
      
      // Generate and sign login message
      const nonce = Math.random().toString(36).substring(2, 15)
      const message = generateLoginMessage(nonce)
      
      try {
        const signature = await provider.request({
          method: "personal_sign",
          params: [message, address],
        })
        
        // In production, verify signature server-side
        // For demo, we accept any signature
        if (!signature) {
          setStatus("unauthenticated")
          recordLogin("wallet", false, { walletAddress: address })
          return { success: false, error: "Signature verification failed" }
        }
        
        // Create user and session
        const userProfile = getOrCreateUser({ walletAddress: address, walletType })
        setUser(userProfile)
        localStorage.setItem("963x_user", JSON.stringify(userProfile))
        
        createSession(userProfile.userId, "wallet")
        
        recordLogin("wallet", true, { walletAddress: address })
        setStatus("authenticated")
        
        return { success: true, address }
      } catch (signError: any) {
        // User rejected signature
        if (signError.code === 4001) {
          setStatus("unauthenticated")
          return { success: false, error: "Signature rejected by user" }
        }
        throw signError
      }
    } catch (error: any) {
      setStatus("unauthenticated")
      
      if (error.code === 4001) {
        return { success: false, error: "Connection rejected by user" }
      }
      if (error.code === -32002) {
        return { success: false, error: "Connection request already pending" }
      }
      
      console.error("Wallet connection error:", error)
      recordLogin("wallet", false)
      return { success: false, error: error.message || "Failed to connect wallet" }
    }
  }, [getOrCreateUser, createSession, recordLogin])

const disconnectWallet = useCallback(async (address: string): Promise<boolean> => {
    if (!user) return false
    
    const updatedWallets = user.walletAddresses.filter(w => w.address.toLowerCase() !== address.toLowerCase())
    
    // Don't allow removing last wallet if no other auth methods
    if (updatedWallets.length === 0 && !user.email && user.passkeys.length === 0) {
      return false
    }
    
    const updatedUser = { ...user, walletAddresses: updatedWallets }
    setUser(updatedUser)
    localStorage.setItem("963x_user", JSON.stringify(updatedUser))
    
    // Update in users list
    const savedUsers = localStorage.getItem("963x_users")
    if (savedUsers) {
      const users: UserProfile[] = JSON.parse(savedUsers)
      const updated = users.map(u => u.userId === user.userId ? updatedUser : u)
      localStorage.setItem("963x_users", JSON.stringify(updated))
    }
    
    return true
  }, [user])

const signMessage = useCallback(async (message: string, address: string): Promise<{ success: boolean; signature?: string; error?: string }> => {
    const ethereum = (window as any).ethereum
    if (!ethereum) {
      return { success: false, error: "No wallet provider found" }
    }
    
    try {
      const signature = await ethereum.request({
        method: "personal_sign",
        params: [message, address],
      })
      return { success: true, signature }
    } catch (error: any) {
      if (error.code === 4001) {
        return { success: false, error: "Signature rejected by user" }
      }
      return { success: false, error: error.message || "Failed to sign message" }
    }
  }, [])

// ─── Passkey Methods (Section 3) ───

const createPasskey = useCallback(async (deviceName?: string): Promise<{ success: boolean; credentialId?: string; error?: string }> => {
    if (typeof window === "undefined" || !window.PublicKeyCredential) {
      return { success: false, error: "WebAuthn not supported on this device" }
    }
    
    setStatus("authenticating")
    
    try {
      const challenge = new Uint8Array(32)
      crypto.getRandomValues(challenge)
      
      const userId = user?.userId || generateUserId()
      const userIdBytes = new TextEncoder().encode(userId)
      
      const credential = await navigator.credentials.create({
        publicKey: {
          challenge,
          rp: {
            name: "963X Exchange",
            id: window.location.hostname,
          },
          user: {
            id: userIdBytes,
            name: user?.email || `user@963x.xyz`,
            displayName: user?.displayName || "963X User",
          },
          pubKeyCredParams: [
            { alg: -7, type: "public-key" },   // ES256
            { alg: -257, type: "public-key" }, // RS256
          ],
          authenticatorSelection: {
            authenticatorAttachment: "platform",
            userVerification: "required",
            residentKey: "required",
          },
          timeout: 60000,
          attestation: "none",
        },
      }) as PublicKeyCredential
      
      if (!credential) {
        setStatus(user ? "authenticated" : "unauthenticated")
        return { success: false, error: "Failed to create passkey" }
      }
      
      const credentialId = btoa(String.fromCharCode(...new Uint8Array(credential.rawId)))
      const response = credential.response as AuthenticatorAttestationResponse
      const publicKey = btoa(String.fromCharCode(...new Uint8Array(response.getPublicKey()!)))
      
      const newPasskey: PasskeyCredential = {
        credentialId,
        publicKey,
        deviceName: deviceName || navigator.userAgent.split(" ")[0] || "Unknown Device",
        createdAt: Date.now(),
        lastUsed: Date.now(),
      }
      
      // If user exists, add passkey to their profile
      if (user) {
        const updatedUser = {
          ...user,
          passkeys: [...user.passkeys, newPasskey],
        }
        setUser(updatedUser)
        localStorage.setItem("963x_user", JSON.stringify(updatedUser))
        
        // Update in users list
        const savedUsers = localStorage.getItem("963x_users")
        if (savedUsers) {
          const users: UserProfile[] = JSON.parse(savedUsers)
          const updated = users.map(u => u.userId === user.userId ? updatedUser : u)
          localStorage.setItem("963x_users", JSON.stringify(updated))
        }
      } else {
        // Create new user with passkey
        const newUser: UserProfile = {
          userId,
          email: null,
          walletAddresses: [],
          passkeys: [newPasskey],
          createdAt: Date.now(),
          lastLogin: Date.now(),
        }
        
        // Save user
        const savedUsers = localStorage.getItem("963x_users")
        const users: UserProfile[] = savedUsers ? JSON.parse(savedUsers) : []
        users.push(newUser)
        localStorage.setItem("963x_users", JSON.stringify(users))
        
        setUser(newUser)
        localStorage.setItem("963x_user", JSON.stringify(newUser))
        createSession(newUser.userId, "passkey")
      }
      
      recordLogin("passkey", true)
      setStatus("authenticated")
      
      return { success: true, credentialId }
    } catch (error: any) {
      setStatus(user ? "authenticated" : "unauthenticated")
      
      if (error.name === "NotAllowedError") {
        return { success: false, error: "Passkey creation was cancelled" }
      }
      
      console.error("Passkey creation error:", error)
      return { success: false, error: error.message || "Failed to create passkey" }
    }
  }, [user, createSession, recordLogin])

const loginWithPasskey = useCallback(async (): Promise<{ success: boolean; error?: string }> => {
    if (typeof window === "undefined" || !window.PublicKeyCredential) {
      return { success: false, error: "WebAuthn not supported on this device" }
    }
    
    setStatus("authenticating")
    
    try {
      const challenge = new Uint8Array(32)
      crypto.getRandomValues(challenge)
      
      const credential = await navigator.credentials.get({
        publicKey: {
          challenge,
          rpId: window.location.hostname,
          userVerification: "required",
          timeout: 60000,
        },
      }) as PublicKeyCredential
      
      if (!credential) {
        setStatus("unauthenticated")
        return { success: false, error: "Failed to get passkey" }
      }
      
      const credentialId = btoa(String.fromCharCode(...new Uint8Array(credential.rawId)))
      
      // Find user with this passkey
      const savedUsers = localStorage.getItem("963x_users")
      if (!savedUsers) {
        setStatus("unauthenticated")
        recordLogin("passkey", false)
        return { success: false, error: "No registered passkeys found" }
      }
      
      const users: UserProfile[] = JSON.parse(savedUsers)
      const matchedUser = users.find(u => u.passkeys.some(p => p.credentialId === credentialId))
      
      if (!matchedUser) {
        setStatus("unauthenticated")
        recordLogin("passkey", false)
        return { success: false, error: "Passkey not recognized" }
      }
      
      // Update passkey last used
      const updatedPasskeys = matchedUser.passkeys.map(p => 
        p.credentialId === credentialId ? { ...p, lastUsed: Date.now() } : p
      )
      const updatedUser = { ...matchedUser, passkeys: updatedPasskeys, lastLogin: Date.now() }
      
      // Save updated user
      const updatedUsers = users.map(u => u.userId === matchedUser.userId ? updatedUser : u)
      localStorage.setItem("963x_users", JSON.stringify(updatedUsers))
      
      setUser(updatedUser)
      localStorage.setItem("963x_user", JSON.stringify(updatedUser))
      createSession(updatedUser.userId, "passkey")
      
      recordLogin("passkey", true)
      setStatus("authenticated")
      
      return { success: true }
    } catch (error: any) {
      setStatus("unauthenticated")
      
      if (error.name === "NotAllowedError") {
        return { success: false, error: "Passkey authentication was cancelled" }
      }
      
      console.error("Passkey login error:", error)
      recordLogin("passkey", false)
      return { success: false, error: error.message || "Failed to authenticate with passkey" }
    }
  }, [createSession, recordLogin])

const removePasskey = useCallback(async (credentialId: string): Promise<boolean> => {
    if (!user) return false
    
    const updatedPasskeys = user.passkeys.filter(p => p.credentialId !== credentialId)
    
    // Don't allow removing last passkey if no other auth methods
    if (updatedPasskeys.length === 0 && !user.email && user.walletAddresses.length === 0) {
      return false
    }
    
    const updatedUser = { ...user, passkeys: updatedPasskeys }
    setUser(updatedUser)
    localStorage.setItem("963x_user", JSON.stringify(updatedUser))
    
    // Update in users list
    const savedUsers = localStorage.getItem("963x_users")
    if (savedUsers) {
      const users: UserProfile[] = JSON.parse(savedUsers)
      const updated = users.map(u => u.userId === user.userId ? updatedUser : u)
      localStorage.setItem("963x_users", JSON.stringify(updated))
    }
    
    return true
  }, [user])

// ─── Session Management (Section 17) ───

const logout = useCallback(() => {
    setStatus("unauthenticated")
    setUser(null)
    setSession(null)
    setOtpState(null)
    localStorage.removeItem("963x_session")
    localStorage.removeItem("963x_user")
  }, [])

const refreshSession = useCallback(() => {
    if (!session) return
    
    const now = Date.now()
    const updatedSession = { ...session, lastActivity: now }
    setSession(updatedSession)
    localStorage.setItem("963x_session", JSON.stringify(updatedSession))
  }, [session])

const isSessionValid = useCallback(() => {
    if (!session) return false
    
    const now = Date.now()
    return now < session.expiresAt && now - session.lastActivity < SESSION_TIMEOUT_MS
  }, [session])

// ─── Profile Management ───

const linkWallet = useCallback(async (provider: any, walletType: string): Promise<{ success: boolean; error?: string }> => {
    if (!user) return { success: false, error: "Not authenticated" }
    
    try {
      const accounts = await provider.request({ method: "eth_requestAccounts" })
      if (!accounts || accounts.length === 0) {
        return { success: false, error: "No accounts found" }
      }
      
      const address = accounts[0]
      
      // Check if wallet already linked
      if (user.walletAddresses.some(w => w.address.toLowerCase() === address.toLowerCase())) {
        return { success: false, error: "This wallet is already linked" }
      }
      
      // Check if wallet belongs to another user
      const savedUsers = localStorage.getItem("963x_users")
      if (savedUsers) {
        const users: UserProfile[] = JSON.parse(savedUsers)
        const otherUser = users.find(u => 
          u.userId !== user.userId && 
          u.walletAddresses.some(w => w.address.toLowerCase() === address.toLowerCase())
        )
        if (otherUser) {
          return { success: false, error: "This wallet is linked to another account" }
        }
      }
      
      // Link wallet
      const newWallet: WalletAddress = {
        address,
        chainId: 1,
        walletType,
        isPrimary: user.walletAddresses.length === 0,
        linkedAt: Date.now(),
      }
      
      const updatedUser = {
        ...user,
        walletAddresses: [...user.walletAddresses, newWallet],
      }
      
      setUser(updatedUser)
      localStorage.setItem("963x_user", JSON.stringify(updatedUser))
      
      // Update in users list
      if (savedUsers) {
        const users: UserProfile[] = JSON.parse(savedUsers)
        const updated = users.map(u => u.userId === user.userId ? updatedUser : u)
        localStorage.setItem("963x_users", JSON.stringify(updated))
      }
      
      return { success: true }
    } catch (error: any) {
      return { success: false, error: error.message || "Failed to link wallet" }
    }
  }, [user])

const linkEmail = useCallback(async (email: string, code: string): Promise<{ success: boolean; error?: string }> => {
    if (!user) return { success: false, error: "Not authenticated" }
    if (user.email) return { success: false, error: "Email already linked" }
    
    // Verify OTP
    if (!otpState || otpState.email !== email || otpState.code !== code) {
      return { success: false, error: "Invalid verification code" }
    }
    
    if (Date.now() > otpState.expiresAt) {
      return { success: false, error: "Verification code expired" }
    }
    
    // Check if email belongs to another user
    const savedUsers = localStorage.getItem("963x_users")
    if (savedUsers) {
      const users: UserProfile[] = JSON.parse(savedUsers)
      const otherUser = users.find(u => u.userId !== user.userId && u.email === email)
      if (otherUser) {
        return { success: false, error: "This email is linked to another account" }
      }
    }
    
    // Link email
    const updatedUser = { ...user, email }
    setUser(updatedUser)
    localStorage.setItem("963x_user", JSON.stringify(updatedUser))
    
    // Update in users list
    if (savedUsers) {
      const users: UserProfile[] = JSON.parse(savedUsers)
      const updated = users.map(u => u.userId === user.userId ? updatedUser : u)
      localStorage.setItem("963x_users", JSON.stringify(updated))
    }
    
    setOtpState(null)
    return { success: true }
  }, [user, otpState])

const updateProfile = useCallback((updates: Partial<Pick<UserProfile, "displayName" | "avatar">>) => {
    if (!user) return
    
    const updatedUser = { ...user, ...updates }
    setUser(updatedUser)
    localStorage.setItem("963x_user", JSON.stringify(updatedUser))
    
    // Update in users list
    const savedUsers = localStorage.getItem("963x_users")
    if (savedUsers) {
      const users: UserProfile[] = JSON.parse(savedUsers)
      const updated = users.map(u => u.userId === user.userId ? updatedUser : u)
      localStorage.setItem("963x_users", JSON.stringify(updated))
    }
  }, [user])

// ─── Security (Section 17) ───

const requireAuthVerification = useCallback(async (action: "withdrawal" | "large_transfer" | "account_change"): Promise<boolean> => {
    // For sensitive actions, require re-authentication
    if (!user || !session) return false
    
    // If logged in via passkey, use passkey to verify
    if (session.method === "passkey" && user.passkeys.length > 0) {
      const result = await loginWithPasskey()
      return result.success
    }
    
    // For wallet users, request signature
    if (session.method === "wallet" && user.walletAddresses.length > 0) {
      const primaryWallet = user.walletAddresses.find(w => w.isPrimary) || user.walletAddresses[0]
      const message = `Verify action: ${action}\nTimestamp: ${new Date().toISOString()}`
      const result = await signMessage(message, primaryWallet.address)
      return result.success
    }
    
    // For email users, they would need to enter a new OTP (handled by UI)
    return true
  }, [user, session, loginWithPasskey, signMessage])

return (
    <AuthContext.Provider
      value={{
        status,
        user,
        session,
        loginHistory,
        otpState,
        sendOTP,
        verifyOTP,
        connectWallet,
        disconnectWallet,
        signMessage,
        createPasskey,
        loginWithPasskey,
        removePasskey,
        logout,
        refreshSession,
        isSessionValid,
        linkWallet,
        linkEmail,
        updateProfile,
        requireAuthVerification,
      }}
    >
      {children}
    </AuthContext.Provider>
  )
}

export function useAuth() {
  const context = useContext(AuthContext)
  if (!context) {
    throw new Error("useAuth must be used within AuthProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="lib/account-context.tsx" isMerged="true"
"use client"

import { createContext, useContext, useState, useCallback, useEffect, type ReactNode } from "react"
import { useAuth } from "./auth-context"

// ─── Types ───

// Account Types (Section 6)
export type AccountType = "spot" | "perpetuals" | "prediction"

// Supported Tokens (Section 8 - Collateral System)
export type CollateralToken = "USDC" | "USDT" | "USDB"

export interface TokenBalance {
  token: CollateralToken
  available: number
  locked: number // In orders
  total: number
}

// Individual Account (Section 6)
export interface TradingAccount {
  type: AccountType
  balances: TokenBalance[]
  totalUsdValue: number
  // For display
  label: string
  description: string
}

// Transfer History (Section 7)
export interface TransferRecord {
  id: string
  fromAccount: AccountType
  toAccount: AccountType
  token: CollateralToken
  amount: number
  timestamp: number
  status: "completed" | "pending" | "failed"
}

// Deposit/Withdraw History
export interface DepositWithdrawRecord {
  id: string
  type: "deposit" | "withdraw"
  token: CollateralToken
  amount: number
  receivedAmount?: number // After conversion
  convertedFrom?: CollateralToken
  txHash?: string
  address?: string
  timestamp: number
  status: "completed" | "pending" | "failed"
}

// Account Context Type
interface AccountContextType {
  // Accounts State (Section 6)
  spotAccount: TradingAccount
  perpetualsAccount: TradingAccount
  predictionAccount: TradingAccount
  
  // Aggregated Values (Section 16)
  totalEquity: number
  totalAvailableMargin: number
  totalUsedMargin: number
  totalUnrealizedPnl: number
  totalRealizedPnl: number
  
  // Transfer Methods (Section 7)
  transfer: (from: AccountType, to: AccountType, token: CollateralToken, amount: number) => Promise<{ success: boolean; error?: string }>
  getMaxTransferAmount: (from: AccountType, token: CollateralToken) => number
  transferHistory: TransferRecord[]
  
  // Deposit/Withdraw Methods (Section 8)
  deposit: (token: CollateralToken, amount: number, toAccount: AccountType) => Promise<{ success: boolean; receivedAmount?: number; error?: string }>
  withdraw: (token: CollateralToken, amount: number, fromAccount: AccountType, toAddress: string) => Promise<{ success: boolean; error?: string }>
  depositWithdrawHistory: DepositWithdrawRecord[]
  
  // Balance Utilities
  getBalance: (account: AccountType, token: CollateralToken) => TokenBalance
  getAvailableBalance: (account: AccountType, token: CollateralToken) => number
  lockBalance: (account: AccountType, token: CollateralToken, amount: number) => boolean
  unlockBalance: (account: AccountType, token: CollateralToken, amount: number) => boolean
  deductBalance: (account: AccountType, token: CollateralToken, amount: number) => boolean
  addBalance: (account: AccountType, token: CollateralToken, amount: number) => void
  
  // Refresh
  refreshBalances: () => void
  
  // PnL Updates (called by trading context)
  updateUnrealizedPnl: (pnl: number) => void
  updateRealizedPnl: (pnl: number) => void
}

const AccountContext = createContext<AccountContextType | null>(null)

// ─── Constants ───

const INITIAL_BALANCES: TokenBalance[] = [
  { token: "USDC", available: 0, locked: 0, total: 0 },
  { token: "USDT", available: 0, locked: 0, total: 0 },
  { token: "USDB", available: 0, locked: 0, total: 0 },
]

// Token conversion rates (Section 8 - USDC as main collateral)
const TOKEN_RATES: Record<CollateralToken, number> = {
  USDC: 1.0,
  USDT: 0.9992, // Slight fee when converting to USDC
  USDB: 1.0,    // 1:1 with USDC
}

// ─── Helper Functions ───

const generateId = () => `${Date.now().toString(36)}-${Math.random().toString(36).substring(2, 9)}`

const createInitialAccount = (type: AccountType): TradingAccount => {
  const labels: Record<AccountType, { label: string; description: string }> = {
    spot: { label: "Spot Account", description: "For spot trading and holding assets" },
    perpetuals: { label: "Perpetuals Account", description: "Margin for perpetual futures trading" },
    prediction: { label: "Prediction Account", description: "Balance for prediction markets" },
  }
  
  return {
    type,
    balances: INITIAL_BALANCES.map(b => ({ ...b })),
    totalUsdValue: 0,
    ...labels[type],
  }
}

// Calculate total USD value from balances
const calculateTotalValue = (balances: TokenBalance[]): number => {
  return balances.reduce((sum, b) => sum + b.total * TOKEN_RATES[b.token], 0)
}

// ─── Provider ───

export function AccountProvider({ children }: { children: ReactNode }) {
  const { user, status } = useAuth()
  
  const [spotAccount, setSpotAccount] = useState<TradingAccount>(createInitialAccount("spot"))
  const [perpetualsAccount, setPerpetualsAccount] = useState<TradingAccount>(createInitialAccount("perpetuals"))
  const [predictionAccount, setPredictionAccount] = useState<TradingAccount>(createInitialAccount("prediction"))
  
  const [transferHistory, setTransferHistory] = useState<TransferRecord[]>([])
  const [depositWithdrawHistory, setDepositWithdrawHistory] = useState<DepositWithdrawRecord[]>([])
  
  // PnL tracking (would come from trading context in real app)
  const [totalUnrealizedPnl, setTotalUnrealizedPnl] = useState(0)
  const [totalRealizedPnl, setTotalRealizedPnl] = useState(0)

// ─── Load persisted data on mount ───
  useEffect(() => {
    if (status !== "authenticated" || !user) return
    
    const savedData = localStorage.getItem(`963x_accounts_${user.userId}`)
    if (savedData) {
      try {
        const data = JSON.parse(savedData)
        if (data.spotAccount) setSpotAccount(data.spotAccount)
        if (data.perpetualsAccount) setPerpetualsAccount(data.perpetualsAccount)
        if (data.predictionAccount) setPredictionAccount(data.predictionAccount)
        if (data.transferHistory) setTransferHistory(data.transferHistory)
        if (data.depositWithdrawHistory) setDepositWithdrawHistory(data.depositWithdrawHistory)
        if (data.totalRealizedPnl) setTotalRealizedPnl(data.totalRealizedPnl)
      } catch (e) {
        console.error("Failed to load account data:", e)
      }
    } else {
      // Initialize with demo balances for new users
      const demoSpot = createInitialAccount("spot")
      demoSpot.balances = [
        { token: "USDC", available: 10000, locked: 0, total: 10000 },
        { token: "USDT", available: 5000, locked: 0, total: 5000 },
        { token: "USDB", available: 2000, locked: 0, total: 2000 },
      ]
      demoSpot.totalUsdValue = calculateTotalValue(demoSpot.balances)
      
      const demoPerp = createInitialAccount("perpetuals")
      demoPerp.balances = [
        { token: "USDC", available: 5000, locked: 0, total: 5000 },
        { token: "USDT", available: 0, locked: 0, total: 0 },
        { token: "USDB", available: 0, locked: 0, total: 0 },
      ]
      demoPerp.totalUsdValue = calculateTotalValue(demoPerp.balances)
      
      const demoPred = createInitialAccount("prediction")
      demoPred.balances = [
        { token: "USDC", available: 1000, locked: 0, total: 1000 },
        { token: "USDT", available: 0, locked: 0, total: 0 },
        { token: "USDB", available: 0, locked: 0, total: 0 },
      ]
      demoPred.totalUsdValue = calculateTotalValue(demoPred.balances)
      
      setSpotAccount(demoSpot)
      setPerpetualsAccount(demoPerp)
      setPredictionAccount(demoPred)
    }
  }, [status, user])

// ─── Persist data on change ───
  useEffect(() => {
    if (status !== "authenticated" || !user) return
    
    const data = {
      spotAccount,
      perpetualsAccount,
      predictionAccount,
      transferHistory,
      depositWithdrawHistory,
      totalRealizedPnl,
    }
    
    localStorage.setItem(`963x_accounts_${user.userId}`, JSON.stringify(data))
  }, [status, user, spotAccount, perpetualsAccount, predictionAccount, transferHistory, depositWithdrawHistory, totalRealizedPnl])

// ─── Account Getters ───
  
  const getAccount = useCallback((type: AccountType): TradingAccount => {
    switch (type) {
      case "spot": return spotAccount
      case "perpetuals": return perpetualsAccount
      case "prediction": return predictionAccount
    }
  }, [spotAccount, perpetualsAccount, predictionAccount])

const setAccount = useCallback((type: AccountType, updater: (prev: TradingAccount) => TradingAccount) => {
    switch (type) {
      case "spot":
        setSpotAccount(prev => {
          const updated = updater(prev)
          updated.totalUsdValue = calculateTotalValue(updated.balances)
          return updated
        })
        break
      case "perpetuals":
        setPerpetualsAccount(prev => {
          const updated = updater(prev)
          updated.totalUsdValue = calculateTotalValue(updated.balances)
          return updated
        })
        break
      case "prediction":
        setPredictionAccount(prev => {
          const updated = updater(prev)
          updated.totalUsdValue = calculateTotalValue(updated.balances)
          return updated
        })
        break
    }
  }, [])

// ─── Balance Methods ───

const getBalance = useCallback((account: AccountType, token: CollateralToken): TokenBalance => {
    const acc = getAccount(account)
    return acc.balances.find(b => b.token === token) || { token, available: 0, locked: 0, total: 0 }
  }, [getAccount])

const getAvailableBalance = useCallback((account: AccountType, token: CollateralToken): number => {
    return getBalance(account, token).available
  }, [getBalance])

const lockBalance = useCallback((account: AccountType, token: CollateralToken, amount: number): boolean => {
    const balance = getBalance(account, token)
    if (balance.available < amount) return false
    
    setAccount(account, prev => ({
      ...prev,
      balances: prev.balances.map(b => 
        b.token === token 
          ? { ...b, available: b.available - amount, locked: b.locked + amount }
          : b
      ),
    }))
    
    return true
  }, [getBalance, setAccount])

const unlockBalance = useCallback((account: AccountType, token: CollateralToken, amount: number): boolean => {
    const balance = getBalance(account, token)
    if (balance.locked < amount) return false
    
    setAccount(account, prev => ({
      ...prev,
      balances: prev.balances.map(b => 
        b.token === token 
          ? { ...b, available: b.available + amount, locked: b.locked - amount }
          : b
      ),
    }))
    
    return true
  }, [getBalance, setAccount])

const deductBalance = useCallback((account: AccountType, token: CollateralToken, amount: number): boolean => {
    const balance = getBalance(account, token)
    if (balance.available < amount) return false
    
    setAccount(account, prev => ({
      ...prev,
      balances: prev.balances.map(b => 
        b.token === token 
          ? { ...b, available: b.available - amount, total: b.total - amount }
          : b
      ),
    }))
    
    return true
  }, [getBalance, setAccount])

const addBalance = useCallback((account: AccountType, token: CollateralToken, amount: number) => {
    setAccount(account, prev => ({
      ...prev,
      balances: prev.balances.map(b => 
        b.token === token 
          ? { ...b, available: b.available + amount, total: b.total + amount }
          : b
      ),
    }))
  }, [setAccount])

// ─── Transfer Methods (Section 7) ───

const getMaxTransferAmount = useCallback((from: AccountType, token: CollateralToken): number => {
    return getAvailableBalance(from, token)
  }, [getAvailableBalance])

const transfer = useCallback(async (
    from: AccountType, 
    to: AccountType, 
    token: CollateralToken, 
    amount: number
  ): Promise<{ success: boolean; error?: string }> => {
    if (from === to) {
      return { success: false, error: "Cannot transfer to same account" }
    }
    
    if (amount <= 0) {
      return { success: false, error: "Invalid amount" }
    }
    
    const available = getAvailableBalance(from, token)
    if (amount > available) {
      return { success: false, error: `Insufficient balance. Available: ${available.toFixed(2)} ${token}` }
    }
    
    // Create pending transfer record
    const transferRecord: TransferRecord = {
      id: generateId(),
      fromAccount: from,
      toAccount: to,
      token,
      amount,
      timestamp: Date.now(),
      status: "pending",
    }
    
    setTransferHistory(prev => [transferRecord, ...prev])
    
    // Simulate processing delay
    await new Promise(resolve => setTimeout(resolve, 500))
    
    // Execute transfer
    const deducted = deductBalance(from, token, amount)
    if (!deducted) {
      setTransferHistory(prev => 
        prev.map(t => t.id === transferRecord.id ? { ...t, status: "failed" } : t)
      )
      return { success: false, error: "Failed to deduct balance" }
    }
    
    addBalance(to, token, amount)
    
    // Update transfer record to completed
    setTransferHistory(prev => 
      prev.map(t => t.id === transferRecord.id ? { ...t, status: "completed" } : t)
    )
    
    return { success: true }
  }, [getAvailableBalance, deductBalance, addBalance])

// ─── Deposit/Withdraw Methods (Section 8) ───

const deposit = useCallback(async (
    token: CollateralToken,
    amount: number,
    toAccount: AccountType = "spot"
  ): Promise<{ success: boolean; receivedAmount?: number; error?: string }> => {
    if (amount <= 0) {
      return { success: false, error: "Invalid amount" }
    }
    
    // Calculate received amount (Section 8 - auto-convert to USDC)
    let receivedAmount = amount
    let convertedFrom: CollateralToken | undefined
    
    if (token !== "USDC") {
      // Convert to USDC internally
      receivedAmount = amount * TOKEN_RATES[token]
      convertedFrom = token
    }
    
    // Create deposit record
    const record: DepositWithdrawRecord = {
      id: generateId(),
      type: "deposit",
      token: convertedFrom ? "USDC" : token,
      amount,
      receivedAmount: convertedFrom ? receivedAmount : undefined,
      convertedFrom,
      timestamp: Date.now(),
      status: "pending",
    }
    
    setDepositWithdrawHistory(prev => [record, ...prev])
    
    // Simulate blockchain confirmation
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // Add balance (always USDC after conversion)
    const depositToken = convertedFrom ? "USDC" : token
    addBalance(toAccount, depositToken, receivedAmount)
    
    // Update record
    setDepositWithdrawHistory(prev =>
      prev.map(r => r.id === record.id ? { ...r, status: "completed" } : r)
    )
    
    return { success: true, receivedAmount }
  }, [addBalance])

const withdraw = useCallback(async (
    token: CollateralToken,
    amount: number,
    fromAccount: AccountType,
    toAddress: string
  ): Promise<{ success: boolean; error?: string }> => {
    if (amount <= 0) {
      return { success: false, error: "Invalid amount" }
    }
    
    if (!toAddress || !toAddress.startsWith("0x")) {
      return { success: false, error: "Invalid address" }
    }
    
    const available = getAvailableBalance(fromAccount, token)
    if (amount > available) {
      return { success: false, error: `Insufficient balance. Available: ${available.toFixed(2)} ${token}` }
    }
    
    // Create withdrawal record
    const record: DepositWithdrawRecord = {
      id: generateId(),
      type: "withdraw",
      token,
      amount,
      address: toAddress,
      timestamp: Date.now(),
      status: "pending",
    }
    
    setDepositWithdrawHistory(prev => [record, ...prev])
    
    // Deduct balance
    const deducted = deductBalance(fromAccount, token, amount)
    if (!deducted) {
      setDepositWithdrawHistory(prev =>
        prev.map(r => r.id === record.id ? { ...r, status: "failed" } : r)
      )
      return { success: false, error: "Failed to deduct balance" }
    }
    
    // Simulate blockchain confirmation
    await new Promise(resolve => setTimeout(resolve, 2000))
    
    // Update record with mock tx hash
    const mockTxHash = "0x" + Array.from(crypto.getRandomValues(new Uint8Array(32)))
      .map(b => b.toString(16).padStart(2, "0"))
      .join("")
    
    setDepositWithdrawHistory(prev =>
      prev.map(r => r.id === record.id ? { ...r, status: "completed", txHash: mockTxHash } : r)
    )
    
    return { success: true }
  }, [getAvailableBalance, deductBalance])

// ─── Aggregated Values (Section 16) ───

const totalEquity = spotAccount.totalUsdValue + perpetualsAccount.totalUsdValue + predictionAccount.totalUsdValue + totalUnrealizedPnl

const totalAvailableMargin = 
    spotAccount.balances.reduce((sum, b) => sum + b.available * TOKEN_RATES[b.token], 0) +
    perpetualsAccount.balances.reduce((sum, b) => sum + b.available * TOKEN_RATES[b.token], 0) +
    predictionAccount.balances.reduce((sum, b) => sum + b.available * TOKEN_RATES[b.token], 0)

const totalUsedMargin = 
    spotAccount.balances.reduce((sum, b) => sum + b.locked * TOKEN_RATES[b.token], 0) +
    perpetualsAccount.balances.reduce((sum, b) => sum + b.locked * TOKEN_RATES[b.token], 0) +
    predictionAccount.balances.reduce((sum, b) => sum + b.locked * TOKEN_RATES[b.token], 0)

// ─── Refresh ───

const refreshBalances = useCallback(() => {
    // In production, this would fetch from blockchain/API
    // For now, just recalculate totals
    setSpotAccount(prev => ({ ...prev, totalUsdValue: calculateTotalValue(prev.balances) }))
    setPerpetualsAccount(prev => ({ ...prev, totalUsdValue: calculateTotalValue(prev.balances) }))
    setPredictionAccount(prev => ({ ...prev, totalUsdValue: calculateTotalValue(prev.balances) }))
  }, [])

// Update unrealized PnL (called by trading context when positions change)
  const updateUnrealizedPnl = useCallback((pnl: number) => {
    setTotalUnrealizedPnl(pnl)
  }, [])

// Update realized PnL (called when position is closed)
  const updateRealizedPnl = useCallback((pnl: number) => {
    setTotalRealizedPnl(prev => prev + pnl)
  }, [])

return (
    <AccountContext.Provider
      value={{
        spotAccount,
        perpetualsAccount,
        predictionAccount,
        totalEquity,
        totalAvailableMargin,
        totalUsedMargin,
        totalUnrealizedPnl,
        totalRealizedPnl,
        transfer,
        getMaxTransferAmount,
        transferHistory,
        deposit,
        withdraw,
        depositWithdrawHistory,
        getBalance,
        getAvailableBalance,
        lockBalance,
        unlockBalance,
        deductBalance,
        addBalance,
        refreshBalances,
        updateUnrealizedPnl,
        updateRealizedPnl,
      }}
    >
      {children}
    </AccountContext.Provider>
  )
}

export function useAccount() {
  const context = useContext(AccountContext)
  if (!context) {
    throw new Error("useAccount must be used within AccountProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="lib/perp-engine.tsx" isMerged="true"
"use client"

import { createContext, useContext, useState, useCallback, useEffect, useRef, type ReactNode } from "react"
import { useAccount, type CollateralToken } from "./account-context"

// ─── Types (Sections 9-14) ───

// Trigger Types (Section 9)
export type TriggerType = "mark" | "last" | "index"

// Margin Modes (Section 11)
export type MarginMode = "isolated" | "cross" | "portfolio"

// Risk Level (Section 13)
export type RiskLevel = "safe" | "warning" | "danger" | "liquidation"

// Order Parameters (Section 9)
export interface PerpOrder {
  id: string
  symbol: string
  side: OrderSide
  type: OrderType
  price: number | null // null for market orders
  size: number
  filledSize: number
  reduceOnly: boolean
  triggerPrice: number | null
  triggerType: TriggerType
  leverage: number
  marginMode: MarginMode
  margin: number // Margin allocated to this order
  timestamp: number
  status: OrderStatus
  // TP/SL attached to order
  takeProfit?: { price: number }
  stopLoss?: { price: number }
  // Trailing stop
  trailingConfig?: {
    callbackRate: number // percentage
    activationPrice: number | null
    highestPrice?: number
    lowestPrice?: number
    currentStopPrice: number
    isActivated: boolean
  }
}

// Position (Section 10)
export interface PerpPosition {
  id: string
  symbol: string
  side: OrderSide
  size: number
  entryPrice: number
  markPrice: number
  indexPrice: number
  lastPrice: number
  marginUsed: number
  unrealizedPnl: number
  realizedPnl: number
  liquidationPrice: number
  leverage: number
  marginMode: MarginMode
  timestamp: number
  // TP/SL for position (Section 10)
  takeProfit?: { price: number; orderId?: string }
  stopLoss?: { price: number; orderId?: string }
}

// Trade History
export interface PerpTrade {
  id: string
  orderId: string
  symbol: string
  side: OrderSide
  price: number
  size: number
  fee: number
  realizedPnl: number
  timestamp: number
}

// Risk Metrics (Section 13)
export interface RiskMetrics {
  positionValue: number
  initialMargin: number
  maintenanceMargin: number
  unrealizedPnl: number
  marginRatio: number // percentage
  riskLevel: RiskLevel
  liquidationDistance: number // percentage to liquidation
  accountEquity: number
}

// Liquidation Event (Section 14)
export interface LiquidationEvent {
  id: string
  positionId: string
  symbol: string
  side: OrderSide
  type: "partial" | "full"
  sizeLiquidated: number
  remainingSize: number
  liquidationPrice: number
  loss: number
  timestamp: number
}

// Risk Tier (Section 13)
export interface RiskTier {
  tier: number
  maxPositionValue: number
  maintenanceMarginRate: number
  label: string
}

// Symbol Settings
export interface SymbolSettings {
  symbol: string
  marginMode: MarginMode
  leverage: number
}

// ─── Constants ───

export const RISK_TIERS: RiskTier[] = [
  { tier: 1, maxPositionValue: 50000, maintenanceMarginRate: 0.005, label: "Tier 1" },
  { tier: 2, maxPositionValue: 250000, maintenanceMarginRate: 0.01, label: "Tier 2" },
  { tier: 3, maxPositionValue: 1000000, maintenanceMarginRate: 0.02, label: "Tier 3" },
  { tier: 4, maxPositionValue: Infinity, maintenanceMarginRate: 0.03, label: "Tier 4" },
]

const PORTFOLIO_MARGIN_THRESHOLD = 10000 // Minimum equity for portfolio margin
const DEFAULT_TRIGGER_TYPE: TriggerType = "mark" // Section 9 - Default trigger type

// ─── Helper Functions ───

const generateId = (prefix: string) => 
  `${prefix}-${Date.now().toString(36).toUpperCase()}-${Math.random().toString(36).substring(2, 6).toUpperCase()}`

// Get risk tier based on position value
const getRiskTier = (positionValue: number): RiskTier => {
  for (const tier of RISK_TIERS) {
    if (positionValue <= tier.maxPositionValue) return tier
  }
  return RISK_TIERS[RISK_TIERS.length - 1]
}

// Calculate liquidation price (Section 13-14)
const calculateLiquidationPrice = (
  entryPrice: number,
  leverage: number,
  side: OrderSide,
  marginMode: MarginMode,
  margin: number,
  totalEquity?: number
): number => {
  const maintenanceMarginRate = 0.005 // 0.5%
  
  if (marginMode === "isolated") {
    if (side === "long") {
      return entryPrice * (1 - 1 / leverage + maintenanceMarginRate)
    } else {
      return entryPrice * (1 + 1 / leverage - maintenanceMarginRate)
    }
  } else {
    // Cross margin - use total available margin
    const effectiveMargin = totalEquity || margin
    const positionValue = entryPrice * (margin * leverage / entryPrice)
    
    if (side === "long") {
      return entryPrice - (effectiveMargin - positionValue * maintenanceMarginRate) / (positionValue / entryPrice)
    } else {
      return entryPrice + (effectiveMargin - positionValue * maintenanceMarginRate) / (positionValue / entryPrice)
    }
  }
}

// Calculate margin ratio (Section 13)
const calculateMarginRatio = (maintenanceMargin: number, accountEquity: number): number => {
  if (accountEquity <= 0) return 100
  return (maintenanceMargin / accountEquity) * 100
}

// Determine risk level from margin ratio
const getRiskLevel = (marginRatio: number): RiskLevel => {
  if (marginRatio >= 100) return "liquidation"
  if (marginRatio >= 80) return "danger"
  if (marginRatio >= 60) return "warning"
  return "safe"
}

// ─── Context Type ───

interface PerpEngineContextType {
  // State
  orders: PerpOrder[]
  positions: PerpPosition[]
  tradeHistory: PerpTrade[]
  liquidationHistory: LiquidationEvent[]
  
  // Symbol Settings (Section 11)
  getSymbolSettings: (symbol: string) => SymbolSettings
  setMarginMode: (symbol: string, mode: MarginMode) => { success: boolean; error?: string }
  setLeverage: (symbol: string, leverage: number) => { success: boolean; error?: string }
  
  // Account Mode (Section 11)
  accountMode: "classic" | "portfolio"
  setAccountMode: (mode: "classic" | "portfolio") => { success: boolean; error?: string }
  
  // Order Methods (Section 9)
  placeOrder: (params: {
    symbol: string
    side: OrderSide
    type: OrderType
    price?: number
    size: number
    reduceOnly?: boolean
    triggerPrice?: number
    triggerType?: TriggerType
    leverage?: number
    takeProfit?: number
    stopLoss?: number
    trailingCallback?: number
    trailingActivation?: number
  }) => Promise<{ success: boolean; orderId?: string; error?: string }>
  
  cancelOrder: (orderId: string) => Promise<{ success: boolean; error?: string }>
  cancelAllOrders: (symbol?: string) => Promise<{ success: boolean; count: number }>
  
  // Position Methods (Section 10)
  closePosition: (positionId: string, size?: number) => Promise<{ success: boolean; error?: string }>
  setPositionTPSL: (positionId: string, tp?: number | null, sl?: number | null) => Promise<{ success: boolean; error?: string }>
  addMarginToPosition: (positionId: string, amount: number) => Promise<{ success: boolean; error?: string }>
  
  // Risk Engine (Section 13)
  getRiskMetrics: (positionId: string) => RiskMetrics | null
  getAccountRiskMetrics: () => { marginRatio: number; riskLevel: RiskLevel; totalUnrealizedPnl: number }
  calculateOrderRiskPreview: (params: {
    symbol: string
    side: OrderSide
    size: number
    leverage: number
    entryPrice: number
  }) => { liquidationPrice: number; marginRequired: number; riskTier: RiskTier }
  
  // Price Updates
  updatePrice: (symbol: string, markPrice: number, lastPrice?: number, indexPrice?: number) => void
  
  // Validation
  validateOrder: (params: {
    symbol: string
    side: OrderSide
    type: OrderType
    price?: number
    size: number
    triggerPrice?: number
  }) => { valid: boolean; error?: string }
}

const PerpEngineContext = createContext<PerpEngineContextType | null>(null)

// ─── Provider ───

export function PerpEngineProvider({ children }: { children: ReactNode }) {
  const { 
    perpetualsAccount, 
    getAvailableBalance, 
    lockBalance, 
    unlockBalance, 
    deductBalance, 
    addBalance,
    totalEquity 
  } = useAccount()
  
  const [orders, setOrders] = useState<PerpOrder[]>([])
  const [positions, setPositions] = useState<PerpPosition[]>([])
  const [tradeHistory, setTradeHistory] = useState<PerpTrade[]>([])
  const [liquidationHistory, setLiquidationHistory] = useState<LiquidationEvent[]>([])
  const [symbolSettings, setSymbolSettings] = useState<Map<string, SymbolSettings>>(new Map())
  const [accountMode, setAccountModeState] = useState<"classic" | "portfolio">("classic")
  
  // Refs for price monitoring
  const pricesRef = useRef<Map<string, { mark: number; last: number; index: number }>>(new Map())
  const positionsRef = useRef(positions)
  positionsRef.current = positions

// ─── Symbol Settings (Section 11) ───

const getSymbolSettings = useCallback((symbol: string): SymbolSettings => {
    return symbolSettings.get(symbol) || { symbol, marginMode: "cross", leverage: 20 }
  }, [symbolSettings])

const setMarginMode = useCallback((symbol: string, mode: MarginMode): { success: boolean; error?: string } => {
    // Cannot change margin mode if position exists (Section 11)
    const hasPosition = positionsRef.current.some(p => p.symbol === symbol)
    if (hasPosition) {
      return { success: false, error: "Cannot change margin mode while position is open" }
    }
    
    // Portfolio margin requires min equity
    if (mode === "portfolio" && totalEquity < PORTFOLIO_MARGIN_THRESHOLD) {
      return { success: false, error: `Portfolio margin requires minimum equity of $${PORTFOLIO_MARGIN_THRESHOLD}` }
    }
    
    setSymbolSettings(prev => {
      const newMap = new Map(prev)
      const current = newMap.get(symbol) || { symbol, marginMode: "cross", leverage: 20 }
      newMap.set(symbol, { ...current, marginMode: mode })
      return newMap
    })
    
    return { success: true }
  }, [totalEquity])

const setLeverage = useCallback((symbol: string, leverage: number): { success: boolean; error?: string } => {
    // Validate leverage range (Section 12)
    if (leverage < 1 || leverage > 125) {
      return { success: false, error: "Leverage must be between 1x and 125x" }
    }
    
    setSymbolSettings(prev => {
      const newMap = new Map(prev)
      const current = newMap.get(symbol) || { symbol, marginMode: "cross", leverage: 20 }
      newMap.set(symbol, { ...current, leverage })
      return newMap
    })
    
    return { success: true }
  }, [])

// ─── Account Mode (Section 11) ───

const setAccountMode = useCallback((mode: "classic" | "portfolio"): { success: boolean; error?: string } => {
    if (mode === "portfolio") {
      if (totalEquity < PORTFOLIO_MARGIN_THRESHOLD) {
        return { success: false, error: `Portfolio margin requires minimum equity of $${PORTFOLIO_MARGIN_THRESHOLD}` }
      }
      
      // Portfolio margin disables isolated margin (Section 11)
      // Update all symbol settings to cross
      setSymbolSettings(prev => {
        const newMap = new Map(prev)
        newMap.forEach((settings, symbol) => {
          if (settings.marginMode === "isolated") {
            newMap.set(symbol, { ...settings, marginMode: "cross" })
          }
        })
        return newMap
      })
    }
    
    setAccountModeState(mode)
    return { success: true }
  }, [totalEquity])

// ─── Price Updates ───

const updatePrice = useCallback((symbol: string, markPrice: number, lastPrice?: number, indexPrice?: number) => {
    const current = pricesRef.current.get(symbol) || { mark: markPrice, last: markPrice, index: markPrice }
    pricesRef.current.set(symbol, {
      mark: markPrice,
      last: lastPrice ?? current.last,
      index: indexPrice ?? current.index,
    })
    
    // Update positions with new prices
    setPositions(prev => prev.map(pos => {
      if (pos.symbol !== symbol) return pos
      
      const pnlMultiplier = pos.side === "long" ? 1 : -1
      const unrealizedPnl = (markPrice - pos.entryPrice) * pos.size * pnlMultiplier
      
      return {
        ...pos,
        markPrice,
        lastPrice: lastPrice ?? pos.lastPrice,
        indexPrice: indexPrice ?? pos.indexPrice,
        unrealizedPnl,
      }
    }))
    
    // Check for triggered conditional orders
    checkConditionalOrders(symbol)
    
    // Check for liquidations (Section 14)
    checkLiquidations(symbol, markPrice)
  }, [])

// ─── Conditional Order Checking ───

const checkConditionalOrders = useCallback((symbol: string) => {
    const prices = pricesRef.current.get(symbol)
    if (!prices) return
    
    setOrders(prev => {
      const triggered: string[] = []
      
      const updated = prev.map(order => {
        if (order.symbol !== symbol || order.status !== "pending" || !order.triggerPrice) {
          return order
        }
        
        const triggerRef = order.triggerType === "mark" ? prices.mark 
          : order.triggerType === "last" ? prices.last 
          : prices.index
        
        let shouldTrigger = false
        
        if (order.type === "stop_market" || order.type === "stop_limit" || order.type === "stop_loss") {
          // Stop orders trigger when price crosses trigger price
          if (order.side === "long") {
            shouldTrigger = triggerRef >= order.triggerPrice
          } else {
            shouldTrigger = triggerRef <= order.triggerPrice
          }
        } else if (order.type === "take_profit") {
          // Take profit triggers in opposite direction
          if (order.side === "long") {
            shouldTrigger = triggerRef <= order.triggerPrice
          } else {
            shouldTrigger = triggerRef >= order.triggerPrice
          }
        } else if (order.type === "trailing_stop" && order.trailingConfig) {
          // Trailing stop logic
          const config = order.trailingConfig
          
          if (!config.isActivated && config.activationPrice) {
            // Check if activation price reached
            if (order.side === "long" && triggerRef >= config.activationPrice) {
              config.isActivated = true
              config.highestPrice = triggerRef
            } else if (order.side === "short" && triggerRef <= config.activationPrice) {
              config.isActivated = true
              config.lowestPrice = triggerRef
            }
          }
          
          if (config.isActivated || !config.activationPrice) {
            if (order.side === "long") {
              config.highestPrice = Math.max(config.highestPrice || triggerRef, triggerRef)
              config.currentStopPrice = config.highestPrice * (1 - config.callbackRate / 100)
              shouldTrigger = triggerRef <= config.currentStopPrice
            } else {
              config.lowestPrice = Math.min(config.lowestPrice || triggerRef, triggerRef)
              config.currentStopPrice = config.lowestPrice * (1 + config.callbackRate / 100)
              shouldTrigger = triggerRef >= config.currentStopPrice
            }
          }
        }
        
        if (shouldTrigger) {
          triggered.push(order.id)
          return { ...order, status: "triggered" as OrderStatus }
        }
        
        return order
      })
      
      // Execute triggered orders
      triggered.forEach(orderId => {
        executeTriggeredOrder(orderId)
      })
      
      return updated
    })
  }, [])

// ─── Liquidation Check (Section 14) ───

const checkLiquidations = useCallback((symbol: string, markPrice: number) => {
    positionsRef.current.forEach(pos => {
      if (pos.symbol !== symbol) return
      
      const shouldLiquidate = pos.side === "long" 
        ? markPrice <= pos.liquidationPrice
        : markPrice >= pos.liquidationPrice
      
      if (shouldLiquidate) {
        executeLiquidation(pos, markPrice)
      }
    })
  }, [])

// ─── Execute Triggered Order ───

const executeTriggeredOrder = useCallback(async (orderId: string) => {
    const order = orders.find(o => o.id === orderId)
    if (!order) return
    
    // Execute as market order
    const prices = pricesRef.current.get(order.symbol)
    const fillPrice = prices?.mark || order.price || 0
    
    // Create or modify position
    const existingPosition = positionsRef.current.find(
      p => p.symbol === order.symbol && p.side === order.side
    )
    
    if (order.reduceOnly) {
      // Close position
      const oppositePosition = positionsRef.current.find(
        p => p.symbol === order.symbol && p.side !== order.side
      )
      if (oppositePosition) {
        await closePositionInternal(oppositePosition.id, order.size)
      }
    } else if (existingPosition) {
      // Add to existing position
      addToPosition(existingPosition, order.size, fillPrice)
    } else {
      // Create new position
      createPosition(order, fillPrice)
    }
    
    // Update order status
    setOrders(prev => prev.map(o => 
      o.id === orderId ? { ...o, status: "filled", filledSize: o.size } : o
    ))
    
    // Create trade record
    const trade: PerpTrade = {
      id: generateId("TRD"),
      orderId,
      symbol: order.symbol,
      side: order.side,
      price: fillPrice,
      size: order.size,
      fee: order.size * fillPrice * 0.0005, // 0.05% fee
      realizedPnl: 0,
      timestamp: Date.now(),
    }
    setTradeHistory(prev => [trade, ...prev])
  }, [orders])

// ─── Execute Liquidation (Section 14) ───

const executeLiquidation = useCallback((position: PerpPosition, liquidationPrice: number) => {
    // Calculate loss
    const pnlMultiplier = position.side === "long" ? 1 : -1
    const loss = Math.abs((liquidationPrice - position.entryPrice) * position.size * pnlMultiplier)
    
    // Create liquidation event
    const event: LiquidationEvent = {
      id: generateId("LIQ"),
      positionId: position.id,
      symbol: position.symbol,
      side: position.side,
      type: "full",
      sizeLiquidated: position.size,
      remainingSize: 0,
      liquidationPrice,
      loss,
      timestamp: Date.now(),
    }
    
    setLiquidationHistory(prev => [event, ...prev])
    
    // Remove position
    setPositions(prev => prev.filter(p => p.id !== position.id))
    
    // Return remaining margin minus loss
    const returnAmount = Math.max(0, position.marginUsed - loss)
    if (returnAmount > 0) {
      addBalance("perpetuals", "USDC", returnAmount)
    }
  }, [addBalance])

// ─── Create Position ───

const createPosition = useCallback((order: PerpOrder, fillPrice: number) => {
    const settings = getSymbolSettings(order.symbol)
    
    const position: PerpPosition = {
      id: generateId("POS"),
      symbol: order.symbol,
      side: order.side,
      size: order.size,
      entryPrice: fillPrice,
      markPrice: fillPrice,
      indexPrice: fillPrice,
      lastPrice: fillPrice,
      marginUsed: order.margin,
      unrealizedPnl: 0,
      realizedPnl: 0,
      liquidationPrice: calculateLiquidationPrice(
        fillPrice,
        order.leverage,
        order.side,
        settings.marginMode,
        order.margin,
        accountMode === "portfolio" ? totalEquity : undefined
      ),
      leverage: order.leverage,
      marginMode: settings.marginMode,
      timestamp: Date.now(),
    }
    
    // Add TP/SL if specified
    if (order.takeProfit) {
      position.takeProfit = { price: order.takeProfit.price }
      // Create TP order
      createTPSLOrder(position, "take_profit", order.takeProfit.price)
    }
    
    if (order.stopLoss) {
      position.stopLoss = { price: order.stopLoss.price }
      // Create SL order
      createTPSLOrder(position, "stop_loss", order.stopLoss.price)
    }
    
    setPositions(prev => [...prev, position])
  }, [getSymbolSettings, accountMode, totalEquity])

// ─── Add to Position ───

const addToPosition = useCallback((position: PerpPosition, size: number, price: number) => {
    setPositions(prev => prev.map(pos => {
      if (pos.id !== position.id) return pos
      
      const totalSize = pos.size + size
      const totalCost = (pos.size * pos.entryPrice) + (size * price)
      const newEntryPrice = totalCost / totalSize
      const newMargin = pos.marginUsed + (size * price / pos.leverage)
      
      const newLiqPrice = calculateLiquidationPrice(
        newEntryPrice,
        pos.leverage,
        pos.side,
        pos.marginMode,
        newMargin,
        accountMode === "portfolio" ? totalEquity : undefined
      )
      
      return {
        ...pos,
        size: totalSize,
        entryPrice: newEntryPrice,
        marginUsed: newMargin,
        liquidationPrice: newLiqPrice,
      }
    }))
  }, [accountMode, totalEquity])

// ─── Create TP/SL Order ───

const createTPSLOrder = useCallback((position: PerpPosition, type: "take_profit" | "stop_loss", price: number) => {
    const order: PerpOrder = {
      id: generateId("ORD"),
      symbol: position.symbol,
      side: position.side === "long" ? "short" : "long", // Opposite side to close
      type,
      price: null,
      size: position.size,
      filledSize: 0,
      reduceOnly: true,
      triggerPrice: price,
      triggerType: DEFAULT_TRIGGER_TYPE,
      leverage: position.leverage,
      marginMode: position.marginMode,
      margin: 0,
      timestamp: Date.now(),
      status: "pending",
    }
    
    setOrders(prev => [...prev, order])
    
    // Link order to position
    setPositions(prev => prev.map(p => {
      if (p.id !== position.id) return p
      if (type === "take_profit") {
        return { ...p, takeProfit: { price, orderId: order.id } }
      } else {
        return { ...p, stopLoss: { price, orderId: order.id } }
      }
    }))
  }, [])

// ─── Order Placement (Section 9) ───

const placeOrder = useCallback(async (params: {
    symbol: string
    side: OrderSide
    type: OrderType
    price?: number
    size: number
    reduceOnly?: boolean
    triggerPrice?: number
    triggerType?: TriggerType
    leverage?: number
    takeProfit?: number
    stopLoss?: number
    trailingCallback?: number
    trailingActivation?: number
  }): Promise<{ success: boolean; orderId?: string; error?: string }> => {
    const settings = getSymbolSettings(params.symbol)
    const leverage = params.leverage ?? settings.leverage
    const prices = pricesRef.current.get(params.symbol)
    const currentPrice = prices?.mark || params.price || 0
    
    // Validate order
    const validation = validateOrder(params)
    if (!validation.valid) {
      return { success: false, error: validation.error }
    }
    
    // Calculate required margin
    const marginRequired = (params.size * currentPrice) / leverage
    
    // Check balance (unless reduce only)
    if (!params.reduceOnly) {
      const available = getAvailableBalance("perpetuals", "USDC")
      if (marginRequired > available) {
        return { success: false, error: `Insufficient margin. Required: ${marginRequired.toFixed(2)} USDC` }
      }
      
      // Lock margin
      lockBalance("perpetuals", "USDC", marginRequired)
    }
    
    // Create order
    const order: PerpOrder = {
      id: generateId("ORD"),
      symbol: params.symbol,
      side: params.side,
      type: params.type,
      price: params.type === "limit" || params.type === "stop_limit" ? params.price! : null,
      size: params.size,
      filledSize: 0,
      reduceOnly: params.reduceOnly ?? false,
      triggerPrice: params.triggerPrice ?? null,
      triggerType: params.triggerType ?? DEFAULT_TRIGGER_TYPE,
      leverage,
      marginMode: settings.marginMode,
      margin: marginRequired,
      timestamp: Date.now(),
      status: params.type === "market" ? "open" : "pending",
      takeProfit: params.takeProfit ? { price: params.takeProfit } : undefined,
      stopLoss: params.stopLoss ? { price: params.stopLoss } : undefined,
      trailingConfig: params.trailingCallback ? {
        callbackRate: params.trailingCallback,
        activationPrice: params.trailingActivation ?? null,
        currentStopPrice: currentPrice * (1 - params.trailingCallback / 100),
        isActivated: !params.trailingActivation,
      } : undefined,
    }
    
    setOrders(prev => [...prev, order])
    
    // Execute market orders immediately
    if (params.type === "market") {
      await executeMarketOrder(order)
    }
    
    return { success: true, orderId: order.id }
  }, [getSymbolSettings, getAvailableBalance, lockBalance])

// ─── Execute Market Order ───

const executeMarketOrder = useCallback(async (order: PerpOrder) => {
    const prices = pricesRef.current.get(order.symbol)
    const fillPrice = prices?.mark || order.price || 0
    
    // Check for existing position
    const existingPosition = positionsRef.current.find(
      p => p.symbol === order.symbol
    )
    
    if (order.reduceOnly && existingPosition) {
      // Close position
      await closePositionInternal(existingPosition.id, order.size)
    } else if (existingPosition && existingPosition.side === order.side) {
      // Add to position
      addToPosition(existingPosition, order.size, fillPrice)
    } else if (existingPosition && existingPosition.side !== order.side) {
      // Reduce or flip position
      if (order.size >= existingPosition.size) {
        // Close and potentially open opposite
        await closePositionInternal(existingPosition.id)
        const remainingSize = order.size - existingPosition.size
        if (remainingSize > 0) {
          const newOrder = { ...order, size: remainingSize }
          createPosition(newOrder, fillPrice)
        }
      } else {
        // Reduce position
        await closePositionInternal(existingPosition.id, order.size)
      }
    } else {
      // Create new position
      createPosition(order, fillPrice)
    }
    
    // Update order status
    setOrders(prev => prev.map(o => 
      o.id === order.id ? { ...o, status: "filled", filledSize: o.size } : o
    ))
    
    // Create trade record
    const trade: PerpTrade = {
      id: generateId("TRD"),
      orderId: order.id,
      symbol: order.symbol,
      side: order.side,
      price: fillPrice,
      size: order.size,
      fee: order.size * fillPrice * 0.0005,
      realizedPnl: 0,
      timestamp: Date.now(),
    }
    setTradeHistory(prev => [trade, ...prev])
  }, [addToPosition, createPosition])

// ─── Cancel Order ───

const cancelOrder = useCallback(async (orderId: string): Promise<{ success: boolean; error?: string }> => {
    const order = orders.find(o => o.id === orderId)
    if (!order) {
      return { success: false, error: "Order not found" }
    }
    
    if (order.status === "filled" || order.status === "cancelled") {
      return { success: false, error: "Cannot cancel this order" }
    }
    
    // Unlock margin
    if (order.margin > 0) {
      unlockBalance("perpetuals", "USDC", order.margin)
    }
    
    setOrders(prev => prev.map(o => 
      o.id === orderId ? { ...o, status: "cancelled" } : o
    ))
    
    return { success: true }
  }, [orders, unlockBalance])

// ─── Cancel All Orders ───

const cancelAllOrders = useCallback(async (symbol?: string): Promise<{ success: boolean; count: number }> => {
    let count = 0
    
    const ordersToCancel = orders.filter(o => 
      (o.status === "pending" || o.status === "open") &&
      (!symbol || o.symbol === symbol)
    )
    
    for (const order of ordersToCancel) {
      const result = await cancelOrder(order.id)
      if (result.success) count++
    }
    
    return { success: true, count }
  }, [orders, cancelOrder])

// ─── Close Position ───

const closePositionInternal = useCallback(async (positionId: string, size?: number): Promise<void> => {
    const position = positionsRef.current.find(p => p.id === positionId)
    if (!position) return
    
    const prices = pricesRef.current.get(position.symbol)
    const closePrice = prices?.mark || position.markPrice
    const closeSize = size ?? position.size
    
    // Calculate realized PnL
    const pnlMultiplier = position.side === "long" ? 1 : -1
    const realizedPnl = (closePrice - position.entryPrice) * closeSize * pnlMultiplier
    
    // Return margin + PnL
    const marginReturned = (position.marginUsed / position.size) * closeSize
    const totalReturn = marginReturned + realizedPnl
    
    if (totalReturn > 0) {
      addBalance("perpetuals", "USDC", totalReturn)
    } else {
      deductBalance("perpetuals", "USDC", Math.abs(totalReturn))
    }
    
    // Update or remove position
    if (closeSize >= position.size) {
      // Full close - cancel linked orders
      if (position.takeProfit?.orderId) {
        await cancelOrder(position.takeProfit.orderId)
      }
      if (position.stopLoss?.orderId) {
        await cancelOrder(position.stopLoss.orderId)
      }
      
      setPositions(prev => prev.filter(p => p.id !== positionId))
    } else {
      // Partial close
      setPositions(prev => prev.map(p => {
        if (p.id !== positionId) return p
        const newSize = p.size - closeSize
        const newMargin = p.marginUsed - marginReturned
        return {
          ...p,
          size: newSize,
          marginUsed: newMargin,
          realizedPnl: p.realizedPnl + realizedPnl,
        }
      }))
    }
    
    // Create trade record
    const trade: PerpTrade = {
      id: generateId("TRD"),
      orderId: "",
      symbol: position.symbol,
      side: position.side === "long" ? "short" : "long",
      price: closePrice,
      size: closeSize,
      fee: closeSize * closePrice * 0.0005,
      realizedPnl,
      timestamp: Date.now(),
    }
    setTradeHistory(prev => [trade, ...prev])
  }, [addBalance, deductBalance, cancelOrder])

const closePosition = useCallback(async (positionId: string, size?: number): Promise<{ success: boolean; error?: string }> => {
    const position = positions.find(p => p.id === positionId)
    if (!position) {
      return { success: false, error: "Position not found" }
    }
    
    await closePositionInternal(positionId, size)
    return { success: true }
  }, [positions, closePositionInternal])

// ─── Set Position TP/SL (Section 10) ───

const setPositionTPSL = useCallback(async (
    positionId: string, 
    tp?: number | null, 
    sl?: number | null
  ): Promise<{ success: boolean; error?: string }> => {
    const position = positions.find(p => p.id === positionId)
    if (!position) {
      return { success: false, error: "Position not found" }
    }
    
    // Cancel existing TP/SL orders
    if (position.takeProfit?.orderId && tp === null) {
      await cancelOrder(position.takeProfit.orderId)
    }
    if (position.stopLoss?.orderId && sl === null) {
      await cancelOrder(position.stopLoss.orderId)
    }
    
    // Create new TP/SL orders
    if (tp !== undefined && tp !== null) {
      createTPSLOrder(position, "take_profit", tp)
    }
    if (sl !== undefined && sl !== null) {
      createTPSLOrder(position, "stop_loss", sl)
    }
    
    return { success: true }
  }, [positions, cancelOrder, createTPSLOrder])

// ─── Add Margin to Position ───

const addMarginToPosition = useCallback(async (positionId: string, amount: number): Promise<{ success: boolean; error?: string }> => {
    const position = positions.find(p => p.id === positionId)
    if (!position) {
      return { success: false, error: "Position not found" }
    }
    
    const available = getAvailableBalance("perpetuals", "USDC")
    if (amount > available) {
      return { success: false, error: "Insufficient balance" }
    }
    
    deductBalance("perpetuals", "USDC", amount)
    
    setPositions(prev => prev.map(p => {
      if (p.id !== positionId) return p
      
      const newMargin = p.marginUsed + amount
      const newLiqPrice = calculateLiquidationPrice(
        p.entryPrice,
        p.leverage,
        p.side,
        p.marginMode,
        newMargin,
        accountMode === "portfolio" ? totalEquity : undefined
      )
      
      return {
        ...p,
        marginUsed: newMargin,
        liquidationPrice: newLiqPrice,
      }
    }))
    
    return { success: true }
  }, [positions, getAvailableBalance, deductBalance, accountMode, totalEquity])

// ─── Risk Engine (Section 13) ───

const getRiskMetrics = useCallback((positionId: string): RiskMetrics | null => {
    const position = positions.find(p => p.id === positionId)
    if (!position) return null
    
    const positionValue = position.size * position.markPrice
    const riskTier = getRiskTier(positionValue)
    const maintenanceMargin = positionValue * riskTier.maintenanceMarginRate
    const accountEquity = accountMode === "portfolio" ? totalEquity : position.marginUsed + position.unrealizedPnl
    const marginRatio = calculateMarginRatio(maintenanceMargin, accountEquity)
    
    return {
      positionValue,
      initialMargin: position.marginUsed,
      maintenanceMargin,
      unrealizedPnl: position.unrealizedPnl,
      marginRatio,
      riskLevel: getRiskLevel(marginRatio),
      liquidationDistance: position.side === "long"
        ? ((position.markPrice - position.liquidationPrice) / position.markPrice) * 100
        : ((position.liquidationPrice - position.markPrice) / position.markPrice) * 100,
      accountEquity,
    }
  }, [positions, accountMode, totalEquity])

const getAccountRiskMetrics = useCallback(() => {
    const totalUnrealizedPnl = positions.reduce((sum, p) => sum + p.unrealizedPnl, 0)
    const totalPositionValue = positions.reduce((sum, p) => sum + p.size * p.markPrice, 0)
    const totalMaintenanceMargin = positions.reduce((sum, p) => {
      const tier = getRiskTier(p.size * p.markPrice)
      return sum + p.size * p.markPrice * tier.maintenanceMarginRate
    }, 0)
    
    const accountEquity = totalEquity + totalUnrealizedPnl
    const marginRatio = calculateMarginRatio(totalMaintenanceMargin, accountEquity)
    
    return {
      marginRatio,
      riskLevel: getRiskLevel(marginRatio),
      totalUnrealizedPnl,
    }
  }, [positions, totalEquity])

const calculateOrderRiskPreview = useCallback((params: {
    symbol: string
    side: OrderSide
    size: number
    leverage: number
    entryPrice: number
  }) => {
    const positionValue = params.size * params.entryPrice
    const marginRequired = positionValue / params.leverage
    const riskTier = getRiskTier(positionValue)
    const settings = getSymbolSettings(params.symbol)
    
    const liquidationPrice = calculateLiquidationPrice(
      params.entryPrice,
      params.leverage,
      params.side,
      settings.marginMode,
      marginRequired,
      accountMode === "portfolio" ? totalEquity : undefined
    )
    
    return {
      liquidationPrice,
      marginRequired,
      riskTier,
    }
  }, [getSymbolSettings, accountMode, totalEquity])

// ─── Order Validation ───

const validateOrder = useCallback((params: {
    symbol: string
    side: OrderSide
    type: OrderType
    price?: number
    size: number
    triggerPrice?: number
  }): { valid: boolean; error?: string } => {
    if (params.size <= 0) {
      return { valid: false, error: "Size must be positive" }
    }
    
    if ((params.type === "limit" || params.type === "stop_limit") && !params.price) {
      return { valid: false, error: "Limit price required" }
    }
    
    if ((params.type === "stop_market" || params.type === "stop_limit" || params.type === "take_profit" || params.type === "stop_loss") && !params.triggerPrice) {
      return { valid: false, error: "Trigger price required" }
    }
    
    const prices = pricesRef.current.get(params.symbol)
    if (params.triggerPrice && prices) {
      if (params.type === "stop_market" || params.type === "stop_limit" || params.type === "stop_loss") {
        if (params.side === "long" && params.triggerPrice <= prices.mark) {
          return { valid: false, error: "Stop trigger price must be above current price for long" }
        }
        if (params.side === "short" && params.triggerPrice >= prices.mark) {
          return { valid: false, error: "Stop trigger price must be below current price for short" }
        }
      }
      
      if (params.type === "take_profit") {
        if (params.side === "long" && params.triggerPrice >= prices.mark) {
          return { valid: false, error: "Take profit price must be below entry for closing long" }
        }
        if (params.side === "short" && params.triggerPrice <= prices.mark) {
          return { valid: false, error: "Take profit price must be above entry for closing short" }
        }
      }
    }
    
    return { valid: true }
  }, [])

return (
    <PerpEngineContext.Provider
      value={{
        orders,
        positions,
        tradeHistory,
        liquidationHistory,
        getSymbolSettings,
        setMarginMode,
        setLeverage,
        accountMode,
        setAccountMode,
        placeOrder,
        cancelOrder,
        cancelAllOrders,
        closePosition,
        setPositionTPSL,
        addMarginToPosition,
        getRiskMetrics,
        getAccountRiskMetrics,
        calculateOrderRiskPreview,
        updatePrice,
        validateOrder,
      }}
    >
      {children}
    </PerpEngineContext.Provider>
  )
}

export function usePerpEngine() {
  const context = useContext(PerpEngineContext)
  if (!context) {
    throw new Error("usePerpEngine must be used within PerpEngineProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="lib/prediction-engine.tsx" isMerged="true"
"use client"

import React, { createContext, useContext, useState, useCallback, useEffect, ReactNode } from 'react'

// ============================================
// SECTION 17: PREDICTION MARKET ARCHITECTURE
// ============================================

export interface PredictionMarket {
  id: string
  question: string
  description: string
  category: 'crypto' | 'sports' | 'politics' | 'entertainment' | 'science' | 'custom'
  
  // Market mechanics
  status: MarketStatus
  createdAt: number
  expirationTime: number
  resolutionTime?: number
  resolvedOutcome?: OutcomeType
  resolutionSource: ResolutionSource
  
  // Pricing (LMSR or AMM based)
  yesPrice: number  // 0.00 - 1.00 (probability)
  noPrice: number   // 1 - yesPrice
  
  // Liquidity
  totalLiquidity: number
  yesShares: number
  noShares: number
  
  // Volume
  volume24h: number
  totalVolume: number
  
  // Fees
  tradingFee: number  // % (e.g., 0.02 = 2%)
  creatorFee: number  // % to market creator
  
  // Metadata
  creatorId: string
  imageUrl?: string
  tags: string[]
}

export interface PredictionPosition {
  id: string
  marketId: string
  userId: string
  
  // Shares held
  yesShares: number
  noShares: number
  
  // Cost basis
  avgYesCost: number
  avgNoCost: number
  totalInvested: number
  
  // P&L
  unrealizedPnl: number
  realizedPnl: number
  
  // History
  trades: PredictionTrade[]
  createdAt: number
  updatedAt: number
}

export interface PredictionTrade {
  id: string
  marketId: string
  userId: string
  
  // Trade details
  type: 'buy' | 'sell'
  outcome: OutcomeType
  shares: number
  pricePerShare: number
  totalCost: number
  fee: number
  
  // Market state at trade
  marketPriceAtTrade: number
  
  timestamp: number
  txHash?: string
}

export interface PredictionOrder {
  id: string
  marketId: string
  userId: string
  
  // Order details
  type: 'limit_buy' | 'limit_sell'
  outcome: OutcomeType
  shares: number
  limitPrice: number
  filledShares: number
  
  status: 'open' | 'filled' | 'partial' | 'cancelled' | 'expired'
  
  createdAt: number
  expiresAt?: number
}

// LMSR (Logarithmic Market Scoring Rule) Calculator
export class LMSRCalculator {
  private b: number  // Liquidity parameter
  
  constructor(liquidityParameter: number = 100) {
    this.b = liquidityParameter
  }
  
  // Cost function: C(q) = b * ln(e^(q_yes/b) + e^(q_no/b))
  cost(yesShares: number, noShares: number): number {
    const expYes = Math.exp(yesShares / this.b)
    const expNo = Math.exp(noShares / this.b)
    return this.b * Math.log(expYes + expNo)
  }
  
  // Price of YES share: ∂C/∂q_yes = e^(q_yes/b) / (e^(q_yes/b) + e^(q_no/b))
  yesPrice(yesShares: number, noShares: number): number {
    const expYes = Math.exp(yesShares / this.b)
    const expNo = Math.exp(noShares / this.b)
    return expYes / (expYes + expNo)
  }
  
  // Price of NO share
  noPrice(yesShares: number, noShares: number): number {
    return 1 - this.yesPrice(yesShares, noShares)
  }
  
  // Cost to buy shares
  costToBuy(
    currentYesShares: number, 
    currentNoShares: number, 
    outcome: OutcomeType, 
    sharesToBuy: number
  ): number {
    const currentCost = this.cost(currentYesShares, currentNoShares)
    
    let newCost: number
    if (outcome === 'YES') {
      newCost = this.cost(currentYesShares + sharesToBuy, currentNoShares)
    } else {
      newCost = this.cost(currentYesShares, currentNoShares + sharesToBuy)
    }
    
    return newCost - currentCost
  }
  
  // Shares received for a given amount
  sharesToReceive(
    currentYesShares: number,
    currentNoShares: number,
    outcome: OutcomeType,
    amountToSpend: number
  ): number {
    // Binary search for shares
    let low = 0
    let high = amountToSpend * 10  // Upper bound
    
    while (high - low > 0.0001) {
      const mid = (low + high) / 2
      const cost = this.costToBuy(currentYesShares, currentNoShares, outcome, mid)
      
      if (cost < amountToSpend) {
        low = mid
      } else {
        high = mid
      }
    }
    
    return low
  }
  
  // Proceeds from selling shares
  proceedsFromSell(
    currentYesShares: number,
    currentNoShares: number,
    outcome: OutcomeType,
    sharesToSell: number
  ): number {
    const currentCost = this.cost(currentYesShares, currentNoShares)
    
    let newCost: number
    if (outcome === 'YES') {
      newCost = this.cost(currentYesShares - sharesToSell, currentNoShares)
    } else {
      newCost = this.cost(currentYesShares, currentNoShares - sharesToSell)
    }
    
    return currentCost - newCost
  }
}

// Context State
interface PredictionEngineState {
  // Markets
  markets: Map<string, PredictionMarket>
  featuredMarkets: string[]
  trendingMarkets: string[]
  
  // User positions
  positions: Map<string, PredictionPosition>
  orders: Map<string, PredictionOrder>
  
  // Trade history
  tradeHistory: PredictionTrade[]
  
  // Loading states
  isLoading: boolean
  error: string | null
}

interface PredictionEngineActions {
  // Market operations
  fetchMarkets: (category?: string) => Promise<void>
  fetchMarket: (marketId: string) => Promise<PredictionMarket | null>
  createMarket: (params: CreateMarketParams) => Promise<string>
  
  // Trading operations
  buyShares: (params: BuySharesParams) => Promise<PredictionTrade>
  sellShares: (params: SellSharesParams) => Promise<PredictionTrade>
  placeLimitOrder: (params: LimitOrderParams) => Promise<PredictionOrder>
  cancelOrder: (orderId: string) => Promise<void>
  
  // Position operations
  fetchPositions: (userId: string) => Promise<void>
  getPosition: (marketId: string) => PredictionPosition | null
  closePosition: (marketId: string) => Promise<void>
  
  // Resolution
  resolveMarket: (marketId: string, outcome: OutcomeType) => Promise<void>
  claimWinnings: (marketId: string) => Promise<number>
  
  // Calculations
  calculateBuyCost: (marketId: string, outcome: OutcomeType, shares: number) => number
  calculateSellProceeds: (marketId: string, outcome: OutcomeType, shares: number) => number
  calculatePotentialPayout: (marketId: string, outcome: OutcomeType, shares: number) => number
  
  // Utils
  getMarketProbability: (marketId: string) => { yes: number; no: number }
  refreshMarketPrices: (marketId: string) => void
}

interface CreateMarketParams {
  question: string
  description: string
  category: PredictionMarket['category']
  expirationTime: number
  initialLiquidity: number
  initialYesPrice?: number  // Default 0.5
  resolutionSource: ResolutionSource
  tags?: string[]
}

interface BuySharesParams {
  marketId: string
  outcome: OutcomeType
  amount: number  // USDC amount to spend
  maxPrice?: number  // Max price willing to pay per share
  slippageTolerance?: number  // e.g., 0.01 = 1%
}

interface SellSharesParams {
  marketId: string
  outcome: OutcomeType
  shares: number
  minPrice?: number  // Min price willing to accept per share
}

interface LimitOrderParams {
  marketId: string
  type: 'limit_buy' | 'limit_sell'
  outcome: OutcomeType
  shares: number
  limitPrice: number
  expiresIn?: number  // ms from now
}

type PredictionEngineContextType = PredictionEngineState & PredictionEngineActions

const PredictionEngineContext = createContext<PredictionEngineContextType | null>(null)

// Mock data generator
function generateMockMarkets(): Map<string, PredictionMarket> {
  const markets = new Map<string, PredictionMarket>()
  
  const mockMarkets: Partial<PredictionMarket>[] = [
    {
      id: 'btc-100k-2025',
      question: 'Will Bitcoin reach $100,000 by end of 2025?',
      description: 'This market resolves YES if BTC/USD reaches or exceeds $100,000 on any major exchange before January 1, 2026.',
      category: 'crypto',
      yesPrice: 0.72,
      totalLiquidity: 500000,
      volume24h: 125000,
      totalVolume: 2500000,
    },
    {
      id: 'eth-merge-success',
      question: 'Will Ethereum maintain 99.9% uptime through 2025?',
      description: 'This market resolves YES if Ethereum mainnet maintains at least 99.9% uptime throughout 2025.',
      category: 'crypto',
      yesPrice: 0.85,
      totalLiquidity: 320000,
      volume24h: 45000,
      totalVolume: 890000,
    },
    {
      id: 'sol-flip-eth',
      question: 'Will Solana flip Ethereum in daily active users?',
      description: 'This market resolves YES if Solana has more daily active addresses than Ethereum for 7 consecutive days.',
      category: 'crypto',
      yesPrice: 0.23,
      totalLiquidity: 180000,
      volume24h: 67000,
      totalVolume: 450000,
    },
    {
      id: 'fed-rate-cut',
      question: 'Will the Fed cut rates in Q1 2026?',
      description: 'This market resolves YES if the Federal Reserve announces a rate cut in January, February, or March 2026.',
      category: 'politics',
      yesPrice: 0.45,
      totalLiquidity: 750000,
      volume24h: 230000,
      totalVolume: 4200000,
    },
    {
      id: 'superbowl-2026',
      question: 'Will the Kansas City Chiefs win Super Bowl 2026?',
      description: 'This market resolves YES if the Kansas City Chiefs win Super Bowl LX.',
      category: 'sports',
      yesPrice: 0.18,
      totalLiquidity: 420000,
      volume24h: 89000,
      totalVolume: 1800000,
    },
  ]
  
  mockMarkets.forEach(m => {
    const market: PredictionMarket = {
      id: m.id!,
      question: m.question!,
      description: m.description!,
      category: m.category!,
      status: 'active',
      createdAt: Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000,
      expirationTime: Date.now() + 90 * 24 * 60 * 60 * 1000,
      resolutionSource: 'oracle',
      yesPrice: m.yesPrice!,
      noPrice: 1 - m.yesPrice!,
      totalLiquidity: m.totalLiquidity!,
      yesShares: m.totalLiquidity! * m.yesPrice!,
      noShares: m.totalLiquidity! * (1 - m.yesPrice!),
      volume24h: m.volume24h!,
      totalVolume: m.totalVolume!,
      tradingFee: 0.02,
      creatorFee: 0.005,
      creatorId: 'system',
      tags: [m.category!],
    }
    markets.set(market.id, market)
  })
  
  return markets
}

// Provider
export function PredictionEngineProvider({ children }: { children: ReactNode }) {
  const [state, setState] = useState<PredictionEngineState>({
    markets: generateMockMarkets(),
    featuredMarkets: ['btc-100k-2025', 'fed-rate-cut'],
    trendingMarkets: ['btc-100k-2025', 'sol-flip-eth', 'superbowl-2026'],
    positions: new Map(),
    orders: new Map(),
    tradeHistory: [],
    isLoading: false,
    error: null,
  })
  
  const lmsr = new LMSRCalculator(100)
  
  // Fetch markets
  const fetchMarkets = useCallback(async (category?: string) => {
    setState(prev => ({ ...prev, isLoading: true }))
    
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 500))
    
    // In production, fetch from API
    setState(prev => ({ ...prev, isLoading: false }))
  }, [])
  
  // Fetch single market
  const fetchMarket = useCallback(async (marketId: string): Promise<PredictionMarket | null> => {
    return state.markets.get(marketId) || null
  }, [state.markets])
  
  // Create market
  const createMarket = useCallback(async (params: CreateMarketParams): Promise<string> => {
    const marketId = `market-${Date.now()}`
    const initialYesPrice = params.initialYesPrice || 0.5
    
    const newMarket: PredictionMarket = {
      id: marketId,
      question: params.question,
      description: params.description,
      category: params.category,
      status: 'active',
      createdAt: Date.now(),
      expirationTime: params.expirationTime,
      resolutionSource: params.resolutionSource,
      yesPrice: initialYesPrice,
      noPrice: 1 - initialYesPrice,
      totalLiquidity: params.initialLiquidity,
      yesShares: params.initialLiquidity * initialYesPrice,
      noShares: params.initialLiquidity * (1 - initialYesPrice),
      volume24h: 0,
      totalVolume: 0,
      tradingFee: 0.02,
      creatorFee: 0.005,
      creatorId: 'current-user',
      tags: params.tags || [],
    }
    
    setState(prev => {
      const newMarkets = new Map(prev.markets)
      newMarkets.set(marketId, newMarket)
      return { ...prev, markets: newMarkets }
    })
    
    return marketId
  }, [])
  
  // Buy shares
  const buyShares = useCallback(async (params: BuySharesParams): Promise<PredictionTrade> => {
    const market = state.markets.get(params.marketId)
    if (!market) throw new Error('Market not found')
    if (market.status !== 'active') throw new Error('Market is not active')
    
    // Calculate shares to receive
    const grossAmount = params.amount
    const fee = grossAmount * market.tradingFee
    const netAmount = grossAmount - fee
    
    const sharesToReceive = lmsr.sharesToReceive(
      market.yesShares,
      market.noShares,
      params.outcome,
      netAmount
    )
    
    const pricePerShare = netAmount / sharesToReceive
    
    // Check slippage
    if (params.maxPrice && pricePerShare > params.maxPrice) {
      throw new Error(`Price ${pricePerShare.toFixed(4)} exceeds max price ${params.maxPrice}`)
    }
    
    // Create trade
    const trade: PredictionTrade = {
      id: `trade-${Date.now()}`,
      marketId: params.marketId,
      userId: 'current-user',
      type: 'buy',
      outcome: params.outcome,
      shares: sharesToReceive,
      pricePerShare,
      totalCost: grossAmount,
      fee,
      marketPriceAtTrade: params.outcome === 'YES' ? market.yesPrice : market.noPrice,
      timestamp: Date.now(),
    }
    
    // Update market state
    setState(prev => {
      const newMarkets = new Map(prev.markets)
      const updatedMarket = { ...market }
      
      if (params.outcome === 'YES') {
        updatedMarket.yesShares += sharesToReceive
      } else {
        updatedMarket.noShares += sharesToReceive
      }
      
      // Recalculate prices
      updatedMarket.yesPrice = lmsr.yesPrice(updatedMarket.yesShares, updatedMarket.noShares)
      updatedMarket.noPrice = 1 - updatedMarket.yesPrice
      updatedMarket.volume24h += grossAmount
      updatedMarket.totalVolume += grossAmount
      
      newMarkets.set(params.marketId, updatedMarket)
      
      // Update position
      const newPositions = new Map(prev.positions)
      const positionKey = `${params.marketId}-current-user`
      const existingPosition = newPositions.get(positionKey)
      
      if (existingPosition) {
        const updated = { ...existingPosition }
        if (params.outcome === 'YES') {
          const totalCost = updated.avgYesCost * updated.yesShares + pricePerShare * sharesToReceive
          updated.yesShares += sharesToReceive
          updated.avgYesCost = totalCost / updated.yesShares
        } else {
          const totalCost = updated.avgNoCost * updated.noShares + pricePerShare * sharesToReceive
          updated.noShares += sharesToReceive
          updated.avgNoCost = totalCost / updated.noShares
        }
        updated.totalInvested += grossAmount
        updated.trades.push(trade)
        updated.updatedAt = Date.now()
        newPositions.set(positionKey, updated)
      } else {
        const newPosition: PredictionPosition = {
          id: positionKey,
          marketId: params.marketId,
          userId: 'current-user',
          yesShares: params.outcome === 'YES' ? sharesToReceive : 0,
          noShares: params.outcome === 'NO' ? sharesToReceive : 0,
          avgYesCost: params.outcome === 'YES' ? pricePerShare : 0,
          avgNoCost: params.outcome === 'NO' ? pricePerShare : 0,
          totalInvested: grossAmount,
          unrealizedPnl: 0,
          realizedPnl: 0,
          trades: [trade],
          createdAt: Date.now(),
          updatedAt: Date.now(),
        }
        newPositions.set(positionKey, newPosition)
      }
      
      return {
        ...prev,
        markets: newMarkets,
        positions: newPositions,
        tradeHistory: [trade, ...prev.tradeHistory],
      }
    })
    
    return trade
  }, [state.markets, lmsr])
  
  // Sell shares
  const sellShares = useCallback(async (params: SellSharesParams): Promise<PredictionTrade> => {
    const market = state.markets.get(params.marketId)
    if (!market) throw new Error('Market not found')
    if (market.status !== 'active') throw new Error('Market is not active')
    
    const positionKey = `${params.marketId}-current-user`
    const position = state.positions.get(positionKey)
    if (!position) throw new Error('No position found')
    
    const availableShares = params.outcome === 'YES' ? position.yesShares : position.noShares
    if (params.shares > availableShares) throw new Error('Insufficient shares')
    
    // Calculate proceeds
    const grossProceeds = lmsr.proceedsFromSell(
      market.yesShares,
      market.noShares,
      params.outcome,
      params.shares
    )
    const fee = grossProceeds * market.tradingFee
    const netProceeds = grossProceeds - fee
    const pricePerShare = netProceeds / params.shares
    
    // Check min price
    if (params.minPrice && pricePerShare < params.minPrice) {
      throw new Error(`Price ${pricePerShare.toFixed(4)} below min price ${params.minPrice}`)
    }
    
    // Create trade
    const trade: PredictionTrade = {
      id: `trade-${Date.now()}`,
      marketId: params.marketId,
      userId: 'current-user',
      type: 'sell',
      outcome: params.outcome,
      shares: params.shares,
      pricePerShare,
      totalCost: netProceeds,
      fee,
      marketPriceAtTrade: params.outcome === 'YES' ? market.yesPrice : market.noPrice,
      timestamp: Date.now(),
    }
    
    // Update state
    setState(prev => {
      const newMarkets = new Map(prev.markets)
      const updatedMarket = { ...market }
      
      if (params.outcome === 'YES') {
        updatedMarket.yesShares -= params.shares
      } else {
        updatedMarket.noShares -= params.shares
      }
      
      updatedMarket.yesPrice = lmsr.yesPrice(updatedMarket.yesShares, updatedMarket.noShares)
      updatedMarket.noPrice = 1 - updatedMarket.yesPrice
      updatedMarket.volume24h += grossProceeds
      updatedMarket.totalVolume += grossProceeds
      
      newMarkets.set(params.marketId, updatedMarket)
      
      // Update position
      const newPositions = new Map(prev.positions)
      const updated = { ...position }
      if (params.outcome === 'YES') {
        const costBasis = updated.avgYesCost * params.shares
        updated.realizedPnl += netProceeds - costBasis
        updated.yesShares -= params.shares
      } else {
        const costBasis = updated.avgNoCost * params.shares
        updated.realizedPnl += netProceeds - costBasis
        updated.noShares -= params.shares
      }
      updated.trades.push(trade)
      updated.updatedAt = Date.now()
      newPositions.set(positionKey, updated)
      
      return {
        ...prev,
        markets: newMarkets,
        positions: newPositions,
        tradeHistory: [trade, ...prev.tradeHistory],
      }
    })
    
    return trade
  }, [state.markets, state.positions, lmsr])
  
  // Place limit order
  const placeLimitOrder = useCallback(async (params: LimitOrderParams): Promise<PredictionOrder> => {
    const order: PredictionOrder = {
      id: `order-${Date.now()}`,
      marketId: params.marketId,
      userId: 'current-user',
      type: params.type,
      outcome: params.outcome,
      shares: params.shares,
      limitPrice: params.limitPrice,
      filledShares: 0,
      status: 'open',
      createdAt: Date.now(),
      expiresAt: params.expiresIn ? Date.now() + params.expiresIn : undefined,
    }
    
    setState(prev => {
      const newOrders = new Map(prev.orders)
      newOrders.set(order.id, order)
      return { ...prev, orders: newOrders }
    })
    
    return order
  }, [])
  
  // Cancel order
  const cancelOrder = useCallback(async (orderId: string) => {
    setState(prev => {
      const newOrders = new Map(prev.orders)
      const order = newOrders.get(orderId)
      if (order) {
        newOrders.set(orderId, { ...order, status: 'cancelled' })
      }
      return { ...prev, orders: newOrders }
    })
  }, [])
  
  // Fetch positions
  const fetchPositions = useCallback(async (userId: string) => {
    // In production, fetch from API
    setState(prev => ({ ...prev, isLoading: false }))
  }, [])
  
  // Get position
  const getPosition = useCallback((marketId: string): PredictionPosition | null => {
    return state.positions.get(`${marketId}-current-user`) || null
  }, [state.positions])
  
  // Close position
  const closePosition = useCallback(async (marketId: string) => {
    const position = state.positions.get(`${marketId}-current-user`)
    if (!position) return
    
    if (position.yesShares > 0) {
      await sellShares({
        marketId,
        outcome: 'YES',
        shares: position.yesShares,
      })
    }
    
    if (position.noShares > 0) {
      await sellShares({
        marketId,
        outcome: 'NO',
        shares: position.noShares,
      })
    }
  }, [state.positions, sellShares])
  
  // Resolve market
  const resolveMarket = useCallback(async (marketId: string, outcome: OutcomeType) => {
    setState(prev => {
      const newMarkets = new Map(prev.markets)
      const market = newMarkets.get(marketId)
      if (market) {
        newMarkets.set(marketId, {
          ...market,
          status: 'resolved',
          resolvedOutcome: outcome,
          resolutionTime: Date.now(),
          yesPrice: outcome === 'YES' ? 1 : 0,
          noPrice: outcome === 'NO' ? 1 : 0,
        })
      }
      return { ...prev, markets: newMarkets }
    })
  }, [])
  
  // Claim winnings
  const claimWinnings = useCallback(async (marketId: string): Promise<number> => {
    const market = state.markets.get(marketId)
    if (!market || market.status !== 'resolved') {
      throw new Error('Market not resolved')
    }
    
    const position = state.positions.get(`${marketId}-current-user`)
    if (!position) return 0
    
    const winningShares = market.resolvedOutcome === 'YES' 
      ? position.yesShares 
      : position.noShares
    
    // Each winning share pays out $1
    const payout = winningShares
    
    // Clear position
    setState(prev => {
      const newPositions = new Map(prev.positions)
      newPositions.delete(`${marketId}-current-user`)
      return { ...prev, positions: newPositions }
    })
    
    return payout
  }, [state.markets, state.positions])
  
  // Calculate buy cost
  const calculateBuyCost = useCallback((marketId: string, outcome: OutcomeType, shares: number): number => {
    const market = state.markets.get(marketId)
    if (!market) return 0
    
    const cost = lmsr.costToBuy(market.yesShares, market.noShares, outcome, shares)
    const fee = cost * market.tradingFee
    return cost + fee
  }, [state.markets, lmsr])
  
  // Calculate sell proceeds
  const calculateSellProceeds = useCallback((marketId: string, outcome: OutcomeType, shares: number): number => {
    const market = state.markets.get(marketId)
    if (!market) return 0
    
    const proceeds = lmsr.proceedsFromSell(market.yesShares, market.noShares, outcome, shares)
    const fee = proceeds * market.tradingFee
    return proceeds - fee
  }, [state.markets, lmsr])
  
  // Calculate potential payout
  const calculatePotentialPayout = useCallback((marketId: string, outcome: OutcomeType, shares: number): number => {
    // If market resolves to this outcome, each share pays $1
    return shares
  }, [])
  
  // Get market probability
  const getMarketProbability = useCallback((marketId: string): { yes: number; no: number } => {
    const market = state.markets.get(marketId)
    if (!market) return { yes: 0.5, no: 0.5 }
    return { yes: market.yesPrice, no: market.noPrice }
  }, [state.markets])
  
  // Refresh market prices
  const refreshMarketPrices = useCallback((marketId: string) => {
    setState(prev => {
      const newMarkets = new Map(prev.markets)
      const market = newMarkets.get(marketId)
      if (market) {
        const yesPrice = lmsr.yesPrice(market.yesShares, market.noShares)
        newMarkets.set(marketId, {
          ...market,
          yesPrice,
          noPrice: 1 - yesPrice,
        })
      }
      return { ...prev, markets: newMarkets }
    })
  }, [lmsr])
  
  // Update unrealized PnL periodically
  useEffect(() => {
    const interval = setInterval(() => {
      setState(prev => {
        const newPositions = new Map(prev.positions)
        
        newPositions.forEach((position, key) => {
          const market = prev.markets.get(position.marketId)
          if (!market) return
          
          const yesValue = position.yesShares * market.yesPrice
          const noValue = position.noShares * market.noPrice
          const yesCost = position.yesShares * position.avgYesCost
          const noCost = position.noShares * position.avgNoCost
          
          const unrealizedPnl = (yesValue - yesCost) + (noValue - noCost)
          
          if (unrealizedPnl !== position.unrealizedPnl) {
            newPositions.set(key, { ...position, unrealizedPnl })
          }
        })
        
        return { ...prev, positions: newPositions }
      })
    }, 1000)
    
    return () => clearInterval(interval)
  }, [])
  
  const contextValue: PredictionEngineContextType = {
    ...state,
    fetchMarkets,
    fetchMarket,
    createMarket,
    buyShares,
    sellShares,
    placeLimitOrder,
    cancelOrder,
    fetchPositions,
    getPosition,
    closePosition,
    resolveMarket,
    claimWinnings,
    calculateBuyCost,
    calculateSellProceeds,
    calculatePotentialPayout,
    getMarketProbability,
    refreshMarketPrices,
  }
  
  return (
    <PredictionEngineContext.Provider value={contextValue}>
      {children}
    </PredictionEngineContext.Provider>
  )
}

export function usePredictionEngine() {
  const context = useContext(PredictionEngineContext)
  if (!context) {
    throw new Error('usePredictionEngine must be used within PredictionEngineProvider')
  }
  return context
}

// Utility hooks
export function useMarket(marketId: string) {
  const { markets, refreshMarketPrices } = usePredictionEngine()
  const market = markets.get(marketId)
  
  useEffect(() => {
    if (marketId) {
      const interval = setInterval(() => refreshMarketPrices(marketId), 5000)
      return () => clearInterval(interval)
    }
  }, [marketId, refreshMarketPrices])
  
  return market
}

export function useMarketPosition(marketId: string) {
  const { getPosition } = usePredictionEngine()
  return getPosition(marketId)
}
[V0_FILE]typescript:file="lib/hooks/use-trading.ts" isMerged="true"
"use client"

import { useAuth, useUserProfile, useLoginHistory, useSecurity } from '@/lib/auth-context'
import { useAccount, useTransfer, useSpotAccount, usePerpAccount, usePredictionAccount } from '@/lib/account-context'
import { usePerpEngine, usePosition, useOrders, useRiskMetrics, useLiquidationPrice } from '@/lib/perp-engine'
import { usePredictionEngine, useMarket, useMarketPosition } from '@/lib/prediction-engine'

// ============================================
// UNIFIED TRADING HOOKS
// Re-exports all hooks from different engines
// for convenient single import
// ============================================

// Auth exports
export { useAuth, useUserProfile, useLoginHistory, useSecurity }

// Account exports  
export { useAccount, useTransfer, useSpotAccount, usePerpAccount, usePredictionAccount }

// Perp Engine exports
export { usePerpEngine, usePosition, useOrders, useRiskMetrics, useLiquidationPrice }

// Prediction Engine exports
export { usePredictionEngine, useMarket, useMarketPosition }

// Combined hook for common trading operations
export function useTrading() {
  const auth = useAuth()
  const account = useAccount()
  const perpEngine = usePerpEngine()
  const predictionEngine = usePredictionEngine()
  
  return {
    // Auth state
    isAuthenticated: auth.isAuthenticated,
    user: auth.user,
    
    // Account balances
    spotBalance: account.spotAccount.balance,
    perpBalance: account.perpAccount.balance,
    predictionBalance: account.predictionAccount.balance,
    totalEquity: account.totalEquity,
    
    // Perp trading
    perpPositions: perpEngine.positions,
    perpOrders: perpEngine.openOrders,
    placeOrder: perpEngine.placeOrder,
    closePosition: perpEngine.closePosition,
    
    // Prediction trading
    predictionMarkets: predictionEngine.markets,
    predictionPositions: predictionEngine.positions,
    buyShares: predictionEngine.buyShares,
    sellShares: predictionEngine.sellShares,
    
    // Transfer between accounts
    transfer: account.transfer,
    
    // Risk metrics
    marginRatio: perpEngine.riskMetrics.marginRatio,
    isAtRisk: perpEngine.riskMetrics.marginRatio > 0.8,
  }
}

// Hook for quick balance check across all accounts
export function useBalances() {
  const { spotAccount, perpAccount, predictionAccount, totalEquity } = useAccount()
  
  return {
    spot: {
      available: spotAccount.balance,
      locked: spotAccount.lockedBalance,
      total: spotAccount.balance + spotAccount.lockedBalance,
    },
    perp: {
      available: perpAccount.availableBalance,
      margin: perpAccount.usedMargin,
      unrealizedPnl: perpAccount.unrealizedPnl,
      total: perpAccount.balance + perpAccount.unrealizedPnl,
    },
    prediction: {
      available: predictionAccount.availableBalance,
      inPositions: predictionAccount.sharesValue,
      total: predictionAccount.balance + predictionAccount.sharesValue,
    },
    totalEquity,
  }
}

// Hook for position summary across all markets
export function usePositionsSummary() {
  const perpEngine = usePerpEngine()
  const predictionEngine = usePredictionEngine()
  
  const perpPositions = perpEngine.positions.filter(p => p.status === 'open')
  const predictionPositions = Array.from(predictionEngine.positions.values())
    .filter(p => p.yesShares > 0 || p.noShares > 0)
  
  const totalPerpPnl = perpPositions.reduce((sum, p) => sum + p.unrealizedPnl, 0)
  const totalPredictionPnl = predictionPositions.reduce((sum, p) => sum + p.unrealizedPnl, 0)
  
  return {
    perp: {
      count: perpPositions.length,
      totalPnl: totalPerpPnl,
      positions: perpPositions,
    },
    prediction: {
      count: predictionPositions.length,
      totalPnl: totalPredictionPnl,
      positions: predictionPositions,
    },
    totalOpenPositions: perpPositions.length + predictionPositions.length,
    totalUnrealizedPnl: totalPerpPnl + totalPredictionPnl,
  }
}

// Hook for order management
export function useOrderManagement() {
  const perpEngine = usePerpEngine()
  const predictionEngine = usePredictionEngine()
  
  return {
    // Perp orders
    perpOpenOrders: perpEngine.openOrders,
    perpOrderHistory: perpEngine.orderHistory,
    cancelPerpOrder: perpEngine.cancelOrder,
    modifyPerpOrder: perpEngine.modifyOrder,
    
    // Prediction orders
    predictionOrders: Array.from(predictionEngine.orders.values()),
    cancelPredictionOrder: predictionEngine.cancelOrder,
    
    // Total counts
    totalOpenOrders: perpEngine.openOrders.length + 
      Array.from(predictionEngine.orders.values()).filter(o => o.status === 'open').length,
  }
}

// Hook for risk monitoring
export function useRiskMonitoring() {
  const perpEngine = usePerpEngine()
  const { perpAccount } = useAccount()
  
  const { riskMetrics, riskWarnings, dismissRiskWarning } = perpEngine
  
  // Calculate risk level
  let riskLevel: 'safe' | 'warning' | 'danger' | 'liquidation' = 'safe'
  if (riskMetrics.marginRatio >= 1) {
    riskLevel = 'liquidation'
  } else if (riskMetrics.marginRatio >= 0.8) {
    riskLevel = 'danger'
  } else if (riskMetrics.marginRatio >= 0.5) {
    riskLevel = 'warning'
  }
  
  return {
    riskMetrics,
    riskLevel,
    riskWarnings,
    dismissRiskWarning,
    
    // Quick checks
    isLiquidatable: riskMetrics.marginRatio >= 1,
    needsMoreMargin: riskMetrics.marginRatio >= 0.8,
    
    // Account health
    accountHealth: Math.max(0, 100 - riskMetrics.marginRatio * 100),
    
    // Margin info
    totalMarginUsed: perpAccount.usedMargin,
    availableMargin: perpAccount.availableBalance,
    maintenanceMargin: riskMetrics.maintenanceMargin,
  }
}

// Hook for trade history
export function useTradeHistory() {
  const perpEngine = usePerpEngine()
  const predictionEngine = usePredictionEngine()
  
  // Combine and sort trade history
  const perpTrades = perpEngine.tradeHistory.map(t => ({
    ...t,
    source: 'perp' as const,
  }))
  
  const predictionTrades = predictionEngine.tradeHistory.map(t => ({
    ...t,
    source: 'prediction' as const,
  }))
  
  const allTrades = [...perpTrades, ...predictionTrades]
    .sort((a, b) => b.timestamp - a.timestamp)
  
  return {
    perpTrades,
    predictionTrades,
    allTrades,
    totalTrades: allTrades.length,
  }
}
[V0_FILE]typescriptreact:file="app/app/account/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { 
  User, 
  Shield, 
  Key, 
  Wallet, 
  Mail, 
  Fingerprint,
  History,
  AlertTriangle,
  Check,
  Copy,
  ExternalLink,
  ChevronRight,
  Plus,
  Trash2,
  RefreshCw,
  Lock,
  Unlock,
  ArrowUpDown,
  TrendingUp,
  TrendingDown,
  DollarSign
} from "lucide-react"
import { useAuth, useUserProfile, useLoginHistory, useSecurity } from "@/lib/auth-context"
import { useAccount } from "@/lib/account-context"
import { cn } from "@/lib/utils"

export default function AccountPage() {
  const auth = useAuth()
  const profile = useUserProfile()
  const loginHistory = useLoginHistory()
  const security = useSecurity()
  const account = useAccount()
  
  const [activeTab, setActiveTab] = useState("overview")
  const [showAddWallet, setShowAddWallet] = useState(false)
  const [showAddEmail, setShowAddEmail] = useState(false)
  
  // Format address for display
  const formatAddress = (address: string) => {
    return `${address.slice(0, 6)}...${address.slice(-4)}`
  }
  
  // Format date
  const formatDate = (timestamp: number) => {
    return new Date(timestamp).toLocaleString()
  }
  
  // Copy to clipboard
  const copyToClipboard = (text: string) => {
    navigator.clipboard.writeText(text)
  }

return (
    <div className="min-h-screen bg-[#0a0a0f] text-white p-6">
      <div className="max-w-6xl mx-auto space-y-6">
        {/* Header */}
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-2xl font-bold">Account Settings</h1>
            <p className="text-[#848e9c] text-sm mt-1">
              Manage your profile, security, and connected accounts
            </p>
          </div>
          <Badge variant="outline" className={cn(
            "px-3 py-1",
            security.securityScore >= 80 ? "border-green-500 text-green-500" :
            security.securityScore >= 50 ? "border-yellow-500 text-yellow-500" :
            "border-red-500 text-red-500"
          )}>
            Security Score: {security.securityScore}/100
          </Badge>
        </div>

<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
          <TabsList className="bg-[#1e2329] border-[#2b3139]">
            <TabsTrigger value="overview" className="data-[state=active]:bg-[#F7931A] data-[state=active]:text-black">
              Overview
            </TabsTrigger>
            <TabsTrigger value="security" className="data-[state=active]:bg-[#F7931A] data-[state=active]:text-black">
              Security
            </TabsTrigger>
            <TabsTrigger value="wallets" className="data-[state=active]:bg-[#F7931A] data-[state=active]:text-black">
              Wallets
            </TabsTrigger>
            <TabsTrigger value="accounts" className="data-[state=active]:bg-[#F7931A] data-[state=active]:text-black">
              Accounts
            </TabsTrigger>
            <TabsTrigger value="history" className="data-[state=active]:bg-[#F7931A] data-[state=active]:text-black">
              History
            </TabsTrigger>
          </TabsList>

{/* Overview Tab */}
          <TabsContent value="overview" className="space-y-6">
            {/* Profile Card */}
            <Card className="bg-[#0b0e11] border-[#1e2329]">
              <CardHeader>
                <CardTitle className="text-white flex items-center gap-2">
                  <User className="w-5 h-5 text-[#F7931A]" />
                  Profile
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center gap-4">
                  <div className="w-16 h-16 rounded-full bg-gradient-to-br from-[#F7931A] to-[#E8851A] flex items-center justify-center text-2xl font-bold text-black">
                    {profile.email?.charAt(0).toUpperCase() || "U"}
                  </div>
                  <div className="flex-1">
                    <p className="text-lg font-semibold text-white">
                      {profile.email || "Anonymous User"}
                    </p>
                    <p className="text-sm text-[#848e9c]">
                      User ID: {profile.userId.slice(0, 8)}...
                    </p>
                    <p className="text-xs text-[#5e6673]">
                      Joined {formatDate(profile.createdAt)}
                    </p>
                  </div>
                  <div className="text-right">
                    <Badge className={cn(
                      profile.kycStatus === 'verified' ? "bg-green-500/20 text-green-500" :
                      profile.kycStatus === 'pending' ? "bg-yellow-500/20 text-yellow-500" :
                      "bg-[#1e2329] text-[#848e9c]"
                    )}>
                      KYC: {profile.kycStatus}
                    </Badge>
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Quick Stats */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <Card className="bg-[#0b0e11] border-[#1e2329]">
                <CardContent className="pt-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm text-[#848e9c]">Total Equity</p>
                      <p className="text-2xl font-bold text-white">
                        ${account.totalEquity.toLocaleString(undefined, { minimumFractionDigits: 2 })}
                      </p>
                    </div>
                    <DollarSign className="w-8 h-8 text-[#F7931A]" />
                  </div>
                </CardContent>
              </Card>
              
              <Card className="bg-[#0b0e11] border-[#1e2329]">
                <CardContent className="pt-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm text-[#848e9c]">Connected Wallets</p>
                      <p className="text-2xl font-bold text-white">
                        {profile.walletAddresses.length}
                      </p>
                    </div>
                    <Wallet className="w-8 h-8 text-[#F7931A]" />
                  </div>
                </CardContent>
              </Card>
              
              <Card className="bg-[#0b0e11] border-[#1e2329]">
                <CardContent className="pt-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm text-[#848e9c]">Passkeys</p>
                      <p className="text-2xl font-bold text-white">
                        {profile.passkeys.length}
                      </p>
                    </div>
                    <Fingerprint className="w-8 h-8 text-[#F7931A]" />
                  </div>
                </CardContent>
              </Card>
            </div>

{/* Security Recommendations */}
            {security.recommendations.length > 0 && (
              <Card className="bg-[#0b0e11] border-[#1e2329] border-l-4 border-l-yellow-500">
                <CardHeader>
                  <CardTitle className="text-white flex items-center gap-2">
                    <AlertTriangle className="w-5 h-5 text-yellow-500" />
                    Security Recommendations
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2">
                    {security.recommendations.map((rec, i) => (
                      <li key={i} className="flex items-center gap-2 text-sm text-[#848e9c]">
                        <ChevronRight className="w-4 h-4 text-yellow-500" />
                        {rec}
                      </li>
                    ))}
                  </ul>
                </CardContent>
              </Card>
            )}
          </TabsContent>

{/* Security Tab */}
          <TabsContent value="security" className="space-y-6">
            {/* 2FA Status */}
            <Card className="bg-[#0b0e11] border-[#1e2329]">
              <CardHeader>
                <CardTitle className="text-white flex items-center gap-2">
                  <Shield className="w-5 h-5 text-[#F7931A]" />
                  Two-Factor Authentication
                </CardTitle>
                <CardDescription>
                  Protect your account with additional verification
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                {/* Email 2FA */}
                <div className="flex items-center justify-between p-4 bg-[#1e2329] rounded-lg">
                  <div className="flex items-center gap-3">
                    <Mail className="w-5 h-5 text-[#848e9c]" />
                    <div>
                      <p className="text-sm font-medium text-white">Email OTP</p>
                      <p className="text-xs text-[#5e6673]">
                        {security.twoFactorEnabled.email ? "Enabled" : "Not enabled"}
                      </p>
                    </div>
                  </div>
                  <Badge className={security.twoFactorEnabled.email ? "bg-green-500/20 text-green-500" : "bg-[#2b3139] text-[#848e9c]"}>
                    {security.twoFactorEnabled.email ? <Check className="w-3 h-3 mr-1" /> : null}
                    {security.twoFactorEnabled.email ? "Enabled" : "Disabled"}
                  </Badge>
                </div>
                
                {/* Passkey 2FA */}
                <div className="flex items-center justify-between p-4 bg-[#1e2329] rounded-lg">
                  <div className="flex items-center gap-3">
                    <Fingerprint className="w-5 h-5 text-[#848e9c]" />
                    <div>
                      <p className="text-sm font-medium text-white">Passkey (WebAuthn)</p>
                      <p className="text-xs text-[#5e6673]">
                        {security.twoFactorEnabled.passkey ? "Enabled" : "Not enabled"}
                      </p>
                    </div>
                  </div>
                  <Button
                    size="sm"
                    variant={security.twoFactorEnabled.passkey ? "outline" : "default"}
                    className={security.twoFactorEnabled.passkey ? "border-green-500 text-green-500" : "bg-[#F7931A] text-black"}
                  >
                    {security.twoFactorEnabled.passkey ? "Manage" : "Enable"}
                  </Button>
                </div>
              </CardContent>
            </Card>

{/* Active Sessions */}
            <Card className="bg-[#0b0e11] border-[#1e2329]">
              <CardHeader className="flex flex-row items-center justify-between">
                <div>
                  <CardTitle className="text-white flex items-center gap-2">
                    <Key className="w-5 h-5 text-[#F7931A]" />
                    Active Sessions
                  </CardTitle>
                  <CardDescription>
                    Manage devices where youre logged in
                  </CardDescription>
                </div>
                <Button variant="outline" size="sm" className="border-red-500 text-red-500 hover:bg-red-500/10">
                  Revoke All
                </Button>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  {security.activeSessions.map((session) => (
                    <div key={session.id} className="flex items-center justify-between p-3 bg-[#1e2329] rounded-lg">
                      <div className="flex items-center gap-3">
                        <div className={cn(
                          "w-2 h-2 rounded-full",
                          session.id === "current" ? "bg-green-500" : "bg-[#848e9c]"
                        )} />
                        <div>
                          <p className="text-sm font-medium text-white">{session.device}</p>
                          <p className="text-xs text-[#5e6673]">
                            {session.ip} • {session.location} • {formatDate(session.lastActive)}
                          </p>
                        </div>
                      </div>
                      {session.id !== "current" && (
                        <Button variant="ghost" size="sm" className="text-red-500 hover:bg-red-500/10">
                          Revoke
                        </Button>
                      )}
                      {session.id === "current" && (
                        <Badge className="bg-green-500/20 text-green-500">Current</Badge>
                      )}
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </TabsContent>

{/* Wallets Tab */}
          <TabsContent value="wallets" className="space-y-6">
            <Card className="bg-[#0b0e11] border-[#1e2329]">
              <CardHeader className="flex flex-row items-center justify-between">
                <div>
                  <CardTitle className="text-white flex items-center gap-2">
                    <Wallet className="w-5 h-5 text-[#F7931A]" />
                    Connected Wallets
                  </CardTitle>
                  <CardDescription>
                    Manage wallets linked to your account
                  </CardDescription>
                </div>
                <Button size="sm" className="bg-[#F7931A] text-black hover:bg-[#E8851A]">
                  <Plus className="w-4 h-4 mr-1" />
                  Add Wallet
                </Button>
              </CardHeader>
              <CardContent>
                {profile.walletAddresses.length === 0 ? (
                  <div className="text-center py-8">
                    <Wallet className="w-12 h-12 text-[#5e6673] mx-auto mb-3" />
                    <p className="text-[#848e9c]">No wallets connected</p>
                    <p className="text-xs text-[#5e6673]">Connect a wallet to deposit and trade</p>
                  </div>
                ) : (
                  <div className="space-y-3">
                    {profile.walletAddresses.map((wallet, i) => (
                      <div key={wallet} className="flex items-center justify-between p-4 bg-[#1e2329] rounded-lg">
                        <div className="flex items-center gap-3">
                          <div className="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center">
                            <Wallet className="w-5 h-5 text-white" />
                          </div>
                          <div>
                            <p className="text-sm font-mono text-white">{formatAddress(wallet)}</p>
                            <p className="text-xs text-[#5e6673]">
                              {i === 0 ? "Primary Wallet" : `Wallet ${i + 1}`}
                            </p>
                          </div>
                        </div>
                        <div className="flex items-center gap-2">
                          <Button variant="ghost" size="icon" onClick={() => copyToClipboard(wallet)}>
                            <Copy className="w-4 h-4 text-[#848e9c]" />
                          </Button>
                          <Button variant="ghost" size="icon">
                            <ExternalLink className="w-4 h-4 text-[#848e9c]" />
                          </Button>
                          {i > 0 && (
                            <Button variant="ghost" size="icon" className="text-red-500 hover:bg-red-500/10">
                              <Trash2 className="w-4 h-4" />
                            </Button>
                          )}
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </CardContent>
            </Card>

{/* Passkeys */}
            <Card className="bg-[#0b0e11] border-[#1e2329]">
              <CardHeader className="flex flex-row items-center justify-between">
                <div>
                  <CardTitle className="text-white flex items-center gap-2">
                    <Fingerprint className="w-5 h-5 text-[#F7931A]" />
                    Passkeys
                  </CardTitle>
                  <CardDescription>
                    Hardware keys and biometric authentication
                  </CardDescription>
                </div>
                <Button size="sm" className="bg-[#F7931A] text-black hover:bg-[#E8851A]">
                  <Plus className="w-4 h-4 mr-1" />
                  Add Passkey
                </Button>
              </CardHeader>
              <CardContent>
                {profile.passkeys.length === 0 ? (
                  <div className="text-center py-8">
                    <Fingerprint className="w-12 h-12 text-[#5e6673] mx-auto mb-3" />
                    <p className="text-[#848e9c]">No passkeys registered</p>
                    <p className="text-xs text-[#5e6673]">Add a passkey for passwordless login</p>
                  </div>
                ) : (
                  <div className="space-y-3">
                    {profile.passkeys.map((passkey) => (
                      <div key={passkey.id} className="flex items-center justify-between p-4 bg-[#1e2329] rounded-lg">
                        <div className="flex items-center gap-3">
                          <Fingerprint className="w-8 h-8 text-[#F7931A]" />
                          <div>
                            <p className="text-sm font-medium text-white">{passkey.name}</p>
                            <p className="text-xs text-[#5e6673]">
                              Added {formatDate(passkey.createdAt)} • Last used {formatDate(passkey.lastUsed)}
                            </p>
                          </div>
                        </div>
                        <Button variant="ghost" size="icon" className="text-red-500 hover:bg-red-500/10">
                          <Trash2 className="w-4 h-4" />
                        </Button>
                      </div>
                    ))}
                  </div>
                )}
              </CardContent>
            </Card>
          </TabsContent>

{/* Accounts Tab */}
          <TabsContent value="accounts" className="space-y-6">
            {/* Account Overview */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              {/* Spot Account */}
              <Card className="bg-[#0b0e11] border-[#1e2329]">
                <CardHeader>
                  <CardTitle className="text-white text-lg flex items-center gap-2">
                    <div className="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center">
                      <DollarSign className="w-4 h-4 text-blue-500" />
                    </div>
                    Spot Account
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-3">
                  <div className="flex justify-between text-sm">
                    <span className="text-[#848e9c]">Available</span>
                    <span className="text-white font-mono">
                      ${account.spotAccount.balance.toLocaleString(undefined, { minimumFractionDigits: 2 })}
                    </span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span className="text-[#848e9c]">Locked</span>
                    <span className="text-white font-mono">
                      ${account.spotAccount.lockedBalance.toLocaleString(undefined, { minimumFractionDigits: 2 })}
                    </span>
                  </div>
                  <div className="pt-2 border-t border-[#1e2329]">
                    <div className="flex justify-between text-sm font-medium">
                      <span className="text-[#848e9c]">Total</span>
                      <span className="text-white font-mono">
                        ${(account.spotAccount.balance + account.spotAccount.lockedBalance).toLocaleString(undefined, { minimumFractionDigits: 2 })}
                      </span>
                    </div>
                  </div>
                </CardContent>
              </Card>

{/* Perpetuals Account */}
              <Card className="bg-[#0b0e11] border-[#1e2329]">
                <CardHeader>
                  <CardTitle className="text-white text-lg flex items-center gap-2">
                    <div className="w-8 h-8 rounded-full bg-[#F7931A]/20 flex items-center justify-center">
                      <TrendingUp className="w-4 h-4 text-[#F7931A]" />
                    </div>
                    Perpetuals Account
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-3">
                  <div className="flex justify-between text-sm">
                    <span className="text-[#848e9c]">Available</span>
                    <span className="text-white font-mono">
                      ${account.perpAccount.availableBalance.toLocaleString(undefined, { minimumFractionDigits: 2 })}
                    </span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span className="text-[#848e9c]">Used Margin</span>
                    <span className="text-white font-mono">
                      ${account.perpAccount.usedMargin.toLocaleString(undefined, { minimumFractionDigits: 2 })}
                    </span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span className="text-[#848e9c]">Unrealized P&L</span>
                    <span className={cn(
                      "font-mono",
                      account.perpAccount.unrealizedPnl >= 0 ? "text-green-500" : "text-red-500"
                    )}>
                      {account.perpAccount.unrealizedPnl >= 0 ? "+" : ""}
                      ${account.perpAccount.unrealizedPnl.toLocaleString(undefined, { minimumFractionDigits: 2 })}
                    </span>
                  </div>
                  <div className="pt-2 border-t border-[#1e2329]">
                    <div className="flex justify-between text-sm font-medium">
                      <span className="text-[#848e9c]">Total Equity</span>
                      <span className="text-white font-mono">
                        ${(account.perpAccount.balance + account.perpAccount.unrealizedPnl).toLocaleString(undefined, { minimumFractionDigits: 2 })}
                      </span>
                    </div>
                  </div>
                </CardContent>
              </Card>

{/* Prediction Account */}
              <Card className="bg-[#0b0e11] border-[#1e2329]">
                <CardHeader>
                  <CardTitle className="text-white text-lg flex items-center gap-2">
                    <div className="w-8 h-8 rounded-full bg-purple-500/20 flex items-center justify-center">
                      <TrendingDown className="w-4 h-4 text-purple-500" />
                    </div>
                    Prediction Account
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-3">
                  <div className="flex justify-between text-sm">
                    <span className="text-[#848e9c]">Available</span>
                    <span className="text-white font-mono">
                      ${account.predictionAccount.availableBalance.toLocaleString(undefined, { minimumFractionDigits: 2 })}
                    </span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span className="text-[#848e9c]">In Positions</span>
                    <span className="text-white font-mono">
                      ${account.predictionAccount.sharesValue.toLocaleString(undefined, { minimumFractionDigits: 2 })}
                    </span>
                  </div>
                  <div className="pt-2 border-t border-[#1e2329]">
                    <div className="flex justify-between text-sm font-medium">
                      <span className="text-[#848e9c]">Total</span>
                      <span className="text-white font-mono">
                        ${(account.predictionAccount.balance + account.predictionAccount.sharesValue).toLocaleString(undefined, { minimumFractionDigits: 2 })}
                      </span>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>

{/* Transfer Section */}
            <Card className="bg-[#0b0e11] border-[#1e2329]">
              <CardHeader>
                <CardTitle className="text-white flex items-center gap-2">
                  <ArrowUpDown className="w-5 h-5 text-[#F7931A]" />
                  Internal Transfer
                </CardTitle>
                <CardDescription>
                  Move funds between your accounts instantly with zero fees
                </CardDescription>
              </CardHeader>
              <CardContent>
                <TransferForm />
              </CardContent>
            </Card>
          </TabsContent>

{/* History Tab */}
          <TabsContent value="history" className="space-y-6">
            <Card className="bg-[#0b0e11] border-[#1e2329]">
              <CardHeader>
                <CardTitle className="text-white flex items-center gap-2">
                  <History className="w-5 h-5 text-[#F7931A]" />
                  Login History
                </CardTitle>
                <CardDescription>
                  Recent account activity and login events
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  {loginHistory.map((entry, i) => (
                    <div key={i} className="flex items-center justify-between p-3 bg-[#1e2329] rounded-lg">
                      <div className="flex items-center gap-3">
                        <div className={cn(
                          "w-8 h-8 rounded-full flex items-center justify-center",
                          entry.success ? "bg-green-500/20" : "bg-red-500/20"
                        )}>
                          {entry.success ? (
                            <Check className="w-4 h-4 text-green-500" />
                          ) : (
                            <AlertTriangle className="w-4 h-4 text-red-500" />
                          )}
                        </div>
                        <div>
                          <p className="text-sm font-medium text-white">
                            {entry.method === 'email' ? 'Email Login' :
                             entry.method === 'wallet' ? 'Wallet Login' : 'Passkey Login'}
                          </p>
                          <p className="text-xs text-[#5e6673]">
                            {entry.ip} • {entry.device}
                          </p>
                        </div>
                      </div>
                      <div className="text-right">
                        <p className="text-xs text-[#848e9c]">{formatDate(entry.timestamp)}</p>
                        <Badge className={entry.success ? "bg-green-500/20 text-green-500" : "bg-red-500/20 text-red-500"}>
                          {entry.success ? "Success" : "Failed"}
                        </Badge>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}

// Transfer Form Component
function TransferForm() {
  const account = useAccount()
  const [fromAccount, setFromAccount] = useState<'spot' | 'perp' | 'prediction'>('spot')
  const [toAccount, setToAccount] = useState<'spot' | 'perp' | 'prediction'>('perp')
  const [amount, setAmount] = useState('')
  const [isTransferring, setIsTransferring] = useState(false)
  
  const accounts = {
    spot: { label: 'Spot Account', balance: account.spotAccount.balance },
    perp: { label: 'Perpetuals Account', balance: account.perpAccount.availableBalance },
    prediction: { label: 'Prediction Account', balance: account.predictionAccount.availableBalance },
  }
  
  const handleTransfer = async () => {
    if (!amount || Number(amount) <= 0) return
    
    setIsTransferring(true)
    try {
      await account.transfer(fromAccount, toAccount, Number(amount))
      setAmount('')
    } catch (error) {
      console.error('Transfer failed:', error)
    } finally {
      setIsTransferring(false)
    }
  }
  
  const handleSwap = () => {
    const temp = fromAccount
    setFromAccount(toAccount)
    setToAccount(temp)
  }
  
  const handleMax = () => {
    setAmount(accounts[fromAccount].balance.toString())
  }
  
  return (
    <div className="space-y-4">
      <div className="grid grid-cols-[1fr_auto_1fr] gap-4 items-center">
        {/* From Account */}
        <div className="space-y-2">
          <label className="text-xs text-[#848e9c]">From</label>
          <select
            value={fromAccount}
            onChange={(e) => setFromAccount(e.target.value as 'spot' | 'perp' | 'prediction')}
            className="w-full h-10 px-3 rounded-lg bg-[#1e2329] border border-[#2b3139] text-white text-sm"
          >
            {Object.entries(accounts).map(([key, { label }]) => (
              <option key={key} value={key} disabled={key === toAccount}>
                {label}
              </option>
            ))}
          </select>
          <p className="text-xs text-[#5e6673]">
            Available: ${accounts[fromAccount].balance.toLocaleString(undefined, { minimumFractionDigits: 2 })}
          </p>
        </div>
        
        {/* Swap Button */}
        <Button variant="ghost" size="icon" onClick={handleSwap} className="mt-4">
          <ArrowUpDown className="w-4 h-4 text-[#848e9c]" />
        </Button>
        
        {/* To Account */}
        <div className="space-y-2">
          <label className="text-xs text-[#848e9c]">To</label>
          <select
            value={toAccount}
            onChange={(e) => setToAccount(e.target.value as 'spot' | 'perp' | 'prediction')}
            className="w-full h-10 px-3 rounded-lg bg-[#1e2329] border border-[#2b3139] text-white text-sm"
          >
            {Object.entries(accounts).map(([key, { label }]) => (
              <option key={key} value={key} disabled={key === fromAccount}>
                {label}
              </option>
            ))}
          </select>
          <p className="text-xs text-[#5e6673]">
            Balance: ${accounts[toAccount].balance.toLocaleString(undefined, { minimumFractionDigits: 2 })}
          </p>
        </div>
      </div>
      
      {/* Amount Input */}
      <div className="space-y-2">
        <label className="text-xs text-[#848e9c]">Amount</label>
        <div className="flex gap-2">
          <div className="flex-1 relative">
            <Input
              type="number"
              placeholder="0.00"
              value={amount}
              onChange={(e) => setAmount(e.target.value)}
              className="bg-[#1e2329] border-[#2b3139] text-white pr-16"
            />
            <span className="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-[#848e9c]">
              USDC
            </span>
          </div>
          <Button variant="outline" size="sm" onClick={handleMax} className="border-[#2b3139] text-[#848e9c]">
            Max
          </Button>
        </div>
      </div>
      
      {/* Transfer Button */}
      <Button
        onClick={handleTransfer}
        disabled={isTransferring || !amount || Number(amount) <= 0 || Number(amount) > accounts[fromAccount].balance}
        className="w-full bg-[#F7931A] text-black hover:bg-[#E8851A] disabled:opacity-50"
      >
        {isTransferring ? (
          <RefreshCw className="w-4 h-4 animate-spin mr-2" />
        ) : (
          <ArrowUpDown className="w-4 h-4 mr-2" />
        )}
        Transfer
      </Button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/matching-engine.tsx" isMerged="true"
"use client"

import { createContext, useContext, useState, useCallback, useRef, useEffect, type ReactNode } from "react"

// ═══════════════════════════════════════════════════════════════════════════════
// SECTION 1 — CORE TYPES
// ═══════════════════════════════════════════════════════════════════════════════

export interface Order {
  orderId: string
  userId: string
  symbol: string
  side: OrderSide
  orderType: OrderType
  price: number | null // null for market orders
  size: number
  filledSize: number
  remainingSize: number
  triggerPrice: number | null
  triggerType: TriggerType
  reduceOnly: boolean
  postOnly: boolean
  timeInForce: "GTC" | "IOC" | "FOK"
  status: OrderStatus
  createdAt: number
  updatedAt: number
  // TWAP specific
  twapDuration?: number
  twapInterval?: number
  twapExecutedSlices?: number
  twapTotalSlices?: number
  // Trailing Stop specific
  trailingPercent?: number
  trailingActivationPrice?: number
  // TP/SL specific
  takeProfitPrice?: number
  stopLossPrice?: number
}

export interface Trade {
  tradeId: string
  symbol: string
  price: number
  size: number
  takerOrderId: string
  makerOrderId: string
  takerUserId: string
  makerUserId: string
  takerSide: OrderSide
  fee: number
  timestamp: number
}

export interface Position {
  positionId: string
  userId: string
  symbol: string
  side: "long" | "short"
  size: number
  entryPrice: number
  markPrice: number
  liquidationPrice: number
  margin: number
  leverage: number
  unrealizedPnl: number
  realizedPnl: number
  takeProfitPrice: number | null
  stopLossPrice: number | null
  createdAt: number
  updatedAt: number
}

export interface OrderBookLevel {
  price: number
  size: number
  orderCount: number
}

export interface OrderBook {
  symbol: string
  bids: OrderBookLevel[] // Sorted by price descending (highest first)
  asks: OrderBookLevel[] // Sorted by price ascending (lowest first)
  lastUpdateId: number
  timestamp: number
}

// ═══════════════════════════════════════════════════════════════════════════════
// SECTION 2 — EVENT SYSTEM (Section 18 of spec)
// ═══════════════════════════════════════════════════════════════════════════════

export interface EngineEvent {
  type: EngineEventType
  timestamp: number
  data: any
}

type EventCallback = (event: EngineEvent) => void

// ═══════════════════════════════════════════════════════════════════════════════
// SECTION 3 — ORDER BOOK STRUCTURE (Section 4 of spec)
// Price-Time Priority Matching
// ═══════════════════════════════════════════════════════════════════════════════

interface OrderBookEntry {
  order: Order
  next: OrderBookEntry | null
}

interface PriceLevel {
  price: number
  head: OrderBookEntry | null
  tail: OrderBookEntry | null
  totalSize: number
  orderCount: number
}

class OrderBookManager {
  private bids: Map<number, PriceLevel> = new Map() // Buy orders
  private asks: Map<number, PriceLevel> = new Map() // Sell orders
  private orderIndex: Map<string, { side: OrderSide; price: number; entry: OrderBookEntry }> = new Map()
  
  // Get best bid (highest buy price)
  getBestBid(): number | null {
    if (this.bids.size === 0) return null
    return Math.max(...this.bids.keys())
  }
  
  // Get best ask (lowest sell price)
  getBestAsk(): number | null {
    if (this.asks.size === 0) return null
    return Math.min(...this.asks.keys())
  }
  
  // Add order to book
  addOrder(order: Order): void {
    if (order.price === null) return // Market orders don't enter the book
    
    const book = order.side === "buy" ? this.bids : this.asks
    let level = book.get(order.price)
    
    if (!level) {
      level = {
        price: order.price,
        head: null,
        tail: null,
        totalSize: 0,
        orderCount: 0,
      }
      book.set(order.price, level)
    }
    
    const entry: OrderBookEntry = { order, next: null }
    
    if (level.tail) {
      level.tail.next = entry
    } else {
      level.head = entry
    }
    level.tail = entry
    level.totalSize += order.remainingSize
    level.orderCount++
    
    this.orderIndex.set(order.orderId, { side: order.side, price: order.price, entry })
  }
  
  // Remove order from book
  removeOrder(orderId: string): Order | null {
    const indexEntry = this.orderIndex.get(orderId)
    if (!indexEntry) return null
    
    const { side, price, entry } = indexEntry
    const book = side === "buy" ? this.bids : this.asks
    const level = book.get(price)
    
    if (!level) return null
    
    // Find and remove the entry
    let prev: OrderBookEntry | null = null
    let current = level.head
    
    while (current) {
      if (current.order.orderId === orderId) {
        if (prev) {
          prev.next = current.next
        } else {
          level.head = current.next
        }
        
        if (current === level.tail) {
          level.tail = prev
        }
        
        level.totalSize -= current.order.remainingSize
        level.orderCount--
        
        // Remove empty price level
        if (level.orderCount === 0) {
          book.delete(price)
        }
        
        this.orderIndex.delete(orderId)
        return current.order
      }
      prev = current
      current = current.next
    }
    
    return null
  }
  
  // Update order size (after partial fill)
  updateOrderSize(orderId: string, newRemainingSize: number): void {
    const indexEntry = this.orderIndex.get(orderId)
    if (!indexEntry) return
    
    const { side, price, entry } = indexEntry
    const book = side === "buy" ? this.bids : this.asks
    const level = book.get(price)
    
    if (!level) return
    
    const sizeDiff = entry.order.remainingSize - newRemainingSize
    entry.order.remainingSize = newRemainingSize
    entry.order.filledSize += sizeDiff
    level.totalSize -= sizeDiff
    
    if (newRemainingSize <= 0) {
      this.removeOrder(orderId)
    }
  }
  
  // Get orders at a price level (for matching)
  getOrdersAtPrice(side: OrderSide, price: number): Order[] {
    const book = side === "buy" ? this.bids : this.asks
    const level = book.get(price)
    if (!level) return []
    
    const orders: Order[] = []
    let current = level.head
    while (current) {
      orders.push(current.order)
      current = current.next
    }
    return orders
  }
  
  // Get order book snapshot
  getSnapshot(depth: number = 20): { bids: OrderBookLevel[]; asks: OrderBookLevel[] } {
    const bids: OrderBookLevel[] = []
    const asks: OrderBookLevel[] = []
    
    // Sort bid prices descending
    const bidPrices = [...this.bids.keys()].sort((a, b) => b - a).slice(0, depth)
    for (const price of bidPrices) {
      const level = this.bids.get(price)!
      bids.push({ price, size: level.totalSize, orderCount: level.orderCount })
    }
    
    // Sort ask prices ascending
    const askPrices = [...this.asks.keys()].sort((a, b) => a - b).slice(0, depth)
    for (const price of askPrices) {
      const level = this.asks.get(price)!
      asks.push({ price, size: level.totalSize, orderCount: level.orderCount })
    }
    
    return { bids, asks }
  }
  
  // Get total liquidity at price or better
  getLiquidityAtOrBetter(side: OrderSide, price: number): number {
    const book = side === "buy" ? this.asks : this.bids // Opposite side for taking liquidity
    let total = 0
    
    for (const [levelPrice, level] of book) {
      if (side === "buy" && levelPrice <= price) {
        total += level.totalSize
      } else if (side === "sell" && levelPrice >= price) {
        total += level.totalSize
      }
    }
    
    return total
  }
}

// ═══════════════════════════════════════════════════════════════════════════════
// SECTION 4 — VALIDATION (Section 3 of spec)
// ═══════════════════════════════════════════════════════════════════════════════

interface ValidationResult {
  valid: boolean
  error?: string
}

interface UserBalance {
  available: number
  locked: number
  total: number
}

interface ValidationContext {
  userBalance: UserBalance
  position: Position | null
  maintenanceMarginRate: number
  maxPositionSize: number
  minOrderSize: number
  maxLeverage: number
}

function validateOrder(order: Partial<Order>, context: ValidationContext): ValidationResult {
  // Check size
  if (!order.size || order.size <= 0) {
    return { valid: false, error: "Invalid order size" }
  }
  
  if (order.size < context.minOrderSize) {
    return { valid: false, error: `Order size must be at least ${context.minOrderSize}` }
  }
  
  // Check price for limit orders
  if (order.orderType === "limit" || order.orderType === "stop_limit") {
    if (!order.price || order.price <= 0) {
      return { valid: false, error: "Invalid price for limit order" }
    }
  }
  
  // Check trigger price for stop orders
  if (order.orderType === "stop_market" || order.orderType === "stop_limit" || 
      order.orderType === "take_profit" || order.orderType === "stop_loss") {
    if (!order.triggerPrice || order.triggerPrice <= 0) {
      return { valid: false, error: "Invalid trigger price for stop order" }
    }
  }
  
  // Check reduce-only rules (Section 10)
  if (order.reduceOnly) {
    if (!context.position) {
      return { valid: false, error: "Cannot place reduce-only order without existing position" }
    }
    
    // Reduce-only must be opposite side of position
    const positionSide = context.position.side
    if ((positionSide === "long" && order.side === "buy") || 
        (positionSide === "short" && order.side === "sell")) {
      return { valid: false, error: "Reduce-only order must reduce position, not increase" }
    }
  }
  
  // Check margin requirement
  if (!order.reduceOnly) {
    const requiredMargin = calculateRequiredMargin(order.size!, order.price || 0, context.maxLeverage)
    if (requiredMargin > context.userBalance.available) {
      return { valid: false, error: "Insufficient margin" }
    }
  }
  
  // Check position limits
  const newPositionSize = context.position 
    ? context.position.size + (order.side === (context.position.side === "long" ? "buy" : "sell") ? order.size! : -order.size!)
    : order.size!
  
  if (Math.abs(newPositionSize) > context.maxPositionSize) {
    return { valid: false, error: `Position size would exceed maximum of ${context.maxPositionSize}` }
  }
  
  return { valid: true }
}

function calculateRequiredMargin(size: number, price: number, leverage: number): number {
  return (size * price) / leverage
}

// ═══════════════════════════════════════════════════════════════════════════════
// SECTION 5 — MATCHING ENGINE CONTEXT
// ═══════════════════════════════════════════════════════════════════════════════

interface MatchingEngineContextType {
  // Order Book
  orderBook: OrderBook
  getOrderBookSnapshot: (symbol: string, depth?: number) => { bids: OrderBookLevel[]; asks: OrderBookLevel[] }
  
  // Orders
  orders: Order[]
  openOrders: Order[]
  placeOrder: (params: PlaceOrderParams) => Promise<{ success: boolean; order?: Order; error?: string }>
  cancelOrder: (orderId: string) => Promise<{ success: boolean; error?: string }>
  cancelAllOrders: (symbol?: string) => Promise<{ success: boolean; cancelledCount: number }>
  getOrderById: (orderId: string) => Order | undefined
  
  // Positions
  positions: Position[]
  getPositionBySymbol: (symbol: string) => Position | undefined
  closePosition: (symbol: string, size?: number) => Promise<{ success: boolean; error?: string }>
  updatePositionTPSL: (symbol: string, tp?: number, sl?: number) => void
  
  // Trades
  trades: Trade[]
  getRecentTrades: (symbol: string, limit?: number) => Trade[]
  
  // Market Data
  markPrice: number
  lastPrice: number
  indexPrice: number
  
  // Events
  subscribe: (callback: EventCallback) => () => void
  
  // User Balance
  userBalance: UserBalance
  
  // Trigger Orders
  triggerOrders: Order[]
}

interface PlaceOrderParams {
  symbol: string
  side: OrderSide
  orderType: OrderType
  size: number
  price?: number
  triggerPrice?: number
  triggerType?: TriggerType
  reduceOnly?: boolean
  postOnly?: boolean
  timeInForce?: "GTC" | "IOC" | "FOK"
  takeProfitPrice?: number
  stopLossPrice?: number
  // TWAP specific
  twapDuration?: number
  twapInterval?: number
  // Trailing Stop specific
  trailingPercent?: number
  trailingActivationPrice?: number
}

const MatchingEngineContext = createContext<MatchingEngineContextType | null>(null)

// ═══════════════════════════════════════════════════════════════════════════════
// SECTION 6 — MATCHING ENGINE PROVIDER
// ═══════════════════════════════════════════════════════════════════════════════

const generateId = () => `${Date.now().toString(36)}-${Math.random().toString(36).substring(2, 9)}`

export function MatchingEngineProvider({ children }: { children: ReactNode }) {
  // State
  const [orders, setOrders] = useState<Order[]>([])
  const [positions, setPositions] = useState<Position[]>([])
  const [trades, setTrades] = useState<Trade[]>([])
  const [triggerOrders, setTriggerOrders] = useState<Order[]>([])
  const [userBalance, setUserBalance] = useState<UserBalance>({ available: 10000, locked: 0, total: 10000 })
  
  // Market data
  const [markPrice, setMarkPrice] = useState(65432.10)
  const [lastPrice, setLastPrice] = useState(65430.50)
  const [indexPrice, setIndexPrice] = useState(65431.00)
  
  // Order book manager
  const orderBookManagerRef = useRef<Map<string, OrderBookManager>>(new Map())
  const [orderBook, setOrderBook] = useState<OrderBook>({
    symbol: "BTC-PERP",
    bids: [],
    asks: [],
    lastUpdateId: 0,
    timestamp: Date.now(),
  })
  
  // Event subscribers
  const subscribersRef = useRef<Set<EventCallback>>(new Set())
  
  // Get or create order book manager for symbol
  const getOrderBookManager = useCallback((symbol: string) => {
    if (!orderBookManagerRef.current.has(symbol)) {
      orderBookManagerRef.current.set(symbol, new OrderBookManager())
    }
    return orderBookManagerRef.current.get(symbol)!
  }, [])
  
  // Emit event to all subscribers
  const emitEvent = useCallback((type: EngineEventType, data: any) => {
    const event: EngineEvent = { type, timestamp: Date.now(), data }
    subscribersRef.current.forEach(callback => callback(event))
  }, [])
  
  // Subscribe to events
  const subscribe = useCallback((callback: EventCallback) => {
    subscribersRef.current.add(callback)
    return () => {
      subscribersRef.current.delete(callback)
    }
  }, [])
  
  // ─── Order Book Operations ───
  
  const getOrderBookSnapshot = useCallback((symbol: string, depth: number = 20) => {
    const manager = getOrderBookManager(symbol)
    return manager.getSnapshot(depth)
  }, [getOrderBookManager])
  
  const updateOrderBookState = useCallback((symbol: string) => {
    const manager = getOrderBookManager(symbol)
    const snapshot = manager.getSnapshot(20)
    
    setOrderBook(prev => ({
      ...prev,
      symbol,
      bids: snapshot.bids,
      asks: snapshot.asks,
      lastUpdateId: prev.lastUpdateId + 1,
      timestamp: Date.now(),
    }))
    
    emitEvent("orderbook_updated", { symbol, ...snapshot })
  }, [getOrderBookManager, emitEvent])
  
  // ─── Order Matching (Section 5-7 of spec) ───
  
  const matchOrder = useCallback((order: Order): { trades: Trade[]; remainingSize: number } => {
    const manager = getOrderBookManager(order.symbol)
    const matchedTrades: Trade[] = []
    let remainingSize = order.size
    
    // Market orders or crossing limit orders
    const isBuy = order.side === "buy"
    
    while (remainingSize > 0) {
      const bestPrice = isBuy ? manager.getBestAsk() : manager.getBestBid()
      if (bestPrice === null) break
      
      // For limit orders, check if price crosses
      if (order.orderType === "limit" && order.price !== null) {
        if ((isBuy && bestPrice > order.price) || (!isBuy && bestPrice < order.price)) {
          break // Price doesn't cross, stop matching
        }
      }
      
      // Get orders at this price level
      const oppositeBook = isBuy ? "sell" : "buy"
      const ordersAtPrice = manager.getOrdersAtPrice(oppositeBook as OrderSide, bestPrice)
      
      for (const makerOrder of ordersAtPrice) {
        if (remainingSize <= 0) break
        
        const fillSize = Math.min(remainingSize, makerOrder.remainingSize)
        
        // Create trade
        const trade: Trade = {
          tradeId: generateId(),
          symbol: order.symbol,
          price: bestPrice,
          size: fillSize,
          takerOrderId: order.orderId,
          makerOrderId: makerOrder.orderId,
          takerUserId: order.userId,
          makerUserId: makerOrder.userId,
          takerSide: order.side,
          fee: fillSize * bestPrice * 0.0004, // 0.04% taker fee
          timestamp: Date.now(),
        }
        
        matchedTrades.push(trade)
        remainingSize -= fillSize
        
        // Update maker order
        manager.updateOrderSize(makerOrder.orderId, makerOrder.remainingSize - fillSize)
        
        // Update maker order status
        setOrders(prev => prev.map(o => {
          if (o.orderId === makerOrder.orderId) {
            const newFilled = o.filledSize + fillSize
            const newRemaining = o.remainingSize - fillSize
            return {
              ...o,
              filledSize: newFilled,
              remainingSize: newRemaining,
              status: newRemaining <= 0 ? "filled" : "partially_filled",
              updatedAt: Date.now(),
            }
          }
          return o
        }))
        
        // Update last price
        setLastPrice(bestPrice)
      }
    }
    
    return { trades: matchedTrades, remainingSize }
  }, [getOrderBookManager])
  
  // ─── Position Updates (Section 8-9 of spec) ───
  
  const updatePosition = useCallback((trade: Trade, order: Order) => {
    const isLong = order.side === "buy"
    
    setPositions(prev => {
      const existingIdx = prev.findIndex(p => p.symbol === trade.symbol && p.userId === order.userId)
      
      if (existingIdx === -1) {
        // Create new position
        const newPosition: Position = {
          positionId: generateId(),
          userId: order.userId,
          symbol: trade.symbol,
          side: isLong ? "long" : "short",
          size: trade.size,
          entryPrice: trade.price,
          markPrice: markPrice,
          liquidationPrice: calculateLiquidationPrice(trade.price, 10, isLong ? "long" : "short"),
          margin: (trade.size * trade.price) / 10, // 10x default leverage
          leverage: 10,
          unrealizedPnl: 0,
          realizedPnl: 0,
          takeProfitPrice: order.takeProfitPrice || null,
          stopLossPrice: order.stopLossPrice || null,
          createdAt: Date.now(),
          updatedAt: Date.now(),
        }
        
        emitEvent("position_opened", newPosition)
        return [...prev, newPosition]
      }
      
      const existing = prev[existingIdx]
      const sameDirection = (existing.side === "long" && isLong) || (existing.side === "short" && !isLong)
      
      if (sameDirection) {
        // Increase position - calculate new average entry price (Section 9)
        const newSize = existing.size + trade.size
        const newEntryPrice = ((existing.size * existing.entryPrice) + (trade.size * trade.price)) / newSize
        
        const updated: Position = {
          ...existing,
          size: newSize,
          entryPrice: newEntryPrice,
          liquidationPrice: calculateLiquidationPrice(newEntryPrice, existing.leverage, existing.side),
          margin: (newSize * newEntryPrice) / existing.leverage,
          updatedAt: Date.now(),
        }
        
        emitEvent("position_updated", updated)
        return [...prev.slice(0, existingIdx), updated, ...prev.slice(existingIdx + 1)]
      } else {
        // Reduce or flip position
        const newSize = existing.size - trade.size
        
        // Calculate realized PnL
        const pnlPerUnit = existing.side === "long" 
          ? trade.price - existing.entryPrice 
          : existing.entryPrice - trade.price
        const realizedPnl = Math.min(existing.size, trade.size) * pnlPerUnit
        
        if (newSize <= 0) {
          // Position closed
          if (newSize < 0) {
            // Position flipped
            const flippedPosition: Position = {
              positionId: generateId(),
              userId: order.userId,
              symbol: trade.symbol,
              side: isLong ? "long" : "short",
              size: Math.abs(newSize),
              entryPrice: trade.price,
              markPrice: markPrice,
              liquidationPrice: calculateLiquidationPrice(trade.price, 10, isLong ? "long" : "short"),
              margin: (Math.abs(newSize) * trade.price) / 10,
              leverage: 10,
              unrealizedPnl: 0,
              realizedPnl: 0,
              takeProfitPrice: null,
              stopLossPrice: null,
              createdAt: Date.now(),
              updatedAt: Date.now(),
            }
            
            emitEvent("position_closed", { ...existing, realizedPnl: existing.realizedPnl + realizedPnl })
            emitEvent("position_opened", flippedPosition)
            return [...prev.slice(0, existingIdx), flippedPosition, ...prev.slice(existingIdx + 1)]
          } else {
            // Position fully closed
            emitEvent("position_closed", { ...existing, realizedPnl: existing.realizedPnl + realizedPnl })
            return [...prev.slice(0, existingIdx), ...prev.slice(existingIdx + 1)]
          }
        } else {
          // Position reduced
          const updated: Position = {
            ...existing,
            size: newSize,
            realizedPnl: existing.realizedPnl + realizedPnl,
            updatedAt: Date.now(),
          }
          
          emitEvent("position_updated", updated)
          return [...prev.slice(0, existingIdx), updated, ...prev.slice(existingIdx + 1)]
        }
      }
    })
  }, [markPrice, emitEvent])
  
  // ─── Place Order (Main entry point) ───
  
  const placeOrder = useCallback(async (params: PlaceOrderParams): Promise<{ success: boolean; order?: Order; error?: string }> => {
    const userId = "current_user" // Would come from auth context
    
    // Create order object
    const order: Order = {
      orderId: generateId(),
      userId,
      symbol: params.symbol,
      side: params.side,
      orderType: params.orderType,
      price: params.price || null,
      size: params.size,
      filledSize: 0,
      remainingSize: params.size,
      triggerPrice: params.triggerPrice || null,
      triggerType: params.triggerType || "mark_price",
      reduceOnly: params.reduceOnly || false,
      postOnly: params.postOnly || false,
      timeInForce: params.timeInForce || "GTC",
      status: "pending",
      createdAt: Date.now(),
      updatedAt: Date.now(),
      takeProfitPrice: params.takeProfitPrice,
      stopLossPrice: params.stopLossPrice,
      twapDuration: params.twapDuration,
      twapInterval: params.twapInterval,
      trailingPercent: params.trailingPercent,
      trailingActivationPrice: params.trailingActivationPrice,
    }
    
    // Validate order
    const position = positions.find(p => p.symbol === params.symbol && p.userId === userId)
    const validationResult = validateOrder(order, {
      userBalance,
      position: position || null,
      maintenanceMarginRate: 0.005,
      maxPositionSize: 1000,
      minOrderSize: 0.001,
      maxLeverage: 125,
    })
    
    if (!validationResult.valid) {
      const rejectedOrder = { ...order, status: "rejected" as OrderStatus }
      emitEvent("order_rejected", { order: rejectedOrder, reason: validationResult.error })
      return { success: false, error: validationResult.error }
    }
    
    // Handle trigger orders (Section 11-12)
    if (order.orderType === "stop_market" || order.orderType === "stop_limit" ||
        order.orderType === "take_profit" || order.orderType === "stop_loss" ||
        order.orderType === "trailing_stop") {
      order.status = "pending"
      setTriggerOrders(prev => [...prev, order])
      setOrders(prev => [...prev, order])
      emitEvent("order_created", order)
      return { success: true, order }
    }
    
    // Handle TWAP orders
    if (order.orderType === "twap") {
      order.status = "open"
      order.twapTotalSlices = Math.floor((order.twapDuration || 3600) / (order.twapInterval || 60))
      order.twapExecutedSlices = 0
      setOrders(prev => [...prev, order])
      emitEvent("order_created", order)
      // TWAP execution would be handled by a separate interval
      return { success: true, order }
    }
    
    // Process market/limit orders
    order.status = "open"
    emitEvent("order_created", order)
    
    // Try to match (Section 5-6)
    const { trades: matchedTrades, remainingSize } = matchOrder(order)
    
    // Process trades
    for (const trade of matchedTrades) {
      setTrades(prev => [trade, ...prev].slice(0, 100))
      emitEvent("trade_executed", trade)
      updatePosition(trade, order)
      
      // Update user balance (lock margin, apply fees)
      setUserBalance(prev => ({
        ...prev,
        available: prev.available - trade.fee,
        total: prev.total - trade.fee,
      }))
    }
    
    // Update order status
    const updatedOrder: Order = {
      ...order,
      filledSize: order.size - remainingSize,
      remainingSize,
      status: remainingSize <= 0 ? "filled" : (remainingSize < order.size ? "partially_filled" : "open"),
      updatedAt: Date.now(),
    }
    
    // Add remaining to order book (for limit orders)
    if (remainingSize > 0 && order.orderType === "limit") {
      if (order.postOnly && matchedTrades.length > 0) {
        // Post-only order would take liquidity, reject
        updatedOrder.status = "rejected"
        emitEvent("order_rejected", { order: updatedOrder, reason: "Post-only order would take liquidity" })
        return { success: false, error: "Post-only order would take liquidity" }
      }
      
      if (order.timeInForce === "IOC") {
        // IOC - cancel remaining
        updatedOrder.status = matchedTrades.length > 0 ? "partially_filled" : "cancelled"
      } else if (order.timeInForce === "FOK") {
        // FOK - must fill completely or cancel
        if (remainingSize > 0) {
          updatedOrder.status = "cancelled"
          // Reverse trades (would not happen in real implementation)
          return { success: false, error: "FOK order could not be fully filled" }
        }
      } else {
        // GTC - add to book
        const manager = getOrderBookManager(order.symbol)
        manager.addOrder({ ...updatedOrder, remainingSize })
        updateOrderBookState(order.symbol)
      }
    }
    
    setOrders(prev => [...prev, updatedOrder])
    
    if (matchedTrades.length > 0) {
      emitEvent("order_matched", { order: updatedOrder, trades: matchedTrades })
    }
    
    return { success: true, order: updatedOrder }
  }, [positions, userBalance, matchOrder, updatePosition, getOrderBookManager, updateOrderBookState, emitEvent])
  
  // ─── Cancel Order (Section 15) ───
  
  const cancelOrder = useCallback(async (orderId: string): Promise<{ success: boolean; error?: string }> => {
    const order = orders.find(o => o.orderId === orderId)
    if (!order) {
      return { success: false, error: "Order not found" }
    }
    
    if (order.status === "filled" || order.status === "cancelled") {
      return { success: false, error: "Order cannot be cancelled" }
    }
    
    // Remove from order book
    const manager = getOrderBookManager(order.symbol)
    manager.removeOrder(orderId)
    updateOrderBookState(order.symbol)
    
    // Remove from trigger orders if applicable
    setTriggerOrders(prev => prev.filter(o => o.orderId !== orderId))
    
    // Update order status
    setOrders(prev => prev.map(o => 
      o.orderId === orderId 
        ? { ...o, status: "cancelled" as OrderStatus, updatedAt: Date.now() }
        : o
    ))
    
    emitEvent("order_cancelled", { orderId })
    
    return { success: true }
  }, [orders, getOrderBookManager, updateOrderBookState, emitEvent])
  
  const cancelAllOrders = useCallback(async (symbol?: string): Promise<{ success: boolean; cancelledCount: number }> => {
    const ordersToCancel = orders.filter(o => 
      (o.status === "open" || o.status === "partially_filled" || o.status === "pending") &&
      (!symbol || o.symbol === symbol)
    )
    
    for (const order of ordersToCancel) {
      await cancelOrder(order.orderId)
    }
    
    return { success: true, cancelledCount: ordersToCancel.length }
  }, [orders, cancelOrder])
  
  // ─── Position Operations ───
  
  const getPositionBySymbol = useCallback((symbol: string): Position | undefined => {
    return positions.find(p => p.symbol === symbol)
  }, [positions])
  
  const closePosition = useCallback(async (symbol: string, size?: number): Promise<{ success: boolean; error?: string }> => {
    const position = getPositionBySymbol(symbol)
    if (!position) {
      return { success: false, error: "No position found" }
    }
    
    const closeSize = size || position.size
    const closeSide: OrderSide = position.side === "long" ? "sell" : "buy"
    
    return placeOrder({
      symbol,
      side: closeSide,
      orderType: "market",
      size: closeSize,
      reduceOnly: true,
    })
  }, [getPositionBySymbol, placeOrder])
  
  const updatePositionTPSL = useCallback((symbol: string, tp?: number, sl?: number) => {
    setPositions(prev => prev.map(p => 
      p.symbol === symbol 
        ? { 
            ...p, 
            takeProfitPrice: tp !== undefined ? tp : p.takeProfitPrice,
            stopLossPrice: sl !== undefined ? sl : p.stopLossPrice,
            updatedAt: Date.now(),
          }
        : p
    ))
  }, [])
  
  // ─── Trigger Engine (Section 11-12) ───
  // Use refs for prices to avoid dependency changes
  const lastPriceRef = useRef(lastPrice)
  const indexPriceRef = useRef(indexPrice)
  lastPriceRef.current = lastPrice
  indexPriceRef.current = indexPrice
  
  // Store placeOrder in ref to avoid dependency
  const placeOrderRef = useRef(placeOrder)
  placeOrderRef.current = placeOrder
  
  useEffect(() => {
    if (triggerOrders.length === 0) return
    
    const checkTriggers = () => {
      const currentMarkPrice = markPriceRef.current
      const currentLastPrice = lastPriceRef.current
      const currentIndexPrice = indexPriceRef.current
      const triggeredOrderIds: string[] = []
      
      for (const order of triggerOrders) {
        let triggerPrice: number
        switch (order.triggerType) {
          case "last_price":
            triggerPrice = currentLastPrice
            break
          case "index_price":
            triggerPrice = currentIndexPrice
            break
          case "mark_price":
          default:
            triggerPrice = currentMarkPrice
        }
        
        let triggered = false
        
        if (order.orderType === "stop_market" || order.orderType === "stop_limit" || order.orderType === "stop_loss") {
          if (order.side === "sell" && triggerPrice <= order.triggerPrice!) {
            triggered = true
          } else if (order.side === "buy" && triggerPrice >= order.triggerPrice!) {
            triggered = true
          }
        } else if (order.orderType === "take_profit") {
          if (order.side === "sell" && triggerPrice >= order.triggerPrice!) {
            triggered = true
          } else if (order.side === "buy" && triggerPrice <= order.triggerPrice!) {
            triggered = true
          }
        }
        
        if (triggered) {
          triggeredOrderIds.push(order.orderId)
          
          // Execute triggered order
          const newOrderType: OrderType = order.orderType === "stop_limit" ? "limit" : "market"
          placeOrderRef.current({
            symbol: order.symbol,
            side: order.side,
            orderType: newOrderType,
            size: order.remainingSize,
            price: order.price || undefined,
            reduceOnly: order.reduceOnly,
          })
        }
      }
      
      // Remove triggered orders
      if (triggeredOrderIds.length > 0) {
        setTriggerOrders(prev => prev.filter(o => !triggeredOrderIds.includes(o.orderId)))
      }
    }
    
    const interval = setInterval(checkTriggers, 500) // Check every 500ms
    return () => clearInterval(interval)
  }, [triggerOrders])
  
  // ─── Update unrealized PnL ───
  // Use ref to track mark price for PnL calculations without causing re-renders
  const markPriceRef = useRef(markPrice)
  markPriceRef.current = markPrice
  
  // Update PnL only when positions change, use latest markPrice from ref
  const updatePositionsPnL = useCallback(() => {
    setPositions(prev => {
      const currentMarkPrice = markPriceRef.current
      const updated = prev.map(p => {
        const newPnl = p.side === "long" 
          ? (currentMarkPrice - p.entryPrice) * p.size
          : (p.entryPrice - currentMarkPrice) * p.size
        // Only update if PnL actually changed significantly
        if (Math.abs(newPnl - p.unrealizedPnl) < 0.01 && p.markPrice === currentMarkPrice) {
          return p
        }
        return {
          ...p,
          markPrice: currentMarkPrice,
          unrealizedPnl: newPnl,
        }
      })
      // Return same array if nothing changed
      const hasChanges = updated.some((p, i) => p !== prev[i])
      return hasChanges ? updated : prev
    })
  }, [])
  
  // ─── Simulate price updates ───
  
  useEffect(() => {
    const interval = setInterval(() => {
      const change = (Math.random() - 0.5) * 20
      setMarkPrice(prev => Math.max(0.01, prev + change))
      setLastPrice(prev => Math.max(0.01, prev + change * 0.9))
      setIndexPrice(prev => Math.max(0.01, prev + change * 0.95))
      // Update PnL periodically
      updatePositionsPnL()
    }, 1000)
    
    return () => clearInterval(interval)
  }, [updatePositionsPnL])
  
  // ─── Initialize order book with mock data ───
  
  const initializedRef = useRef(false)
  
  useEffect(() => {
    // Only initialize once
    if (initializedRef.current) return
    initializedRef.current = true
    
    const manager = orderBookManagerRef.current.get("BTC-PERP") || (() => {
      const m = new OrderBookManager()
      orderBookManagerRef.current.set("BTC-PERP", m)
      return m
    })()
    
    const basePrice = 65432
    
    // Add some mock orders
    for (let i = 0; i < 10; i++) {
      const bidSize = Math.random() * 2 + 0.5
      const askSize = Math.random() * 2 + 0.5
      
      // Bids
      manager.addOrder({
        orderId: `mock-bid-${i}`,
        userId: "market_maker",
        symbol: "BTC-PERP",
        side: "buy",
        orderType: "limit",
        price: basePrice - (i + 1) * 5,
        size: bidSize,
        filledSize: 0,
        remainingSize: bidSize,
        triggerPrice: null,
        triggerType: "mark_price",
        reduceOnly: false,
        postOnly: false,
        timeInForce: "GTC",
        status: "open",
        createdAt: Date.now(),
        updatedAt: Date.now(),
      })
      
      // Asks
      manager.addOrder({
        orderId: `mock-ask-${i}`,
        userId: "market_maker",
        symbol: "BTC-PERP",
        side: "sell",
        orderType: "limit",
        price: basePrice + (i + 1) * 5,
        size: askSize,
        filledSize: 0,
        remainingSize: askSize,
        triggerPrice: null,
        triggerType: "mark_price",
        reduceOnly: false,
        postOnly: false,
        timeInForce: "GTC",
        status: "open",
        createdAt: Date.now(),
        updatedAt: Date.now(),
      })
    }
    
    // Update state with snapshot
    const snapshot = manager.getSnapshot(20)
    setOrderBook({
      symbol: "BTC-PERP",
      bids: snapshot.bids,
      asks: snapshot.asks,
      lastUpdateId: 1,
      timestamp: Date.now(),
    })
  }, []) // Empty deps - run once on mount
  
  const openOrders = orders.filter(o => o.status === "open" || o.status === "partially_filled" || o.status === "pending")
  
  const getOrderById = useCallback((orderId: string) => orders.find(o => o.orderId === orderId), [orders])
  
  const getRecentTrades = useCallback((symbol: string, limit: number = 50) => {
    return trades.filter(t => t.symbol === symbol).slice(0, limit)
  }, [trades])
  
  return (
    <MatchingEngineContext.Provider
      value={{
        orderBook,
        getOrderBookSnapshot,
        orders,
        openOrders,
        placeOrder,
        cancelOrder,
        cancelAllOrders,
        getOrderById,
        positions,
        getPositionBySymbol,
        closePosition,
        updatePositionTPSL,
        trades,
        getRecentTrades,
        markPrice,
        lastPrice,
        indexPrice,
        subscribe,
        userBalance,
        triggerOrders,
      }}
    >
      {children}
    </MatchingEngineContext.Provider>
  )
}

// ═══════════════════════════════════════════════════════════════════════════════
// SECTION 7 — HELPER FUNCTIONS
// ═══════════════════════════════════════════════════════════════════════════════

function calculateLiquidationPrice(entryPrice: number, leverage: number, side: "long" | "short"): number {
  const maintenanceMarginRate = 0.005 // 0.5%
  
  if (side === "long") {
    // Liq price = Entry * (1 - 1/leverage + MMR)
    return entryPrice * (1 - 1 / leverage + maintenanceMarginRate)
  } else {
    // Liq price = Entry * (1 + 1/leverage - MMR)
    return entryPrice * (1 + 1 / leverage - maintenanceMarginRate)
  }
}

// ═══════════════════════════════════════════════════════════════════════════════
// SECTION 8 — HOOK
// ═══════════════════════════════════════════════════════════════════════════════

export function useMatchingEngine() {
  const context = useContext(MatchingEngineContext)
  if (!context) {
    throw new Error("useMatchingEngine must be used within MatchingEngineProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="lib/price-engine.tsx" isMerged="true"
"use client"

import { createContext, useContext, useState, useCallback, useRef, useEffect, type ReactNode } from "react"

// ============================================================================
// SECTION 3 - INDEX PRICE ENGINE
// Calculates index price from multiple spot exchange sources
// Uses weighted average with outlier filtering
// ============================================================================

// Exchange source configuration
export interface ExchangeSource {
  name: string
  weight: number
  enabled: boolean
  lastPrice: number
  lastUpdate: number
  latency: number // ms
  status: "online" | "offline" | "degraded"
}

// Price data from a single source
export interface SourcePrice {
  source: string
  price: number
  timestamp: number
  volume24h?: number
}

// Index price result
export interface IndexPriceData {
  symbol: string
  indexPrice: number
  sources: SourcePrice[]
  timestamp: number
  confidence: number // 0-1, based on number of active sources
}

// ============================================================================
// SECTION 4 - MARK PRICE ENGINE
// Mark Price = Index Price + Fair Basis
// Fair Basis depends on funding rate to prevent manipulation
// ============================================================================

export interface MarkPriceData {
  symbol: string
  markPrice: number
  indexPrice: number
  fairBasis: number
  premiumIndex: number
  fundingRate: number
  timestamp: number
}

// ============================================================================
// SECTION 5 - PREMIUM INDEX
// Premium = (Perp Price - Index Price) / Index Price
// Averaged over time using EMA
// ============================================================================

export interface PremiumData {
  symbol: string
  currentPremium: number
  premiumEMA: number // Exponential moving average
  premiumHistory: { premium: number; timestamp: number }[]
}

// Configuration
const CONFIG = {
  // Index price settings
  INDEX_UPDATE_INTERVAL: 1000, // Update every 1 second
  OUTLIER_THRESHOLD: 0.02, // 2% deviation from median = outlier
  MIN_SOURCES_REQUIRED: 2, // Minimum sources for valid index price
  
  // Mark price settings
  MARK_PRICE_UPDATE_INTERVAL: 100, // Update every 100ms for smooth UI
  FAIR_BASIS_DECAY: 0.0001, // Decay factor per second
  
  // Premium index settings
  PREMIUM_EMA_PERIOD: 480, // 8 minutes in seconds (funding interval / 60)
  
  // ============================================================================
  // SECTION 17 - PERFORMANCE OPTIMIZATION
  // Batch updates, throttling, and memoization settings
  // ============================================================================
  BATCH_UPDATE_INTERVAL: 50, // Batch price updates every 50ms
  MAX_BATCH_SIZE: 100, // Maximum symbols per batch
  THROTTLE_THRESHOLD: 10, // Throttle if more than 10 updates per symbol per second
  CACHE_TTL: 500, // Cache time-to-live in ms
  MAX_PRICE_HISTORY: 100, // Maximum price history entries per symbol
  PREMIUM_HISTORY_LENGTH: 100, // Keep last 100 premium samples
  
  // Funding rate caps (Section 7 - Document spec: -0.75% to +0.75%)
  MAX_FUNDING_RATE: 0.0075, // +0.75% per funding interval
  MIN_FUNDING_RATE: -0.0075, // -0.75% per funding interval
  
  // Interest rate component (Section 6)
  INTEREST_RATE: 0.0001, // 0.01% per funding interval
}

// Default exchange sources with weights
const DEFAULT_SOURCES: ExchangeSource[] = [
  { name: "Binance", weight: 0.35, enabled: true, lastPrice: 0, lastUpdate: 0, latency: 0, status: "online" },
  { name: "Coinbase", weight: 0.25, enabled: true, lastPrice: 0, lastUpdate: 0, latency: 0, status: "online" },
  { name: "Kraken", weight: 0.20, enabled: true, lastPrice: 0, lastUpdate: 0, latency: 0, status: "online" },
  { name: "OKX", weight: 0.20, enabled: true, lastPrice: 0, lastUpdate: 0, latency: 0, status: "online" },
]

// ============================================================================
// CONTEXT TYPE
// ============================================================================

interface PriceEngineContextType {
  // Index Price (Section 3)
  getIndexPrice: (symbol: string) => IndexPriceData | null
  updateSourcePrice: (symbol: string, source: string, price: number, volume24h?: number) => void
  getExchangeSources: (symbol: string) => ExchangeSource[]
  setSourceEnabled: (symbol: string, source: string, enabled: boolean) => void
  
  // Mark Price (Section 4)
  getMarkPrice: (symbol: string) => MarkPriceData | null
  updatePerpPrice: (symbol: string, perpPrice: number) => void
  
  // Premium Index (Section 5)
  getPremiumData: (symbol: string) => PremiumData | null
  
  // Funding Rate (Section 6)
  getFundingRate: (symbol: string) => number
  getNextFundingTime: () => Date
  getTimeToFunding: () => number // seconds
  
  // Batch operations
  getAllMarkPrices: () => Map<string, MarkPriceData>
  getAllFundingRates: () => Map<string, number>
}

const PriceEngineContext = createContext<PriceEngineContextType | null>(null)

// ============================================================================
// HELPER FUNCTIONS
// ============================================================================

// Calculate weighted average with outlier filtering
function calculateWeightedAverage(sources: SourcePrice[], exchangeSources: ExchangeSource[]): number {
  if (sources.length === 0) return 0
  if (sources.length === 1) return sources[0].price
  
  // Calculate median for outlier detection
  const sortedPrices = [...sources].sort((a, b) => a.price - b.price)
  const medianIndex = Math.floor(sortedPrices.length / 2)
  const median = sortedPrices.length % 2 === 0
    ? (sortedPrices[medianIndex - 1].price + sortedPrices[medianIndex].price) / 2
    : sortedPrices[medianIndex].price
  
  // Filter outliers (prices deviating more than threshold from median)
  const validSources = sources.filter(s => {
    const deviation = Math.abs(s.price - median) / median
    return deviation <= CONFIG.OUTLIER_THRESHOLD
  })
  
  if (validSources.length === 0) {
    // If all are outliers, use median
    return median
  }
  
  // Calculate weighted average
  let totalWeight = 0
  let weightedSum = 0
  
  for (const source of validSources) {
    const exchangeSource = exchangeSources.find(e => e.name === source.source)
    const weight = exchangeSource?.weight || 0.25
    weightedSum += source.price * weight
    totalWeight += weight
  }
  
  return totalWeight > 0 ? weightedSum / totalWeight : median
}

// Calculate EMA (Exponential Moving Average)
function calculateEMA(newValue: number, previousEMA: number, period: number): number {
  const k = 2 / (period + 1)
  return newValue * k + previousEMA * (1 - k)
}

// Get next funding time (00:00, 08:00, 16:00 UTC)
function getNextFundingTime(): Date {
  const now = new Date()
  const utcHours = now.getUTCHours()
  
  let nextFundingHour: number
  if (utcHours < 8) {
    nextFundingHour = 8
  } else if (utcHours < 16) {
    nextFundingHour = 16
  } else {
    nextFundingHour = 24 // Next day 00:00
  }
  
  const nextFunding = new Date(now)
  nextFunding.setUTCMinutes(0, 0, 0)
  
  if (nextFundingHour === 24) {
    nextFunding.setUTCDate(nextFunding.getUTCDate() + 1)
    nextFunding.setUTCHours(0)
  } else {
    nextFunding.setUTCHours(nextFundingHour)
  }
  
  return nextFunding
}

// ============================================================================
// PROVIDER COMPONENT
// ============================================================================

export function PriceEngineProvider({ children }: { children: ReactNode }) {
  // State for each symbol's price data
  const [indexPrices, setIndexPrices] = useState<Map<string, IndexPriceData>>(new Map())
  const [markPrices, setMarkPrices] = useState<Map<string, MarkPriceData>>(new Map())
  const [premiumData, setPremiumData] = useState<Map<string, PremiumData>>(new Map())
  const [perpPrices, setPerpPrices] = useState<Map<string, number>>(new Map())
  const [exchangeSources, setExchangeSources] = useState<Map<string, ExchangeSource[]>>(new Map())
  
  // Refs for source prices (to avoid excessive re-renders)
  const sourcePricesRef = useRef<Map<string, SourcePrice[]>>(new Map())
  
  // ========================================================================
  // SECTION 3 - INDEX PRICE ENGINE
  // ========================================================================
  
  // Update price from a specific exchange source
  const updateSourcePrice = useCallback((symbol: string, source: string, price: number, volume24h?: number) => {
    const now = Date.now()
    
    // Get or initialize source prices for this symbol
    const currentSources = sourcePricesRef.current.get(symbol) || []
    const sourceIndex = currentSources.findIndex(s => s.source === source)
    
    const newSourcePrice: SourcePrice = {
      source,
      price,
      timestamp: now,
      volume24h,
    }
    
    if (sourceIndex >= 0) {
      currentSources[sourceIndex] = newSourcePrice
    } else {
      currentSources.push(newSourcePrice)
    }
    
    sourcePricesRef.current.set(symbol, currentSources)
    
    // Update exchange source status
    setExchangeSources(prev => {
      const newMap = new Map(prev)
      const sources = newMap.get(symbol) || [...DEFAULT_SOURCES]
      const sourceData = sources.find(s => s.name === source)
      if (sourceData) {
        sourceData.lastPrice = price
        sourceData.lastUpdate = now
        sourceData.status = "online"
      }
      newMap.set(symbol, sources)
      return newMap
    })
    
    // Calculate new index price
    const symbolSources = exchangeSources.get(symbol) || DEFAULT_SOURCES
    const indexPrice = calculateWeightedAverage(currentSources, symbolSources)
    const activeSources = currentSources.filter(s => now - s.timestamp < 30000) // Active within 30s
    const confidence = Math.min(activeSources.length / CONFIG.MIN_SOURCES_REQUIRED, 1)
    
    const newIndexData: IndexPriceData = {
      symbol,
      indexPrice,
      sources: currentSources,
      timestamp: now,
      confidence,
    }
    
    setIndexPrices(prev => {
      const newMap = new Map(prev)
      newMap.set(symbol, newIndexData)
      return newMap
    })
    
    // Trigger mark price recalculation
    recalculateMarkPrice(symbol)
  }, [exchangeSources])
  
  // Get index price for a symbol
  const getIndexPrice = useCallback((symbol: string): IndexPriceData | null => {
    return indexPrices.get(symbol) || null
  }, [indexPrices])
  
  // Get exchange sources for a symbol
  const getExchangeSources = useCallback((symbol: string): ExchangeSource[] => {
    return exchangeSources.get(symbol) || DEFAULT_SOURCES
  }, [exchangeSources])
  
  // Enable/disable an exchange source
  const setSourceEnabled = useCallback((symbol: string, source: string, enabled: boolean) => {
    setExchangeSources(prev => {
      const newMap = new Map(prev)
      const sources = newMap.get(symbol) || [...DEFAULT_SOURCES]
      const sourceData = sources.find(s => s.name === source)
      if (sourceData) {
        sourceData.enabled = enabled
      }
      newMap.set(symbol, sources)
      return newMap
    })
  }, [])
  
  // ========================================================================
  // SECTION 4 - MARK PRICE ENGINE
  // ========================================================================
  
  // Update perp price (last trade price on the exchange)
  const updatePerpPrice = useCallback((symbol: string, perpPrice: number) => {
    setPerpPrices(prev => {
      const newMap = new Map(prev)
      newMap.set(symbol, perpPrice)
      return newMap
    })
    
    // Trigger premium and mark price recalculation
    recalculatePremium(symbol)
    recalculateMarkPrice(symbol)
  }, [])
  
  // Recalculate premium index (Section 5)
  const recalculatePremium = useCallback((symbol: string) => {
    const indexData = indexPrices.get(symbol)
    const perpPrice = perpPrices.get(symbol)
    
    if (!indexData || !perpPrice || indexData.indexPrice === 0) return
    
    const now = Date.now()
    
    // Premium = (Perp Price - Index Price) / Index Price
    const currentPremium = (perpPrice - indexData.indexPrice) / indexData.indexPrice
    
    // Get or initialize premium data
    const existingData = premiumData.get(symbol)
    const previousEMA = existingData?.premiumEMA || currentPremium
    
    // Calculate EMA
    const premiumEMA = calculateEMA(currentPremium, previousEMA, CONFIG.PREMIUM_EMA_PERIOD)
    
    // Update premium history
    const history = existingData?.premiumHistory || []
    history.push({ premium: currentPremium, timestamp: now })
    
    // Keep only recent history
    while (history.length > CONFIG.PREMIUM_HISTORY_LENGTH) {
      history.shift()
    }
    
    const newPremiumData: PremiumData = {
      symbol,
      currentPremium,
      premiumEMA,
      premiumHistory: history,
    }
    
    setPremiumData(prev => {
      const newMap = new Map(prev)
      newMap.set(symbol, newPremiumData)
      return newMap
    })
  }, [indexPrices, perpPrices, premiumData])
  
  // Recalculate mark price
  const recalculateMarkPrice = useCallback((symbol: string) => {
    const indexData = indexPrices.get(symbol)
    const premData = premiumData.get(symbol)
    
    if (!indexData) return
    
    const now = Date.now()
    const indexPrice = indexData.indexPrice
    
    // Get premium index (use EMA for stability)
    const premiumIndex = premData?.premiumEMA || 0
    
    // Calculate funding rate (Section 6)
    // Funding Rate = Premium Index + Interest Rate (capped)
    let fundingRate = premiumIndex + CONFIG.INTEREST_RATE
    
    // Apply caps (Section 13 - Risk Controls)
    fundingRate = Math.max(CONFIG.MIN_FUNDING_RATE, Math.min(CONFIG.MAX_FUNDING_RATE, fundingRate))
    
    // Calculate Fair Basis
    // Fair Basis smooths out mark price to prevent manipulation
    // It's based on the time-weighted average premium
    const fairBasis = premiumIndex * indexPrice
    
    // Mark Price = Index Price + Fair Basis
    const markPrice = indexPrice + fairBasis
    
    const newMarkData: MarkPriceData = {
      symbol,
      markPrice,
      indexPrice,
      fairBasis,
      premiumIndex,
      fundingRate,
      timestamp: now,
    }
    
    setMarkPrices(prev => {
      const newMap = new Map(prev)
      newMap.set(symbol, newMarkData)
      return newMap
    })
    
    // SECTION 16 & 18 - Emit price update event for engine synchronization
    if (typeof window !== "undefined") {
      window.dispatchEvent(new CustomEvent("trading:mark_price_updated", {
        detail: {
          type: "mark_price_updated",
          timestamp: now,
          source: "PriceEngine",
          data: {
            symbol,
            markPrice,
            indexPrice,
            fairBasis,
            premiumIndex,
            fundingRate,
          }
        }
      }))
    }
  }, [indexPrices, premiumData])
  
  // Get mark price for a symbol
  const getMarkPrice = useCallback((symbol: string): MarkPriceData | null => {
    return markPrices.get(symbol) || null
  }, [markPrices])
  
  // ========================================================================
  // SECTION 5 - PREMIUM INDEX
  // ========================================================================
  
  // Get premium data for a symbol
  const getPremiumData = useCallback((symbol: string): PremiumData | null => {
    return premiumData.get(symbol) || null
  }, [premiumData])
  
  // ========================================================================
  // SECTION 6 - FUNDING RATE
  // ========================================================================
  
  // Get funding rate for a symbol
  const getFundingRate = useCallback((symbol: string): number => {
    const markData = markPrices.get(symbol)
    return markData?.fundingRate || 0
  }, [markPrices])
  
  // Get next funding time
  const getNextFundingTimeCallback = useCallback((): Date => {
    return getNextFundingTime()
  }, [])
  
  // Get time to next funding in seconds
  const getTimeToFunding = useCallback((): number => {
    const nextFunding = getNextFundingTime()
    const now = new Date()
    return Math.max(0, Math.floor((nextFunding.getTime() - now.getTime()) / 1000))
  }, [])
  
  // ========================================================================
  // BATCH OPERATIONS
  // ========================================================================
  
  const getAllMarkPrices = useCallback((): Map<string, MarkPriceData> => {
    return markPrices
  }, [markPrices])
  
  const getAllFundingRates = useCallback((): Map<string, number> => {
    const rates = new Map<string, number>()
    markPrices.forEach((data, symbol) => {
      rates.set(symbol, data.fundingRate)
    })
    return rates
  }, [markPrices])
  
  // ========================================================================
  // SIMULATION - Generate realistic price movements
  // ========================================================================
  
  useEffect(() => {
    // Simulate price updates from exchanges for demo purposes
    const symbols = ["BTC-USDT", "ETH-USDT", "SOL-USDT", "XRP-USDT", "DOGE-USDT"]
    const basePrices: Record<string, number> = {
      "BTC-USDT": 95000,
      "ETH-USDT": 3330,
      "SOL-USDT": 145,
      "XRP-USDT": 2.15,
      "DOGE-USDT": 0.32,
    }
    
    const interval = setInterval(() => {
      symbols.forEach(symbol => {
        const basePrice = basePrices[symbol]
        
        // Simulate prices from different exchanges with slight variations
        DEFAULT_SOURCES.forEach(source => {
          // Random walk with mean reversion
          const variation = (Math.random() - 0.5) * 0.001 // 0.1% variation
          const exchangeVariation = (Math.random() - 0.5) * 0.0005 // 0.05% exchange-specific variation
          const price = basePrice * (1 + variation + exchangeVariation)
          
          updateSourcePrice(symbol, source.name, price)
        })
        
        // Simulate perp price (slightly different from index)
        const perpVariation = (Math.random() - 0.5) * 0.002 // 0.2% variation
        const perpPrice = basePrice * (1 + perpVariation)
        updatePerpPrice(symbol, perpPrice)
      })
    }, CONFIG.INDEX_UPDATE_INTERVAL)
    
    return () => clearInterval(interval)
  }, [updateSourcePrice, updatePerpPrice])
  
  // ========================================================================
  // CONTEXT VALUE
  // ========================================================================
  
  const contextValue: PriceEngineContextType = {
    // Index Price
    getIndexPrice,
    updateSourcePrice,
    getExchangeSources,
    setSourceEnabled,
    // Mark Price
    getMarkPrice,
    updatePerpPrice,
    // Premium Index
    getPremiumData,
    // Funding Rate
    getFundingRate,
    getNextFundingTime: getNextFundingTimeCallback,
    getTimeToFunding,
    // Batch
    getAllMarkPrices,
    getAllFundingRates,
  }
  
  return (
    <PriceEngineContext.Provider value={contextValue}>
      {children}
    </PriceEngineContext.Provider>
  )
}

// ============================================================================
// HOOK
// ============================================================================

export function usePriceEngine() {
  const context = useContext(PriceEngineContext)
  if (!context) {
    throw new Error("usePriceEngine must be used within a PriceEngineProvider")
  }
  return context
}

// ============================================================================
// UTILITY EXPORTS
// ============================================================================

export { CONFIG as PRICE_ENGINE_CONFIG, getNextFundingTime }

// ============================================================================
// FUNDING RATE EVENT SYSTEM
// Dispatches events for real-time funding rate updates
// Used by funding-rate-panel for streaming updates
// ============================================================================

export type FundingRateUpdateEvent = CustomEvent<{
  symbol: string
  fundingRate: number
  premiumIndex: number
  predictedRate: number
  timestamp: number
  direction: "up" | "down" | "stable"
}>

export function dispatchFundingRateUpdate(data: {
  symbol: string
  fundingRate: number
  premiumIndex: number
  predictedRate: number
  direction: "up" | "down" | "stable"
}) {
  if (typeof window !== "undefined") {
    const event = new CustomEvent("funding_rate_stream", {
      detail: {
        ...data,
        timestamp: Date.now(),
      }
    })
    window.dispatchEvent(event)
  }
}

// Hook to subscribe to funding rate events
export function useFundingRateEvents(
  symbol: string,
  callback: (data: FundingRateUpdateEvent["detail"]) => void
) {
  if (typeof window !== "undefined") {
    const handler = (event: Event) => {
      const customEvent = event as FundingRateUpdateEvent
      if (customEvent.detail.symbol === symbol || symbol === "*") {
        callback(customEvent.detail)
      }
    }
    
    window.addEventListener("funding_rate_stream", handler)
    return () => window.removeEventListener("funding_rate_stream", handler)
  }
  return () => {}
}
[V0_FILE]typescriptreact:file="components/trade/price-sources-panel.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { usePriceEngine, type ExchangeSource } from "@/lib/price-engine"
import { cn } from "@/lib/utils"
import { Activity, CheckCircle, XCircle, AlertCircle, RefreshCw } from "lucide-react"
import { Switch } from "@/components/ui/switch"
import { Button } from "@/components/ui/button"

// ============================================================================
// PRICE SOURCES PANEL
// Displays real-time status of all exchange sources for index price calculation
// Section 3 - Index Price Engine visualization
// ============================================================================

interface PriceSourcesPanelProps {
  symbol: string
  className?: string
}

export function PriceSourcesPanel({ symbol, className }: PriceSourcesPanelProps) {
  const priceEngine = usePriceEngine()
  const [sources, setSources] = useState<ExchangeSource[]>([])
  const [indexPrice, setIndexPrice] = useState<number>(0)
  const [markPrice, setMarkPrice] = useState<number>(0)
  const [premium, setPremium] = useState<number>(0)
  const [premiumEMA, setPremiumEMA] = useState<number>(0)
  const [fairBasis, setFairBasis] = useState<number>(0)
  const [fundingRate, setFundingRate] = useState<number>(0)
  const [confidence, setConfidence] = useState<number>(0)
  const [lastUpdate, setLastUpdate] = useState<Date>(new Date())
  const [timeToFunding, setTimeToFunding] = useState<number>(0)

// Refresh data every 500ms
  useEffect(() => {
    const updateData = () => {
      const exchangeSources = priceEngine.getExchangeSources(symbol)
      const indexData = priceEngine.getIndexPrice(symbol)
      const markData = priceEngine.getMarkPrice(symbol)
      const premiumData = priceEngine.getPremiumData(symbol)

setSources(exchangeSources)
      setIndexPrice(indexData?.indexPrice || 0)
      setMarkPrice(markData?.markPrice || 0)
      setPremium(premiumData?.currentPremium || 0)
      setPremiumEMA(premiumData?.premiumEMA || 0)
      setFairBasis(markData?.fairBasis || 0)
      setFundingRate(markData?.fundingRate || 0)
      setConfidence(indexData?.confidence || 0)
      setTimeToFunding(priceEngine.getTimeToFunding())
      setLastUpdate(new Date())
    }

updateData()
    const interval = setInterval(updateData, 500)
    return () => clearInterval(interval)
  }, [symbol, priceEngine])

const getStatusIcon = (status: ExchangeSource["status"]) => {
    switch (status) {
      case "online":
        return <CheckCircle className="w-3.5 h-3.5 text-emerald-400" />
      case "offline":
        return <XCircle className="w-3.5 h-3.5 text-red-400" />
      case "degraded":
        return <AlertCircle className="w-3.5 h-3.5 text-yellow-400" />
    }
  }

const getStatusText = (source: ExchangeSource) => {
    const timeSinceUpdate = Date.now() - source.lastUpdate
    if (timeSinceUpdate > 30000) return "Stale"
    if (timeSinceUpdate > 10000) return "Delayed"
    return "Live"
  }

const handleToggleSource = (sourceName: string, enabled: boolean) => {
    priceEngine.setSourceEnabled(symbol, sourceName, enabled)
  }

return (
    <div className={cn("bg-[#0b0e11] border border-[#1e2329] rounded-lg p-4", className)}>
      {/* Header */}
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-2">
          <Activity className="w-4 h-4 text-[#F7931A]" />
          <h3 className="text-sm font-semibold text-white">Price Engine</h3>
        </div>
        <div className="flex items-center gap-2 text-[10px] text-muted-foreground">
          <RefreshCw className="w-3 h-3 animate-spin" />
          Updated {lastUpdate.toLocaleTimeString()}
        </div>
      </div>

{/* Summary Cards - Section 3 & 4 */}
      <div className="grid grid-cols-4 gap-3 mb-4">
        <div className="bg-[#1e2329] rounded-md p-2">
          <div className="text-[10px] text-muted-foreground uppercase tracking-wide">Index Price</div>
          <div className="text-sm font-mono text-white mt-0.5">${indexPrice.toLocaleString()}</div>
          <div className="text-[9px] text-muted-foreground">Section 3</div>
        </div>
        <div className="bg-[#1e2329] rounded-md p-2">
          <div className="text-[10px] text-muted-foreground uppercase tracking-wide">Mark Price</div>
          <div className="text-sm font-mono text-white mt-0.5">${markPrice.toLocaleString()}</div>
          <div className="text-[9px] text-muted-foreground">Section 4</div>
        </div>
        <div className="bg-[#1e2329] rounded-md p-2">
          <div className="text-[10px] text-muted-foreground uppercase tracking-wide">Fair Basis</div>
          <div className={cn(
            "text-sm font-mono mt-0.5",
            fairBasis >= 0 ? "text-emerald-400" : "text-red-400"
          )}>
            ${fairBasis.toFixed(4)}
          </div>
          <div className="text-[9px] text-muted-foreground">Section 4</div>
        </div>
        <div className="bg-[#1e2329] rounded-md p-2">
          <div className="text-[10px] text-muted-foreground uppercase tracking-wide">Funding Rate</div>
          <div className={cn(
            "text-sm font-mono mt-0.5",
            fundingRate >= 0 ? "text-emerald-400" : "text-red-400"
          )}>
            {(fundingRate * 100).toFixed(4)}%
          </div>
          <div className="text-[9px] text-muted-foreground">Section 6</div>
        </div>
      </div>

{/* Section 5 - Premium Index Details */}
      <div className="bg-[#1a1d21] rounded-md p-3 mb-4 border border-[#2a2e39]">
        <div className="text-[10px] text-muted-foreground uppercase tracking-wide mb-2">
          Section 5 - Premium Index
        </div>
        <div className="grid grid-cols-3 gap-4">
          <div>
            <div className="text-[10px] text-muted-foreground">Current Premium</div>
            <div className={cn(
              "text-sm font-mono",
              premium >= 0 ? "text-emerald-400" : "text-red-400"
            )}>
              {(premium * 100).toFixed(4)}%
            </div>
          </div>
          <div>
            <div className="text-[10px] text-muted-foreground">Premium EMA</div>
            <div className={cn(
              "text-sm font-mono",
              premiumEMA >= 0 ? "text-emerald-400" : "text-red-400"
            )}>
              {(premiumEMA * 100).toFixed(4)}%
            </div>
          </div>
          <div>
            <div className="text-[10px] text-muted-foreground">Next Funding</div>
            <div className="text-sm font-mono text-[#F7931A]">
              {Math.floor(timeToFunding / 3600).toString().padStart(2, '0')}:
              {Math.floor((timeToFunding % 3600) / 60).toString().padStart(2, '0')}:
              {(timeToFunding % 60).toString().padStart(2, '0')}
            </div>
          </div>
        </div>
        <div className="text-[9px] text-muted-foreground mt-2">
          Premium = (Perp Price - Index Price) / Index Price | EMA smooths over 8 min period
        </div>
      </div>

{/* Confidence Bar */}
      <div className="mb-4">
        <div className="flex items-center justify-between mb-1">
          <span className="text-[10px] text-muted-foreground">Data Confidence</span>
          <span className={cn(
            "text-[10px] font-medium",
            confidence >= 0.75 ? "text-emerald-400" : confidence >= 0.5 ? "text-yellow-400" : "text-red-400"
          )}>
            {(confidence * 100).toFixed(0)}%
          </span>
        </div>
        <div className="h-1.5 bg-[#1e2329] rounded-full overflow-hidden">
          <div 
            className={cn(
              "h-full rounded-full transition-all duration-300",
              confidence >= 0.75 ? "bg-emerald-400" : confidence >= 0.5 ? "bg-yellow-400" : "bg-red-400"
            )}
            style={{ width: `${confidence * 100}%` }}
          />
        </div>
      </div>

{/* Exchange Sources Table */}
      <div className="text-[10px] text-muted-foreground uppercase tracking-wide mb-2">
        Exchange Sources (Section 3)
      </div>
      <div className="space-y-2">
        {sources.map((source) => (
          <div 
            key={source.name}
            className="flex items-center justify-between py-2 px-3 bg-[#1e2329] rounded-md"
          >
            <div className="flex items-center gap-3">
              <Switch
                checked={source.enabled}
                onCheckedChange={(checked) => handleToggleSource(source.name, checked)}
                className="scale-75"
              />
              <div className="flex items-center gap-2">
                {getStatusIcon(source.status)}
                <span className="text-sm text-white">{source.name}</span>
              </div>
              <span className={cn(
                "text-[10px] px-1.5 py-0.5 rounded",
                source.status === "online" ? "bg-emerald-400/10 text-emerald-400" :
                source.status === "degraded" ? "bg-yellow-400/10 text-yellow-400" :
                "bg-red-400/10 text-red-400"
              )}>
                {getStatusText(source)}
              </span>
            </div>
            <div className="flex items-center gap-4">
              <div className="text-right">
                <div className="text-[10px] text-muted-foreground">Weight</div>
                <div className="text-xs text-white">{(source.weight * 100).toFixed(0)}%</div>
              </div>
              <div className="text-right min-w-[80px]">
                <div className="text-[10px] text-muted-foreground">Price</div>
                <div className="text-xs font-mono text-white">
                  {source.lastPrice > 0 ? `$${source.lastPrice.toLocaleString()}` : "-"}
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>

{/* Formula Info - All Sections */}
      <div className="mt-4 p-3 bg-[#1a1d21] rounded-md border border-[#2a2e39]">
        <div className="text-[10px] text-muted-foreground mb-2">Price Engine Formulas</div>
        <div className="space-y-1.5 text-[10px] font-mono text-[#848e9c]">
          <div className="flex items-start gap-2">
            <span className="text-[#F7931A] shrink-0">S3:</span>
            <span>Index Price = Weighted Average (outliers filtered, min 2 sources)</span>
          </div>
          <div className="flex items-start gap-2">
            <span className="text-[#F7931A] shrink-0">S4:</span>
            <span>Mark Price = Index Price + Fair Basis</span>
          </div>
          <div className="flex items-start gap-2">
            <span className="text-[#F7931A] shrink-0">S5:</span>
            <span>Premium Index = (Perp - Index) / Index, averaged with EMA</span>
          </div>
          <div className="flex items-start gap-2">
            <span className="text-[#F7931A] shrink-0">S6:</span>
            <span>Funding Rate = Premium EMA + 0.01% (capped at +/-3%)</span>
          </div>
          <div className="flex items-start gap-2">
            <span className="text-[#F7931A] shrink-0">S13:</span>
            <span>Risk Controls: Funding capped at +3% / -3% per interval</span>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/price-engine/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Activity, RefreshCw, AlertTriangle, CheckCircle, XCircle, TrendingUp, TrendingDown } from "lucide-react"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Switch } from "@/components/ui/switch"
import { PriceEngineProvider, usePriceEngine, type ExchangeSource, PRICE_ENGINE_CONFIG } from "@/lib/price-engine"

// ============================================================================
// ADMIN PRICE ENGINE PAGE
// Monitor and manage Index Price, Mark Price, and Funding Rate calculations
// Section 3 - Index Price Engine
// Section 4 - Mark Price Engine  
// Section 5 - Premium Index
// Section 6 - Funding Rate Calculation
// Section 10 - Zero-Sum Funding Flow
// Section 13 - Risk Controls (Funding Rate Caps)
// ============================================================================

const MONITORED_SYMBOLS = [
  "BTC-USDT",
  "ETH-USDT",
  "SOL-USDT",
  "XRP-USDT",
  "DOGE-USDT",
]

function PriceEngineMonitor() {
  const priceEngine = usePriceEngine()
  const [selectedSymbol, setSelectedSymbol] = useState("BTC-USDT")
  const [autoRefresh, setAutoRefresh] = useState(true)
  const [refreshCount, setRefreshCount] = useState(0)

// Force refresh every 500ms when auto-refresh is enabled
  useEffect(() => {
    if (!autoRefresh) return
    const interval = setInterval(() => {
      setRefreshCount(c => c + 1)
    }, 500)
    return () => clearInterval(interval)
  }, [autoRefresh])

// Get data for all symbols
  const symbolsData = MONITORED_SYMBOLS.map(symbol => {
    const indexData = priceEngine.getIndexPrice(symbol)
    const markData = priceEngine.getMarkPrice(symbol)
    const premiumData = priceEngine.getPremiumData(symbol)
    const sources = priceEngine.getExchangeSources(symbol)

return {
      symbol,
      indexPrice: indexData?.indexPrice || 0,
      markPrice: markData?.markPrice || 0,
      fairBasis: markData?.fairBasis || 0,
      premium: premiumData?.currentPremium || 0,
      premiumEMA: premiumData?.premiumEMA || 0,
      fundingRate: markData?.fundingRate || 0,
      confidence: indexData?.confidence || 0,
      sources: indexData?.sources || [],
      exchangeSources: sources,
    }
  })

const selectedData = symbolsData.find(d => d.symbol === selectedSymbol)
  const timeToFunding = priceEngine.getTimeToFunding()
  const nextFundingTime = priceEngine.getNextFundingTime()

const formatTime = (seconds: number) => {
    const h = Math.floor(seconds / 3600)
    const m = Math.floor((seconds % 3600) / 60)
    const s = seconds % 60
    return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold flex items-center gap-2">
            <Activity className="w-6 h-6 text-[#F7931A]" />
            Price Engine Monitor
          </h1>
          <p className="text-gray-400 text-sm">Section 3 & 4 - Index Price and Mark Price Engine</p>
        </div>
        <div className="flex items-center gap-4">
          <div className="flex items-center gap-2">
            <span className="text-sm text-gray-400">Auto Refresh</span>
            <Switch checked={autoRefresh} onCheckedChange={setAutoRefresh} />
          </div>
          <Button
            variant="outline"
            size="sm"
            onClick={() => setRefreshCount(c => c + 1)}
            className="bg-transparent border-white/10"
          >
            <RefreshCw className={cn("w-4 h-4 mr-2", autoRefresh && "animate-spin")} />
            Refresh
          </Button>
        </div>
      </div>

{/* Funding Countdown */}
      <div className="bg-[#12121a] border border-white/10 rounded-xl p-4">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-xs text-gray-400 uppercase tracking-wide">Next Funding Settlement</p>
            <p className="text-2xl font-mono text-[#F7931A] mt-1">{formatTime(timeToFunding)}</p>
          </div>
          <div className="text-right">
            <p className="text-xs text-gray-400">Settlement Time</p>
            <p className="text-sm font-mono text-white">{nextFundingTime.toUTCString()}</p>
          </div>
        </div>
      </div>

{/* Symbols Overview */}
      <div className="bg-[#12121a] border border-white/10 rounded-xl overflow-hidden">
        <div className="px-4 py-3 border-b border-white/10">
          <h2 className="text-sm font-semibold">All Symbols Overview</h2>
        </div>
        <table className="w-full">
          <thead>
            <tr className="border-b border-white/10 text-xs text-gray-400 uppercase">
              <th className="text-left px-4 py-2">Symbol</th>
              <th className="text-right px-4 py-2">Index Price</th>
              <th className="text-right px-4 py-2">Mark Price</th>
              <th className="text-right px-4 py-2">Premium</th>
              <th className="text-right px-4 py-2">Funding Rate</th>
              <th className="text-right px-4 py-2">Confidence</th>
              <th className="text-center px-4 py-2">Status</th>
            </tr>
          </thead>
          <tbody>
            {symbolsData.map(data => (
              <tr
                key={data.symbol}
                className={cn(
                  "border-b border-white/5 hover:bg-white/5 cursor-pointer transition-colors",
                  selectedSymbol === data.symbol && "bg-[#F7931A]/10"
                )}
                onClick={() => setSelectedSymbol(data.symbol)}
              >
                <td className="px-4 py-3 font-medium">{data.symbol}</td>
                <td className="px-4 py-3 text-right font-mono">${data.indexPrice.toLocaleString()}</td>
                <td className="px-4 py-3 text-right font-mono">${data.markPrice.toLocaleString()}</td>
                <td className={cn(
                  "px-4 py-3 text-right font-mono",
                  data.premium >= 0 ? "text-emerald-400" : "text-red-400"
                )}>
                  {(data.premium * 100).toFixed(4)}%
                </td>
                <td className={cn(
                  "px-4 py-3 text-right font-mono",
                  data.fundingRate >= 0 ? "text-emerald-400" : "text-red-400"
                )}>
                  {(data.fundingRate * 100).toFixed(4)}%
                </td>
                <td className="px-4 py-3 text-right">
                  <div className="flex items-center justify-end gap-2">
                    <div className="w-16 h-1.5 bg-gray-700 rounded-full overflow-hidden">
                      <div
                        className={cn(
                          "h-full rounded-full",
                          data.confidence >= 0.75 ? "bg-emerald-400" :
                          data.confidence >= 0.5 ? "bg-yellow-400" : "bg-red-400"
                        )}
                        style={{ width: `${data.confidence * 100}%` }}
                      />
                    </div>
                    <span className="text-xs">{(data.confidence * 100).toFixed(0)}%</span>
                  </div>
                </td>
                <td className="px-4 py-3 text-center">
                  {data.confidence >= 0.75 ? (
                    <CheckCircle className="w-4 h-4 text-emerald-400 mx-auto" />
                  ) : data.confidence >= 0.5 ? (
                    <AlertTriangle className="w-4 h-4 text-yellow-400 mx-auto" />
                  ) : (
                    <XCircle className="w-4 h-4 text-red-400 mx-auto" />
                  )}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

{/* Selected Symbol Details */}
      {selectedData && (
        <div className="grid grid-cols-2 gap-6">
          {/* Price Details */}
          <div className="bg-[#12121a] border border-white/10 rounded-xl p-4">
            <h3 className="text-sm font-semibold mb-4 flex items-center gap-2">
              <TrendingUp className="w-4 h-4 text-[#F7931A]" />
              {selectedData.symbol} Price Details
            </h3>
            <div className="space-y-3">
              <div className="flex justify-between py-2 border-b border-white/5">
                <span className="text-gray-400">Index Price</span>
                <span className="font-mono">${selectedData.indexPrice.toLocaleString()}</span>
              </div>
              <div className="flex justify-between py-2 border-b border-white/5">
                <span className="text-gray-400">Mark Price</span>
                <span className="font-mono">${selectedData.markPrice.toLocaleString()}</span>
              </div>
              <div className="flex justify-between py-2 border-b border-white/5">
                <span className="text-gray-400">Fair Basis</span>
                <span className={cn(
                  "font-mono",
                  selectedData.fairBasis >= 0 ? "text-emerald-400" : "text-red-400"
                )}>
                  ${selectedData.fairBasis.toFixed(4)}
                </span>
              </div>
              <div className="flex justify-between py-2 border-b border-white/5">
                <span className="text-gray-400">Current Premium</span>
                <span className={cn(
                  "font-mono",
                  selectedData.premium >= 0 ? "text-emerald-400" : "text-red-400"
                )}>
                  {(selectedData.premium * 100).toFixed(4)}%
                </span>
              </div>
              <div className="flex justify-between py-2 border-b border-white/5">
                <span className="text-gray-400">Premium EMA</span>
                <span className={cn(
                  "font-mono",
                  selectedData.premiumEMA >= 0 ? "text-emerald-400" : "text-red-400"
                )}>
                  {(selectedData.premiumEMA * 100).toFixed(4)}%
                </span>
              </div>
              <div className="flex justify-between py-2">
                <span className="text-gray-400">Funding Rate (8h)</span>
                <span className={cn(
                  "font-mono font-semibold",
                  selectedData.fundingRate >= 0 ? "text-emerald-400" : "text-red-400"
                )}>
                  {(selectedData.fundingRate * 100).toFixed(4)}%
                </span>
              </div>
            </div>
          </div>

{/* Exchange Sources */}
          <div className="bg-[#12121a] border border-white/10 rounded-xl p-4">
            <h3 className="text-sm font-semibold mb-4">Exchange Sources (Section 3)</h3>
            <div className="space-y-2">
              {selectedData.exchangeSources.map(source => (
                <div
                  key={source.name}
                  className="flex items-center justify-between py-2 px-3 bg-[#1a1d21] rounded-lg"
                >
                  <div className="flex items-center gap-3">
                    {source.status === "online" ? (
                      <CheckCircle className="w-4 h-4 text-emerald-400" />
                    ) : source.status === "degraded" ? (
                      <AlertTriangle className="w-4 h-4 text-yellow-400" />
                    ) : (
                      <XCircle className="w-4 h-4 text-red-400" />
                    )}
                    <span>{source.name}</span>
                    <span className={cn(
                      "text-xs px-1.5 py-0.5 rounded",
                      source.enabled ? "bg-emerald-400/10 text-emerald-400" : "bg-gray-400/10 text-gray-400"
                    )}>
                      {source.enabled ? "Active" : "Disabled"}
                    </span>
                  </div>
                  <div className="flex items-center gap-4">
                    <span className="text-xs text-gray-400">{(source.weight * 100)}% weight</span>
                    <span className="font-mono text-sm">
                      {source.lastPrice > 0 ? `$${source.lastPrice.toLocaleString()}` : "-"}
                    </span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

{/* Section 5 - Premium Index Details */}
      <div className="bg-[#12121a] border border-white/10 rounded-xl p-4">
        <h3 className="text-sm font-semibold mb-4 flex items-center gap-2">
          Section 5 - Premium Index Analysis
        </h3>
        <div className="grid grid-cols-5 gap-4">
          {symbolsData.map(data => (
            <div key={data.symbol} className="bg-[#1a1d21] rounded-lg p-3">
              <p className="text-xs text-gray-400 mb-2">{data.symbol}</p>
              <div className="space-y-2">
                <div className="flex justify-between text-xs">
                  <span className="text-gray-500">Premium</span>
                  <span className={cn(
                    "font-mono",
                    data.premium >= 0 ? "text-emerald-400" : "text-red-400"
                  )}>
                    {(data.premium * 100).toFixed(4)}%
                  </span>
                </div>
                <div className="flex justify-between text-xs">
                  <span className="text-gray-500">EMA</span>
                  <span className={cn(
                    "font-mono",
                    data.premiumEMA >= 0 ? "text-emerald-400" : "text-red-400"
                  )}>
                    {(data.premiumEMA * 100).toFixed(4)}%
                  </span>
                </div>
                <div className="flex justify-between text-xs">
                  <span className="text-gray-500">Basis</span>
                  <span className={cn(
                    "font-mono",
                    data.fairBasis >= 0 ? "text-emerald-400" : "text-red-400"
                  )}>
                    ${data.fairBasis.toFixed(2)}
                  </span>
                </div>
              </div>
              {/* Premium bar visualization */}
              <div className="mt-2">
                <div className="h-1 bg-gray-700 rounded-full overflow-hidden relative">
                  <div 
                    className="absolute inset-y-0 left-1/2 w-0.5 bg-gray-500"
                  />
                  <div 
                    className={cn(
                      "h-full absolute top-0",
                      data.premium >= 0 
                        ? "left-1/2 bg-emerald-400" 
                        : "right-1/2 bg-red-400"
                    )}
                    style={{ 
                      width: `${Math.min(Math.abs(data.premium) * 1000, 50)}%`
                    }}
                  />
                </div>
              </div>
            </div>
          ))}
        </div>
        <div className="mt-4 p-3 bg-[#1a1d21]/50 rounded-lg border border-white/5">
          <p className="text-xs text-gray-400">
            <span className="text-[#F7931A]">Section 5 Formula:</span> Premium Index = (Perp Price - Index Price) / Index Price
          </p>
          <p className="text-xs text-gray-500 mt-1">
            EMA Period: {PRICE_ENGINE_CONFIG.PREMIUM_EMA_PERIOD}s | History Length: {PRICE_ENGINE_CONFIG.PREMIUM_HISTORY_LENGTH} samples
          </p>
        </div>
      </div>

{/* Section 10 - Zero-Sum Funding Flow Visualization */}
      <div className="bg-[#12121a] border border-white/10 rounded-xl p-4">
        <h3 className="text-sm font-semibold mb-4 flex items-center gap-2">
          Section 10 - Zero-Sum Funding Flow
        </h3>
        <div className="p-4 bg-[#1a1d21] rounded-lg border border-white/5">
          <div className="flex items-center justify-center gap-8">
            <div className="text-center">
              <div className="w-20 h-20 rounded-full bg-emerald-400/20 border-2 border-emerald-400 flex items-center justify-center">
                <TrendingUp className="w-8 h-8 text-emerald-400" />
              </div>
              <p className="text-xs text-gray-400 mt-2">Longs</p>
              <p className="text-sm font-mono text-emerald-400">Pay</p>
            </div>
            <div className="flex-1 relative">
              <div className="h-0.5 bg-gradient-to-r from-emerald-400 via-[#F7931A] to-red-400 rounded" />
              <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 px-3 py-1 bg-[#1a1d21] border border-[#F7931A] rounded text-xs font-mono text-[#F7931A]">
                Funding Rate > 0
              </div>
            </div>
            <div className="text-center">
              <div className="w-20 h-20 rounded-full bg-red-400/20 border-2 border-red-400 flex items-center justify-center">
                <TrendingDown className="w-8 h-8 text-red-400" />
              </div>
              <p className="text-xs text-gray-400 mt-2">Shorts</p>
              <p className="text-sm font-mono text-red-400">Receive</p>
            </div>
          </div>
          <div className="mt-4 text-center text-xs text-gray-500">
            When Funding Rate is positive, Longs pay Shorts. When negative, Shorts pay Longs.
          </div>
          <div className="mt-2 text-center text-[10px] text-[#F7931A]">
            Zero-Sum: Total Paid by Longs = Total Received by Shorts (no funds created or destroyed)
          </div>
        </div>
        <div className="grid grid-cols-3 gap-4 mt-4">
          <div className="bg-[#1a1d21] rounded-lg p-3 text-center">
            <p className="text-xs text-gray-400">Funding Interval</p>
            <p className="text-lg font-mono">8 hours</p>
            <p className="text-[10px] text-gray-500">00:00, 08:00, 16:00 UTC</p>
          </div>
          <div className="bg-[#1a1d21] rounded-lg p-3 text-center">
            <p className="text-xs text-gray-400">Interest Rate</p>
            <p className="text-lg font-mono">{(PRICE_ENGINE_CONFIG.INTEREST_RATE * 100).toFixed(2)}%</p>
            <p className="text-[10px] text-gray-500">Per funding interval</p>
          </div>
          <div className="bg-[#1a1d21] rounded-lg p-3 text-center">
            <p className="text-xs text-gray-400">Rate Cap (Section 13)</p>
            <p className="text-lg font-mono">+/-{(PRICE_ENGINE_CONFIG.MAX_FUNDING_RATE * 100)}%</p>
            <p className="text-[10px] text-gray-500">Risk control limit</p>
          </div>
        </div>
      </div>

{/* Configuration */}
      <div className="bg-[#12121a] border border-white/10 rounded-xl p-4">
        <h3 className="text-sm font-semibold mb-4">Engine Configuration (Section 6, 13)</h3>
        <div className="grid grid-cols-4 gap-4">
          <div className="bg-[#1a1d21] rounded-lg p-3">
            <p className="text-xs text-gray-400">Update Interval</p>
            <p className="text-lg font-mono">{PRICE_ENGINE_CONFIG.INDEX_UPDATE_INTERVAL}ms</p>
          </div>
          <div className="bg-[#1a1d21] rounded-lg p-3">
            <p className="text-xs text-gray-400">Outlier Threshold</p>
            <p className="text-lg font-mono">{(PRICE_ENGINE_CONFIG.OUTLIER_THRESHOLD * 100)}%</p>
          </div>
          <div className="bg-[#1a1d21] rounded-lg p-3">
            <p className="text-xs text-gray-400">Min Sources Required</p>
            <p className="text-lg font-mono">{PRICE_ENGINE_CONFIG.MIN_SOURCES_REQUIRED}</p>
          </div>
          <div className="bg-[#1a1d21] rounded-lg p-3">
            <p className="text-xs text-gray-400">Funding Rate Cap</p>
            <p className="text-lg font-mono">+/-{(PRICE_ENGINE_CONFIG.MAX_FUNDING_RATE * 100)}%</p>
          </div>
        </div>
        <div className="mt-4 p-3 bg-[#1a1d21] rounded-lg border border-[#2a2e39]">
          <p className="text-xs text-gray-400 mb-2">Formulas</p>
          <div className="space-y-1 text-xs font-mono text-gray-500">
            <p>Index Price = Weighted Average of Exchange Sources (outliers filtered)</p>
            <p>Premium Index = (Perp Price - Index Price) / Index Price</p>
            <p>Funding Rate = Premium EMA + Interest Rate ({(PRICE_ENGINE_CONFIG.INTEREST_RATE * 100).toFixed(2)}%)</p>
            <p>Mark Price = Index Price + (Premium Index * Index Price)</p>
          </div>
        </div>
      </div>
    </div>
  )
}

export default function AdminPriceEnginePage() {
  return (
    <PriceEngineProvider>
      <PriceEngineMonitor />
    </PriceEngineProvider>
  )
}
[V0_FILE]typescriptreact:file="lib/engine-sync.tsx" isMerged="true"
"use client"

import { createContext, useContext, useCallback, useRef, useEffect, type ReactNode } from "react"

// ============================================================================
// SECTION 16 & 18 - UNIFIED EVENT SYSTEM & ENGINE SYNCHRONIZATION
// Provides a centralized event bus for all trading engines to communicate
// Ensures data consistency across Price Engine, Trading Engine, Risk Engine, etc.
// ============================================================================

// Event payload types
export interface TradingEvent<T = unknown> {
  type: TradingEventType
  timestamp: number
  source: string // Which engine emitted this event
  data: T
}

// Specific event data types
export interface PriceUpdateEvent {
  symbol: string
  price: number
  priceType: "index" | "mark" | "last"
  change24h?: number
}

export interface FundingRateEvent {
  symbol: string
  fundingRate: number
  premiumIndex: number
  nextFundingTime: number
}

export interface FundingPaymentEvent {
  symbol: string
  fundingRate: number
  longNotional: number
  shortNotional: number
  positionCount: number
}

export interface PositionEvent {
  positionId: string
  symbol: string
  side: "Long" | "Short"
  size: number
  entryPrice: number
  markPrice?: number
  pnl?: number
}

export interface LiquidationEvent {
  positionId: string
  symbol: string
  side: "Long" | "Short"
  liquidationPrice: number
  loss: number
  insuranceUsed: number
}

export interface RiskWarningEvent {
  type: "margin_warning" | "liquidation_imminent" | "adl_risk"
  positionId?: string
  symbol?: string
  severity: "info" | "warning" | "critical"
  message: string
}

// Event listener callback type
type EventListener<T = unknown> = (event: TradingEvent<T>) => void

// Engine sync context type
interface EngineSyncContextType {
  // Event subscription
  subscribe: <T>(eventType: TradingEventType, listener: EventListener<T>) => () => void
  subscribeAll: <T>(listener: EventListener<T>) => () => void
  
  // Event emission
  emit: <T>(eventType: TradingEventType, source: string, data: T) => void
  
  // Batch operations (Section 17 - Performance)
  batchEmit: <T>(events: Array<{ type: TradingEventType; source: string; data: T }>) => void
  
  // Engine sync status
  isEngineReady: (engine: string) => boolean
  markEngineReady: (engine: string) => void
  waitForEngines: (engines: string[]) => Promise<void>
  
  // Event history (for debugging/replay)
  getRecentEvents: (count?: number) => TradingEvent[]
}

const EngineSyncContext = createContext<EngineSyncContextType | null>(null)

// ============================================================================
// ENGINE SYNC PROVIDER
// ============================================================================

interface EngineSyncProviderProps {
  children: ReactNode
  maxEventHistory?: number
}

export function EngineSyncProvider({ children, maxEventHistory = 100 }: EngineSyncProviderProps) {
  // Event listeners map
  const listenersRef = useRef<Map<TradingEventType | "all", Set<EventListener>>>(new Map())
  
  // Event history for debugging
  const eventHistoryRef = useRef<TradingEvent[]>([])
  
  // Engine ready status
  const engineReadyRef = useRef<Set<string>>(new Set())
  
  // Pending engine waits
  const pendingWaitsRef = useRef<Map<string, Array<() => void>>>(new Map())
  
  // Batch queue for performance optimization
  const batchQueueRef = useRef<TradingEvent[]>([])
  const batchTimeoutRef = useRef<NodeJS.Timeout | null>(null)
  
  // Subscribe to specific event type
  const subscribe = useCallback(<T,>(eventType: TradingEventType, listener: EventListener<T>) => {
    if (!listenersRef.current.has(eventType)) {
      listenersRef.current.set(eventType, new Set())
    }
    listenersRef.current.get(eventType)!.add(listener as EventListener)
    
    // Return unsubscribe function
    return () => {
      listenersRef.current.get(eventType)?.delete(listener as EventListener)
    }
  }, [])
  
  // Subscribe to all events
  const subscribeAll = useCallback(<T,>(listener: EventListener<T>) => {
    if (!listenersRef.current.has("all")) {
      listenersRef.current.set("all", new Set())
    }
    listenersRef.current.get("all")!.add(listener as EventListener)
    
    return () => {
      listenersRef.current.get("all")?.delete(listener as EventListener)
    }
  }, [])
  
  // Emit event
  const emit = useCallback(<T,>(eventType: TradingEventType, source: string, data: T) => {
    const event: TradingEvent<T> = {
      type: eventType,
      timestamp: Date.now(),
      source,
      data,
    }
    
    // Add to history
    eventHistoryRef.current = [event as TradingEvent, ...eventHistoryRef.current].slice(0, maxEventHistory)
    
    // Notify specific listeners
    listenersRef.current.get(eventType)?.forEach(listener => {
      try {
        listener(event as TradingEvent)
      } catch (error) {
        console.error(`[EngineSync] Error in listener for ${eventType}:`, error)
      }
    })
    
    // Notify all-event listeners
    listenersRef.current.get("all")?.forEach(listener => {
      try {
        listener(event as TradingEvent)
      } catch (error) {
        console.error(`[EngineSync] Error in all-event listener:`, error)
      }
    })
    
    // Also dispatch as DOM event for cross-context communication
    if (typeof window !== "undefined") {
      window.dispatchEvent(new CustomEvent(`trading:${eventType}`, { detail: event }))
    }
  }, [maxEventHistory])
  
  // Batch emit for performance (Section 17)
  const processBatch = useCallback(() => {
    const batch = batchQueueRef.current
    batchQueueRef.current = []
    batchTimeoutRef.current = null
    
    batch.forEach(event => {
      // Notify specific listeners
      listenersRef.current.get(event.type)?.forEach(listener => {
        try {
          listener(event)
        } catch (error) {
          console.error(`[EngineSync] Batch error for ${event.type}:`, error)
        }
      })
      
      // Notify all-event listeners
      listenersRef.current.get("all")?.forEach(listener => {
        try {
          listener(event)
        } catch (error) {
          console.error(`[EngineSync] Batch all-event error:`, error)
        }
      })
    })
    
    // Add batch to history
    eventHistoryRef.current = [...batch.reverse(), ...eventHistoryRef.current].slice(0, maxEventHistory)
  }, [maxEventHistory])
  
  const batchEmit = useCallback(<T,>(events: Array<{ type: TradingEventType; source: string; data: T }>) => {
    const now = Date.now()
    
    events.forEach(({ type, source, data }) => {
      batchQueueRef.current.push({
        type,
        timestamp: now,
        source,
        data,
      })
    })
    
    // Schedule batch processing if not already scheduled
    if (!batchTimeoutRef.current) {
      batchTimeoutRef.current = setTimeout(processBatch, 50) // 50ms batch window
    }
  }, [processBatch])
  
  // Engine ready management
  const isEngineReady = useCallback((engine: string) => {
    return engineReadyRef.current.has(engine)
  }, [])
  
  const markEngineReady = useCallback((engine: string) => {
    engineReadyRef.current.add(engine)
    
    // Resolve any pending waits
    pendingWaitsRef.current.get(engine)?.forEach(resolve => resolve())
    pendingWaitsRef.current.delete(engine)
    
    // Emit engine ready event
    emit("engine_sync_completed", "EngineSyncProvider", { engine, timestamp: Date.now() })
  }, [emit])
  
  const waitForEngines = useCallback((engines: string[]): Promise<void> => {
    const pendingEngines = engines.filter(e => !engineReadyRef.current.has(e))
    
    if (pendingEngines.length === 0) {
      return Promise.resolve()
    }
    
    return new Promise(resolve => {
      let remaining = pendingEngines.length
      
      pendingEngines.forEach(engine => {
        if (!pendingWaitsRef.current.has(engine)) {
          pendingWaitsRef.current.set(engine, [])
        }
        
        pendingWaitsRef.current.get(engine)!.push(() => {
          remaining--
          if (remaining === 0) {
            resolve()
          }
        })
      })
    })
  }, [])
  
  // Get recent events
  const getRecentEvents = useCallback((count = 50) => {
    return eventHistoryRef.current.slice(0, count)
  }, [])
  
  // Cleanup on unmount
  useEffect(() => {
    return () => {
      if (batchTimeoutRef.current) {
        clearTimeout(batchTimeoutRef.current)
      }
    }
  }, [])
  
  return (
    <EngineSyncContext.Provider value={{
      subscribe,
      subscribeAll,
      emit,
      batchEmit,
      isEngineReady,
      markEngineReady,
      waitForEngines,
      getRecentEvents,
    }}>
      {children}
    </EngineSyncContext.Provider>
  )
}

// ============================================================================
// HOOK
// ============================================================================

export function useEngineSync() {
  const context = useContext(EngineSyncContext)
  if (!context) {
    throw new Error("useEngineSync must be used within an EngineSyncProvider")
  }
  return context
}

// ============================================================================
// UTILITY HOOKS
// ============================================================================

// Hook to subscribe to specific event type
export function useTradingEvent<T>(eventType: TradingEventType, callback: (data: T) => void) {
  const { subscribe } = useEngineSync()
  
  useEffect(() => {
    const unsubscribe = subscribe<T>(eventType, (event) => {
      callback(event.data)
    })
    return unsubscribe
  }, [eventType, callback, subscribe])
}

// Hook to emit events easily
export function useTradingEventEmitter(source: string) {
  const { emit, batchEmit } = useEngineSync()
  
  return {
    emit: <T,>(type: TradingEventType, data: T) => emit(type, source, data),
    batchEmit: <T,>(events: Array<{ type: TradingEventType; data: T }>) => 
      batchEmit(events.map(e => ({ ...e, source }))),
  }
}

// Hook to track engine sync status
export function useEngineStatus(engines: string[]) {
  const { isEngineReady, waitForEngines } = useEngineSync()
  
  const allReady = engines.every(e => isEngineReady(e))
  
  return {
    allReady,
    isReady: isEngineReady,
    waitForAll: () => waitForEngines(engines),
  }
}
[V0_FILE]typescriptreact:file="app/admin/engine-sync/page.tsx" isMerged="true"
"use client"

import { useState, useEffect, useCallback } from "react"
import { Activity, Zap, Clock, Database, TrendingUp, AlertTriangle, CheckCircle2, RefreshCw } from "lucide-react"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"

// ============================================================================
// ADMIN ENGINE SYNC PAGE
// Section 16 & 18 - Monitor event system and engine synchronization
// ============================================================================

interface EventLog {
  id: string
  type: string
  source: string
  timestamp: number
  data: Record<string, unknown>
}

// Engine status type
interface EngineStatus {
  name: string
  status: "online" | "offline" | "degraded"
  lastUpdate: number
  eventCount: number
}

export default function EngineMonitorPage() {
  const [events, setEvents] = useState<EventLog[]>([])
  const [engines, setEngines] = useState<EngineStatus[]>([
    { name: "PriceEngine", status: "online", lastUpdate: Date.now(), eventCount: 0 },
    { name: "TradingContext", status: "online", lastUpdate: Date.now(), eventCount: 0 },
    { name: "MatchingEngine", status: "online", lastUpdate: Date.now(), eventCount: 0 },
    { name: "PerpEngine", status: "online", lastUpdate: Date.now(), eventCount: 0 },
    { name: "RiskEngine", status: "online", lastUpdate: Date.now(), eventCount: 0 },
  ])
  const [isPaused, setIsPaused] = useState(false)
  const [filter, setFilter] = useState<string>("all")
  
  // Listen for trading events
  useEffect(() => {
    const eventTypes = [
      "trading:mark_price_updated",
      "trading:index_price_updated",
      "trading:funding_rate_updated",
      "trading:position_liquidated",
      "funding_rate_updated",
      "funding_payment_executed",
      "position_liquidated",
    ]
    
    const handleEvent = (e: Event) => {
      if (isPaused) return
      
      const customEvent = e as CustomEvent
      const eventType = e.type.replace("trading:", "")
      
      const newEvent: EventLog = {
        id: `${Date.now()}-${Math.random().toString(36).substring(7)}`,
        type: eventType,
        source: customEvent.detail?.source || "Unknown",
        timestamp: customEvent.detail?.timestamp || Date.now(),
        data: customEvent.detail?.data || customEvent.detail || {},
      }
      
      setEvents(prev => [newEvent, ...prev].slice(0, 100))
      
      // Update engine status
      if (customEvent.detail?.source) {
        setEngines(prev => prev.map(engine => {
          if (engine.name === customEvent.detail.source) {
            return {
              ...engine,
              lastUpdate: Date.now(),
              eventCount: engine.eventCount + 1,
              status: "online" as const,
            }
          }
          return engine
        }))
      }
    }
    
    eventTypes.forEach(type => {
      window.addEventListener(type, handleEvent)
    })
    
    return () => {
      eventTypes.forEach(type => {
        window.removeEventListener(type, handleEvent)
      })
    }
  }, [isPaused])
  
  // Check for stale engines
  useEffect(() => {
    const interval = setInterval(() => {
      const now = Date.now()
      setEngines(prev => prev.map(engine => {
        const timeSinceUpdate = now - engine.lastUpdate
        let status: "online" | "offline" | "degraded" = "online"
        
        if (timeSinceUpdate > 30000) {
          status = "offline"
        } else if (timeSinceUpdate > 10000) {
          status = "degraded"
        }
        
        return { ...engine, status }
      }))
    }, 5000)
    
    return () => clearInterval(interval)
  }, [])
  
  const clearEvents = useCallback(() => {
    setEvents([])
  }, [])
  
  const filteredEvents = filter === "all" 
    ? events 
    : events.filter(e => e.type.includes(filter))
  
  const getEventColor = (type: string) => {
    if (type.includes("price")) return "text-blue-400"
    if (type.includes("funding")) return "text-[#F7931A]"
    if (type.includes("liquidat")) return "text-red-400"
    if (type.includes("position")) return "text-emerald-400"
    return "text-gray-400"
  }
  
  const getStatusColor = (status: string) => {
    switch (status) {
      case "online": return "bg-emerald-500"
      case "degraded": return "bg-yellow-500"
      case "offline": return "bg-red-500"
      default: return "bg-gray-500"
    }
  }
  
  return (
    <div className="p-6 space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold">Engine Synchronization Monitor</h1>
          <p className="text-sm text-muted-foreground mt-1">
            Section 16 & 18 - Real-time event system and engine status
          </p>
        </div>
        <div className="flex items-center gap-2">
          <Button
            variant="outline"
            size="sm"
            onClick={() => setIsPaused(!isPaused)}
            className={cn(isPaused && "border-yellow-500 text-yellow-500")}
          >
            {isPaused ? "Resume" : "Pause"}
          </Button>
          <Button variant="outline" size="sm" onClick={clearEvents}>
            Clear
          </Button>
        </div>
      </div>
      
      {/* Engine Status Grid */}
      <div className="grid grid-cols-5 gap-4">
        {engines.map(engine => (
          <div key={engine.name} className="bg-[#12121a] border border-white/10 rounded-xl p-4">
            <div className="flex items-center justify-between mb-2">
              <span className="text-sm font-medium">{engine.name}</span>
              <div className={cn("w-2 h-2 rounded-full", getStatusColor(engine.status))} />
            </div>
            <div className="space-y-1">
              <div className="flex justify-between text-xs">
                <span className="text-gray-500">Status</span>
                <span className={cn(
                  engine.status === "online" ? "text-emerald-400" : 
                  engine.status === "degraded" ? "text-yellow-400" : "text-red-400"
                )}>
                  {engine.status}
                </span>
              </div>
              <div className="flex justify-between text-xs">
                <span className="text-gray-500">Events</span>
                <span className="font-mono">{engine.eventCount}</span>
              </div>
              <div className="flex justify-between text-xs">
                <span className="text-gray-500">Last Update</span>
                <span className="font-mono text-gray-400">
                  {Math.floor((Date.now() - engine.lastUpdate) / 1000)}s ago
                </span>
              </div>
            </div>
          </div>
        ))}
      </div>
      
      {/* Stats Row */}
      <div className="grid grid-cols-4 gap-4">
        <div className="bg-[#12121a] border border-white/10 rounded-xl p-4">
          <div className="flex items-center gap-2 mb-2">
            <Activity className="w-4 h-4 text-blue-400" />
            <span className="text-sm text-gray-400">Total Events</span>
          </div>
          <p className="text-2xl font-bold">{events.length}</p>
        </div>
        <div className="bg-[#12121a] border border-white/10 rounded-xl p-4">
          <div className="flex items-center gap-2 mb-2">
            <Zap className="w-4 h-4 text-[#F7931A]" />
            <span className="text-sm text-gray-400">Price Updates</span>
          </div>
          <p className="text-2xl font-bold">{events.filter(e => e.type.includes("price")).length}</p>
        </div>
        <div className="bg-[#12121a] border border-white/10 rounded-xl p-4">
          <div className="flex items-center gap-2 mb-2">
            <Clock className="w-4 h-4 text-emerald-400" />
            <span className="text-sm text-gray-400">Funding Events</span>
          </div>
          <p className="text-2xl font-bold">{events.filter(e => e.type.includes("funding")).length}</p>
        </div>
        <div className="bg-[#12121a] border border-white/10 rounded-xl p-4">
          <div className="flex items-center gap-2 mb-2">
            <AlertTriangle className="w-4 h-4 text-red-400" />
            <span className="text-sm text-gray-400">Liquidations</span>
          </div>
          <p className="text-2xl font-bold">{events.filter(e => e.type.includes("liquidat")).length}</p>
        </div>
      </div>
      
      {/* Event Filter */}
      <div className="flex gap-2">
        {["all", "price", "funding", "position", "liquidat"].map(f => (
          <Button
            key={f}
            variant={filter === f ? "default" : "outline"}
            size="sm"
            onClick={() => setFilter(f)}
            className={cn(
              filter === f && "bg-[#F7931A] text-black hover:bg-[#F7931A]/90"
            )}
          >
            {f === "all" ? "All Events" : f.charAt(0).toUpperCase() + f.slice(1)}
          </Button>
        ))}
      </div>
      
      {/* Event Log */}
      <div className="bg-[#12121a] border border-white/10 rounded-xl">
        <div className="p-4 border-b border-white/10">
          <h3 className="text-sm font-semibold flex items-center gap-2">
            <Database className="w-4 h-4" />
            Event Log
            {isPaused && <span className="text-xs text-yellow-500">(Paused)</span>}
          </h3>
        </div>
        <div className="max-h-[400px] overflow-y-auto">
          {filteredEvents.length === 0 ? (
            <div className="p-8 text-center text-gray-500">
              <RefreshCw className="w-8 h-8 mx-auto mb-2 animate-spin opacity-50" />
              <p>Waiting for events...</p>
            </div>
          ) : (
            <div className="divide-y divide-white/5">
              {filteredEvents.map(event => (
                <div key={event.id} className="p-3 hover:bg-white/5 transition-colors">
                  <div className="flex items-center justify-between mb-1">
                    <div className="flex items-center gap-2">
                      <span className={cn("text-sm font-mono", getEventColor(event.type))}>
                        {event.type}
                      </span>
                      <span className="text-xs text-gray-500">from {event.source}</span>
                    </div>
                    <span className="text-xs text-gray-500 font-mono">
                      {new Date(event.timestamp).toLocaleTimeString()}
                    </span>
                  </div>
                  <pre className="text-xs text-gray-400 font-mono bg-black/30 rounded p-2 overflow-x-auto">
                    {JSON.stringify(event.data, null, 2)}
                  </pre>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
      
      {/* Section Info */}
      <div className="bg-[#1a1d21] rounded-xl p-4 border border-white/5">
        <h3 className="text-sm font-semibold mb-3">Implementation Details</h3>
        <div className="grid grid-cols-2 gap-4 text-xs">
          <div>
            <p className="text-[#F7931A] font-semibold mb-1">Section 16 - Event System</p>
            <ul className="text-gray-400 space-y-1">
              <li>- mark_price_updated: Price changes</li>
              <li>- funding_rate_updated: Funding rate changes</li>
              <li>- funding_payment_executed: Funding settled</li>
              <li>- position_liquidated: Position closed by liquidation</li>
            </ul>
          </div>
          <div>
            <p className="text-[#F7931A] font-semibold mb-1">Section 18 - Engine Synchronization</p>
            <ul className="text-gray-400 space-y-1">
              <li>- EngineSyncProvider wraps all engines</li>
              <li>- Centralized event bus for communication</li>
              <li>- Batch updates for performance (Section 17)</li>
              <li>- Engine ready status tracking</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/engine-sync/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"

export default function EngineMonitorLoading() {
  return (
    <div className="p-6 space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <Skeleton className="h-8 w-64 bg-white/10" />
          <Skeleton className="h-4 w-48 mt-2 bg-white/10" />
        </div>
        <div className="flex items-center gap-2">
          <Skeleton className="h-9 w-20 bg-white/10" />
          <Skeleton className="h-9 w-16 bg-white/10" />
        </div>
      </div>
      
      {/* Engine Status Grid */}
      <div className="grid grid-cols-5 gap-4">
        {[...Array(5)].map((_, i) => (
          <div key={i} className="bg-[#12121a] border border-white/10 rounded-xl p-4">
            <div className="flex items-center justify-between mb-2">
              <Skeleton className="h-4 w-24 bg-white/10" />
              <Skeleton className="w-2 h-2 rounded-full bg-white/10" />
            </div>
            <div className="space-y-2">
              <Skeleton className="h-3 w-full bg-white/10" />
              <Skeleton className="h-3 w-full bg-white/10" />
              <Skeleton className="h-3 w-full bg-white/10" />
            </div>
          </div>
        ))}
      </div>
      
      {/* Stats Row */}
      <div className="grid grid-cols-4 gap-4">
        {[...Array(4)].map((_, i) => (
          <div key={i} className="bg-[#12121a] border border-white/10 rounded-xl p-4">
            <Skeleton className="h-4 w-24 mb-2 bg-white/10" />
            <Skeleton className="h-8 w-16 bg-white/10" />
          </div>
        ))}
      </div>
      
      {/* Event Log */}
      <div className="bg-[#12121a] border border-white/10 rounded-xl">
        <div className="p-4 border-b border-white/10">
          <Skeleton className="h-5 w-32 bg-white/10" />
        </div>
        <div className="p-4 space-y-3">
          {[...Array(5)].map((_, i) => (
            <div key={i} className="p-3 bg-white/5 rounded-lg">
              <Skeleton className="h-4 w-48 mb-2 bg-white/10" />
              <Skeleton className="h-16 w-full bg-white/10" />
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/price-engine/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"

export default function PriceEngineLoading() {
  return (
    <div className="p-6 space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <Skeleton className="h-8 w-48 bg-white/10" />
          <Skeleton className="h-4 w-64 mt-2 bg-white/10" />
        </div>
        <Skeleton className="h-9 w-32 bg-white/10" />
      </div>
      
      {/* Stats Grid */}
      <div className="grid grid-cols-4 gap-4">
        {[...Array(4)].map((_, i) => (
          <div key={i} className="bg-[#12121a] border border-white/10 rounded-xl p-4">
            <Skeleton className="h-4 w-20 mb-2 bg-white/10" />
            <Skeleton className="h-8 w-24 bg-white/10" />
          </div>
        ))}
      </div>
      
      {/* Main Content */}
      <div className="grid grid-cols-2 gap-6">
        <div className="bg-[#12121a] border border-white/10 rounded-xl p-4">
          <Skeleton className="h-5 w-32 mb-4 bg-white/10" />
          <div className="space-y-3">
            {[...Array(5)].map((_, i) => (
              <div key={i} className="flex justify-between items-center p-2 bg-white/5 rounded">
                <Skeleton className="h-4 w-24 bg-white/10" />
                <Skeleton className="h-4 w-20 bg-white/10" />
              </div>
            ))}
          </div>
        </div>
        <div className="bg-[#12121a] border border-white/10 rounded-xl p-4">
          <Skeleton className="h-5 w-32 mb-4 bg-white/10" />
          <div className="space-y-3">
            {[...Array(5)].map((_, i) => (
              <div key={i} className="flex justify-between items-center p-2 bg-white/5 rounded">
                <Skeleton className="h-4 w-24 bg-white/10" />
                <Skeleton className="h-4 w-20 bg-white/10" />
              </div>
            ))}
          </div>
        </div>
      </div>
      
      {/* Configuration */}
      <div className="bg-[#12121a] border border-white/10 rounded-xl p-4">
        <Skeleton className="h-5 w-40 mb-4 bg-white/10" />
        <div className="grid grid-cols-3 gap-4">
          {[...Array(6)].map((_, i) => (
            <div key={i} className="p-3 bg-white/5 rounded">
              <Skeleton className="h-3 w-24 mb-2 bg-white/10" />
              <Skeleton className="h-6 w-16 bg-white/10" />
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/trade/margin-mode-selector.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { usePortfolioMargin, type MarginMode, MARGIN_MODE_CONFIGS } from "@/lib/portfolio-margin-engine"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { cn } from "@/lib/utils"
import { Shield, Layers, Briefcase, Check, AlertTriangle, ChevronDown } from "lucide-react"

// ============================================================================
// MARGIN MODE SELECTOR COMPONENT
// Section 1 - Allows users to switch between Isolated, Cross, and Portfolio modes
// ============================================================================

const MODE_ICONS: Record<MarginMode, React.ReactNode> = {
  isolated: <Shield className="w-4 h-4" />,
  cross: <Layers className="w-4 h-4" />,
  portfolio: <Briefcase className="w-4 h-4" />,
}

const MODE_COLORS: Record<MarginMode, string> = {
  isolated: "text-blue-400",
  cross: "text-emerald-400",
  portfolio: "text-[#F7931A]",
}

interface MarginModeSelectorProps {
  compact?: boolean
  className?: string
}

export function MarginModeSelector({ compact = false, className }: MarginModeSelectorProps) {
  const { marginMode, setMarginMode, canSwitchMarginMode, effectiveCollateralValue } = usePortfolioMargin()
  const [open, setOpen] = useState(false)
  const [error, setError] = useState<string | null>(null)

const handleModeChange = (mode: MarginMode) => {
    setError(null)
    const result = setMarginMode(mode)
    if (!result.success) {
      setError(result.error || "Failed to change margin mode")
    } else {
      setOpen(false)
    }
  }

const currentConfig = MARGIN_MODE_CONFIGS[marginMode]

if (compact) {
    return (
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogTrigger asChild>
          <Button
            variant="ghost"
            size="sm"
            className={cn(
              "h-7 px-2 text-xs gap-1.5 bg-[#1e2329] hover:bg-[#2a2e39] border border-white/10",
              MODE_COLORS[marginMode],
              className
            )}
          >
            {MODE_ICONS[marginMode]}
            <span className="capitalize">{marginMode}</span>
            <ChevronDown className="w-3 h-3 opacity-50" />
          </Button>
        </DialogTrigger>
        <DialogContent className="bg-[#12121a] border-white/10 max-w-md">
          <DialogHeader>
            <DialogTitle>Select Margin Mode</DialogTitle>
          </DialogHeader>
          <MarginModeContent
            currentMode={marginMode}
            onSelect={handleModeChange}
            canSwitch={canSwitchMarginMode}
            equity={effectiveCollateralValue}
            error={error}
          />
        </DialogContent>
      </Dialog>
    )
  }

return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button
          variant="outline"
          className={cn(
            "gap-2 bg-[#1e2329] hover:bg-[#2a2e39] border-white/10",
            MODE_COLORS[marginMode],
            className
          )}
        >
          {MODE_ICONS[marginMode]}
          <div className="text-left">
            <div className="text-xs capitalize font-medium">{marginMode} Margin</div>
            <div className="text-[10px] text-muted-foreground">Click to change</div>
          </div>
          <ChevronDown className="w-4 h-4 opacity-50 ml-auto" />
        </Button>
      </DialogTrigger>
      <DialogContent className="bg-[#12121a] border-white/10 max-w-lg">
        <DialogHeader>
          <DialogTitle>Select Margin Mode</DialogTitle>
        </DialogHeader>
        <MarginModeContent
          currentMode={marginMode}
          onSelect={handleModeChange}
          canSwitch={canSwitchMarginMode}
          equity={effectiveCollateralValue}
          error={error}
        />
      </DialogContent>
    </Dialog>
  )
}

// Mode selection content
function MarginModeContent({
  currentMode,
  onSelect,
  canSwitch,
  equity,
  error,
}: {
  currentMode: MarginMode
  onSelect: (mode: MarginMode) => void
  canSwitch: (mode: MarginMode) => { canSwitch: boolean; reason?: string }
  equity: number
  error: string | null
}) {
  return (
    <div className="space-y-4">
      {error && (
        <div className="p-3 bg-red-500/10 border border-red-500/30 rounded-lg text-sm text-red-400 flex items-center gap-2">
          <AlertTriangle className="w-4 h-4 shrink-0" />
          {error}
        </div>
      )}

<div className="text-xs text-muted-foreground">
        Current Equity: <span className="text-white font-mono">${equity.toLocaleString()}</span>
      </div>

<div className="space-y-2">
        {(Object.keys(MARGIN_MODE_CONFIGS) as MarginMode[]).map((mode) => {
          const config = MARGIN_MODE_CONFIGS[mode]
          const isSelected = mode === currentMode
          const switchCheck = canSwitch(mode)
          const canSelect = isSelected || switchCheck.canSwitch

return (
            <button
              key={mode}
              onClick={() => canSelect && onSelect(mode)}
              disabled={!canSelect}
              className={cn(
                "w-full p-4 rounded-lg border text-left transition-all",
                isSelected
                  ? "bg-[#1e2329] border-[#F7931A]"
                  : canSelect
                  ? "bg-[#1a1d21] border-white/10 hover:border-white/20"
                  : "bg-[#1a1d21]/50 border-white/5 opacity-50 cursor-not-allowed"
              )}
            >
              <div className="flex items-start justify-between">
                <div className="flex items-center gap-3">
                  <div className={cn("p-2 rounded-lg bg-white/5", MODE_COLORS[mode])}>
                    {MODE_ICONS[mode]}
                  </div>
                  <div>
                    <div className="flex items-center gap-2">
                      <span className="font-medium capitalize">{mode} Margin</span>
                      {isSelected && (
                        <span className="text-xs px-1.5 py-0.5 bg-[#F7931A]/20 text-[#F7931A] rounded">
                          Active
                        </span>
                      )}
                    </div>
                    <div className="text-xs text-muted-foreground mt-0.5">
                      Max {config.maxLeverage}x leverage
                      {config.minEquityRequired > 0 && (
                        <span className="ml-2">
                          Min ${config.minEquityRequired.toLocaleString()}
                        </span>
                      )}
                    </div>
                  </div>
                </div>
                {isSelected && <Check className="w-5 h-5 text-[#F7931A]" />}
              </div>

<p className="text-xs text-muted-foreground mt-3">{config.description}</p>

<div className="mt-3 flex flex-wrap gap-1.5">
                {config.features.map((feature, i) => (
                  <span
                    key={i}
                    className="text-[10px] px-2 py-0.5 bg-white/5 rounded-full text-gray-400"
                  >
                    {feature}
                  </span>
                ))}
              </div>

{!canSelect && !isSelected && switchCheck.reason && (
                <div className="mt-3 text-xs text-amber-400 flex items-center gap-1.5">
                  <AlertTriangle className="w-3 h-3" />
                  {switchCheck.reason}
                </div>
              )}
            </button>
          )
        })}
      </div>

<div className="pt-2 border-t border-white/10 text-[10px] text-muted-foreground">
        Note: You can only switch margin modes when you have no open positions.
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/portfolio-margin/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { 
  usePortfolioMargin, 
  MARGIN_MODE_CONFIGS, 
  COLLATERAL_CONFIGS,
  ASSET_RISK_CONFIGS,
  CORRELATION_MATRIX,
  STRESS_SCENARIOS,
  CONCENTRATION_THRESHOLDS,
  FAILSAFE_THRESHOLDS,
  type MarginMode 
} from "@/lib/portfolio-margin-engine"
import { cn } from "@/lib/utils"
import { 
  Shield, 
  Layers, 
  Briefcase, 
  Wallet,
  TrendingUp,
  TrendingDown,
  AlertTriangle,
  Activity,
  Percent,
  DollarSign,
  Settings,
  RefreshCw,
  Info,
  Link2,
  PieChart,
  Zap,
  FlaskConical,
  ShieldAlert,
  Lock
} from "lucide-react"
import { Button } from "@/components/ui/button"

// ============================================================================
// ADMIN PORTFOLIO MARGIN PAGE
// Monitor and configure Portfolio Margin Risk Engine
// Phase 1 Sections: S1, S2, S3, S13
// ============================================================================

export default function AdminPortfolioMarginPage() {
  const {
    marginMode,
    accountEquity,
    marginRatio,
    accountHealth,
    healthStatus,
    liquidationRiskLevel,
    totalInitialMargin,
    totalMaintenanceMargin,
    exposure,
    positions,
    collateralBalances,
    totalCollateralValue,
    effectiveCollateralValue,
    // New sections
    riskOffset,
    concentrationRisk,
    positionRiskContributions,
    stressTestResults,
    failsafeStatus,
  } = usePortfolioMargin()

const [refreshKey, setRefreshKey] = useState(0)

// Auto-refresh every 5 seconds
  useEffect(() => {
    const interval = setInterval(() => {
      setRefreshKey(k => k + 1)
    }, 5000)
    return () => clearInterval(interval)
  }, [])

const healthColor = {
    healthy: "text-emerald-400",
    warning: "text-amber-400",
    critical: "text-red-400",
  }[healthStatus]

const riskColor = {
    safe: "text-emerald-400",
    warning: "text-amber-400",
    danger: "text-red-400",
    liquidation: "text-red-500",
  }[liquidationRiskLevel]

return (
    <div className="p-6 space-y-6 max-w-7xl mx-auto">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold">Portfolio Margin Engine</h1>
          <p className="text-sm text-muted-foreground mt-1">
            Full Implementation: S1-S20 | Margin Modes, Risk Offset, Concentration, Stress Testing, Failsafe
          </p>
        </div>
        <Button
          variant="outline"
          size="sm"
          onClick={() => setRefreshKey(k => k + 1)}
          className="gap-2"
        >
          <RefreshCw className="w-4 h-4" />
          Refresh
        </Button>
      </div>

{/* Current Status Overview */}
      <div className="grid grid-cols-5 gap-4">
        <div className="bg-[#12121a] border border-white/10 rounded-xl p-4">
          <div className="text-xs text-muted-foreground mb-1">Margin Mode</div>
          <div className={cn(
            "text-lg font-semibold capitalize",
            marginMode === "portfolio" ? "text-[#F7931A]" :
            marginMode === "cross" ? "text-emerald-400" : "text-blue-400"
          )}>
            {marginMode}
          </div>
          <div className="text-xs text-muted-foreground">
            Max {MARGIN_MODE_CONFIGS[marginMode].maxLeverage}x
          </div>
        </div>

<div className="bg-[#12121a] border border-white/10 rounded-xl p-4">
          <div className="text-xs text-muted-foreground mb-1">Account Equity</div>
          <div className="text-lg font-semibold font-mono">
            ${accountEquity.equity.toLocaleString(undefined, { maximumFractionDigits: 2 })}
          </div>
          <div className={cn(
            "text-xs",
            accountEquity.unrealizedPnl >= 0 ? "text-emerald-400" : "text-red-400"
          )}>
            PnL: {accountEquity.unrealizedPnl >= 0 ? "+" : ""}${accountEquity.unrealizedPnl.toFixed(2)}
          </div>
        </div>

<div className="bg-[#12121a] border border-white/10 rounded-xl p-4">
          <div className="text-xs text-muted-foreground mb-1">Margin Ratio</div>
          <div className={cn("text-lg font-semibold font-mono", riskColor)}>
            {(marginRatio * 100).toFixed(2)}%
          </div>
          <div className="text-xs text-muted-foreground">
            Maintenance: ${totalMaintenanceMargin.toFixed(2)}
          </div>
        </div>

<div className="bg-[#12121a] border border-white/10 rounded-xl p-4">
          <div className="text-xs text-muted-foreground mb-1">Account Health</div>
          <div className={cn("text-lg font-semibold font-mono", healthColor)}>
            {accountHealth > 10 ? ">10" : accountHealth.toFixed(2)}
          </div>
          <div className={cn("text-xs capitalize", healthColor)}>
            {healthStatus}
          </div>
        </div>

<div className="bg-[#12121a] border border-white/10 rounded-xl p-4">
          <div className="text-xs text-muted-foreground mb-1">Risk Level</div>
          <div className={cn(
            "text-lg font-semibold capitalize",
            riskColor
          )}>
            {liquidationRiskLevel}
          </div>
          <div className="text-xs text-muted-foreground">
            {positions.length} positions
          </div>
        </div>
      </div>

{/* Section 1 - Margin Modes */}
      <div className="bg-[#12121a] border border-white/10 rounded-xl p-4">
        <h3 className="text-sm font-semibold mb-4 flex items-center gap-2">
          <Shield className="w-4 h-4 text-[#F7931A]" />
          Section 1 - Margin Modes Configuration
        </h3>
        <div className="grid grid-cols-3 gap-4">
          {(Object.keys(MARGIN_MODE_CONFIGS) as MarginMode[]).map(mode => {
            const config = MARGIN_MODE_CONFIGS[mode]
            const isActive = mode === marginMode
            return (
              <div 
                key={mode}
                className={cn(
                  "p-4 rounded-lg border",
                  isActive ? "bg-[#1e2329] border-[#F7931A]" : "bg-[#1a1d21] border-white/10"
                )}
              >
                <div className="flex items-center justify-between mb-2">
                  <div className="flex items-center gap-2">
                    {mode === "isolated" && <Shield className="w-4 h-4 text-blue-400" />}
                    {mode === "cross" && <Layers className="w-4 h-4 text-emerald-400" />}
                    {mode === "portfolio" && <Briefcase className="w-4 h-4 text-[#F7931A]" />}
                    <span className="font-medium capitalize">{mode}</span>
                  </div>
                  {isActive && (
                    <span className="text-xs px-2 py-0.5 bg-[#F7931A]/20 text-[#F7931A] rounded">
                      Active
                    </span>
                  )}
                </div>
                <div className="space-y-1 text-xs text-muted-foreground">
                  <div>Max Leverage: {config.maxLeverage}x</div>
                  <div>Min Equity: ${config.minEquityRequired.toLocaleString()}</div>
                </div>
                <p className="text-[10px] text-gray-500 mt-2">{config.description}</p>
              </div>
            )
          })}
        </div>
      </div>

{/* Section 2 - Account Equity Calculation */}
      <div className="bg-[#12121a] border border-white/10 rounded-xl p-4">
        <h3 className="text-sm font-semibold mb-4 flex items-center gap-2">
          <Wallet className="w-4 h-4 text-[#F7931A]" />
          Section 2 - Account Equity Calculation
        </h3>
        <div className="grid grid-cols-4 gap-4 mb-4">
          <div className="bg-[#1a1d21] rounded-lg p-3">
            <div className="text-xs text-muted-foreground mb-1">Wallet Balance</div>
            <div className="text-lg font-mono">${accountEquity.walletBalance.toFixed(2)}</div>
            <div className="text-[10px] text-muted-foreground">After haircuts</div>
          </div>
          <div className="bg-[#1a1d21] rounded-lg p-3">
            <div className="text-xs text-muted-foreground mb-1">Unrealized PnL</div>
            <div className={cn(
              "text-lg font-mono",
              accountEquity.unrealizedPnl >= 0 ? "text-emerald-400" : "text-red-400"
            )}>
              {accountEquity.unrealizedPnl >= 0 ? "+" : ""}${accountEquity.unrealizedPnl.toFixed(2)}
            </div>
          </div>
          <div className="bg-[#1a1d21] rounded-lg p-3">
            <div className="text-xs text-muted-foreground mb-1">Realized PnL</div>
            <div className={cn(
              "text-lg font-mono",
              accountEquity.realizedPnl >= 0 ? "text-emerald-400" : "text-red-400"
            )}>
              {accountEquity.realizedPnl >= 0 ? "+" : ""}${accountEquity.realizedPnl.toFixed(2)}
            </div>
          </div>
          <div className="bg-[#1a1d21] rounded-lg p-3 border border-[#F7931A]/30">
            <div className="text-xs text-muted-foreground mb-1">Total Equity</div>
            <div className="text-lg font-mono font-semibold">${accountEquity.equity.toFixed(2)}</div>
            <div className="text-[10px] text-[#F7931A]">Wallet + Unrealized PnL</div>
          </div>
        </div>
        <div className="grid grid-cols-3 gap-4">
          <div className="bg-[#1a1d21] rounded-lg p-3">
            <div className="text-xs text-muted-foreground mb-1">Used Margin</div>
            <div className="text-lg font-mono">${accountEquity.usedMargin.toFixed(2)}</div>
          </div>
          <div className="bg-[#1a1d21] rounded-lg p-3">
            <div className="text-xs text-muted-foreground mb-1">Available Margin</div>
            <div className="text-lg font-mono text-emerald-400">${accountEquity.availableMargin.toFixed(2)}</div>
          </div>
          <div className="bg-[#1a1d21] rounded-lg p-3">
            <div className="text-xs text-muted-foreground mb-1">Margin Ratio</div>
            <div className={cn("text-lg font-mono", riskColor)}>{(marginRatio * 100).toFixed(2)}%</div>
          </div>
        </div>
        <div className="mt-4 p-3 bg-[#1a1d21]/50 rounded-lg border border-white/5 text-xs text-muted-foreground">
          <span className="text-[#F7931A]">Formula:</span> Equity = Wallet Balance + Unrealized PnL | 
          Available = Equity - Used Margin | Margin Ratio = Maintenance / Equity
        </div>
      </div>

{/* Section 3 - Portfolio Exposure */}
      <div className="bg-[#12121a] border border-white/10 rounded-xl p-4">
        <h3 className="text-sm font-semibold mb-4 flex items-center gap-2">
          <Activity className="w-4 h-4 text-[#F7931A]" />
          Section 3 - Portfolio Exposure Tracking
        </h3>
        <div className="grid grid-cols-4 gap-4 mb-4">
          <div className="bg-[#1a1d21] rounded-lg p-3">
            <div className="text-xs text-muted-foreground mb-1">Gross Exposure</div>
            <div className="text-lg font-mono">${exposure.grossExposure.toLocaleString()}</div>
            <div className="text-[10px] text-muted-foreground">|Long| + |Short|</div>
          </div>
          <div className="bg-[#1a1d21] rounded-lg p-3">
            <div className="text-xs text-muted-foreground mb-1">Net Exposure</div>
            <div className={cn(
              "text-lg font-mono",
              exposure.netExposure >= 0 ? "text-emerald-400" : "text-red-400"
            )}>
              ${Math.abs(exposure.netExposure).toLocaleString()}
              <span className="text-xs ml-1">{exposure.netExposure >= 0 ? "Long" : "Short"}</span>
            </div>
          </div>
          <div className="bg-[#1a1d21] rounded-lg p-3">
            <div className="flex items-center gap-1 text-xs text-emerald-400 mb-1">
              <TrendingUp className="w-3 h-3" /> Long Exposure
            </div>
            <div className="text-lg font-mono">${exposure.longExposure.toLocaleString()}</div>
          </div>
          <div className="bg-[#1a1d21] rounded-lg p-3">
            <div className="flex items-center gap-1 text-xs text-red-400 mb-1">
              <TrendingDown className="w-3 h-3" /> Short Exposure
            </div>
            <div className="text-lg font-mono">${exposure.shortExposure.toLocaleString()}</div>
          </div>
        </div>

{/* Positions Table */}
        <div className="overflow-x-auto">
          <table className="w-full text-xs">
            <thead>
              <tr className="border-b border-white/10">
                <th className="text-left py-2 px-3 text-muted-foreground font-medium">Symbol</th>
                <th className="text-left py-2 px-3 text-muted-foreground font-medium">Direction</th>
                <th className="text-right py-2 px-3 text-muted-foreground font-medium">Size</th>
                <th className="text-right py-2 px-3 text-muted-foreground font-medium">Notional</th>
                <th className="text-right py-2 px-3 text-muted-foreground font-medium">Entry</th>
                <th className="text-right py-2 px-3 text-muted-foreground font-medium">Mark</th>
                <th className="text-right py-2 px-3 text-muted-foreground font-medium">PnL</th>
                <th className="text-right py-2 px-3 text-muted-foreground font-medium">Risk Factor</th>
              </tr>
            </thead>
            <tbody>
              {positions.length === 0 ? (
                <tr>
                  <td colSpan={8} className="text-center py-8 text-muted-foreground">
                    No open positions
                  </td>
                </tr>
              ) : (
                positions.map(p => (
                  <tr key={p.id} className="border-b border-white/5">
                    <td className="py-2 px-3 font-medium">{p.symbol}</td>
                    <td className="py-2 px-3">
                      <span className={p.direction === "long" ? "text-emerald-400" : "text-red-400"}>
                        {p.direction.toUpperCase()}
                      </span>
                    </td>
                    <td className="py-2 px-3 text-right font-mono">{p.size.toFixed(4)}</td>
                    <td className="py-2 px-3 text-right font-mono">${p.notionalValue.toLocaleString()}</td>
                    <td className="py-2 px-3 text-right font-mono">${p.entryPrice.toLocaleString()}</td>
                    <td className="py-2 px-3 text-right font-mono">${p.markPrice.toLocaleString()}</td>
                    <td className={cn(
                      "py-2 px-3 text-right font-mono",
                      p.unrealizedPnl >= 0 ? "text-emerald-400" : "text-red-400"
                    )}>
                      {p.unrealizedPnl >= 0 ? "+" : ""}${p.unrealizedPnl.toFixed(2)}
                    </td>
                    <td className="py-2 px-3 text-right font-mono">{(p.riskFactor * 100).toFixed(1)}%</td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      </div>

{/* Section 13 - Collateral Management */}
      <div className="bg-[#12121a] border border-white/10 rounded-xl p-4">
        <h3 className="text-sm font-semibold mb-4 flex items-center gap-2">
          <DollarSign className="w-4 h-4 text-[#F7931A]" />
          Section 13 - Collateral Management & Haircuts
        </h3>
        
        <div className="grid grid-cols-2 gap-4 mb-4">
          <div className="bg-[#1a1d21] rounded-lg p-3">
            <div className="text-xs text-muted-foreground mb-1">Total Collateral</div>
            <div className="text-lg font-mono">${totalCollateralValue.toFixed(2)}</div>
          </div>
          <div className="bg-[#1a1d21] rounded-lg p-3">
            <div className="text-xs text-muted-foreground mb-1">Effective Value (After Haircuts)</div>
            <div className="text-lg font-mono text-emerald-400">${effectiveCollateralValue.toFixed(2)}</div>
          </div>
        </div>

{/* Collateral Table */}
        <div className="overflow-x-auto mb-4">
          <table className="w-full text-xs">
            <thead>
              <tr className="border-b border-white/10">
                <th className="text-left py-2 px-3 text-muted-foreground font-medium">Token</th>
                <th className="text-right py-2 px-3 text-muted-foreground font-medium">Amount</th>
                <th className="text-right py-2 px-3 text-muted-foreground font-medium">Haircut</th>
                <th className="text-right py-2 px-3 text-muted-foreground font-medium">Effective Value</th>
                <th className="text-right py-2 px-3 text-muted-foreground font-medium">Weight</th>
                <th className="text-right py-2 px-3 text-muted-foreground font-medium">Max Weight</th>
              </tr>
            </thead>
            <tbody>
              {collateralBalances.map(c => {
                const config = COLLATERAL_CONFIGS[c.token]
                return (
                  <tr key={c.token} className="border-b border-white/5">
                    <td className="py-2 px-3 font-medium">{c.token}</td>
                    <td className="py-2 px-3 text-right font-mono">${c.amount.toFixed(2)}</td>
                    <td className="py-2 px-3 text-right font-mono">
                      {c.haircut > 0 ? (
                        <span className="text-amber-400">-{(c.haircut * 100).toFixed(0)}%</span>
                      ) : (
                        <span className="text-emerald-400">0%</span>
                      )}
                    </td>
                    <td className="py-2 px-3 text-right font-mono">${c.effectiveValue.toFixed(2)}</td>
                    <td className="py-2 px-3 text-right font-mono">{(c.weight * 100).toFixed(1)}%</td>
                    <td className="py-2 px-3 text-right font-mono">{(config.maxWeight * 100).toFixed(0)}%</td>
                  </tr>
                )
              })}
            </tbody>
          </table>
        </div>

{/* Collateral Configs */}
        <div className="grid grid-cols-3 gap-4">
          {Object.values(COLLATERAL_CONFIGS).map(config => (
            <div key={config.token} className="bg-[#1a1d21] rounded-lg p-3">
              <div className="flex items-center justify-between mb-2">
                <span className="font-medium">{config.token}</span>
                <span className={cn(
                  "text-xs px-1.5 py-0.5 rounded",
                  config.haircut === 0 ? "bg-emerald-400/20 text-emerald-400" : "bg-amber-400/20 text-amber-400"
                )}>
                  {config.haircut === 0 ? "Primary" : `${(config.haircut * 100).toFixed(0)}% Haircut`}
                </span>
              </div>
              <div className="space-y-1 text-xs text-muted-foreground">
                <div>Max Weight: {(config.maxWeight * 100).toFixed(0)}%</div>
                <div>Min Deposit: ${config.minDeposit}</div>
                <div>Max Deposit: ${config.maxDeposit.toLocaleString()}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

{/* Asset Risk Configs (for reference) */}
      <div className="bg-[#12121a] border border-white/10 rounded-xl p-4">
        <h3 className="text-sm font-semibold mb-4 flex items-center gap-2">
          <Settings className="w-4 h-4 text-[#F7931A]" />
          Asset Risk Configuration (Section 5 & 6 Reference)
        </h3>
        <div className="grid grid-cols-5 gap-3">
          {Object.values(ASSET_RISK_CONFIGS).map(config => (
            <div key={config.symbol} className="bg-[#1a1d21] rounded-lg p-3">
              <div className="font-medium mb-2">{config.symbol}</div>
              <div className="space-y-1 text-xs text-muted-foreground">
                <div>Risk Factor: <span className="text-white">{(config.riskFactor * 100).toFixed(0)}%</span></div>
                <div>Maintenance: <span className="text-white">{(config.maintenanceRate * 100).toFixed(0)}%</span></div>
                <div>Max Leverage: <span className="text-white">{config.maxLeverage}x</span></div>
                <div className="text-[10px]">Group: {config.correlationGroup}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

{/* Section 8 - Correlation Matrix & Risk Offset */}
      <div className="bg-[#12121a] border border-white/10 rounded-xl p-4">
        <h3 className="text-sm font-semibold mb-4 flex items-center gap-2">
          <Link2 className="w-4 h-4 text-[#F7931A]" />
          Section 8 - Correlation Matrix & Risk Offset
        </h3>
        
        {/* Risk Offset Summary */}
        <div className="grid grid-cols-3 gap-4 mb-4">
          <div className="bg-[#1a1d21] rounded-lg p-3">
            <div className="text-xs text-muted-foreground mb-1">Total Risk Offset</div>
            <div className="text-lg font-mono text-emerald-400">
              -${riskOffset.offset.toFixed(2)}
            </div>
            <div className="text-[10px] text-muted-foreground">Margin reduction from hedges</div>
          </div>
          <div className="bg-[#1a1d21] rounded-lg p-3">
            <div className="text-xs text-muted-foreground mb-1">Offset Details</div>
            <div className="text-lg font-mono">{riskOffset.details.length}</div>
            <div className="text-[10px] text-muted-foreground">Active offset pairs</div>
          </div>
          <div className="bg-[#1a1d21] rounded-lg p-3">
            <div className="text-xs text-muted-foreground mb-1">Mode</div>
            <div className={cn(
              "text-lg capitalize",
              marginMode === "portfolio" ? "text-[#F7931A]" : "text-muted-foreground"
            )}>
              {marginMode === "portfolio" ? "Active" : "Disabled"}
            </div>
            <div className="text-[10px] text-muted-foreground">Portfolio mode required</div>
          </div>
        </div>

{/* Correlation Matrix Preview */}
        <div className="text-xs text-muted-foreground mb-2">Correlation Matrix (Sample)</div>
        <div className="overflow-x-auto">
          <table className="w-full text-[10px]">
            <thead>
              <tr className="border-b border-white/10">
                <th className="text-left py-1 px-2 text-muted-foreground"></th>
                {["BTC", "ETH", "SOL", "DOGE", "XRP"].map(s => (
                  <th key={s} className="text-center py-1 px-2 text-muted-foreground">{s}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {["BTC", "ETH", "SOL", "DOGE", "XRP"].map(row => (
                <tr key={row} className="border-b border-white/5">
                  <td className="py-1 px-2 font-medium">{row}</td>
                  {["BTC", "ETH", "SOL", "DOGE", "XRP"].map(col => {
                    const corr = CORRELATION_MATRIX[row]?.[col] || 0
                    return (
                      <td 
                        key={col} 
                        className={cn(
                          "text-center py-1 px-2 font-mono",
                          corr >= 0.8 ? "text-emerald-400" :
                          corr >= 0.6 ? "text-yellow-400" :
                          corr >= 0.4 ? "text-amber-400" :
                          "text-red-400"
                        )}
                      >
                        {corr.toFixed(2)}
                      </td>
                    )
                  })}
                </tr>
              ))}
            </tbody>
          </table>
        </div>

{/* Offset Details */}
        {riskOffset.details.length > 0 && (
          <div className="mt-4">
            <div className="text-xs text-muted-foreground mb-2">Active Offset Pairs</div>
            <div className="space-y-2">
              {riskOffset.details.map((detail, i) => (
                <div key={i} className="flex items-center justify-between bg-[#1a1d21] rounded p-2">
                  <div className="flex items-center gap-2 text-xs">
                    <span className={detail.directionA === "long" ? "text-emerald-400" : "text-red-400"}>
                      {detail.directionA.toUpperCase()} {detail.symbolA}
                    </span>
                    <span className="text-muted-foreground">/</span>
                    <span className={detail.directionB === "long" ? "text-emerald-400" : "text-red-400"}>
                      {detail.directionB.toUpperCase()} {detail.symbolB}
                    </span>
                    <span className="text-muted-foreground text-[10px]">
                      (corr: {detail.correlation.toFixed(2)})
                    </span>
                  </div>
                  <span className="text-xs text-emerald-400 font-mono">
                    -${detail.offset.toFixed(2)}
                  </span>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>

{/* Section 9 - Concentration Risk */}
      <div className="bg-[#12121a] border border-white/10 rounded-xl p-4">
        <h3 className="text-sm font-semibold mb-4 flex items-center gap-2">
          <PieChart className="w-4 h-4 text-[#F7931A]" />
          Section 9 - Concentration Risk
        </h3>
        
        <div className="grid grid-cols-4 gap-4 mb-4">
          <div className="bg-[#1a1d21] rounded-lg p-3">
            <div className="text-xs text-muted-foreground mb-1">Status</div>
            <div className={cn(
              "text-lg font-semibold",
              concentrationRisk.isConcentrated ? "text-amber-400" : "text-emerald-400"
            )}>
              {concentrationRisk.isConcentrated ? "Concentrated" : "Diversified"}
            </div>
          </div>
          <div className="bg-[#1a1d21] rounded-lg p-3">
            <div className="text-xs text-muted-foreground mb-1">Additional Margin</div>
            <div className="text-lg font-mono text-amber-400">
              +${concentrationRisk.totalAdditionalMargin.toFixed(2)}
            </div>
          </div>
          <div className="bg-[#1a1d21] rounded-lg p-3">
            <div className="text-xs text-muted-foreground mb-1">Warning Threshold</div>
            <div className="text-lg font-mono">
              {(CONCENTRATION_THRESHOLDS.WARNING_THRESHOLD * 100).toFixed(0)}%
            </div>
          </div>
          <div className="bg-[#1a1d21] rounded-lg p-3">
            <div className="text-xs text-muted-foreground mb-1">Critical Threshold</div>
            <div className="text-lg font-mono text-red-400">
              {(CONCENTRATION_THRESHOLDS.CRITICAL_THRESHOLD * 100).toFixed(0)}%
            </div>
          </div>
        </div>

{/* Concentration by Symbol */}
        <div className="space-y-3">
          {concentrationRisk.risks.map(risk => (
            <div key={risk.symbol}>
              <div className="flex justify-between text-xs mb-1">
                <span className="flex items-center gap-2">
                  {risk.symbol}
                  {risk.isConcentrated && (
                    <span className="text-[10px] px-1.5 py-0.5 bg-amber-400/20 text-amber-400 rounded">
                      Concentrated
                    </span>
                  )}
                </span>
                <span className={cn(
                  "font-mono",
                  risk.percentage >= 0.6 ? "text-red-400" :
                  risk.percentage >= 0.4 ? "text-amber-400" :
                  "text-muted-foreground"
                )}>
                  {(risk.percentage * 100).toFixed(1)}% (${risk.exposure.toLocaleString()})
                </span>
              </div>
              <div className="h-2 bg-[#2a2e39] rounded-full overflow-hidden relative">
                <div
                  className={cn(
                    "h-full transition-all",
                    risk.percentage >= 0.6 ? "bg-red-400" :
                    risk.percentage >= 0.4 ? "bg-amber-400" :
                    "bg-emerald-400"
                  )}
                  style={{ width: `${Math.min(risk.percentage * 100, 100)}%` }}
                />
                {/* Threshold markers */}
                <div 
                  className="absolute top-0 bottom-0 w-px bg-amber-400/50"
                  style={{ left: `${CONCENTRATION_THRESHOLDS.WARNING_THRESHOLD * 100}%` }}
                />
                <div 
             </article></body></html>