'use client'

import Link from 'next/link'
import { motion } from 'framer-motion'
import { useEffect, useState } from 'react'

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

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

    return (
        <div className="min-h-screen flex flex-col items-center justify-center bg-background p-4 relative overflow-hidden">
            {/* Animated background elements */}
            {mounted && (
                <>
                    <motion.div
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 0.4 }}
                        transition={{ duration: 1 }}
                        className="absolute inset-0 z-0"
                    >
                        {[...Array(6)].map((_, i) => (
                            <motion.div
                                key={`circle-${i}`}
                                className="absolute rounded-full bg-black/5"
                                initial={{
                                    x: Math.random() * 100 - 50 + '%',
                                    y: Math.random() * 100 - 50 + '%',
                                    scale: Math.random() * 0.5 + 0.5,
                                }}
                                animate={{
                                    x: [
                                        Math.random() * 100 - 50 + '%',
                                        Math.random() * 100 - 50 + '%',
                                        Math.random() * 100 - 50 + '%',
                                    ],
                                    y: [
                                        Math.random() * 100 - 50 + '%',
                                        Math.random() * 100 - 50 + '%',
                                        Math.random() * 100 - 50 + '%',
                                    ],
                                }}
                                transition={{
                                    repeat: Infinity,
                                    duration: 20 + Math.random() * 10,
                                    ease: 'easeInOut',
                                }}
                                style={{
                                    width: `${Math.random() * 300 + 100}px`,
                                    height: `${Math.random() * 300 + 100}px`,
                                }}
                            />
                        ))}
                    </motion.div>
                </>
            )}

            <div className="max-w-2xl w-full text-center z-10 relative">
                {mounted && (
                    <>
                        <motion.div
                            initial={{ scale: 0.8, opacity: 0 }}
                            animate={{ scale: 1, opacity: 1 }}
                            transition={{ duration: 0.5 }}
                            className="relative"
                        >
                            <div className="text-9xl font-bold text-primary/10">404</div>
                            <motion.div
                                initial={{ y: 0 }}
                                animate={{ y: [0, -10, 0] }}
                                transition={{ repeat: Infinity, duration: 2, ease: "easeInOut" }}
                                className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
                            >

                            </motion.div>
                        </motion.div>

                        <motion.h1
                            initial={{ opacity: 0, y: 20 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ delay: 0.2, duration: 0.5 }}
                            className="mt-8 text-2xl md:text-3xl font-bold"
                        >
                            صفحه موردنظر پیدا نشد!
                        </motion.h1>

                        <motion.p
                            initial={{ opacity: 0, y: 20 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ delay: 0.4, duration: 0.5 }}
                            className="mt-4 text-description"
                        >
                            متأسفانه صفحه‌ای که به دنبال آن هستید وجود ندارد یا حذف شده است.
                        </motion.p>

                        <motion.div
                            initial={{ opacity: 0, y: 20 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ delay: 0.6, duration: 0.5 }}
                            className="mt-8"
                        >
                            <Link href="/">
                                <button className="bg-black hover:bg-black/90 transition-colors text-white py-3 px-8 rounded-2xl">
                                    بازگشت به صفحه اصلی
                                </button>
                            </Link>
                        </motion.div>

                        <motion.div
                            initial={{ opacity: 0 }}
                            animate={{ opacity: 1 }}
                            transition={{ delay: 0.8, duration: 0.5 }}
                            className="mt-12 flex flex-wrap justify-center gap-6"
                        >
                            <Link href="/products" className="text-black hover:underline">
                                محصولات
                            </Link>
                            <Link href="/about" className="text-black hover:underline">
                                درباره ما
                            </Link>
                            <Link href="/contact" className="text-black hover:underline">
                                تماس با ما
                            </Link>
                            <Link href="/blogs" className="text-black hover:underline">
                                بلاگ
                            </Link>
                        </motion.div>
                    </>
                )}
            </div>
        </div>
    )
} 