<script lang="ts">
	import { onMount } from 'svelte';

	let fogEl: HTMLDivElement;

	onMount(async () => {
		const THREE = await import('three');
		const FOG = (await import('vanta/dist/vanta.fog.min')).default;

		const effect = FOG({
			el: fogEl,
			THREE,
			mouseControls: false,
			touchControls: false,
			gyroControls: false,
			minHeight: 200.0,
			minWidth: 200.0,
			highlightColor: 0x8b6914,
			midtoneColor: 0x4a3728,
			lowlightColor: 0x2a1f14,
			baseColor: 0x1a1008,
			blurFactor: 0.5,
			speed: 0.8,
			zoom: 1.2
		});

		return () => effect.destroy();
	});
</script>

<section id="hero" class="relative flex h-screen items-center justify-center overflow-hidden">
	<!-- Background Image -->
	<div
		class="absolute inset-0 bg-cover bg-center"
		style="background-image: url('/graffen-hero.png');"
	></div>

	<!-- Overlay -->
	<div class="absolute inset-0 bg-gradient-to-t from-charcoal via-charcoal/60 to-charcoal/30"></div>

	<!-- Vanta Fog Layer -->
	<div
		bind:this={fogEl}
		class="absolute inset-0"
		style="mix-blend-mode: screen;"
	></div>

	<!-- Content -->
	<div class="relative z-10 text-center">
		<h1 class="font-gothic text-7xl text-gold drop-shadow-lg md:text-9xl">Graffen</h1>
		<p class="mt-4 text-lg font-light tracking-wide text-cream/90 md:text-xl">
			Rumänische Hausmannskost aus dem Foodtruck
		</p>
	</div>

	<!-- Ornate Scroll Indicator -->
	<div class="absolute bottom-20 z-10 flex w-full justify-center">
		<a
			href="#speisekarte"
			class="scroll-indicator relative flex h-24 w-24 items-center justify-center rounded-full bg-charcoal/40 backdrop-blur-sm"
			aria-label="Nach unten scrollen"
		>
			<svg
				class="pointer-events-none absolute inset-0 h-full w-full overflow-visible"
				viewBox="0 0 80 80"
				fill="none"
				xmlns="http://www.w3.org/2000/svg"
			>
				<!-- Inner circle -->
				<circle cx="40" cy="40" r="28" stroke="var(--color-gold)" stroke-width="0.8" stroke-opacity="0.35" />
				<!-- Outer circle -->
				<circle cx="40" cy="40" r="38" stroke="var(--color-gold)" stroke-width="1" stroke-opacity="0.5" />

				<!-- Top ornament: fleur -->
				<path d="M40 2 L40 -3" stroke="var(--color-gold)" stroke-width="1" stroke-opacity="0.6" />
				<path d="M36 1 C38 -4, 42 -4, 44 1" stroke="var(--color-gold)" stroke-width="0.8" stroke-opacity="0.5" fill="none" />
				<circle cx="40" cy="-4" r="1.5" fill="var(--color-gold)" fill-opacity="0.5" />

				<!-- Bottom ornament: fleur -->
				<path d="M40 78 L40 83" stroke="var(--color-gold)" stroke-width="1" stroke-opacity="0.6" />
				<path d="M36 79 C38 84, 42 84, 44 79" stroke="var(--color-gold)" stroke-width="0.8" stroke-opacity="0.5" fill="none" />
				<circle cx="40" cy="84" r="1.5" fill="var(--color-gold)" fill-opacity="0.5" />

				<!-- Left ornament -->
				<path d="M2 40 L-3 40" stroke="var(--color-gold)" stroke-width="1" stroke-opacity="0.6" />
				<path d="M1 36 C-4 38, -4 42, 1 44" stroke="var(--color-gold)" stroke-width="0.8" stroke-opacity="0.5" fill="none" />
				<circle cx="-4" cy="40" r="1.5" fill="var(--color-gold)" fill-opacity="0.5" />

				<!-- Right ornament -->
				<path d="M78 40 L83 40" stroke="var(--color-gold)" stroke-width="1" stroke-opacity="0.6" />
				<path d="M79 36 C84 38, 84 42, 79 44" stroke="var(--color-gold)" stroke-width="0.8" stroke-opacity="0.5" fill="none" />
				<circle cx="84" cy="40" r="1.5" fill="var(--color-gold)" fill-opacity="0.5" />

				<!-- Diagonal accents -->
				<path d="M12 12 C14 9, 9 14, 12 12" stroke="var(--color-gold)" stroke-width="0.8" stroke-opacity="0.3" fill="none" />
				<path d="M68 12 C66 9, 71 14, 68 12" stroke="var(--color-gold)" stroke-width="0.8" stroke-opacity="0.3" fill="none" />
				<path d="M12 68 C14 71, 9 66, 12 68" stroke="var(--color-gold)" stroke-width="0.8" stroke-opacity="0.3" fill="none" />
				<path d="M68 68 C66 71, 71 66, 68 68" stroke="var(--color-gold)" stroke-width="0.8" stroke-opacity="0.3" fill="none" />

				<!-- Tiny dots between inner and outer ring -->
				<circle cx="40" cy="8" r="0.8" fill="var(--color-gold)" fill-opacity="0.3" />
				<circle cx="40" cy="72" r="0.8" fill="var(--color-gold)" fill-opacity="0.3" />
				<circle cx="8" cy="40" r="0.8" fill="var(--color-gold)" fill-opacity="0.3" />
				<circle cx="72" cy="40" r="0.8" fill="var(--color-gold)" fill-opacity="0.3" />
				<circle cx="16" cy="16" r="0.8" fill="var(--color-gold)" fill-opacity="0.25" />
				<circle cx="64" cy="16" r="0.8" fill="var(--color-gold)" fill-opacity="0.25" />
				<circle cx="16" cy="64" r="0.8" fill="var(--color-gold)" fill-opacity="0.25" />
				<circle cx="64" cy="64" r="0.8" fill="var(--color-gold)" fill-opacity="0.25" />
			</svg>

			<!-- Arrow -->
			<svg
				class="scroll-arrow relative z-10 h-7 w-7 text-gold/80"
				fill="none"
				stroke="currentColor"
				viewBox="0 0 24 24"
			>
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="1.5"
					d="M12 5v14m-6-6l6 6 6-6"
				/>
			</svg>
		</a>
	</div>
</section>

<style>
	.scroll-indicator {
		animation: float 2.5s ease-in-out infinite;
	}

	.scroll-arrow {
		animation: arrow-pulse 2.5s ease-in-out infinite;
	}

	@keyframes float {
		0%, 100% {
			transform: translateY(0);
		}
		50% {
			transform: translateY(8px);
		}
	}

	@keyframes arrow-pulse {
		0%, 100% {
			opacity: 0.8;
		}
		50% {
			opacity: 1;
		}
	}
</style>
