import type {ReactNode} from 'react';
import type {Metadata, Viewport} from 'next';
import {Inter, JetBrains_Mono, Space_Grotesk} from 'next/font/google';
import {GeistSerif} from 'geist/font/serif';
import './globals.css';
import Header from '@/components/layout/layout-header';
import Footer from '@/components/layout/layout-footer';
import PageBackground from '@/components/layout/page-background';

const spaceGrotesk = Space_Grotesk({
	subsets: ['latin'],
	variable: '--font-space-grotesk',
});

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

const jetbrainsMono = JetBrains_Mono({
	subsets: ['latin'],
	variable: '--font-jetbrains-mono',
	weight: ['400', '500'],
});

export const metadata: Metadata = {
	title: 'Cayden — Web Developer',
	description:
		'Web developer building clinical interfaces and fleet software.',
};

export const viewport: Viewport = {
	themeColor: '#040807',
};

export default function RootLayout({
	children,
}: Readonly<{
	children: ReactNode;
}>) {
	return (
		<html
			lang="en"
			className={`${spaceGrotesk.variable} ${inter.variable} ${jetbrainsMono.variable} ${GeistSerif.variable} h-full bg-obsidian antialiased`}
		>
			<body className="relative isolate flex min-h-full flex-col font-sans text-ink">
				<PageBackground />
				<Header />
				<div className="flex-1">{children}</div>
				<Footer />
			</body>
		</html>
	);
}