"use client";
import Link from "next/link";
import { motion } from "framer-motion";
import { Home, ArrowLeft } from "lucide-react";

export default function NotFound() {
  return (
    <main className="min-h-screen flex items-center justify-center bg-[#0d0d0d] text-white px-6 relative overflow-hidden">
      {/* Dekoratívne svetlo v pozadí */}
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] bg-blue-500/10 blur-[120px] rounded-full pointer-events-none" />

      <div className="max-w-2xl w-full text-center z-10">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
        >
          {/* Veľké 404 s glitch efektom v CSS */}
          <h1 className="text-[12rem] md:text-[15rem] font-black leading-none tracking-tighter text-white/5 select-none">
            404
          </h1>
          
          <div className="relative -mt-20 md:-mt-28">
            <h2 className="text-4xl md:text-5xl font-black mb-4 tracking-tight">
              System Breach? <span className="text-blue-500">Not really.</span>
            </h2>
            <p className="text-gray-400 text-lg md:text-xl max-w-md mx-auto mb-10 font-medium leading-relaxed">
              The page you are looking for has been moved, deleted, or never existed in this terminal.
            </p>
          </div>

          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
            <Link href="/" className="btn-pill-primary w-full sm:w-auto justify-center group">
              <Home size={18} className="group-hover:-translate-y-0.5 transition-transform" />
              Back Home
            </Link>
            
            <button 
              onClick={() => window.history.back()} 
              className="btn-pill-secondary w-full sm:w-auto justify-center group"
            >
              <ArrowLeft size={18} className="group-hover:-translate-x-1 transition-transform" />
              Go Back
            </button>
          </div>
        </motion.div>

        {/* Spodná línia v štýle kódu */}
        <div className="mt-20 pt-8 border-t border-white/5 flex justify-center gap-8 text-xs font-mono text-gray-500 uppercase tracking-[0.2em]">
          <span>Error_Code: NULL_POINTER</span>
          <span>Status: LOST_IN_SPACE</span>
        </div>
      </div>
    </main>
  );
}