import {
	createRootRoute,
	HeadContent,
	Scripts,
} from "@tanstack/react-router";
// @ts-expect-error — @fontsource/inter ships CSS only, no types
import "@fontsource/inter";
import Layout from "@/components/Layout";
import { findFooter, type Footer } from "@/lib/cms";
import appCss from "../styles/globals.css?url";

const SITE_URL = "https://unom.io";

export const Route = createRootRoute({
	// Footer is global; fetch once at the root so every route inherits it
	// without each one re-requesting. Falls back to null on CMS hiccups so
	// the rest of the page still renders.
	loader: async (): Promise<{ footer: Footer | null }> => {
		try {
			return { footer: await findFooter() };
		} catch {
			return { footer: null };
		}
	},
	head: () => ({
		meta: [
			{ charSet: "utf-8" },
			{ name: "viewport", content: "width=device-width, initial-scale=1" },
			{ name: "description", content: "Kreative Webentwicklung aus Rottweil" },
			{ title: "unom - Kreative Webentwicklung" },
			{ property: "og:title", content: "unom - Kreative Webentwicklung" },
			{
				property: "og:description",
				content: "Kreative Webentwicklung aus Rottweil",
			},
			{ property: "og:url", content: SITE_URL },
			{ property: "og:type", content: "website" },
		],
		links: [
			{ rel: "stylesheet", href: appCss },
			{ rel: "icon", type: "image/svg+xml", href: "/favicon.svg" },
		],
		scripts: [
			{
				defer: true,
				"data-domain": "unom.io",
				src: "https://analytics.unom.io/js/plausible.js",
			},
		],
	}),
	shellComponent: RootDocument,
});

function RootDocument({ children }: { children: React.ReactNode }) {
	return (
		<html lang="de">
			<head>
				<HeadContent />
			</head>
			<body>
				<Layout>{children}</Layout>
				<Scripts />
			</body>
		</html>
	);
}
