"use client";

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

type Particle = {
  x: number;
  y: number;
  duration: number;
  delay: number;
};

export default function NotFound() {
  const [particles, setParticles] = useState<Particle[]>([]);

  useEffect(() => {
    const generated = Array.from({ length: 25 }).map(() => ({
      x: Math.random() * window.innerWidth,
      y: Math.random() * window.innerHeight,
      duration: 3 + Math.random() * 2,
      delay: Math.random(),
    }));

    setParticles(generated);
  }, []);

  return (
    <div className="relative h-screen w-full overflow-hidden bg-gradient-to-b from-green-900 via-green-700 to-green-500 flex items-center justify-center">
      
      {/* particles */}
      <div className="absolute inset-0">
        {particles.map((p, i) => (
          <motion.div
            key={i}
            className="absolute w-2 h-2 bg-yellow-300 rounded-full opacity-60"
            initial={{ x: p.x, y: p.y }}
            animate={{
              y: [p.y, p.y - 30, p.y],
              x: [p.x, p.x + 10, p.x],
            }}
            transition={{
              duration: p.duration,
              repeat: Infinity,
              delay: p.delay,
            }}
          />
        ))}
      </div>

      {/* main content */}
      <motion.div
        className="relative z-10 flex flex-col items-center"
        animate={{ rotateY: 20 }}
        style={{ transformStyle: "preserve-3d" }}
      >
        <div className="w-40 h-10 bg-amber-900 rounded-full shadow-2xl" />

        <motion.div
          className="w-2 h-32 bg-green-300 rounded-full origin-bottom"
          animate={{ scaleY: [1, 1.1, 1] }}
          transition={{ duration: 2, repeat: Infinity }}
        />

        <h1 className="text-6xl font-bold text-white mt-10">404</h1>

        <p className="text-white opacity-80 text-center max-w-sm">
          Halaman tidak di temukan 🌱
        </p>

        <Link
          href="/"
          className="mt-6 px-6 py-2 bg-green-900 text-white rounded-full"
        >
          Kembali ke Dashboard
        </Link>
      </motion.div>
    </div>
  );
}