'use client';

import { motion } from 'framer-motion';
import { BookOpen, Home } from 'lucide-react';
import { Button } from '@/components/ui/button';
import Link from 'next/link';

export default function NotFound() {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center p-6 text-center bg-background">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        className="max-w-sm"
      >
        <div className="mb-6 flex h-20 w-20 mx-auto items-center justify-center rounded-2xl bg-primary/10">
          <BookOpen className="h-10 w-10 text-primary" />
        </div>
        <h1 className="font-heading text-6xl font-bold text-primary">404</h1>
        <h2 className="mt-2 font-heading text-xl font-semibold">Halaman Tidak Ditemukan</h2>
        <p className="mt-2 text-sm text-muted-foreground">
          Halaman yang Anda cari tidak ada atau telah dipindahkan.
        </p>
        <Button asChild className="mt-6 rounded-xl gap-2 gradient-primary border-0 text-white">
          <Link href="/dashboard">
            <Home className="h-4 w-4" />
            Ke Beranda
          </Link>
        </Button>
      </motion.div>
    </div>
  );
}