import { Link } from 'react-router-dom'
import { useAuthStore } from '@/store/auth'
import { NeonButton, GradientButton, FeatureCard } from '@/components/ui'
import { Gamepad2, Users, Trophy, Sparkles, Zap, Target, Crown, ArrowRight } from 'lucide-react'

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

  return (
    <div className="-mt-8 relative">
      {/* Global animated background - covers entire page */}
      <div className="fixed inset-0 overflow-hidden pointer-events-none">
        {/* Gradient orbs */}
        <div className="absolute top-[10%] left-[10%] w-[500px] h-[500px] bg-neon-500/20 rounded-full blur-[120px] animate-float" />
        <div className="absolute top-[40%] right-[10%] w-[600px] h-[600px] bg-accent-500/20 rounded-full blur-[120px] animate-float" style={{ animationDelay: '-3s' }} />
        <div className="absolute top-[60%] left-[30%] w-[700px] h-[700px] bg-pink-500/10 rounded-full blur-[150px]" />
        <div className="absolute bottom-[10%] right-[30%] w-[400px] h-[400px] bg-neon-500/15 rounded-full blur-[100px] animate-float" style={{ animationDelay: '-1.5s' }} />
        <div className="absolute bottom-[30%] left-[5%] w-[450px] h-[450px] bg-accent-500/15 rounded-full blur-[100px] animate-float" style={{ animationDelay: '-4.5s' }} />
      </div>

      {/* Hero Section */}
      <section className="relative min-h-[80vh] flex items-center justify-center overflow-hidden">
        {/* Content */}
        <div className="relative z-10 max-w-5xl mx-auto text-center px-4">
          {/* Logo */}
          <div className="flex justify-center mb-8">
            <div className="relative">
              <Gamepad2 className="w-24 h-24 text-neon-500 animate-float drop-shadow-[0_0_20px_rgba(34,211,238,0.4)]" />
              <div className="absolute inset-0 bg-neon-500/20 blur-2xl rounded-full" />
            </div>
          </div>

          {/* Title with glitch effect */}
          <h1 className="relative mb-6">
            <span className="block text-5xl md:text-7xl font-bold font-display tracking-wider text-white">
              ИГРОВОЙ
            </span>
            <span
              className="glitch block text-5xl md:text-7xl font-bold font-display tracking-wider text-neon-500 neon-text"
              data-text="МАРАФОН"
            >
              МАРАФОН
            </span>
          </h1>

          {/* Subtitle with typing effect */}
          <p className="text-xl md:text-2xl text-gray-300 mb-10 max-w-2xl mx-auto leading-relaxed">
            Соревнуйтесь с друзьями в{' '}
            <span className="text-neon-400">игровых челленджах</span>.
            <br className="hidden md:block" />
            Крутите колесо, выполняйте задания, станьте{' '}
            <span className="text-accent-400">чемпионом</span>!
          </p>

          {/* CTA Buttons */}
          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
            {isAuthenticated ? (
              <Link to="/marathons">
                <GradientButton size="lg" icon={<ArrowRight className="w-5 h-5" />}>
                  К марафонам
                </GradientButton>
              </Link>
            ) : (
              <>
                <Link to="/register">
                  <GradientButton size="lg" icon={<Zap className="w-5 h-5" />}>
                    Начать играть
                  </GradientButton>
                </Link>
                <Link to="/login">
                  <NeonButton size="lg" variant="outline" color="neon">
                    Войти
                  </NeonButton>
                </Link>
              </>
            )}
          </div>

          </div>

        {/* Scroll indicator */}
        <div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
          <div className="w-6 h-10 border-2 border-gray-600 rounded-full flex justify-center pt-2">
            <div className="w-1 h-2 bg-neon-500 rounded-full animate-pulse" />
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="py-24 relative">
        <div className="max-w-6xl mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
              Почему <span className="gradient-neon-text">Игровой Марафон</span>?
            </h2>
            <p className="text-gray-400 max-w-2xl mx-auto">
              Уникальный способ играть с друзьями. Случайные челленджи, честная конкуренция, незабываемые моменты.
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-6 stagger-children">
            <FeatureCard
              icon={<Sparkles className="w-7 h-7" />}
              title="Случайные челленджи"
              description="Крутите колесо и получайте уникальные задания. ИИ генерирует челленджи специально под ваши игры."
              color="neon"
            />
            <FeatureCard
              icon={<Users className="w-7 h-7" />}
              title="Играйте с друзьями"
              description="Создавайте приватные марафоны. Каждый добавляет свои игры, все соревнуются на равных."
              color="purple"
            />
            <FeatureCard
              icon={<Trophy className="w-7 h-7" />}
              title="Зарабатывайте очки"
              description="Выполняйте задания, собирайте серии побед. Бонусные множители за стрики!"
              color="pink"
            />
          </div>
        </div>
      </section>

      {/* How it works */}
      <section className="py-24 relative">
        <div className="max-w-6xl mx-auto px-4 relative z-10">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
              Как это работает
            </h2>
            <p className="text-gray-400">
              Четыре простых шага до победы
            </p>
          </div>

          {/* Timeline */}
          <div className="relative">
            {/* Connection line */}
            <div className="hidden md:block absolute top-12 left-0 right-0 h-0.5 bg-gradient-to-r from-neon-500 via-accent-500 to-pink-500" />

            <div className="grid md:grid-cols-4 gap-8">
              {[
                {
                  step: 1,
                  icon: <Gamepad2 className="w-6 h-6" />,
                  title: 'Создайте марафон',
                  desc: 'Начните новый марафон и пригласите друзей по коду',
                  color: 'neon',
                },
                {
                  step: 2,
                  icon: <Target className="w-6 h-6" />,
                  title: 'Добавьте игры',
                  desc: 'Каждый добавляет игры. ИИ генерирует задания',
                  color: 'neon',
                },
                {
                  step: 3,
                  icon: <Zap className="w-6 h-6" />,
                  title: 'Крутите и играйте',
                  desc: 'Крутите колесо, выполняйте задания',
                  color: 'accent',
                },
                {
                  step: 4,
                  icon: <Crown className="w-6 h-6" />,
                  title: 'Победите!',
                  desc: 'Зарабатывайте очки и станьте чемпионом',
                  color: 'pink',
                },
              ].map((item, index) => (
                <div key={item.step} className="relative text-center group">
                  {/* Step circle */}
                  <div
                    className={`
                      relative z-10 w-24 h-24 mx-auto mb-6 rounded-2xl
                      bg-dark-800 border-2 transition-all duration-300
                      flex items-center justify-center
                      group-hover:-translate-y-2
                      ${item.color === 'neon' ? 'border-neon-500/50 group-hover:border-neon-500 group-hover:shadow-[0_0_20px_rgba(34,211,238,0.25)]' : ''}
                      ${item.color === 'accent' ? 'border-accent-500/50 group-hover:border-accent-500 group-hover:shadow-[0_0_20px_rgba(139,92,246,0.25)]' : ''}
                      ${item.color === 'pink' ? 'border-pink-500/50 group-hover:border-pink-500 group-hover:shadow-[0_0_20px_rgba(244,114,182,0.25)]' : ''}
                    `}
                    style={{ animationDelay: `${index * 100}ms` }}
                  >
                    <div className={`
                      ${item.color === 'neon' ? 'text-neon-500' : ''}
                      ${item.color === 'accent' ? 'text-accent-500' : ''}
                      ${item.color === 'pink' ? 'text-pink-500' : ''}
                    `}>
                      {item.icon}
                    </div>
                    <div className={`
                      absolute -top-2 -right-2 w-8 h-8 rounded-full
                      flex items-center justify-center text-sm font-bold
                      ${item.color === 'neon' ? 'bg-neon-500 text-dark-900' : ''}
                      ${item.color === 'accent' ? 'bg-accent-500 text-white' : ''}
                      ${item.color === 'pink' ? 'bg-pink-500 text-white' : ''}
                    `}>
                      {item.step}
                    </div>
                  </div>

                  <h4 className="text-lg font-semibold text-white mb-2">
                    {item.title}
                  </h4>
                  <p className="text-gray-400 text-sm">
                    {item.desc}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-24 relative">
        <div className="max-w-4xl mx-auto px-4 text-center">
          <div className="glass-neon rounded-2xl p-12 relative overflow-hidden">
            {/* Background glow */}
            <div className="absolute inset-0 bg-gradient-to-r from-neon-500/5 via-accent-500/5 to-pink-500/5" />

            <div className="relative z-10">
              <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
                Готовы к соревнованиям?
              </h2>
              <p className="text-gray-300 mb-8 max-w-xl mx-auto">
                Создавайте марафоны, приглашайте друзей и соревнуйтесь в игровых челленджах
              </p>

              {isAuthenticated ? (
                <Link to="/marathons">
                  <GradientButton size="lg" icon={<ArrowRight className="w-5 h-5" />}>
                    Перейти к марафонам
                  </GradientButton>
                </Link>
              ) : (
                <Link to="/register">
                  <GradientButton size="lg" icon={<Zap className="w-5 h-5" />}>
                    Создать аккаунт бесплатно
                  </GradientButton>
                </Link>
              )}
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}
