import './globals.css'
import Navigation from '../components/Navigation.tsx'

// Initialize cleanup system
import '../lib/startup'

export const metadata = {
  title: 'Trading Bot Dashboard',
  description: 'AI-powered trading bot with automated analysis and execution',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning={true}>
      <body className="min-h-screen bg-gradient-to-br from-gray-900 via-blue-900 to-purple-900">
        {/* Background Effects */}
        <div className="fixed inset-0 bg-[url('/grid.svg')] opacity-10 pointer-events-none"></div>
        
        <div className="relative z-10">
          {/* Header */}
          <header className="bg-gray-900/50 backdrop-blur-sm border-b border-gray-800">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
              <div className="flex items-center justify-between h-16">
                <div className="flex items-center space-x-4">
                  <div className="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center">
                    <span className="text-white font-bold text-sm">TB</span>
                  </div>
                  <div>
                    <h1 className="text-lg font-bold text-white">Trading Bot</h1>
                    <p className="text-xs text-gray-400">AI-Powered Dashboard</p>
                  </div>
                </div>
                
                <div className="flex items-center space-x-4">
                  <div className="text-right">
                    <p className="text-sm text-gray-400">Status</p>
                    <div className="flex items-center space-x-1">
                      <div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
                      <span className="text-sm text-green-400">Online</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </header>

          {/* Navigation */}
          <Navigation />

          {/* Main Content */}
          <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            {children}
          </main>
        </div>
      </body>
    </html>
  )
}
