"use client"

import { useState, useEffect } from "react"
import { ArrowRight, Sparkles, Zap, Shield } from "lucide-react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import Link from "next/link"

export default function WelcomePage() {
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  return (
    <div className="min-h-screen bg-[#0a0e1a] relative overflow-hidden">
      {/* Animated background grid */}
      <div 
        className="fixed inset-0 pointer-events-none -z-10 opacity-30"
        style={{
          backgroundImage: `
            linear-gradient(rgba(6, 182, 212, 0.1) 1px, transparent 1px),
            linear-gradient(90deg, rgba(6, 182, 212, 0.1) 1px, transparent 1px)
          `,
          backgroundSize: '50px 50px',
          animation: mounted ? 'grid-move 20s linear infinite' : 'none'
        }}
      />

      {/* Glowing orbs */}
      <div className="fixed top-20 left-20 w-72 h-72 bg-cyan-500/20 rounded-full blur-[100px] animate-pulse" />
      <div className="fixed bottom-20 right-20 w-96 h-96 bg-blue-500/10 rounded-full blur-[120px] animate-pulse delay-1000" />

      {/* Main Content */}
      <main className="container mx-auto px-6 py-12 relative z-10">
        <div className="max-w-4xl mx-auto">
          {/* Hero Section */}
          <div className="text-center mb-16 pt-20">
            <div className="inline-block mb-6">
              <div className="flex items-center gap-2 px-4 py-2 bg-cyan-500/10 border border-cyan-500/30 rounded-full">
                <Sparkles className="w-4 h-4 text-cyan-400" />
                <span className="text-xs font-mono text-cyan-400 tracking-wider">
                  WELCOME TO THE FUTURE
                </span>
              </div>
            </div>
            
            <h1 className="text-7xl md:text-8xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-cyan-300 to-blue-400 font-mono tracking-tight">
              Dashboard
            </h1>
            
            <p className="text-xl text-cyan-400/60 font-mono mb-12 tracking-wide">
              Управляй своим прогрессом в киберпространстве
            </p>

            <Link href="/home/main">
              <Button 
                size="lg"
                className="bg-cyan-500 hover:bg-cyan-400 text-black font-bold font-mono tracking-wider px-8 py-6 text-lg rounded-lg shadow-[0_0_30px_rgba(6,182,212,0.4)] hover:shadow-[0_0_50px_rgba(6,182,212,0.6)] transition-all duration-300 group"
              >
                Войти в систему
                <ArrowRight className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" />
              </Button>
            </Link>
          </div>

          {/* Features Grid */}
          <div className="grid md:grid-cols-3 gap-6 mt-20">
            <Card className="bg-[#0d1117] border-2 border-cyan-500/20 p-6 hover:border-cyan-500/40 transition-all duration-300 group hover:shadow-[0_0_30px_rgba(6,182,212,0.1)]">
              <div className="w-12 h-12 bg-cyan-500/10 rounded-lg flex items-center justify-center mb-4 group-hover:bg-cyan-500/20 transition-colors">
                <Zap className="w-6 h-6 text-cyan-400" />
              </div>
              <h3 className="text-lg font-bold text-cyan-400 font-mono mb-2">
                Быстрый доступ
              </h3>
              <p className="text-sm text-cyan-400/50 font-mono leading-relaxed">
                Мгновенный доступ ко всем функциям системы
              </p>
            </Card>

            <Card className="bg-[#0d1117] border-2 border-cyan-500/20 p-6 hover:border-cyan-500/40 transition-all duration-300 group hover:shadow-[0_0_30px_rgba(6,182,212,0.1)]">
              <div className="w-12 h-12 bg-cyan-500/10 rounded-lg flex items-center justify-center mb-4 group-hover:bg-cyan-500/20 transition-colors">
                <Shield className="w-6 h-6 text-cyan-400" />
              </div>
              <h3 className="text-lg font-bold text-cyan-400 font-mono mb-2">
                Безопасность
              </h3>
              <p className="text-sm text-cyan-400/50 font-mono leading-relaxed">
                Защищённое хранение данных и прогресса
              </p>
            </Card>

            <Card className="bg-[#0d1117] border-2 border-cyan-500/20 p-6 hover:border-cyan-500/40 transition-all duration-300 group hover:shadow-[0_0_30px_rgba(6,182,212,0.1)]">
              <div className="w-12 h-12 bg-cyan-500/10 rounded-lg flex items-center justify-center mb-4 group-hover:bg-cyan-500/20 transition-colors">
                <Sparkles className="w-6 h-6 text-cyan-400" />
              </div>
              <h3 className="text-lg font-bold text-cyan-400 font-mono mb-2">
                Прогресс
              </h3>
              <p className="text-sm text-cyan-400/50 font-mono leading-relaxed">
                Отслеживание достижений в реальном времени
              </p>
            </Card>
          </div>

          {/* Stats Section */}
          <div className="mt-16 text-center">
            <Card className="bg-[#0d1117] border-2 border-cyan-500/30 p-8 shadow-[0_0_50px_rgba(6,182,212,0.15)]">
              <div className="grid grid-cols-3 gap-8">
                <div>
                  <div className="text-4xl font-bold text-cyan-400 font-mono mb-2">
                    24/7
                  </div>
                  <div className="text-sm text-cyan-400/50 font-mono">
                    Онлайн
                  </div>
                </div>
                <div>
                  <div className="text-4xl font-bold text-cyan-400 font-mono mb-2">
                    100%
                  </div>
                  <div className="text-sm text-cyan-400/50 font-mono">
                    Безопасность
                  </div>
                </div>
                <div>
                  <div className="text-4xl font-bold text-cyan-400 font-mono mb-2">
                    ∞
                  </div>
                  <div className="text-sm text-cyan-400/50 font-mono">
                    Возможности
                  </div>
                </div>
              </div>
            </Card>
          </div>
        </div>
      </main>

      <style jsx>{`
        @keyframes grid-move {
          0% {
            transform: translate(0, 0);
          }
          100% {
            transform: translate(50px, 50px);
          }
        }
      `}</style>
    </div>
  )
}