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

const LINKS = [
  { href: "/how-it-works", label: "How it works" },
  { href: "/responsible-play", label: "Responsible play" },
  { href: "/legal/terms", label: "Terms" },
  { href: "/legal/privacy", label: "Privacy" },
  { href: "/login", label: "Sign in" },
  { href: "/register", label: "Create account" },
];

export function SiteFooter({ className }: { className?: string }) {
  return (
    <footer className={className}>
      <div className="border-t border-line pt-10">
        <div className="flex flex-col gap-8 md:flex-row md:items-start md:justify-between">
          <div className="max-w-sm">
            <SpinzaWordmark size="sm" />
            <p className="mt-3 text-[13px] leading-relaxed text-fg-3">Spinza is a fictional social casino. Spinza Credits (SC) are virtual, have no cash value, cannot be purchased and cannot be withdrawn or exchanged.</p>
          </div>
          <nav aria-label="Footer" className="grid grid-cols-2 gap-x-10 gap-y-2 sm:grid-cols-3">
            {LINKS.map((l) => (
              <Link key={l.href} href={l.href} className="tap inline-flex h-9 min-h-0 items-center text-sm text-fg-2 hover:text-fg">
                {l.label}
              </Link>
            ))}
          </nav>
        </div>
        <div className="mt-8 flex flex-col gap-2 border-t border-line py-6 text-[12px] text-fg-4 sm:flex-row sm:items-center sm:justify-between">
          <p>Virtual credits only. No deposits. No withdrawals. No cash value.</p>
          <p>
            <span className="mr-2 inline-flex h-6 items-center rounded-full border border-line-2 px-2 font-bold text-fg-3">18+</span>
            For adults only. Spinza is not gambling: nothing of value is ever at stake.
          </p>
        </div>
      </div>
    </footer>
  );
}