---
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>