'use client';

import { LanguageProvider } from '@/components/LanguageProvider';
import Header from '@/components/Header';
import MissionControl from '@/components/MissionControl';
import SimpleLanguageSelector from '@/components/SimpleLanguageSelector';
import MagicBackground from '@/components/MagicBackground';

export default function Home() {
  return (
    <LanguageProvider>
      {/* AI Learning Explorer - Clean & Simple */}
      <div className="relative min-h-screen overflow-hidden bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-900">
        
        {/* Magical Background Elements */}
        <MagicBackground />
        
        {/* Language Selector */}
        <SimpleLanguageSelector />
        
        {/* Main Interface */}
        <div className="relative z-10 min-h-screen">
          {/* Header */}
          <Header />
          
          {/* Main Content - Full Height Chat Interface */}
          <div className="h-[calc(100vh-120px)] p-6">
            <div className="w-full h-full max-w-4xl mx-auto">
              <MissionControl />
            </div>
          </div>
        </div>
        
        {/* Universal learning theme CSS animations */}
        <style jsx>{`
          @keyframes sparkle {
            0%, 100% { opacity: 0.3; transform: scale(1) rotate(0deg); }
            50% { opacity: 1; transform: scale(1.2) rotate(180deg); }
          }
          @keyframes float-magic {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(5deg); }
          }
          @keyframes pulse-rainbow {
            0%, 100% { box-shadow: 0 0 20px rgba(139, 69, 19, 0.5); }
            25% { box-shadow: 0 0 30px rgba(34, 139, 34, 0.6); }
            50% { box-shadow: 0 0 40px rgba(30, 144, 255, 0.7); }
            75% { box-shadow: 0 0 30px rgba(255, 140, 0, 0.6); }
          }
          .animate-sparkle { animation: sparkle 3s ease-in-out infinite; }
          .animate-float-magic { animation: float-magic 6s ease-in-out infinite; }
          .animate-pulse-rainbow { animation: pulse-rainbow 3s ease-in-out infinite; }
        `}</style>
        
      </div>
    </LanguageProvider>
  );
}
