import Link from "next/link";
import type { Metadata } from "next";
import { FlimmerMark } from "@/components/brand/FlimmerLogo";

export const metadata: Metadata = { title: "Keine Verbindung" };

/**
 * Rückfallseite des Service Workers.
 *
 * Bewusst ohne Datenzugriff: sie muss auch dann funktionieren, wenn der
 * Server nicht erreichbar ist, und wird deshalb statisch vorgerendert.
 */
export default function OfflinePage() {
  return (
    <main
      id="inhalt"
      className="flex min-h-dvh flex-col items-center justify-center px-6 text-center"
    >
      <FlimmerMark className="h-16 w-16" />
      <h1 className="mt-6 text-2xl font-semibold tracking-tight">Gerade keine Verbindung</h1>
      <p className="mt-2 max-w-sm text-[var(--fl-muted)]">
        Flimmer erreicht deinen Server nicht. Bereits geladene Seiten und Poster bleiben verfügbar —
        alles Weitere kommt zurück, sobald die Verbindung wieder steht.
      </p>
      <Link href="/" className="fl-btn fl-btn-primary mt-6">
        Noch einmal versuchen
      </Link>
    </main>
  );
}