"use client" import { useState, useEffect, useRef } from "react" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Lock, CheckCircle2, Circle, Zap, Target, Shield, Code, Database, Globe, X, Search, Filter, Trophy, Clock, Star, Sparkles, ChevronDown } from "lucide-react" import Link from "next/link" interface Particle { x: number y: number vx: number vy: number size: number opacity: number } export default function MainPage() { const [activeTab, setActiveTab] = useState("main") const [selectedQuest, setSelectedQuest] = useState(null) const [hoveredQuest, setHoveredQuest] = useState(null) const [mousePos, setMousePos] = useState({ x: 0, y: 0 }) const [particles, setParticles] = useState([]) const [searchQuery, setSearchQuery] = useState("") const [filterDifficulty, setFilterDifficulty] = useState("all") const [viewMode, setViewMode] = useState<"map" | "list">("map") const canvasRef = useRef(null) const [stats, setStats] = useState({ xpToday: 450, timeSpent: "2h 15m", streak: 7, levelProgress: 68 }) // Квесты/проекты const quests = [ { id: 1, name: "Registration", status: "completed", icon: Circle, color: "cyan", description: "Создайте свой аккаунт и начните путешествие в мир киберпространства", reward: 100, difficulty: "Easy", estimatedTime: "5 min", prerequisites: [] }, { id: 2, name: "Sanctum", status: "completed", icon: Shield, color: "cyan", description: "Пройдите базовую защиту системы и изучите основы безопасности", reward: 150, difficulty: "Easy", estimatedTime: "15 min", prerequisites: [1] }, { id: 3, name: "Memories", status: "unlocked", icon: Database, color: "yellow", description: "Восстановите утерянные данные из архива и раскройте секреты прошлого", reward: 200, difficulty: "Medium", estimatedTime: "30 min", prerequisites: [1, 2] }, { id: 4, name: "Cyber toy", status: "locked", icon: Code, color: "red", description: "Взломайте защищенную систему используя продвинутые техники", reward: 250, difficulty: "Medium", estimatedTime: "45 min", prerequisites: [3] }, { id: 5, name: "Flood", status: "locked", icon: Zap, color: "red", description: "Преодолейте мощные потоки данных и найдите путь через хаос", reward: 300, difficulty: "Hard", estimatedTime: "1h", prerequisites: [3] }, { id: 6, name: "Core", status: "locked", icon: Target, color: "red", description: "Проникните в самое ядро системы и получите контроль", reward: 350, difficulty: "Hard", estimatedTime: "1h 30m", prerequisites: [4, 5] }, { id: 7, name: "Access point", status: "locked", icon: Globe, color: "red", description: "Получите доступ к финальной точке и завершите миссию", reward: 500, difficulty: "Expert", estimatedTime: "2h", prerequisites: [6] }, { id: 8, name: "???", status: "locked", icon: Lock, color: "gray", description: "Секретное задание. Требования неизвестны.", reward: 999, difficulty: "???", estimatedTime: "???", prerequisites: [7] } ] // Initialize particles useEffect(() => { const initParticles: Particle[] = [] for (let i = 0; i < 50; i++) { initParticles.push({ x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight, vx: (Math.random() - 0.5) * 0.5, vy: (Math.random() - 0.5) * 0.5, size: Math.random() * 2 + 1, opacity: Math.random() * 0.5 + 0.2 }) } setParticles(initParticles) }, []) // Animate particles useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext('2d') if (!ctx) return canvas.width = window.innerWidth canvas.height = window.innerHeight 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)) // Draw particle ctx.fillStyle = `rgba(6, 182, 212, ${particle.opacity})` ctx.beginPath() ctx.arc(newX, newY, particle.size, 0, Math.PI * 2) ctx.fill() return { ...particle, x: newX, y: newY } }) }) animationFrameId = requestAnimationFrame(animate) } animate() return () => cancelAnimationFrame(animationFrameId) }, []) // Mouse parallax useEffect(() => { const handleMouseMove = (e: MouseEvent) => { setMousePos({ x: e.clientX, y: e.clientY }) } window.addEventListener('mousemove', handleMouseMove) return () => window.removeEventListener('mousemove', handleMouseMove) }, []) const getStatusColor = (status: string) => { switch (status) { case "completed": return "from-green-500 to-emerald-600" case "unlocked": return "from-yellow-500 to-amber-600" case "locked": return "from-red-500 to-rose-600" default: return "from-gray-500 to-gray-600" } } const getDifficultyColor = (difficulty: string) => { switch (difficulty) { case "Easy": return "text-green-400" case "Medium": return "text-yellow-400" case "Hard": return "text-orange-400" case "Expert": return "text-red-400" default: return "text-gray-400" } } const filteredQuests = quests.filter(quest => { const matchesSearch = quest.name.toLowerCase().includes(searchQuery.toLowerCase()) const matchesDifficulty = filterDifficulty === "all" || quest.difficulty === filterDifficulty return matchesSearch && matchesDifficulty }) const questPositions = [ { x: 150, y: 250 }, { x: 300, y: 250 }, { x: 450, y: 250 }, { x: 600, y: 250 }, { x: 750, y: 150 }, { x: 750, y: 350 }, { x: 900, y: 250 }, { x: 1050, y: 250 } ] return (

{/* Animated particles canvas */}