import Link from "next/link";
import { SITE_NAME } from "@/lib/site";

const LINKS = [
  { href: "/about", label: "About" },
  { href: "/privacy", label: "Privacy" },
  { href: "/terms", label: "Terms" },
  { href: "/cookies", label: "Cookies" },
  { href: "/dmca", label: "DMCA" },
  { href: "/contact", label: "Contact" },
] as const;

export function SiteFooter() {
  return (
    <footer className="site-footer relative z-10 mt-auto border-t border-line/80 bg-background/90">
      <div className="mx-auto flex max-w-6xl flex-col gap-5 px-4 py-8 sm:px-6 md:flex-row md:items-start md:justify-between">
        <div>
          <p className="font-display text-[0.65rem] tracking-[0.18em] text-foreground uppercase">
            {SITE_NAME.slice(0, 6)}
            <span className="text-amber">{SITE_NAME.slice(6)}</span>
          </p>
          <p className="mt-2 max-w-sm text-xs leading-relaxed text-muted">
            Browser arcade and player. Accounts and saves stay on this device
            unless a future cloud login ships. Uploaders and hosts are
            responsible for shared ROM files.
          </p>
        </div>
        <nav
          className="flex flex-wrap gap-x-4 gap-y-2 text-sm"
          aria-label="Legal and about"
        >
          {LINKS.map((l) => (
            <Link
              key={l.href}
              href={l.href}
              className="text-muted transition hover:text-amber"
            >
              {l.label}
            </Link>
          ))}
        </nav>
      </div>
      <div className="border-t border-line/50 py-4 text-center text-xs text-muted/80">
        Emulation by{" "}
        <a
          href="https://emulatorjs.org/"
          target="_blank"
          rel="noreferrer"
          className="text-muted underline-offset-2 hover:text-amber hover:underline"
        >
          EmulatorJS
        </a>
        {" · "}
        <Link href="/contribute" className="hover:text-amber">
          Add a ROM
        </Link>
      </div>
    </footer>
  );
}