'use client';

import { useLanguage } from './LanguageProvider';

export default function Header() {
  const { language } = useLanguage();
  
  const titles = {
    en: {
      main: "🌟 Kids AI Explorer",
      subtitle: "Discover Everything with AI"
    },
    de: {
      main: "🌟 Kinder KI-Entdecker", 
      subtitle: "Entdecke alles mit KI"
    }
  };

  return (
    <header className="relative z-20 bg-gradient-to-r from-indigo-900/80 via-purple-900/80 to-pink-900/80 backdrop-blur-sm border-b-2 border-amber-400 shadow-2xl">
      <div className="container mx-auto px-6 py-4">
        <div className="flex items-center justify-center">
          
          {/* Main logo and title */}
          <div className="flex items-center space-x-4">
            <div className="text-4xl animate-float-magic">🧠</div>
            <div className="text-center">
              <h1 className="text-2xl lg:text-3xl font-bold text-amber-300 animate-pulse-rainbow">
                {(titles as any)[language].main}
              </h1>
              <p className="text-emerald-200 text-sm lg:text-base">
                {(titles as any)[language].subtitle}
              </p>
            </div>
          </div>
          
        </div>
      </div>
      
      {/* Header decorative elements */}
      <div className="absolute top-2 right-4 text-pink-400 text-sm animate-sparkle">✨</div>
      <div className="absolute bottom-2 left-8 text-blue-400 text-xs animate-sparkle" style={{ animationDelay: '1.5s' }}>⭐</div>
    </header>
  );
}
