import { Link } from 'react-router-dom'
import { useAuthStore } from '@/store/auth'
import { Button } from '@/components/ui'
import { Gamepad2, Users, Trophy, Sparkles } from 'lucide-react'

export function HomePage() {
  const isAuthenticated = useAuthStore((state) => state.isAuthenticated)

  return (
    <div className="max-w-4xl mx-auto text-center">
      {/* Hero */}
      <div className="py-12">
        <div className="flex justify-center mb-6">
          <Gamepad2 className="w-20 h-20 text-primary-500" />
        </div>
        <h1 className="text-4xl md:text-5xl font-bold text-white mb-4">
          Игровой Марафон
        </h1>
        <p className="text-xl text-gray-400 mb-8 max-w-2xl mx-auto">
          Соревнуйтесь с друзьями в игровых челленджах. Крутите колесо, выполняйте задания, зарабатывайте очки и станьте чемпионом!
        </p>

        <div className="flex gap-4 justify-center">
          {isAuthenticated ? (
            <Link to="/marathons">
              <Button size="lg">К марафонам</Button>
            </Link>
          ) : (
            <>
              <Link to="/register">
                <Button size="lg">Начать</Button>
              </Link>
              <Link to="/login">
                <Button size="lg" variant="secondary">Войти</Button>
              </Link>
            </>
          )}
        </div>
      </div>

      {/* Features */}
      <div className="grid md:grid-cols-3 gap-8 py-12">
        <div className="card text-center">
          <div className="flex justify-center mb-4">
            <Sparkles className="w-12 h-12 text-yellow-500" />
          </div>
          <h3 className="text-xl font-bold text-white mb-2">Случайные челленджи</h3>
          <p className="text-gray-400">
            Крутите колесо, чтобы получить случайную игру и задание. Проверьте свои навыки неожиданным способом!
          </p>
        </div>

        <div className="card text-center">
          <div className="flex justify-center mb-4">
            <Users className="w-12 h-12 text-green-500" />
          </div>
          <h3 className="text-xl font-bold text-white mb-2">Играйте с друзьями</h3>
          <p className="text-gray-400">
            Создавайте приватные марафоны и приглашайте друзей. Каждый добавляет свои любимые игры.
          </p>
        </div>

        <div className="card text-center">
          <div className="flex justify-center mb-4">
            <Trophy className="w-12 h-12 text-primary-500" />
          </div>
          <h3 className="text-xl font-bold text-white mb-2">Соревнуйтесь за очки</h3>
          <p className="text-gray-400">
            Выполняйте задания, чтобы зарабатывать очки. Собирайте серии для бонусных множителей!
          </p>
        </div>
      </div>

      {/* How it works */}
      <div className="py-12">
        <h2 className="text-2xl font-bold text-white mb-8">Как это работает</h2>
        <div className="grid md:grid-cols-4 gap-6 text-left">
          <div className="relative">
            <div className="text-5xl font-bold text-primary-500/20 absolute -top-4 -left-2">1</div>
            <div className="relative z-10 pt-6">
              <h4 className="font-bold text-white mb-2">Создайте марафон</h4>
              <p className="text-gray-400 text-sm">Начните новый марафон и пригласите друзей по уникальному коду</p>
            </div>
          </div>

          <div className="relative">
            <div className="text-5xl font-bold text-primary-500/20 absolute -top-4 -left-2">2</div>
            <div className="relative z-10 pt-6">
              <h4 className="font-bold text-white mb-2">Добавьте игры</h4>
              <p className="text-gray-400 text-sm">Все добавляют игры, в которые хотят играть. ИИ генерирует задания</p>
            </div>
          </div>

          <div className="relative">
            <div className="text-5xl font-bold text-primary-500/20 absolute -top-4 -left-2">3</div>
            <div className="relative z-10 pt-6">
              <h4 className="font-bold text-white mb-2">Крутите и играйте</h4>
              <p className="text-gray-400 text-sm">Крутите колесо, получите задание, выполните его и отправьте доказательство</p>
            </div>
          </div>

          <div className="relative">
            <div className="text-5xl font-bold text-primary-500/20 absolute -top-4 -left-2">4</div>
            <div className="relative z-10 pt-6">
              <h4 className="font-bold text-white mb-2">Победите!</h4>
              <p className="text-gray-400 text-sm">Зарабатывайте очки, поднимайтесь в таблице лидеров, станьте чемпионом!</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
