"use client";

import { motion } from "framer-motion";
import { Home, ArrowLeft, Search, Ghost, RefreshCcw, Terminal } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";

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

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

  if (!mounted) return null;

  return (
    <main className="min-h-screen bg-[#fdfcf8] dark:bg-stone-950 py-24 px-6 flex items-center justify-center transition-colors duration-500">
      <div className="max-w-7xl mx-auto w-full">
        <div className="grid grid-cols-1 md:grid-cols-12 gap-6 md:gap-8 max-w-5xl mx-auto">
          
          {/* Main Error Card */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            className="md:col-span-12 lg:col-span-8 bg-white dark:bg-stone-900 rounded-[3rem] p-10 md:p-16 border border-stone-200/60 dark:border-stone-800/60 shadow-sm flex flex-col justify-between min-h-[400px]"
          >
            <div>
              <div className="flex items-center gap-3 mb-12">
                <div className="w-10 h-10 rounded-2xl bg-stone-900 dark:bg-stone-50 flex items-center justify-center text-white dark:text-stone-900 font-black text-xs">
                  404
                </div>
                <span className="text-[10px] font-black uppercase tracking-[0.3em] text-stone-400">Error Report</span>
              </div>
              <h1 className="text-5xl md:text-8xl font-black tracking-tighter uppercase text-stone-900 dark:text-stone-50 leading-[0.8] mb-8">
                Page not <br/>Found<span className="text-liquid-mint">.</span>
              </h1>
              <p className="text-xl md:text-2xl font-light text-stone-500 max-w-md leading-relaxed">
                The content you are looking for has been moved, deleted, or never existed.
              </p>
            </div>

            <div className="mt-12 flex flex-wrap gap-4">
              <Link
                href="/"
                className="group relative px-10 py-4 bg-stone-900 dark:bg-stone-50 text-white dark:text-stone-900 rounded-2xl font-black text-xs uppercase tracking-[0.2em] shadow-xl hover:scale-105 transition-all"
              >
                Return Home
              </Link>
              <button
                onClick={() => router.back()}
                className="px-10 py-4 bg-white dark:bg-stone-800 text-stone-900 dark:text-stone-100 border border-stone-200 dark:border-stone-700 rounded-2xl font-black text-xs uppercase tracking-[0.2em] hover:bg-stone-50 dark:hover:bg-stone-700 transition-all"
              >
                Go Back
              </button>
            </div>
          </motion.div>

          {/* Sidebar Cards */}
          <div className="md:col-span-12 lg:col-span-4 flex flex-col gap-6">
            {/* Search/Explore Projects */}
            <motion.div
              initial={{ opacity: 0, x: 20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: 0.1 }}
              className="bg-stone-900 rounded-[2.5rem] p-10 border border-stone-800 shadow-2xl text-white relative overflow-hidden group flex-1 flex flex-col justify-between"
            >
              <div className="relative z-10">
                <Search className="text-liquid-mint mb-6" size={32} />
                <h3 className="text-2xl font-black uppercase tracking-tighter mb-2">Explore Work</h3>
                <p className="text-stone-400 text-sm font-medium">Maybe what you need is in my project archive?</p>
              </div>
              <Link 
                href="/projects"
                className="mt-8 inline-flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-liquid-mint group-hover:gap-4 transition-all"
              >
                View Projects <ArrowLeft className="rotate-180" size={14} />
              </Link>
              <div className="absolute top-0 right-0 w-32 h-32 bg-liquid-mint/5 blur-3xl rounded-full -mr-16 -mt-16" />
            </motion.div>

            {/* Visit the Lab */}
            <motion.div
              initial={{ opacity: 0, x: 20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: 0.2 }}
              className="bg-white dark:bg-stone-900 rounded-[2.5rem] p-10 border border-stone-200/60 dark:border-stone-800/60 shadow-sm flex-1 flex flex-col justify-between group"
            >
              <div className="relative z-10">
                <Terminal className="text-liquid-purple mb-6" size={32} />
                <h3 className="text-2xl font-black uppercase tracking-tighter mb-2 text-stone-900 dark:text-stone-50">Technical</h3>
                <p className="text-stone-500 dark:text-stone-400 text-sm font-medium">Check out my collection of code snippets and notes.</p>
              </div>
              <Link 
                href="/snippets"
                className="mt-8 inline-flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-stone-400 hover:text-stone-900 dark:hover:text-white transition-colors"
              >
                Enter the Lab <ArrowLeft className="rotate-180" size={14} />
              </Link>
            </motion.div>
          </div>

        </div>
      </div>
    </main>
  );
}