<script lang="ts">
	import ImageLinkTile from "$lib/components/ImageLinkTile.svelte";
	import type { PageData } from "./$types";
	import { i18n } from "$lib/i18n";
	import * as m from "$lib/paraglide/messages";

	// Import local images to preserve existing design
	import mouse from "$lib/images/home/mouse.webp";
	import drummachine from "$lib/images/home/drummachine.webp";
	import scouts from "$lib/images/home/scouts.webp";
	import console_image from "$lib/images/home/console.webp";
	import lauch from "$lib/images/home/lauch.webp";

	let { data }: { data: PageData } = $props();

	// Map slugs to local images for backward compatibility/styling
	const staticImages: Record<string, string> = {
		informatik: console_image,
		fotos: mouse,
		video: lauch,
		musig: drummachine,
	};

	// Helper to resolve image source: Local override -> Nextcloud cover -> Placeholder (handled by ImageTile)
	const getTileImage = (page: { slug: string; coverImage: string | null }) => {
		return staticImages[page.slug.toLowerCase()] || page.coverImage || "";
	};
</script>

<main class="">
	{#if data.pages}
		{#each data.pages as page}
			<ImageLinkTile src={getTileImage(page)} href={`/${page.slug}`}>
				<h2
					class="text-3xl font-bold text-white hover:underline text-shadow-lg"
				>
					{page.title}
				</h2>
			</ImageLinkTile>
		{/each}
	{/if}

	<!-- Static/External Links -->
	<ImageLinkTile src={scouts} href="https://pfadifrisco.ch/" target="_blank">
		<h2 class="text-3xl font-bold text-white hover:underline text-shadow-lg">
			{m.pfadi()}
		</h2>
	</ImageLinkTile>
</main>