"use client";

import Link from "next/link";

import { ChatIcon, HomeIcon, SnowflakeIcon } from "@/components/icons";
import { useI18n } from "@/lib/i18n";

/**
 * The custom 404. The root layout already paints the ice scene behind it, so
 * this is just the glass card: in Frutiger Aero the wallpaper bake, the bright
 * rim and the rising bubbles all come from the shared recipes, and the glossy
 * orb is the scene's own ice sphere at full strength. Standalone (no rail, no
 * tab bar), like the offline screen.
 */
export function NotFoundScreen() {
  const { t } = useI18n();

  return (
    <main className="frost-bg grid min-h-dvh place-items-center px-4 py-10">
      <div className="card w-full max-w-md space-y-4 p-6 text-center sm:p-8">
        <div className="not-found-orb mx-auto grid size-24 place-items-center">
          <SnowflakeIcon className="size-10 text-white drop-shadow-[0_2px_6px_rgb(3_74_124/0.6)]" />
        </div>
        <p className="pt-1">
          <span className="glass-chip inline-flex items-center rounded-full px-3 py-1 text-[12px] font-semibold tracking-[0.18em] text-[var(--text-subtle)]">
            404
          </span>
        </p>
        <h1 className="text-xl font-semibold tracking-[-0.01em] text-[var(--text)]">{t("notFound.title")}</h1>
        <p className="mx-auto max-w-sm text-sm leading-relaxed text-[var(--text-muted)]">{t("notFound.hint")}</p>
        <div className="flex flex-wrap justify-center gap-2 pt-2">
          <Link
            href="/"
            className="btn-primary inline-flex h-11 items-center justify-center gap-2 rounded-[14px] px-5 text-[15px] font-medium"
          >
            <HomeIcon className="size-4" />
            {t("notFound.home")}
          </Link>
          <Link
            href="/chat"
            className="btn-secondary inline-flex h-11 items-center justify-center gap-2 rounded-[14px] px-5 text-[15px] font-medium"
          >
            <ChatIcon className="size-4" />
            {t("notFound.chat")}
          </Link>
        </div>
      </div>
    </main>
  );
}