---
import '../styles/global.css';

interface Props {
	title: string;
	description?: string;
	lang?: string;
}

const {
	title,
	description = 'Europäische Technologie-Souveränität — 75% self-hosted Infrastruktur, DSGVO-konform, Open Source',
	lang = 'de',
} = Astro.props;
---

<!doctype html>
<html lang={lang}>
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta name="description" content={description} />
		<meta name="generator" content={Astro.generator} />

		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />

		<meta property="og:title" content={title} />
		<meta property="og:description" content={description} />
		<meta property="og:type" content="website" />
		<meta property="og:locale" content={lang === 'de' ? 'de_DE' : 'en_US'} />

		<meta name="twitter:card" content="summary_large_image" />
		<meta name="twitter:title" content={title} />
		<meta name="twitter:description" content={description} />

		<link rel="preconnect" href="https://fonts.googleapis.com" />
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
		<link
			href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
			rel="stylesheet"
		/>

		{
			import.meta.env.PUBLIC_UMAMI_WEBSITE_ID && (
				<script
					defer
					src="https://stats.mana.how/script.js"
					data-website-id={import.meta.env.PUBLIC_UMAMI_WEBSITE_ID}
				/>
			)
		}

		<title>{title}</title>
	</head>
	<body class="min-h-screen bg-background-page text-text-primary antialiased">
		<slot />
	</body>
</html>
