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

function Home() {
  const navigate = useNavigate()

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-slate-900 via-blue-900 to-slate-900 px-4">
      <div className="text-center w-full max-w-md">
        <div className="mb-8 md:mb-16">
          <h1 className="text-4xl sm:text-5xl md:text-7xl font-bold text-blue-400 mb-2 md:mb-4">
            СВОЯ ИГРА
          </h1>
          <p className="text-base md:text-lg text-gray-400">Интеллектуальная викторина</p>
        </div>

        <div className="flex flex-col gap-3 md:gap-4 w-full">
          <button
            onClick={() => navigate('/create')}
            className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 md:py-4 px-6 md:px-8 rounded-xl text-lg md:text-xl transition-all duration-200 shadow-lg hover:shadow-xl"
          >
            Создать игру
          </button>

          <button
            onClick={() => navigate('/join')}
            className="bg-slate-700 hover:bg-slate-600 text-white font-bold py-3 md:py-4 px-6 md:px-8 rounded-xl text-lg md:text-xl transition-all duration-200 shadow-lg hover:shadow-xl"
          >
            Присоединиться
          </button>
        </div>
      </div>
    </div>
  )
}

export default Home