<script lang="ts">
	import FadeIn from '$lib/components/FadeIn.svelte';
	import Questions from '$lib/components/Questions.svelte';
	import TextSplit from '$lib/components/TextSplit.svelte';
	import Button from '$lib/components/button.svelte';
	import Confetti from '$lib/components/confetti.svelte';
	import Curtains from '$lib/components/curtains.svelte';
	import Mask from '$lib/components/mask.svelte';
	import Maskenball from '$lib/components/maskenball.svelte';
	import { onMount } from 'svelte';
	import { fade } from 'svelte/transition';
	let curtainsVisible = false;
	let buttonVisible = false;
	let maskVisible = false;
	let maskSmall = false;
	let contentVisible = false;
	let questionVisible = false;

	onMount(() => {
		// curtainsVisible = true;
		curtainsVisible = false;
		maskVisible = true;
		maskSmall = true;
		questionVisible = true;
		setTimeout(() => {
			// buttonVisible = true;
		}, 1500);
	});
</script>

<Confetti />
<Curtains visible={curtainsVisible} />
<div class="center" class:maskSmall>
	{#if maskVisible}
		<Mask />
		<Maskenball />
	{/if}

	{#if buttonVisible}
		<span class="enter-button" class:visible={buttonVisible}>
			<Button
				--font-size="2em"
				on:click={() => {
					curtainsVisible = false;
					buttonVisible = false;
					setTimeout(() => {
						maskVisible = true;
						setTimeout(() => {
							maskSmall = true;
							contentVisible = true;
						}, 7000);
					}, 1000);
				}}>Enter the Dungeon</Button
			>
		</span>
	{/if}
</div>

{#if contentVisible}
	<div class="einladung" out:fade>
		<TextSplit
			content="Wir laden dich herzlich ein, an unserer exklusiven Silvesterparty teilzunehmen, die dieses Jahr im magischen Ambiente eines Maskenballs stattfindet. Tauche ein in eine Nacht voller Geheimnisse, Eleganz und festlichem Glanz."
		/>

		<span in:fade={{ delay: 8000, duration: 1000 }}>
			<Button
				on:click={() => {
					contentVisible = false;
					questionVisible = true;
				}}>Einladung annehmen</Button
			>
		</span>
	</div>
{/if}

{#if questionVisible}
	<Questions />
{/if}

<style>
	.center {
		display: flex;
		flex-direction: column;
		position: relative;
		align-items: center;
		height: 100vh;
		width: 100vw;
		top: 0px;
		place-content: center;
		transition: height 3s ease;
	}

	.center.maskSmall {
		height: 30vh;
	}

	:global(.center.maskSmall > p) {
		font-size: 2em;
	}

	.einladung {
		font-family: Parisienne;
		font-size: 2em;
		max-width: 500px;

		margin: 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 50px;
	}

	.enter-button {
		opacity: 0;
	}

	.enter-button.visible {
		animation: fadeIn 5s ease forwards;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}
</style>
