import { HomeIcon } from "@/components/icons";

export const metadata = { title: "Offline" };

/** Shown by the service worker when a navigation can't reach the network. */
export default function OfflinePage() {
  return (
    <main className="frost-bg grid min-h-dvh place-items-center px-4">
      <div className="card relative max-w-sm space-y-3 p-6 text-center">
        <HomeIcon className="mx-auto size-8 text-frost-400" />
        <h1 className="text-xl font-semibold text-frost-950 dark:text-frost-50">You&apos;re offline</h1>
        <p className="text-sm text-frost-600 dark:text-frost-300">
          Freezmo needs a connection for generating decks and grading answers. Your saved decks are
          still in this browser — reconnect and reload.
        </p>
      </div>
    </main>
  );
}