---
import { getCollection } from "astro:content";
import PageLayout from "@layouts/default.astro";
import Splash from "@components/Splash/Splash.astro";
import SplashHeading from "@components/Splash/SplashHeading.astro";
import SplashLinks from "@components/Splash/SplashLinks.astro";
import SplashLink from "@components/Splash/SplashLink.astro";
import RecentArticles from "@components/RecentArticles.astro";
import UIString from "@components/UIString.astro";
import { getLanguageFromURL, useTranslation } from "@root/i18n/utils";

const pageLang = getLanguageFromURL(Astro.url.pathname);
const t = useTranslation(Astro);
---

<PageLayout description={t("site.description")} lang={pageLang}>
	<Splash>
		<SplashHeading>
			<hgroup>
				<h1><UIString key={"splash.headline"} /></h1>
				<h2>Fullstack <b>web-developer</b> & <b>freelancer</b></h2>
			</hgroup>
			<p><UIString key={"splash.description"} /></p>
		</SplashHeading>
		<SplashLinks>
			<SplashLink icon='information' href='/about/'><UIString key={"splash.about"} /></SplashLink>
			<SplashLink icon='email_filled' href='/contacts/'>
				<UIString key={"splash.contact"} />
			</SplashLink>
		</SplashLinks>
	</Splash>
	<RecentArticles />
</PageLayout>