import type { Metadata } from 'next'
import Script from 'next/script'
import { Geist, Geist_Mono, Hanken_Grotesk, Inter } from 'next/font/google'
import './globals.css'

const geistSans = Geist({
    variable: '--font-geist-sans',
    subsets: ['latin'],
})

const geistMono = Geist_Mono({
    variable: '--font-geist-mono',
    subsets: ['latin'],
})

const inter = Inter({
    variable: '--font-inter',
    subsets: ['latin'],
})

const hankenGrotesk = Hanken_Grotesk({
    variable: '--font-hanken-grotesk',
    subsets: ['latin'],
})

export const metadata: Metadata = {
    title: 'Standard.site - One schema. Every platform.',
    description: 'Standard.site provides shared lexicons for long-form publishing on AT Protocol. Making content easier to discover, index, and move across the ATmosphere.',
    metadataBase: new URL('https://standard.site'),
    openGraph: {
        images: ['/media/opengraph-image.png'],
    },
    twitter: {
        card: 'summary_large_image',
        images: ['/media/twitter-image.png'],
    },
}

export default function RootLayout({children}: Readonly<{
    children: React.ReactNode;
}>) {
    return (
        <html lang="en">
            <head>
                <style dangerouslySetInnerHTML={{ __html: `
                    html { background: oklch(.985 0 0); }
                    @media (prefers-color-scheme: dark) { html { background: oklch(.21 .006 285.885); } }
                `}} />
                <Script
                    src="https://plausible.io/js/pa-JuOUOxn5gfugV0aRQRS8U.js"
                    strategy="afterInteractive"
                />
                <Script id="plausible-init" strategy="afterInteractive">
                    {`window.plausible=window.plausible||function(){(plausible.q=plausible.q||[]).push(arguments)},plausible.init=plausible.init||function(i){plausible.o=i||{}};plausible.init()`}
                </Script>
            </head>
            <body
                className={ `${ geistSans.variable } ${ geistMono.variable } ${ inter.variable } ${ hankenGrotesk.variable } antialiased` }
            >
                { children }
            </body>
        </html>
    )
}
