---
import { getCollection } from "astro:content";
import Layout from "./Layout.astro";
import { useTranslations } from "../i18n";

const blogCollection = (await getCollection("blog")).sort((a, b) => {
	return b.data.publishedAt.getTime() - a.data.publishedAt.getTime();
});

const t = useTranslations(Astro.currentLocale);

const schema = {
	"@context": "http://schema.org",
	"@type": "WebSite",
	id: "https://www.costas.dev/",
	url: "https://www.costas.dev/",
	headline: t.homePage.title,
};
---

<Layout title={t.homePage.title} description={t.homePage.description}>
	<script
		is:inline
		type="application/ld+json"
		slot="head-jsonld"
		set:html={JSON.stringify(schema)}
	/>

	<h1>{t.homePage.title}</h1>
	<p>{t.homePage.welcome}</p>

	<h2>{t.homePage.whoAmI}</h2>
	<p>{t.homePage.whoAmIDesc}</p>
	<a href="/trajectory">{t.homePage.moreAboutMe}</a>

	<h2>{t.homePage.whatIDo}</h2>
	<p>{t.homePage.whatIDoDesc}</p>
	<a href="/portfolio">{t.homePage.myPortfolio}</a>

	<h2>{t.homePage.latestBlogPosts}</h2>
	<ul>
		{
			blogCollection.slice(0, 5).map((p) => {
				const date = Intl.DateTimeFormat(Astro.currentLocale, {
					day: "2-digit",
					month: "short",
					year: "numeric",
				}).format(p.data.publishedAt);
				return (
					<li>
						<time datetime={p.data.publishedAt.toISOString()}>
							{date}
						</time>
						<a href={`/blog/${p.id}`}>{p.data.title}</a>
					</li>
				);
			})
		}
	</ul>
	<a href="/blog">{t.homePage.viewAllPosts}</a>

</Layout>