import Image from "next/image";
import Link from "next/link";
import type { Metadata } from "next";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

export const metadata: Metadata = {
  title: "Offline",
  description: "You're offline — some pages of SAG Manager are still available.",
};

export default function OfflinePage() {
  return (
    <div className="flex flex-1 items-center justify-center px-4 py-16">
      <Card className="mx-auto w-full max-w-md">
        <CardContent className="flex flex-col items-center gap-4 p-8 text-center">
          <Image
            src="/sag-logo.png"
            alt="South Armz Global"
            width={64}
            height={64}
            className="rounded-md"
            priority
          />
          <div>
            <h1 className="text-2xl font-semibold tracking-tight">You&apos;re offline</h1>
            <p className="mt-2 text-sm text-muted-foreground">
              Some pages are available offline. Try{" "}
              <Link href="/app/briefing" className="text-primary underline-offset-2 hover:underline">
                Briefing
              </Link>{" "}
              or{" "}
              <Link href="/app/dashboard" className="text-primary underline-offset-2 hover:underline">
                Dashboard
              </Link>
              .
            </p>
          </div>
          <div className="mt-2 flex w-full flex-col gap-2 sm:flex-row sm:justify-center">
            <Button asChild size="sm">
              <Link href="/app/briefing">Open briefing</Link>
            </Button>
            <Button asChild size="sm" variant="outline">
              <Link href="/app/dashboard">Open dashboard</Link>
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}