"use client";

import { useEffect } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";

export default function NotFound() {
  const pathname = usePathname();

  useEffect(() => {
    console.log("[404] Página não encontrada", {
      pathname,
      timestamp: new Date().toISOString(),
    });
  }, [pathname]);

  return (
    <main className="flex min-h-screen flex-col items-center justify-center gap-6 bg-white px-6 text-center text-slate-900">
      <div className="flex max-w-xl flex-col gap-3">
        <span className="text-sm font-semibold uppercase tracking-[0.3em] text-slate-400">
          Erro 404
        </span>
        <h1 className="text-3xl font-semibold md:text-4xl">
          Não encontramos essa página
        </h1>
        <p className="text-base text-slate-600">
          Verifique o endereço digitado. Se o problema persistir, abra o
          console do navegador para ver mais detalhes.
        </p>
      </div>
      <div className="flex flex-wrap items-center justify-center gap-4">
        <Link
          href="/"
          className="rounded-full bg-slate-900 px-6 py-2 text-sm font-medium text-white shadow-sm hover:bg-slate-800"
        >
          Voltar ao início
        </Link>
        <button
          type="button"
          onClick={() => window.location.reload()}
          className="rounded-full border border-slate-200 px-6 py-2 text-sm font-medium text-slate-700 hover:border-slate-300 hover:text-slate-900"
        >
          Recarregar
        </button>
      </div>
    </main>
  );
}