import { Link } from "@tanstack/react-router";

export default function NotFound() {
  return (
    <section className="relative flex flex-col items-center justify-center py-24 text-center overflow-hidden">
      <div className="absolute inset-0 -z-10">
        <div className="absolute top-0 left-1/2 h-72 w-184 -translate-x-1/2 rounded-full bg-(--color-primary) opacity-[0.10] blur-3xl" />
        <div className="absolute top-10 left-1/2 h-72 w-184 -translate-x-1/2 rounded-full bg-(--color-accent) opacity-[0.10] blur-3xl" />
      </div>

      <div className="-rotate-1 mb-4">
        <span className="inline-flex items-center gap-2 rounded-full bg-(--color-surface) px-4 py-1 text-xs font-semibold tracking-widest uppercase text-(--color-accent) border border-(--color-primary-light)">
          lost in translation
        </span>
      </div>

      <h1 className="text-8xl font-black tracking-tight text-(--color-text) leading-none">
        4
        <span className="inline-block rotate-1 px-3 py-1 bg-(--color-primary) text-white rounded-xl">
          0
        </span>
        4
      </h1>

      <p className="mt-6 text-lg font-medium text-(--color-text-muted) max-w-sm">
        This page doesn't exist. Maybe it never did - or maybe you{" "}
        <span className="text-(--color-accent) font-bold">
          just guessed wrong
        </span>
        .
      </p>

      <div className="mt-8">
        <Link
          to="/"
          className="px-7 py-3 rounded-full text-white font-bold text-sm bg-(--color-primary) hover:bg-(--color-primary-dark)"
        >
          Back to home
        </Link>
      </div>
    </section>
  );
}
