---
import "@fontsource-variable/inter";
import "@fontsource-variable/jetbrains-mono";

import "../style.css";

import Socials from "../components/Socials.astro";
import Clock from "../components/Clock.svelte";
import Online from "../components/Online.svelte";
import Header from "../components/Header.svelte";
import Footer from "../components/Footer.astro";

import KawaiiLogo from "../assets/kawaii.svg";

import TrafficConeAlt from "../assets/traffic-cone-alt.svg";
import Lunar from "../assets/lunar.svg";
---

<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="viewport" content="width=device-width" />
		<meta name="generator" content={Astro.generator} />
		<title>trafficlunar.net</title>

		<meta name="title" content="trafficlunar.net" />
		<meta name="description" content="welcome to trafficlunar's website!" />
		<meta name="keywords" content="trafficlunar, programming" />
		<meta name="robots" content="index, follow" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="language" content="English" />
	</head>
	<body class="bg-base text-text flex flex-col items-center px-8">
		<a href="/" transition:persist>
			<KawaiiLogo class="w-full h-48 mt-16 transition-transform duration-300 hover:rotate-2 hover:scale-105" />
		</a>

		<Lunar class="absolute top-8 right-8 size-12 animate-avoid hover:animate-running not-hover:animate-pause" />

		<div class="max-w-4xl w-full grid grid-cols-5 gap-4 py-8 max-[60rem]:grid-cols-1">
			<div class="flex flex-col items-center gap-8 max-[60rem]:flex-row max-[60rem]:justify-center flex-wrap" transition:persist>
				<a href="/">
					<img
						src="/pfp.png"
						alt="profile picture"
						class="rounded-full animate-spin animate-duration-2s hover:animate-running not-hover:animate-pause max-h-40"
					/>
				</a>

				<div class="flex flex-col flex-wrap justify-center w-full max-[60rem]:flex-row max-[60rem]:mt-0 max-[60rem]:gap-2">
					<Socials />
					<Clock client:only />
					<Online client:only />
				</div>
			</div>

			<div class="min-sm:col-span-4 flex flex-col relative">
				<TrafficConeAlt class="absolute size-12 bottom-full left-16 text-peach" />
				<TrafficConeAlt class="absolute size-14 bottom-full left-27 text-peach" />

				<Header client:only />
				<!-- need <main /> for transitions -->
				<main>
					<slot />
				</main>
				<Footer />
			</div>
		</div>
	</body>
</html>
