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

	let fogEl: HTMLDivElement;
	let contentEl: HTMLDivElement;
	let scrollY = 0;

	function onScroll() {
		scrollY = window.scrollY;
		if (contentEl) {
			contentEl.style.transform = `translateY(${scrollY * 0.4}px)`;
			contentEl.style.opacity = `${Math.max(1 - scrollY / 600, 0)}`;
		}
	}

	onMount(async () => {
		window.addEventListener('scroll', onScroll, { passive: true });

		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();
			window.removeEventListener('scroll', onScroll);
		};
	});
</script>

<section id="hero" class="relative flex h-screen items-center justify-center overflow-hidden">
	<!-- Background Image (mobile / desktop) -->
	<div
		class="absolute inset-0 bg-cover bg-center md:hidden"
		style="background-image: url('/graffen-hero-mobile.png');"
	></div>
	<div
		class="absolute inset-0 hidden bg-cover bg-center md:block"
		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 bind:this={contentEl} class="relative z-10 text-center will-change-transform">
		<h1 class="hero-title font-gothic text-7xl text-gold md:text-9xl">Graffen</h1>
		<p class="max-w-xs mx-auto 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 max-md:h-14 max-md:w-14 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"
				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" />

				<!-- 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>
	.hero-title {
		text-shadow:
			0 0 10px rgba(139, 105, 20, 0.6),
			0 0 30px rgba(139, 105, 20, 0.3),
			0 4px 8px rgba(0, 0, 0, 0.5);
	}

	.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>
