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

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

const {
	title = 'Clock - Time Tracking & Focus',
	description = 'Track your time, stay focused, and boost productivity. Pomodoro timer, time tracking, and focus sessions. Start free today.',
} = Astro.props;
---

<!doctype html>
<html lang="de" class="scroll-smooth">
	<head>
		<meta charset="UTF-8" />
		<meta name="description" content={description} />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="generator" content={Astro.generator} />

		<!-- SEO Meta Tags -->
		<meta property="og:title" content={title} />
		<meta property="og:description" content={description} />
		<meta property="og:type" content="website" />
		<meta name="twitter:card" content="summary_large_image" />
		<meta name="twitter:title" content={title} />
		<meta name="twitter:description" content={description} />

		<!-- Preconnect to Google Fonts -->
		<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"
		/>

		<!-- Umami Analytics -->
		<script
			defer
			src="https://stats.mana.how/script.js"
			data-website-id="0332b471-a022-46af-a726-0f45932bfd58"></script>

		<title>{title}</title>
	</head>
	<body class="antialiased">
		<slot />
	</body>
</html>
