import Link from "next/link";
import { SpinzaWordmark } from "@/components/brand/logo";

/** Centered auth layout — logo, card, legal footer. No app navigation. */
export default function AuthLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="relative flex min-h-dvh flex-col" style={{ paddingTop: "var(--safe-top)", paddingBottom: "var(--safe-bottom)" }}>
      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_50%_-10%,rgba(201,169,97,0.14),transparent_55%)]" />
      <header className="relative flex h-16 items-center justify-center">
        <Link href="/" aria-label="Spinza home" className="focus-ring rounded-md">
          <SpinzaWordmark />
        </Link>
      </header>
      <main className="relative flex flex-1 flex-col items-center justify-center px-4 py-8">
        <div className="w-full max-w-[440px]">{children}</div>
      </main>
      <footer className="relative px-4 pb-6 text-center text-[12px] text-fg-4">
        <p>Virtual credits only. No deposits. No withdrawals. No cash value. 18+.</p>
        <nav className="mt-2 flex flex-wrap justify-center gap-x-4 gap-y-1" aria-label="Legal">
          <Link href="/legal/terms" className="hover:text-fg-2">
            Terms
          </Link>
          <Link href="/legal/privacy" className="hover:text-fg-2">
            Privacy
          </Link>
          <Link href="/responsible-play" className="hover:text-fg-2">
            Responsible play
          </Link>
          <Link href="/how-it-works" className="hover:text-fg-2">
            How it works
          </Link>
        </nav>
      </footer>
    </div>
  );
}