import { useNavigate } from 'react-router-dom'

function Home() {
  const navigate = useNavigate()

  return (
    <div className="relative flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-[#0a0a1a] via-[#1a1040] to-[#0d1b2a] px-4 overflow-hidden bg-pattern">
      {/* Ambient blobs */}
      <div className="absolute top-1/4 left-1/4 w-64 h-64 bg-blue-500/10 rounded-full blur-3xl animate-blob" />
      <div className="absolute bottom-1/4 right-1/4 w-72 h-72 bg-purple-500/10 rounded-full blur-3xl animate-blob" style={{ animationDelay: '2s' }} />
      <div className="absolute top-1/2 left-1/2 w-56 h-56 bg-indigo-500/8 rounded-full blur-3xl animate-blob" style={{ animationDelay: '4s' }} />

      <div className="text-center w-full max-w-md animate-slide-up relative z-10">
        <div className="mb-10 md:mb-16">
          {/* Logo icon */}
          <div className="mx-auto mb-6 w-20 h-20 md:w-24 md:h-24 rounded-2xl bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center shadow-lg glow-purple">
            <span className="text-4xl md:text-5xl">🧠</span>
          </div>

          <h1 className="font-display text-4xl sm:text-5xl md:text-7xl font-black text-gradient mb-3 md:mb-4 tracking-tight">
            СВОЯ ИГРА
          </h1>
          <p className="text-base md:text-lg text-gray-400 font-medium tracking-wide">
            Интеллектуальная викторина
          </p>
        </div>

        <div className="flex flex-col gap-3 md:gap-4 w-full">
          <button
            onClick={() => navigate('/create')}
            className="btn-glow bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white font-bold py-4 md:py-5 px-6 md:px-8 rounded-2xl text-lg md:text-xl transition-all duration-300 shadow-lg hover:shadow-blue-500/25 hover:scale-[1.02] active:scale-[0.98]"
          >
            🎮 Создать игру
          </button>

          <button
            onClick={() => navigate('/join')}
            className="btn-glow glass hover:bg-white/10 text-white font-bold py-4 md:py-5 px-6 md:px-8 rounded-2xl text-lg md:text-xl transition-all duration-300 hover:shadow-lg hover:scale-[1.02] active:scale-[0.98]"
          >
            🚀 Присоединиться
          </button>
        </div>
      </div>
    </div>
  )
}

export default Home
