<script lang="ts">
	export let data;

	$: yesterdayCharacter = data.yesterdayCharacter;
</script>

<svelte:head>
	<title>OnePieceDle</title>
</svelte:head>

<main
	class="relative min-h-[calc(100vh-5rem)] bg-slate-950 text-slate-100"
>
	<div class="absolute inset-0 bg-gradient-to-br from-slate-950/85 via-slate-900/60 to-slate-950/80"></div>
	<div class="absolute inset-0 mix-blend-screen opacity-20 bg-[radial-gradient(circle_at_top,rgba(255,215,84,0.35),transparent_55%)]"></div>

	<div class="relative mx-auto flex w-full max-w-6xl flex-col items-center justify-center px-6 py-10">
		<div class="flex w-full flex-col items-center gap-8">
			<div class="text-center mb-12">
				<h1 class="text-4xl font-black uppercase tracking-[0.3em] text-amber-50 sm:text-6xl">
					OnePieceDle
				</h1>
				<p class="mt-4 max-w-2xl text-base text-slate-200 sm:text-lg">
					Devine le personnage de l'equipage, des marines ou du vaste monde. Chaque indice te rapproche du tresor.
				</p>
			</div>
			<div class="grid w-full gap-4 sm:grid-cols-2">
				<div class="rounded-2xl border border-white/10 bg-white/5 p-6 shadow-[0_24px_60px_rgba(0,0,0,0.45)] backdrop-blur">
					<h2 class="text-sm font-semibold uppercase tracking-[0.2em] text-amber-100">Personnage du jour</h2>
					<p class="mt-3 text-lg font-semibold text-white">Nouveau mystere toutes les 24 heures</p>
					<p class="mt-2 text-sm text-slate-200">Compare tes essais, debloque des indices et garde ta serie.</p>
					<a
						href="/daily"
						class="mt-5 inline-flex w-full items-center justify-center rounded-full bg-amber-300 px-5 py-3 text-sm font-semibold text-slate-900 transition hover:bg-amber-200"
					>
						Commencer
					</a>
				</div>
				<div class="rounded-2xl border border-white/10 bg-white/5 p-6 shadow-[0_24px_60px_rgba(0,0,0,0.45)] backdrop-blur">
				<h2 class="text-sm font-semibold uppercase tracking-[0.2em] text-amber-100">Mode Infini</h2>
				<p class="mt-3 text-lg font-semibold text-white">Des defis sans fin</p>
				<p class="mt-2 text-sm text-slate-200">Enchaine les personnages et croise ton score. Pas de limite, que du plaisir.</p>
				<a
					href="/infinite"
					class="mt-5 inline-flex w-full items-center justify-center rounded-full border border-amber-200/40 bg-transparent px-5 py-3 text-sm font-semibold text-amber-100 transition hover:border-amber-200 hover:text-amber-50"
				>
					Jouer
				</a>
				</div>
			</div>
			<div class="w-full rounded-3xl border border-white/10 bg-white/5 p-6 shadow-[0_24px_60px_rgba(0,0,0,0.45)] backdrop-blur sm:p-8">
			{#if yesterdayCharacter}
				<div class="flex flex-col items-center gap-5 text-center sm:flex-row sm:text-left">
					{#if yesterdayCharacter.pictureUrl}
						<img
							src={yesterdayCharacter.pictureUrl}
							alt={yesterdayCharacter.name}
							class="h-20 w-20 rounded-full border border-amber-200/40 object-cover"
						/>
					{:else}
						<div class="flex h-20 w-20 items-center justify-center rounded-full border border-amber-200/40 bg-slate-900/70 text-xs uppercase tracking-[0.25em] text-amber-100">
							Photo
						</div>
					{/if}
					<div class="flex-1">
						<p class="text-xs font-semibold uppercase tracking-[0.28em] text-amber-100">Personnage d'hier</p>
						<p class="mt-2 text-lg font-semibold text-white">{yesterdayCharacter.name}</p>
						{#if yesterdayCharacter.epithets}
							<p class="mt-1 text-sm text-slate-400">
								{typeof yesterdayCharacter.epithets === 'string' 
									? JSON.parse(yesterdayCharacter.epithets).join(', ') 
									: (yesterdayCharacter.epithets as string[]).join(', ')}
							</p>
						{/if}
					</div>
					<a
						href={"https://onepiece.fandom.com/fr/wiki/" + yesterdayCharacter.url}
						target="_blank"
						rel="noopener noreferrer"
						class="w-full rounded-full border border-amber-200/40 bg-transparent px-5 py-3 text-sm font-semibold text-amber-100 transition hover:border-amber-200 hover:text-amber-50 sm:w-auto"
					>
						Voir la page
					</a>
				</div>
			{:else}
				<div class="flex flex-col items-center gap-5 text-center sm:flex-row sm:text-left">
					<div class="flex h-20 w-20 items-center justify-center rounded-full border border-amber-200/40 bg-slate-900/70 text-xs uppercase tracking-[0.25em] text-amber-100">
						Photo
					</div>
					<div class="flex-1">
						<p class="text-xs font-semibold uppercase tracking-[0.28em] text-amber-100">Personnage d'hier</p>
						<p class="mt-2 text-lg font-semibold text-white">Aucun personnage</p>
						<p class="mt-1 text-sm text-slate-200">Aucun personnage d'hier disponible</p>
					</div>
				</div>
			{/if}
			</div>
		</div>
	</div>
</main>
