---
import { getCollection } from 'astro:content';
import DefaultLayout from '@/layouts/DefaultLayout.astro';
import { BlogPosts } from '@/components/sections/blog-posts';

const posts = (await getCollection('puzzles')).sort(
	(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
);

const SITE_TITLE = 'Puzzles - Logic, Mathematics, and Interactive Challenges';
const SITE_DESCRIPTION = 'Mathematical puzzles, logic problems, and interactive challenges that teach algorithmic thinking.';
---

<DefaultLayout title={SITE_TITLE} description={SITE_DESCRIPTION}>
	<div class="py-16 md:py-28 lg:py-32">
		<div class="container max-w-5xl">
			<div class="mb-12">
				<h1 class="text-4xl font-bold mb-4">Puzzles</h1>
				<p class="text-xl text-muted-foreground">{SITE_DESCRIPTION}</p>
			</div>
			<BlogPosts posts={posts} collection="puzzles" client:only='react' />
		</div>
	</div>
</DefaultLayout>