import Link from "next/link";

import { ROUTES } from "@/router/routes";

export default function OfflinePage() {
  return (
    <main
      style={{
        minHeight: "100dvh",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        padding: "2rem",
        background:
          "radial-gradient(circle at 20% 20%, rgba(246, 87, 160, 0.18), transparent 32%), #fcf3f4",
      }}
    >
      <section
        style={{
          width: "min(100%, 420px)",
          border: "1px solid rgba(246, 87, 160, 0.18)",
          borderRadius: "28px",
          padding: "2rem",
          background: "rgba(255, 255, 255, 0.86)",
          boxShadow: "0 18px 48px rgba(246, 87, 160, 0.16)",
          textAlign: "center",
        }}
      >
        <p
          style={{
            margin: "0 0 0.5rem",
            color: "#f657a0",
            fontSize: "0.875rem",
            fontWeight: 700,
            letterSpacing: "0.08em",
            textTransform: "uppercase",
          }}
        >
          Offline
        </p>
        <h1
          style={{
            margin: 0,
            color: "#1e1e1e",
            fontSize: "2rem",
            lineHeight: 1.1,
          }}
        >
          You are offline
        </h1>
        <p
          style={{
            margin: "1rem 0 1.5rem",
            color: "#6b5b62",
            fontSize: "1rem",
            lineHeight: 1.6,
          }}
        >
          Check your connection, then return to CozSweet when the network is
          available again.
        </p>
        <Link
          href={ROUTES.splash}
          style={{
            display: "inline-flex",
            alignItems: "center",
            justifyContent: "center",
            minHeight: "44px",
            padding: "0 1.25rem",
            borderRadius: "999px",
            background: "linear-gradient(135deg, #ff67e0, #f657a0)",
            color: "#fff",
            fontSize: "0.95rem",
            fontWeight: 700,
            textDecoration: "none",
            boxShadow: "0 10px 22px rgba(246, 87, 160, 0.28)",
          }}
        >
          Back to start
        </Link>
      </section>
    </main>
  );
}
