import type { Metadata } from "next";
import { Fraunces, Inter } from "next/font/google";
import Link from "next/link";
import "./globals.css";

const display = Fraunces({
  subsets: ["latin"],
  variable: "--font-display",
  weight: ["500", "600", "700"],
  display: "swap",
});

const body = Inter({
  subsets: ["latin"],
  variable: "--font-body",
  display: "swap",
});

export const metadata: Metadata = {
  title: {
    default: "Backlog — Game reviews, tips, and top picks",
    template: "%s — Backlog",
  },
  description:
    "Honest, evergreen reviews and curated top-game lists across PC, Android, iOS, PlayStation, and Xbox.",
};

const NAV_LINKS = [
  { href: "/browse", label: "Browse" },
  { href: "/guides", label: "Guides & Tricks" },
  { href: "/compare", label: "Compare" },
  { href: "/search", label: "Search" },
];

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={`${display.variable} ${body.variable}`}>
      <body>
        <a
          href="#main"
          className="sr-only focus:not-sr-only focus:absolute focus:z-50 focus:m-3 focus:rounded focus:bg-signal focus:px-4 focus:py-2 focus:text-ink-950"
        >
          Skip to content
        </a>

        <header className="sticky top-0 z-40 border-b border-ink-700/60 bg-ink-950/90 backdrop-blur">
          <div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-3">
            <Link href="/" className="font-display text-xl font-semibold tracking-tight">
              Backlog
            </Link>
            <nav className="hidden gap-6 text-sm text-bone-100/80 sm:flex">
              {NAV_LINKS.map((l) => (
                <Link key={l.href} href={l.href} className="hover:text-bone-50">
                  {l.label}
                </Link>
              ))}
            </nav>
          </div>
        </header>

        <main id="main">{children}</main>

        <footer className="mt-20 border-t border-ink-700/60 bg-ink-900">
          <div className="mx-auto max-w-6xl px-4 py-10 text-sm text-bone-100/60">
            <div className="flex flex-wrap gap-x-6 gap-y-2">
              <Link href="/about">About</Link>
              <Link href="/contact">Contact</Link>
              <Link href="/editorial-policy">Editorial Policy</Link>
              <Link href="/privacy-policy">Privacy Policy</Link>
              <Link href="/terms">Terms</Link>
              <Link href="/disclaimer">Disclaimer</Link>
              <Link href="/dmca">DMCA</Link>
            </div>
            <p className="mt-6">
              Backlog does not host or link to downloads, APKs, ROMs, cracks, or cheat tools.
              All game titles and images are property of their respective owners.
            </p>
          </div>
        </footer>
      </body>
    </html>
  );
}
