'use client';

import { useLanguage } from './LanguageProvider';

export default function WelcomeSection() {
  const { t } = useLanguage();

  return (
    <div className="h-full flex flex-col items-center justify-center text-center space-y-6">
      
      {/* Main character */}
      <div className="relative">
        <div className="w-32 h-32 bg-gradient-to-br from-orange-400 to-red-500 rounded-full flex items-center justify-center shadow-2xl animate-pulse border-8 border-white">
          <span className="text-6xl">�‍♀️</span>
        </div>
        {/* Speech bubble */}
        <div className="absolute -top-8 -right-8 bg-white rounded-full p-3 shadow-lg border-4 border-pink-300">
          <span className="text-2xl">💭</span>
        </div>
      </div>
      
      {/* Character name and intro */}
      <div className="bg-white/80 rounded-2xl p-4 shadow-xl border-4 border-orange-300">
        <h2 className="text-2xl font-black text-orange-800 mb-2">
          AI Explorer
        </h2>
        <p className="text-lg font-bold text-orange-700">
          Your thinking buddy!
        </p>
      </div>
      
      {/* Fun badges */}
      <div className="flex flex-wrap justify-center gap-2">
        <span className="bg-red-400 text-white px-3 py-1 rounded-full text-sm font-bold">
          🔥 Super Smart
        </span>
        <span className="bg-blue-400 text-white px-3 py-1 rounded-full text-sm font-bold">
          🎯 Helpful
        </span>
        <span className="bg-green-400 text-white px-3 py-1 rounded-full text-sm font-bold">
          🌟 Fun
        </span>
      </div>
      
      {/* Action prompt */}
      <div className="bg-gradient-to-r from-pink-200 to-purple-200 rounded-xl p-4 border-4 border-pink-400">
        <p className="text-purple-800 font-bold text-lg">
          Ask me anything! ➡️
        </p>
      </div>
      
    </div>
  );
}
