import type { Metadata } from "next";
import Link from "next/link";
import { Wrench } from "lucide-react";
import { SpinzaWordmark } from "@/components/brand/logo";
import { MaintenanceRetry } from "./retry";

export const metadata: Metadata = { title: "Maintenance", robots: { index: false } };

export default function MaintenancePage() {
  return (
    <div className="relative flex min-h-dvh flex-col items-center justify-center px-4 py-16 text-center">
      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_50%_20%,rgba(201,169,97,0.14),transparent_55%)]" />
      <Link href="/" className="relative mb-10 focus-ring rounded-md" aria-label="Spinza home">
        <SpinzaWordmark />
      </Link>
      <div className="relative" role="status">
        <div className="mx-auto mb-6 grid h-16 w-16 place-items-center rounded-full metal text-accent-2 animate-float">
          <Wrench className="h-7 w-7" />
        </div>
        <div className="eyebrow mb-2 text-accent">Scheduled maintenance</div>
        <h1 className="text-3xl font-semibold tracking-[-0.03em] sm:text-4xl">Spinza is getting an upgrade.</h1>
        <p className="mx-auto mt-3 max-w-md text-[15px] text-fg-3">Your credits and progress are safe. We are polishing the reels and will be back shortly — this page checks automatically.</p>
        <MaintenanceRetry />
      </div>
      <p className="relative mt-16 text-[12px] text-fg-4">Virtual credits only. No deposits. No withdrawals. No cash value. 18+.</p>
    </div>
  );
}