<script lang="ts">
	import type { MenuData } from '$lib/data/menu';
	import menuJson from '$lib/data/menu.json';
	import { Leaf, X } from 'lucide-svelte';

	const menuData: MenuData = menuJson;
	let activeTab = $state(0);
	let showAllergens = $state(false);
</script>

<section id="speisekarte" class="bg-cream py-28 md:py-36">
	<div class="mx-auto max-w-4xl px-6">
		<h2 class="font-gothic mb-2 text-center text-5xl text-brown md:text-6xl">Speisekarte</h2>
		<p class="mx-auto mb-10 max-w-2xl text-center text-sepia italic">
			Traditionelle rumänische Rezepte &ndash; ehrlich und herzhaft.
		</p>

		<!-- Season Tabs (Ornate Buttongroup) -->
		<div class="mb-12 flex justify-center">
			<div class="ornate-tabgroup relative inline-flex">
				<svg
					class="pointer-events-none absolute inset-0 h-full w-full"
					viewBox="0 0 300 50"
					preserveAspectRatio="none"
					fill="none"
					xmlns="http://www.w3.org/2000/svg"
				>
					<rect x="3" y="3" width="294" height="44" rx="4" stroke="var(--color-gold)" stroke-width="1.2" stroke-opacity="0.6" />
					<path d="M3 13 C3 13, 0 8, 0 3 C0 3, 5 0, 10 0 L10 2.5 C6.5 2.5, 4 4, 3 6.5 Z" fill="var(--color-gold)" fill-opacity="0.7" />
					<path d="M297 13 C297 13, 300 8, 300 3 C300 3, 295 0, 290 0 L290 2.5 C293.5 2.5, 296 4, 297 6.5 Z" fill="var(--color-gold)" fill-opacity="0.7" />
					<path d="M3 37 C3 37, 0 42, 0 47 C0 47, 5 50, 10 50 L10 47.5 C6.5 47.5, 4 46, 3 43.5 Z" fill="var(--color-gold)" fill-opacity="0.7" />
					<path d="M297 37 C297 37, 300 42, 300 47 C300 47, 295 50, 290 50 L290 47.5 C293.5 47.5, 296 46, 297 43.5 Z" fill="var(--color-gold)" fill-opacity="0.7" />
					<path d="M130 3 C137 -2, 143 -1, 150 2 C157 -1, 163 -2, 170 3" stroke="var(--color-gold)" stroke-width="1" stroke-opacity="0.6" fill="none" />
					<path d="M130 47 C137 52, 143 51, 150 48 C157 51, 163 52, 170 47" stroke="var(--color-gold)" stroke-width="1" stroke-opacity="0.6" fill="none" />
					<path d="M3 21 L0 25 L3 29" stroke="var(--color-gold)" stroke-width="1" stroke-opacity="0.6" fill="none" />
					<path d="M297 21 L300 25 L297 29" stroke="var(--color-gold)" stroke-width="1" stroke-opacity="0.6" fill="none" />
					<line x1="150" y1="8" x2="150" y2="42" stroke="var(--color-gold)" stroke-width="0.8" stroke-opacity="0.3" />
					<path d="M147 8 L150 4 L153 8" stroke="var(--color-gold)" stroke-width="0.8" stroke-opacity="0.5" fill="none" />
					<path d="M147 42 L150 46 L153 42" stroke="var(--color-gold)" stroke-width="0.8" stroke-opacity="0.5" fill="none" />
				</svg>
				{#each menuData.seasons as menu, i}
					<button
						class="ornate-tab relative z-10 px-12 py-4 text-base font-semibold transition-colors {activeTab === i
							? 'text-gold'
							: 'text-brown/60 hover:text-gold/80'}"
						onclick={() => (activeTab = i)}
					>
						{menu.season}
					</button>
				{/each}
			</div>
		</div>

		<!-- Menu Content -->
		{#each menuData.seasons as menu, menuIndex}
			{#if activeTab === menuIndex}
				{#each menu.categories as category}
					<div class="mb-14 last:mb-0">
						<h3
							class="mb-4 text-center text-2xl font-bold tracking-wide text-brown"
						>
							{category.title}
						</h3>
						<div class="mb-8 flex items-center justify-center gap-4">
							<div class="h-px w-16 bg-gold/40"></div>
							<span class="font-gothic text-2xl text-gold/60">&#10022;</span>
							<div class="h-px w-16 bg-gold/40"></div>
						</div>

						<div class="grid gap-5 sm:grid-cols-2">
							{#each category.items as item}
								<div class="rounded-lg border border-gold/15 bg-parchment/40 p-5">
									<div class="flex items-center gap-2">
										<span class="text-lg font-semibold text-brown">{item.name}</span>
										{#if item.vegetarian}
											<span class="tooltip relative inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[#009036]">
												<Leaf size={14} color="#FEDD00" strokeWidth={2.5} />
												<span class="tooltip-text">vegetarisch</span>
											</span>
										{/if}
										{#if item.vegan}
											<span class="tooltip relative inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[#FEDD00]">
												<Leaf size={14} color="#009036" strokeWidth={2.5} />
												<span class="tooltip-text">vegan</span>
											</span>
										{/if}
									</div>
									{#if item.description}
										<p class="mt-2 text-sm leading-relaxed text-sepia">{item.description}</p>
									{/if}
									{#if item.allergens || item.additives}
										<p class="mt-1.5 text-[11px] text-sepia/50">Allergene: {item.allergens}{#if item.additives} · Zusatzstoffe: {item.additives}{/if}</p>
									{/if}
								</div>
							{/each}
						</div>
					</div>
				{/each}
			{/if}
		{/each}

		<!-- Allergen Legend Trigger -->
		<div class="mt-10 text-center">
			<button
				class="inline-flex items-center gap-2 rounded-full border border-gold/30 px-5 py-2 text-sm text-sepia/70 transition-colors hover:border-gold/60 hover:text-gold"
				onclick={() => (showAllergens = true)}
			>
				<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
				</svg>
				Allergene &amp; Zusatzstoffe anzeigen
			</button>
		</div>
	</div>
</section>

<!-- Allergen Modal -->
{#if showAllergens}
	<!-- Backdrop -->
	<!-- svelte-ignore a11y_no_static_element_interactions -->
	<div
		class="fixed inset-0 z-50 flex items-center justify-center bg-charcoal/70 p-4 backdrop-blur-sm"
		onkeydown={(e) => e.key === 'Escape' && (showAllergens = false)}
		onclick={(e) => e.target === e.currentTarget && (showAllergens = false)}
	>
		<!-- Modal -->
		<div class="ornate-modal relative w-full max-w-lg" role="dialog" aria-label="Allergene & Zusatzstoffe">
			<!-- Ornate border (CSS) -->
			<div class="pointer-events-none absolute inset-0 rounded-lg border border-gold/50"></div>

			<!-- Corner ornaments (fixed-size SVGs, no distortion) -->
			<!-- Top-left -->
			<svg class="pointer-events-none absolute -top-2 -left-2 h-10 w-10 overflow-visible" viewBox="0 0 40 40" fill="none">
				<path d="M8 32 C8 32, 2 20, 2 8 C2 8, 14 2, 26 2 L26 6 C16 6, 10 10, 8 16 Z" fill="var(--color-gold)" fill-opacity="0.7" />
				<path d="M2 8 L0 0 L8 2" stroke="var(--color-gold)" stroke-width="1" stroke-opacity="0.4" fill="none" />
			</svg>
			<!-- Top-right -->
			<svg class="pointer-events-none absolute -top-2 -right-2 h-10 w-10 overflow-visible" viewBox="0 0 40 40" fill="none">
				<path d="M32 32 C32 32, 38 20, 38 8 C38 8, 26 2, 14 2 L14 6 C24 6, 30 10, 32 16 Z" fill="var(--color-gold)" fill-opacity="0.7" />
				<path d="M38 8 L40 0 L32 2" stroke="var(--color-gold)" stroke-width="1" stroke-opacity="0.4" fill="none" />
			</svg>
			<!-- Bottom-left -->
			<svg class="pointer-events-none absolute -bottom-2 -left-2 h-10 w-10 overflow-visible" viewBox="0 0 40 40" fill="none">
				<path d="M8 8 C8 8, 2 20, 2 32 C2 32, 14 38, 26 38 L26 34 C16 34, 10 30, 8 24 Z" fill="var(--color-gold)" fill-opacity="0.7" />
				<path d="M2 32 L0 40 L8 38" stroke="var(--color-gold)" stroke-width="1" stroke-opacity="0.4" fill="none" />
			</svg>
			<!-- Bottom-right -->
			<svg class="pointer-events-none absolute -bottom-2 -right-2 h-10 w-10 overflow-visible" viewBox="0 0 40 40" fill="none">
				<path d="M32 8 C32 8, 38 20, 38 32 C38 32, 26 38, 14 38 L14 34 C24 34, 30 30, 32 24 Z" fill="var(--color-gold)" fill-opacity="0.7" />
				<path d="M38 32 L40 40 L32 38" stroke="var(--color-gold)" stroke-width="1" stroke-opacity="0.4" fill="none" />
			</svg>

			<!-- Top center flourish -->
			<svg class="pointer-events-none absolute -top-3 left-1/2 h-6 w-20 -translate-x-1/2 overflow-visible" viewBox="0 0 80 24" fill="none">
				<path d="M20 12 C28 0, 36 2, 40 10 C44 2, 52 0, 60 12" stroke="var(--color-gold)" stroke-width="1.5" stroke-opacity="0.6" fill="none" />
				<circle cx="40" cy="2" r="2.5" fill="var(--color-gold)" fill-opacity="0.5" />
				<path d="M10 12 L20 12" stroke="var(--color-gold)" stroke-width="0.8" stroke-opacity="0.3" />
				<path d="M60 12 L70 12" stroke="var(--color-gold)" stroke-width="0.8" stroke-opacity="0.3" />
			</svg>
			<!-- Bottom center flourish -->
			<svg class="pointer-events-none absolute -bottom-3 left-1/2 h-6 w-20 -translate-x-1/2 overflow-visible" viewBox="0 0 80 24" fill="none">
				<path d="M20 12 C28 24, 36 22, 40 14 C44 22, 52 24, 60 12" stroke="var(--color-gold)" stroke-width="1.5" stroke-opacity="0.6" fill="none" />
				<circle cx="40" cy="22" r="2.5" fill="var(--color-gold)" fill-opacity="0.5" />
				<path d="M10 12 L20 12" stroke="var(--color-gold)" stroke-width="0.8" stroke-opacity="0.3" />
				<path d="M60 12 L70 12" stroke="var(--color-gold)" stroke-width="0.8" stroke-opacity="0.3" />
			</svg>

			<!-- Side diamonds: left -->
			<svg class="pointer-events-none absolute top-1/2 -left-3 h-8 w-6 -translate-y-1/2 overflow-visible" viewBox="0 0 24 32" fill="none">
				<path d="M20 8 L4 16 L20 24" stroke="var(--color-gold)" stroke-width="1.5" stroke-opacity="0.6" fill="none" />
				<circle cx="4" cy="16" r="2" fill="var(--color-gold)" fill-opacity="0.4" />
			</svg>
			<!-- Side diamonds: right -->
			<svg class="pointer-events-none absolute top-1/2 -right-3 h-8 w-6 -translate-y-1/2 overflow-visible" viewBox="0 0 24 32" fill="none">
				<path d="M4 8 L20 16 L4 24" stroke="var(--color-gold)" stroke-width="1.5" stroke-opacity="0.6" fill="none" />
				<circle cx="20" cy="16" r="2" fill="var(--color-gold)" fill-opacity="0.4" />
			</svg>

			<!-- Modal Content -->
			<div class="relative z-10 rounded-lg bg-cream p-8 pt-6">
				<!-- Close button -->
				<button
					class="absolute top-4 right-4 text-sepia/50 transition-colors hover:text-gold"
					onclick={() => (showAllergens = false)}
					aria-label="Schließen"
				>
					<X size={20} />
				</button>

				<h3 class="font-gothic mb-6 text-center text-3xl text-brown">
					Allergene &amp; Zusatzstoffe
				</h3>

				<!-- Decorative divider -->
				<div class="mb-6 flex items-center justify-center gap-3">
					<div class="h-px w-12 bg-gold/40"></div>
					<span class="font-gothic text-lg text-gold/50">&#10022;</span>
					<div class="h-px w-12 bg-gold/40"></div>
				</div>

				<div class="mb-6">
					<p class="mb-3 text-center text-xs font-semibold tracking-wider text-brown/60 uppercase">Allergene</p>
					<div class="flex flex-wrap justify-center gap-2">
						{#each menuData.allergens as a}
							<span class="inline-flex items-center gap-1.5 rounded-full border border-gold/25 bg-parchment px-3 py-1.5 text-xs">
								<span class="font-bold text-brown">{a.code}</span>
								<span class="text-sepia">{a.label}</span>
							</span>
						{/each}
					</div>
				</div>

				<div class="mb-6">
					<p class="mb-3 text-center text-xs font-semibold tracking-wider text-brown/60 uppercase">Zusatzstoffe</p>
					<div class="flex flex-wrap justify-center gap-2">
						{#each menuData.additives as a}
							<span class="inline-flex items-center gap-1.5 rounded-full border border-sepia/20 bg-parchment px-3 py-1.5 text-xs">
								<span class="font-bold text-brown">{a.code}</span>
								<span class="text-sepia">{a.label}</span>
							</span>
						{/each}
					</div>
				</div>

				<!-- Decorative divider -->
				<div class="mb-6 flex items-center justify-center gap-3">
					<div class="h-px w-8 bg-gold/30"></div>
					<span class="text-xs text-gold/40">&#9830;</span>
					<div class="h-px w-8 bg-gold/30"></div>
				</div>

				<div class="flex flex-wrap items-center justify-center gap-3">
					<span class="inline-flex items-center gap-1.5 rounded-full border border-[#009036]/30 bg-parchment px-3 py-1.5 text-xs">
						<span class="inline-flex h-5 w-5 items-center justify-center rounded-full bg-[#009036]">
							<Leaf size={12} color="#FEDD00" strokeWidth={2.5} />
						</span>
						<span class="text-sepia">vegetarisch</span>
					</span>
					<span class="inline-flex items-center gap-1.5 rounded-full border border-[#FEDD00]/40 bg-parchment px-3 py-1.5 text-xs">
						<span class="inline-flex h-5 w-5 items-center justify-center rounded-full bg-[#FEDD00]">
							<Leaf size={12} color="#009036" strokeWidth={2.5} />
						</span>
						<span class="text-sepia">vegan</span>
					</span>
				</div>

				<p class="mt-5 text-center text-xs text-sepia/60">
					Angaben in Klammern = kann Spuren enthalten
				</p>
			</div>
		</div>
	</div>
{/if}

<style>
	.tooltip .tooltip-text {
		visibility: hidden;
		opacity: 0;
		position: absolute;
		bottom: calc(100% + 6px);
		left: 50%;
		transform: translateX(-50%);
		white-space: nowrap;
		font-size: 11px;
		padding: 4px 10px;
		border-radius: 6px;
		background: var(--color-charcoal);
		color: var(--color-cream);
		pointer-events: none;
		transition: opacity 0.15s ease;
	}

	.tooltip:hover .tooltip-text {
		visibility: visible;
		opacity: 1;
	}

	.ornate-modal {
		animation: modal-in 0.25s ease-out;
	}

	@keyframes modal-in {
		from {
			opacity: 0;
			transform: scale(0.95);
		}
		to {
			opacity: 1;
			transform: scale(1);
		}
	}
</style>
