<script lang="ts">
	// Welcome step - introduces ManaCore
</script>

<div class="text-center">
	<!-- Hero Icon -->
	<div class="mb-4">
		<div
			class="inline-flex h-16 w-16 rounded-xl bg-gradient-to-br from-primary via-primary/80 to-primary/60 items-center justify-center shadow-lg shadow-primary/25"
		>
			<span class="text-3xl text-primary-foreground font-bold">M</span>
		</div>
	</div>

	<h2 class="text-xl font-bold mb-2">Willkommen bei ManaCore!</h2>
	<p class="text-sm text-muted-foreground mb-4">
		Dein zentrales Dashboard für alle Mana-Apps. Verwalte deine Aufgaben, Termine, Kontakte und mehr
		- alles an einem Ort.
	</p>

	<!-- Feature highlights - using surface-elevated-1 (one level below the modal) -->
	<div class="space-y-2 text-left">
		<div class="p-3 rounded-lg bg-surface-elevated-1 border flex items-start gap-3">
			<div
				class="h-8 w-8 rounded-md bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center flex-shrink-0"
			>
				<svg
					class="h-4 w-4 text-blue-600 dark:text-blue-400"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"
					/>
				</svg>
			</div>
			<div>
				<h3 class="font-medium text-sm">Alle Apps</h3>
				<p class="text-xs text-muted-foreground">Todo, Kalender, Chat, Picture und mehr.</p>
			</div>
		</div>

		<div class="p-3 rounded-lg bg-surface-elevated-1 border flex items-start gap-3">
			<div
				class="h-8 w-8 rounded-md bg-green-100 dark:bg-green-900/30 flex items-center justify-center flex-shrink-0"
			>
				<svg
					class="h-4 w-4 text-green-600 dark:text-green-400"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
					/>
				</svg>
			</div>
			<div>
				<h3 class="font-medium text-sm">Credits-System</h3>
				<p class="text-xs text-muted-foreground">Ein Guthaben für alle AI-Features.</p>
			</div>
		</div>

		<div class="p-3 rounded-lg bg-surface-elevated-1 border flex items-start gap-3">
			<div
				class="h-8 w-8 rounded-md bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center flex-shrink-0"
			>
				<svg
					class="h-4 w-4 text-purple-600 dark:text-purple-400"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"
					/>
				</svg>
			</div>
			<div>
				<h3 class="font-medium text-sm">Personalisierung</h3>
				<p class="text-xs text-muted-foreground">Themes und Einstellungen nach deinem Geschmack.</p>
			</div>
		</div>
	</div>
</div>
