'use client'

import StatusOverview from '../components/StatusOverview.js'

export default function HomePage() {
  return (
    <div className="space-y-8">
      {/* Status Overview */}
      <StatusOverview />
      
      {/* Quick Actions */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div className="card card-gradient text-center">
          <div className="w-16 h-16 bg-blue-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
            <span className="text-blue-400 text-2xl">📊</span>
          </div>
          <h3 className="text-lg font-semibold text-white mb-2">AI Analysis</h3>
          <p className="text-gray-400 text-sm mb-4">Get market insights and TradingView analysis</p>
          <a href="/analysis" className="inline-flex items-center px-4 py-2 bg-blue-600/20 text-blue-400 rounded-lg hover:bg-blue-600/30 transition-colors text-sm">
            View Analysis
          </a>
        </div>

        <div className="card card-gradient text-center">
          <div className="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
            <span className="text-green-400 text-2xl">💰</span>
          </div>
          <h3 className="text-lg font-semibold text-white mb-2">Manual Trading</h3>
          <p className="text-gray-400 text-sm mb-4">Execute trades and view history</p>
          <a href="/trading" className="inline-flex items-center px-4 py-2 bg-green-600/20 text-green-400 rounded-lg hover:bg-green-600/30 transition-colors text-sm">
            Trade Now
          </a>
        </div>

        <div className="card card-gradient text-center">
          <div className="w-16 h-16 bg-purple-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
            <span className="text-purple-400 text-2xl">🤖</span>
          </div>
          <h3 className="text-lg font-semibold text-white mb-2">Auto Trading</h3>
          <p className="text-gray-400 text-sm mb-4">Configure automation</p>
          <a href="/automation" className="inline-flex items-center px-4 py-2 bg-purple-600/20 text-purple-400 rounded-lg hover:bg-purple-600/30 transition-colors text-sm">
            Setup Bot
          </a>
        </div>

        <div className="card card-gradient text-center">
          <div className="w-16 h-16 bg-orange-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
            <span className="text-orange-400 text-2xl">⚙️</span>
          </div>
          <h3 className="text-lg font-semibold text-white mb-2">Settings</h3>
          <p className="text-gray-400 text-sm mb-4">Developer configuration</p>
          <a href="/settings" className="inline-flex items-center px-4 py-2 bg-orange-600/20 text-orange-400 rounded-lg hover:bg-orange-600/30 transition-colors text-sm">
            Configure
          </a>
        </div>
      </div>
    </div>
  )
}