<script lang="ts">
	import { t } from 'svelte-i18n';
	import type { PageData } from './$types.js';

	let { data }: { data: PageData } = $props();
</script>

<svelte:head>
	<title>{$t('app_title')}</title>
</svelte:head>

<div class="flex min-h-[60vh] items-center justify-center p-6">
	<div class="text-center">
		<h1 class="text-4xl font-bold text-foreground">{$t('app_title')}</h1>
		{#if data.user}
			<p class="mt-4 text-muted-foreground">
				{$t('home.welcome', { values: { name: data.user.displayName } })}
			</p>
			<div class="mt-6 flex items-center justify-center gap-3">
				<a
					href="/boards"
					class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
				>
					{$t('home.view_boards')}
				</a>
				<a
					href="/apps"
					class="rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground hover:bg-accent"
				>
					{$t('home.browse_apps')}
				</a>
			</div>
		{/if}
	</div>
</div>
