"use client";

import Link from "next/link";
import { HelpCircle, ArrowLeft } from "lucide-react";

export default function NotFound() {
  return (
    <div className="flex h-screen w-screen flex-col items-center justify-center bg-[var(--canvas-bg,#f8fafc)] p-6 text-center">
      <div className="flex h-14 w-14 items-center justify-center rounded-full bg-indigo-100 text-indigo-600 mb-4">
        <HelpCircle size={28} />
      </div>
      <h2 className="mono text-lg font-bold text-[var(--ink,#0f172a)]">
        Page Introuvable (404)
      </h2>
      <p className="mt-1 max-w-md text-xs text-[var(--ink-dim,#475569)]">
        La page ou la vue demandée n&apos;existe pas.
      </p>
      <Link
        href="/"
        className="mt-5 flex items-center gap-2 rounded bg-[var(--accent,#4f46e5)] px-4 py-2 text-xs font-semibold text-white shadow hover:opacity-90 active:scale-95"
      >
        <ArrowLeft size={14} /> Retour à l&apos;interface principale
      </Link>
    </div>
  );
}
