/**
 * Trading Bot v4 - Landing Page
 * 
 * Main dashboard with navigation to settings and analytics
 */

'use client'

export default function HomePage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900">
      {/* Header */}
      <div className="bg-gray-800/50 backdrop-blur-sm border-b border-gray-700">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-3">
              <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
                <span className="text-2xl">🚀</span>
              </div>
              <div>
                <h1 className="text-2xl font-bold text-white">Trading Bot v4</h1>
                <p className="text-sm text-gray-400">Autonomous Solana Trading</p>
              </div>
            </div>
            <div className="flex items-center space-x-2">
              <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
              <span className="text-sm text-gray-400">Online</span>
            </div>
          </div>
        </div>
      </div>

      {/* Main Content */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        {/* Hero Section */}
        <div className="text-center mb-16">
          <h2 className="text-4xl font-bold text-white mb-4">
            Welcome to Your Trading Dashboard
          </h2>
          <p className="text-xl text-gray-400 max-w-2xl mx-auto">
            Monitor performance, adjust settings, and track your autonomous trading bot
          </p>
        </div>

        {/* Recent Achievements Banner */}
        <div className="mb-12 max-w-6xl mx-auto">
          <div className="bg-gradient-to-r from-green-900/30 to-blue-900/30 backdrop-blur-sm rounded-2xl p-6 border border-green-500/20">
            <div className="flex items-center justify-center mb-4">
              <div className="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center mr-3">
                <span className="text-lg">✓</span>
              </div>
              <h3 className="text-xl font-bold text-white">Latest System Enhancements</h3>
            </div>
            
            <div className="grid md:grid-cols-3 gap-6 text-center">
              <div className="bg-gray-800/50 rounded-xl p-4 border border-gray-700/50">
                <div className="text-3xl mb-2">🏗️</div>
                <div className="text-sm font-semibold text-green-400 mb-1">HA Infrastructure</div>
                <div className="text-xs text-gray-400">Nov 25, 2025</div>
                <div className="text-xs text-gray-300 mt-2">Zero-downtime automatic failover with Hostinger secondary server validated</div>
              </div>
              
              <div className="bg-gray-800/50 rounded-xl p-4 border border-gray-700/50">
                <div className="text-3xl mb-2">📊</div>
                <div className="text-sm font-semibold text-blue-400 mb-1">Multi-Timeframe Analysis</div>
                <div className="text-xs text-gray-400">Nov 26, 2025</div>
                <div className="text-xs text-gray-300 mt-2">Quality scoring for all timeframes enables cross-interval win rate comparison</div>
              </div>
              
              <div className="bg-gray-800/50 rounded-xl p-4 border border-gray-700/50">
                <div className="text-3xl mb-2">🎯</div>
                <div className="text-sm font-semibold text-purple-400 mb-1">v9 Money Line</div>
                <div className="text-xs text-gray-400">Nov 22, 2025</div>
                <div className="text-xs text-gray-300 mt-2">Perfect quality separation: All winners ≥95, all losers ≤90</div>
              </div>
            </div>
            
            <div className="mt-4 text-center">
              <a href="/roadmap" className="text-sm text-green-400 hover:text-green-300 transition-colors">
                View Complete Roadmap →
              </a>
            </div>
          </div>
        </div>

        {/* Navigation Cards */}
        <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 max-w-7xl mx-auto">
          {/* EPYC Cluster Card */}
          <a
            href="/cluster"
            className="group relative bg-gradient-to-br from-purple-900/50 to-pink-900/50 backdrop-blur-sm rounded-2xl p-8 border border-purple-500/20 hover:border-purple-500/40 transition-all duration-300 hover:scale-105"
          >
            <div className="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-pink-500/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity"></div>
            
            <div className="relative">
              <div className="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-600 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                <span className="text-4xl">🖥️</span>
              </div>
              
              <h3 className="text-2xl font-bold text-white mb-3">EPYC Cluster</h3>
              
              <p className="text-gray-300 mb-6">
                Monitor distributed parameter exploration across 2x AMD EPYC servers with AI recommendations
              </p>
              
              <div className="flex items-center text-purple-400 group-hover:text-purple-300">
                <span className="font-medium">View Status</span>
                <svg className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                </svg>
              </div>
            </div>
          </a>

          {/* Analytics Card */}
          <a
            href="/analytics"
            className="group relative bg-gradient-to-br from-blue-900/50 to-purple-900/50 backdrop-blur-sm rounded-2xl p-8 border border-blue-500/20 hover:border-blue-500/40 transition-all duration-300 hover:scale-105"
          >
            <div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-purple-500/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity"></div>
            
            <div className="relative">
              <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                <span className="text-4xl">📊</span>
              </div>
              
              <h3 className="text-2xl font-bold text-white mb-3">Analytics</h3>
              
              <p className="text-gray-300 mb-6">
                View trading performance, win rates, P&L statistics, and position analytics
              </p>
              
              <div className="flex items-center text-blue-400 group-hover:text-blue-300">
                <span className="font-medium">View Dashboard</span>
                <svg className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                </svg>
              </div>
            </div>
          </a>

          {/* Withdrawals Card */}
          <a
            href="/withdrawals"
            className="group relative bg-gradient-to-br from-emerald-900/50 to-teal-900/50 backdrop-blur-sm rounded-2xl p-8 border border-emerald-500/20 hover:border-emerald-500/40 transition-all duration-300 hover:scale-105"
          >
            <div className="absolute inset-0 bg-gradient-to-br from-emerald-500/10 to-teal-500/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity"></div>
            
            <div className="relative">
              <div className="w-16 h-16 bg-gradient-to-br from-emerald-500 to-teal-600 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                <span className="text-4xl">💸</span>
              </div>
              
              <h3 className="text-2xl font-bold text-white mb-3">Withdrawals</h3>
              
              <p className="text-gray-300 mb-6">
                Configure automatic profit withdrawals to your wallet
              </p>
              
              <div className="flex items-center text-emerald-400 group-hover:text-emerald-300">
                <span className="font-medium">Manage Withdrawals</span>
                <svg className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                </svg>
              </div>
            </div>
          </a>

          {/* Settings Card */}
          <a
            href="/settings"
            className="group relative bg-gradient-to-br from-gray-800/50 to-gray-900/50 backdrop-blur-sm rounded-2xl p-8 border border-gray-700/50 hover:border-gray-600 transition-all duration-300 hover:scale-105"
          >
            <div className="absolute inset-0 bg-gradient-to-br from-gray-500/10 to-gray-700/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity"></div>
            
            <div className="relative">
              <div className="w-16 h-16 bg-gradient-to-br from-gray-600 to-gray-800 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                <span className="text-4xl">⚙️</span>
              </div>
              
              <h3 className="text-2xl font-bold text-white mb-3">Settings</h3>
              
              <p className="text-gray-300 mb-6">
                Configure trading parameters, risk management, and bot behavior
              </p>
              
              <div className="flex items-center text-gray-400 group-hover:text-gray-300">
                <span className="font-medium">Adjust Settings</span>
                <svg className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                </svg>
              </div>
            </div>
          </a>

          {/* Analytics Card */}
          <a
            href="/analytics/optimization"
            className="group relative bg-gradient-to-br from-gray-800/50 to-gray-900/50 backdrop-blur-sm rounded-2xl p-8 border border-gray-700/50 hover:border-gray-600 transition-all duration-300 hover:scale-105"
          >
            <div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-purple-700/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity"></div>
            
            <div className="relative">
              <div className="w-16 h-16 bg-gradient-to-br from-blue-600 to-purple-800 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                <span className="text-4xl">🔬</span>
              </div>
              
              <h3 className="text-2xl font-bold text-white mb-3">Analytics</h3>
              
              <p className="text-gray-300 mb-6">
                Data-driven optimization analysis with automated SQL insights
              </p>
              
              <div className="flex items-center text-gray-400 group-hover:text-gray-300">
                <span className="font-medium">View Analytics</span>
                <svg className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                </svg>
              </div>
            </div>
          </a>

          {/* Projection Card */}
          <a
            href="/projection"
            className="group relative bg-gradient-to-br from-yellow-900/50 to-orange-900/50 backdrop-blur-sm rounded-2xl p-8 border border-yellow-500/20 hover:border-yellow-500/40 transition-all duration-300 hover:scale-105"
          >
            <div className="absolute inset-0 bg-gradient-to-br from-yellow-500/10 to-orange-500/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity"></div>
            
            <div className="relative">
              <div className="w-16 h-16 bg-gradient-to-br from-yellow-500 to-orange-600 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                <span className="text-4xl">🚀</span>
              </div>
              
              <h3 className="text-2xl font-bold text-white mb-3">Projection</h3>
              
              <p className="text-gray-300 mb-6">
                Track $901 → $100K journey (12 weeks to Feb 2026)
              </p>
              
              <div className="flex items-center text-yellow-400 group-hover:text-yellow-300">
                <span className="font-medium">View Progress</span>
                <svg className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                </svg>
              </div>
            </div>
          </a>

          {/* Roadmap Card */}
          <a
            href="/roadmap"
            className="group relative bg-gradient-to-br from-indigo-900/50 to-violet-900/50 backdrop-blur-sm rounded-2xl p-8 border border-indigo-500/20 hover:border-indigo-500/40 transition-all duration-300 hover:scale-105"
          >
            <div className="absolute inset-0 bg-gradient-to-br from-indigo-500/10 to-violet-500/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity"></div>
            
            <div className="relative">
              <div className="w-16 h-16 bg-gradient-to-br from-indigo-500 to-violet-600 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                <span className="text-4xl">🗺️</span>
              </div>
              
              <h3 className="text-2xl font-bold text-white mb-3">Roadmap</h3>
              
              <p className="text-gray-300 mb-6">
                Track development progress and upcoming features
              </p>
              
              <div className="flex items-center text-indigo-400 group-hover:text-indigo-300">
                <span className="font-medium">View Roadmap</span>
                <svg className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                </svg>
              </div>
            </div>
          </a>
        </div>

        {/* Quick Stats */}
        <div className="mt-16 max-w-4xl mx-auto">
          <h3 className="text-xl font-semibold text-white mb-6 text-center">Quick Access</h3>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <a
              href="/api/trading/positions"
              target="_blank"
              className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-4 border border-gray-700/50 hover:border-gray-600 transition-all text-center group"
            >
              <div className="text-2xl mb-2">📍</div>
              <div className="text-sm text-gray-400 group-hover:text-gray-300">Positions API</div>
            </a>
            
            <a
              href="/api/analytics/stats"
              target="_blank"
              className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-4 border border-gray-700/50 hover:border-gray-600 transition-all text-center group"
            >
              <div className="text-2xl mb-2">📈</div>
              <div className="text-sm text-gray-400 group-hover:text-gray-300">Stats API</div>
            </a>
            
            <a
              href="/api/analytics/positions"
              target="_blank"
              className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-4 border border-gray-700/50 hover:border-gray-600 transition-all text-center group"
            >
              <div className="text-2xl mb-2">🎯</div>
              <div className="text-sm text-gray-400 group-hover:text-gray-300">Net Positions</div>
            </a>
            
            <a
              href="https://app.drift.trade"
              target="_blank"
              rel="noopener noreferrer"
              className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-4 border border-gray-700/50 hover:border-gray-600 transition-all text-center group"
            >
              <div className="text-2xl mb-2">🌊</div>
              <div className="text-sm text-gray-400 group-hover:text-gray-300">Open Drift</div>
            </a>
          </div>
        </div>

        {/* Footer Info */}
        <div className="mt-16 text-center">
          <p className="text-gray-500 text-sm">
            Trading Bot v4 • Drift Protocol • Pyth Network • Solana
          </p>
        </div>
      </div>
    </div>
  )
}