---
import Contacts from "./Contacts.astro";
import InfoStack from "./InfoStack.astro";
import Window from "@components/Window.astro";
import Button from "@components/Button.astro";
import GroupBox from "@components/GroupBox.astro";
---

<script>
	import { WindowManager } from "@models/WindowManager";
	import { Lanyard } from "@models/Lanyard";
	import { LANYARD_ID } from "utils/constants";

	document
		.querySelector("#show-code-window")
		.addEventListener(
			"click",
			() =>
				(WindowManager.topmost =
					document.getElementById("window-code-window"))
		);

	new Lanyard(LANYARD_ID, presence =>
		window.dispatchEvent(
			new CustomEvent("lanyard-update", {
				detail: presence
			})
		)
	);
</script>

<Window title="Home" maxWidth="600px" showClose={false}>
	<InfoStack />

	<Button position="left" id="show-code-window">My code</Button>

	<GroupBox>
		<h3>About me</h3>
		<p>
			I'm a Canadian self-taught software developer. I also make things
			that some people use with varying degrees of usefulness.
		</p>
	</GroupBox>

	<GroupBox>
		<h3>Reach out</h3>
		<Contacts />
	</GroupBox>
</Window>