<script lang="ts">
	import Icon from '@iconify/svelte';
</script>

<div class="space-y-8">
	<div class="bg-base-200 rounded-xl p-6">
		<div class="flex items-center gap-3 mb-6">
			<Icon icon="mdi:information" class="w-6 h-6 text-primary" />
			<h2 class="text-xl font-semibold text-base-content">About</h2>
		</div>

		<div class="flex flex-col items-center space-y-8">
			<div class="text-center space-y-6">
				<div class="flex items-center justify-center space-x-8">
					<div class="flex flex-col items-center space-y-3">
						<div class="w-24 h-24 rounded-full bg-base-300 p-4 flex items-center justify-center">
							<img src="/eve.avif" alt="Eve Logo" class="w-full h-full object-contain" />
						</div>
						<span class="text-2xl font-bold text-primary">Eve</span>
					</div>

					<div class="text-base-content/60 text-lg font-medium">by</div>

					<div class="flex flex-col items-center space-y-3">
						<div class="w-24 h-24 rounded-full bg-base-300 p-4 flex items-center justify-center">
							<img src="/arx.svg" alt="Arx Logo" class="w-full h-full object-contain" />
						</div>
						<span class="text-2xl font-bold text-secondary">Arx</span>
					</div>
				</div>
			</div>

			<div class="text-center space-y-2 pt-6 border-t border-base-300">
				<p class="text-base-content/60 text-sm">Version 0.0.1</p>
			</div>
		</div>
	</div>
</div>
