'use client';

import { useLanguage } from './LanguageProvider';

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

  return (
    <div className="h-full flex flex-col space-y-4">
      
      {/* Title */}
      <div className="text-center">
        <span className="text-2xl animate-pulse">🧠</span>
        <h3 className="text-lg font-black text-white drop-shadow-lg">
          Explore!
        </h3>
      </div>

      {/* Vertical thinking tools */}
      <div className="flex-1 flex flex-col space-y-3">
        
        <button className="bg-gradient-to-r from-blue-400 to-cyan-400 border-4 border-white hover:border-yellow-300 rounded-2xl p-4 text-center transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105 hover:rotate-2">
          <div className="text-3xl mb-2 animate-bounce">🔍</div>
          <h4 className="font-black text-white text-sm drop-shadow">Research</h4>
          <p className="text-xs text-blue-100 font-bold">Be a detective!</p>
        </button>

        <button className="bg-gradient-to-r from-green-400 to-lime-400 border-4 border-white hover:border-yellow-300 rounded-2xl p-4 text-center transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105 hover:-rotate-2">
          <div className="text-3xl mb-2 animate-pulse">🧪</div>
          <h4 className="font-black text-white text-sm drop-shadow">Experiment</h4>
          <p className="text-xs text-green-100 font-bold">Try things!</p>
        </button>

        <button className="bg-gradient-to-r from-pink-400 to-purple-400 border-4 border-white hover:border-yellow-300 rounded-2xl p-4 text-center transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105 hover:rotate-2">
          <div className="text-3xl mb-2 animate-bounce" style={{animationDelay: '0.5s'}}>💬</div>
          <h4 className="font-black text-white text-sm drop-shadow">Discuss</h4>
          <p className="text-xs text-pink-100 font-bold">Share ideas!</p>
        </button>

        <button className="bg-gradient-to-r from-orange-400 to-red-400 border-4 border-white hover:border-yellow-300 rounded-2xl p-4 text-center transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105 hover:-rotate-2">
          <div className="text-3xl mb-2 animate-pulse" style={{animationDelay: '1s'}}>🎯</div>
          <h4 className="font-black text-white text-sm drop-shadow">Practice</h4>
          <p className="text-xs text-orange-100 font-bold">Try it out!</p>
        </button>
        
      </div>
    </div>
  );
}
  );
}
