"use client" import { useState, useEffect, useRef } from "react" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import Link from "next/link" import { MessageCircle, X, Sparkles, Shield, Zap, CheckCircle, ArrowRight, Info } from "lucide-react" interface Particle { x: number y: number vx: number vy: number size: number opacity: number color: string } export default function RegisterPage() { const [showModal, setShowModal] = useState(false) const [particles, setParticles] = useState([]) const [mousePos, setMousePos] = useState({ x: 0, y: 0 }) const canvasRef = useRef(null) const telegramBotUrl = "https://t.me/School21AnonimousGame_bot" // Initialize particles useEffect(() => { const initParticles: Particle[] = [] const colors = ['#06b6d4', '#0ea5e9', '#3b82f6', '#8b5cf6'] for (let i = 0; i < 50; i++) { initParticles.push({ x: Math.random() * (typeof window !== 'undefined' ? window.innerWidth : 1920), y: Math.random() * (typeof window !== 'undefined' ? window.innerHeight : 1080), vx: (Math.random() - 0.5) * 0.5, vy: (Math.random() - 0.5) * 0.5, size: Math.random() * 2 + 1, opacity: Math.random() * 0.4 + 0.2, color: colors[Math.floor(Math.random() * colors.length)] }) } setParticles(initParticles) }, []) // Animate particles useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext('2d') if (!ctx) return const updateCanvasSize = () => { canvas.width = window.innerWidth canvas.height = window.innerHeight } updateCanvasSize() let animationFrameId: number const animate = () => { ctx.clearRect(0, 0, canvas.width, canvas.height) setParticles(prevParticles => { return prevParticles.map(particle => { let newX = particle.x + particle.vx let newY = particle.y + particle.vy if (newX < 0 || newX > canvas.width) particle.vx *= -1 if (newY < 0 || newY > canvas.height) particle.vy *= -1 newX = Math.max(0, Math.min(canvas.width, newX)) newY = Math.max(0, Math.min(canvas.height, newY)) ctx.shadowBlur = 8 ctx.shadowColor = particle.color ctx.fillStyle = `${particle.color}${Math.floor(particle.opacity * 255).toString(16).padStart(2, '0')}` ctx.beginPath() ctx.arc(newX, newY, particle.size, 0, Math.PI * 2) ctx.fill() return { ...particle, x: newX, y: newY } }) }) animationFrameId = requestAnimationFrame(animate) } animate() window.addEventListener('resize', updateCanvasSize) return () => { cancelAnimationFrame(animationFrameId) window.removeEventListener('resize', updateCanvasSize) } }, []) // Mouse parallax useEffect(() => { const handleMouseMove = (e: MouseEvent) => { setMousePos({ x: e.clientX, y: e.clientY }) } window.addEventListener('mousemove', handleMouseMove) return () => window.removeEventListener('mousemove', handleMouseMove) }, []) const handleTelegramClick = () => { setShowModal(true) setTimeout(() => { window.open(telegramBotUrl, '_blank') }, 500) } return (

{/* Animated particles canvas */}