import type { Metadata, Viewport } from "next";

import { Archivo, JetBrains_Mono, Fraunces } from "next/font/google";

import "./globals.css";

import { SiteHeader } from "@/components/site-header";

import { SiteFooter } from "@/components/site-footer";

const archivo = Archivo({

  subsets: ["latin"],

  weight: ["500", "600", "700", "800", "900"],

  variable: "--font-display",

  display: "swap",

});

const jetbrains = JetBrains_Mono({

  subsets: ["latin"],

  weight: ["400", "500", "600", "700"],

  variable: "--font-mono",

  display: "swap",

});

const fraunces = Fraunces({

  subsets: ["latin"],

  weight: ["400", "500"],

  style: ["normal", "italic"],

  variable: "--font-prose",

  display: "swap",

});

export const metadata: Metadata = {

  title: {

    default: "Docket - what the government did this week",

    template: "%s · Docket",

  },

  description:

    "Bills, votes, and dollars from official US records. Plain English, every fact sourced. Zero spin.",

  applicationName: "Docket",

  authors: [{ name: "Docket" }],

  icons: {

    icon: "/favicon.svg",

    apple: "/apple-touch-icon.png",

  },

};

export const viewport: Viewport = {

  themeColor: "#0B0C0E",

  width: "device-width",

  initialScale: 1,

};

export default function RootLayout({

  children,

}: {

  children: React.ReactNode;

}) {

  return (

    <html

      lang="en"

      className={`${archivo.variable} ${jetbrains.variable} ${fraunces.variable}`}

      suppressHydrationWarning

    >

      <head>

        {

}

        <script

          dangerouslySetInnerHTML={{

            __html: `(function(){try{var s=localStorage.getItem('docket-display');var m=(s==='light')?'light':'dark';var c=document.documentElement.classList;c.remove('dark','light','plain');if(m!=='dark')c.add(m);document.documentElement.dataset.display=m;}catch(e){}})();`,

          }}

        />

      </head>

      <body className="min-h-dvh bg-ink text-paper antialiased">

        <a

          href="#main"

          className="skip-link focus-ring label"

        >

          Skip to content

        </a>

        <div className="relative flex min-h-dvh flex-col">

          <SiteHeader />

          <main id="main" className="flex-1">

            {children}

          </main>

          <SiteFooter />

        </div>

      </body>

    </html>

  );

}