<script lang="ts">
	let count = $state(0);

	function increment() {
		count++;
	}
</script>

<svelte:head>
	<title>Classeo</title>
</svelte:head>

<main class="flex min-h-screen flex-col items-center justify-center bg-gray-50">
	<div class="text-center">
		<h1 class="mb-4 text-4xl font-bold text-primary">Bienvenue sur Classeo</h1>
		<p class="mb-8 text-gray-600">Application de gestion scolaire</p>

		<div class="rounded-lg bg-white p-8 shadow-md">
			<p class="mb-4 text-2xl font-semibold text-gray-800">Compteur: {count}</p>
			<button
				onclick={increment}
				class="rounded-md bg-primary px-6 py-2 text-primary-foreground transition-colors hover:bg-primary/90"
			>
				Incrementer
			</button>
		</div>
	</div>
</main>
