---
import BaseHead from "../components/BaseHead.astro";
import Header from "../components/Header.astro";
import Main from "../components/Main.astro";
import Footer from "../components/Footer.astro";
import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
import Showcase from "../components/Showcase.astro";
import { getCollection } from "astro:content";
import { convertPost, type Post } from "../models/Post";

const posts: Post[] = (await getCollection("projects"))
	.map(convertPost)
	.sort((a, b) => b.pubDate.valueOf() - a.pubDate.valueOf());
---

<!doctype html>
<html lang="en">
	<head>
		<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
	</head>
	<body>
		<Header />
		<Main>
			<section id="welcome">
				<h1>Hi &#128075;, my name is <a href="/about">Anton</a></h1>
        <h2 class="typeout">
          Welcome to my realm!
				</h2>

				<h4 class="buttons">
					<a href="/projects">Projects</a>
					<a href="/photography">Photography</a>
          <a href="/blog">Blog</a>
					<a href="/about">About</a>
				</h4>
			</section>

			<section id="projects">
				<Showcase color="var(--text)" collection="projects" posts={posts} />
			</section>
		</Main>
		<Footer />
	</body><script>
		const typeout = document.querySelectorAll(".typeout");

		typeout.forEach((el) => {
			const text = el.textContent || "";
			el.textContent = "";

			let i = 0;
			const interval = setInterval(() => {
				el.textContent += text[i];
				i++;

				if (i >= text.length) {
					clearInterval(interval);
				}
			}, 50);
		});
	</script>

	<style>
		section {
			padding: 2rem;
			border-radius: .75em;

			flex-grow: 1;

			width: 720px;
			max-width: calc(100% - 2rem);
			
		}

		#welcome h1,
		#welcome h2 {
			text-align: center;
		}

		#projects {
		  border: 2px solid var(--primary);
		  border-radius: .75em;
		  color: var(--text);
		}

		.buttons {
			display: flex;
			flex-direction: row;
			width: 100%;
			justify-content: center;
			margin-top: 2rem;
		}

		.buttons a {
			margin: 0 0.5rem;
			padding: 0.5rem 1rem;
			background-color: var(--primary);
			color: var(--background);
			border-radius: 0.25rem;
		}

		.buttons a:hover {
			background-color: var(--accent);
			transition: background-color 0.2s;
		}

		@media (max-width: 720px) {
			max-width: 100%;

			section {
				padding: 1rem;
			}
		}
	</style>
</html>
