---
import '~/styles/index.css';
import Header from '~/components/header.astro';
// import Icon from "astro-iconify";
import Splash from '~/components/splash.astro';
// import AstroSection from "~/sections/astro-section.astro";
import Starfield from '~/components/starfield.astro';

const { site } = Astro;
const image = new URL('social.jpg', site);
const description =
	'Library of components and utilities for building reactive user interfaces with Astro';
---

<html lang="en" class="h-full motion-safe:scroll-smooth" data-theme="dark">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width" />
		<link rel="icon" href="/favicon.ico" sizes="any" />

		<title>Astro Reactive | {description} 🚀</title>
		<meta name="description" content={description} />

		<!-- fonts -->
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
		<link
			rel="preload"
			as="style"
			href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap"
		/>
		<link
			rel="stylesheet"
			href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap"
			media="print"
			onload="th
			is.media=' a ll'"
					/>
		<noscript>
			<link
				rel="stylesheet"
				href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap"
			/>
		</noscript>

		<!-- social media -->
		<meta property="og:title" content="Astro" />
		<meta property="og:type" content="website" />
		<meta property="og:description" content={description} />
		<meta property="og:image" content={image} />
		<meta property="og:url" content={site} />
		<meta name="twitter:card" content="summary_large_image" />

		<!-- initialize theme -->
		<script is:inline>
			document.documentElement.dataset.theme = 'dark';
			// const themeSaved = localStorage.getItem("theme");
			// const forceTheme = "dark";

			// if (themeSaved) {
			//   document.documentElement.dataset.theme = themeSaved;
			// } else {
			//   // const prefersDark = window.matchMedia(
			//   //   "(prefers-color-scheme: dark)"
			//   // ).matches;
			//   document.documentElement.dataset.theme = forceTheme; // prefersDark ? "dark" : "light";
			// }

			// window
			//   .matchMedia("(prefers-color-scheme: dark)")
			//   ?.addEventListener("change", (event) => {
			//     if (!localStorage.getItem("theme")) {
			//       document.documentElement.dataset.theme = event.matches
			//         ? "dark"
			//         : "light";
			//     }
			//   });
		</script>
	</head>
	<body
		class="h-full overflow-x-hidden text-base bg-default text-default selection:bg-secondary selection:text-white"
	>
		<Starfield />
		<Header />
		<Splash />
		<!--AstroSection /-->
	</body>
</html>
