<svelte:head>
	<title>About — Bibdle</title>
</svelte:head>

<script lang="ts">
	import SocialLinks from "$lib/components/SocialLinks.svelte";

	let { data } = $props();

	const SOCIAL_PLACEHOLDER = "<!-- social -->";

	const aboutParts = $derived(
		data.about.includes(SOCIAL_PLACEHOLDER)
			? data.about.split(SOCIAL_PLACEHOLDER)
			: null
	);
</script>

<div class="min-h-dvh py-10 px-4">
	<div class="w-full max-w-xl mx-auto">

		<div class="mb-8">
			<a
				href="/"
				class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-100 transition-colors"
			>
				← Back to Game
			</a>
		</div>

		<div class="prose dark:prose-invert text-justify max-w-none">
			{#if aboutParts}
				{@html aboutParts[0]}
				<div class="my-8 not-prose">
					<SocialLinks />
				</div>
				{@html aboutParts[1]}
			{:else}
				{@html data.about}
			{/if}
		</div>

		<div class="prose dark:prose-invert text-justify max-w-none mt-10">
			{@html data.howToPlay}
		</div>

	</div>
</div>
