<script lang="ts">
	import HackCard from "$lib/components/HackCard.svelte";

	type Card = {
		title: string;
		description: string;
		image?: string;
		link?: string;
		repo?: string;
		date?: string;
		tags?: string[];
		featured?: boolean;
	};

	// Sample data — replace or enhance as you add real entries
	const cards: Card[] = [
		{
			title: "QuickMap — Live Mapping",
			description:
				"Realtime map-sharing tool built during the 48h MapHack. Streamlined tile sync and offline caching.",
			image: "/src/lib/images/project-map.png",
			link: "https://example.com/quickmap",
			repo: "https://github.com/SirBlobby/quickmap",
			date: "Aug 2024",
			tags: ["JS", "PWA", "Maps"],
			featured: true,
		},
		{
			title: "BlobChat — Minimal Chatbot",
			description:
				"A tiny chat UI and embeddable bot for community sites. Built with accessibility in mind.",
			image: "/src/lib/images/project-chat.png",
			repo: "https://github.com/SirBlobby/blobchat",
			date: "Nov 2023",
			tags: ["Svelte", "Accessibility"],
		},
		{
			title: "GameJam Runner",
			description:
				"Competition runner for quick prototyping. Handles assets, scoring, and results publishing.",
			image: "/src/lib/images/project-game.png",
			link: "https://example.com/gamejam-runner",
			date: "May 2025",
			tags: ["Game", "Tooling"],
		},
	];
</script>

<section class="container mx-auto py-12 px-4">
	<div class="grid p-4 w-full h-fit">
		<main>
			<div
				class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 items-stretch"
			>
				{#each cards as c}
					<div class="h-full">
						<HackCard
							title={c.title}
							description={c.description}
							image={c.image}
							link={c.link}
							repo={c.repo}
							date={c.date}
							tags={c.tags}
							featured={c.featured}
						/>
					</div>
				{/each}
			</div>
		</main>
	</div>
</section>

<style lang="postcss">
	/* page-level tweaks */
	.container {
		max-width: 1200px;
	}
</style>
