import type { Metadata, Viewport } from 'next';
import { Inter, Unbounded } from 'next/font/google';
import type { ReactNode } from 'react';
import { site, siteUrl } from '@/lib/site';
import './globals.css';

// Variable fonts: one file each covers every weight we use.
const inter = Inter({ subsets: ['latin'], variable: '--font-inter', display: 'swap' });
const unbounded = Unbounded({ subsets: ['latin'], variable: '--font-unbounded', display: 'swap' });

export const metadata: Metadata = {
  metadataBase: siteUrl,
  title: { default: `${site.name} — ${site.promise}`, template: `%s · ${site.name}` },
  description: site.description,
  applicationName: site.name,
  category: 'entertainment',
  formatDetection: { telephone: false, address: false, email: false },
  openGraph: {
    type: 'website',
    siteName: site.name,
    locale: site.locale,
    url: '/',
    title: `${site.name} — ${site.promise}`,
    description: site.description,
  },
  twitter: { card: 'summary_large_image' },
};

export const viewport: Viewport = {
  themeColor: '#070b1f',
  colorScheme: 'dark',
  width: 'device-width',
  initialScale: 1,
};

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html
      lang="en"
      dir="ltr"
      // Fonts are exposed as CSS variables on <html> so :root-level theme tokens resolve them.
      className={`${inter.variable} ${unbounded.variable} scroll-smooth motion-reduce:scroll-auto`}
      data-scroll-behavior="smooth"
    >
      <body className="min-h-dvh bg-night font-sans text-fg antialiased">
        {/* Every page's <main> carries id="main" so this lands keyboard users on the content. */}
        <a
          href="#main"
          className="sr-only z-[100] rounded-xl bg-cyan px-5 py-3 font-semibold text-on-bright focus:not-sr-only focus:fixed focus:top-3 focus:left-3"
        >
          Skip to content
        </a>
        {children}
      </body>
    </html>
  );
}