<script lang="ts">
	import OrnateButton from './OrnateButton.svelte';
</script>

<section id="catering" class="bg-brown py-20 text-cream">
	<div class="mx-auto max-w-4xl px-6">
		<h2 class="font-gothic mb-4 text-center text-5xl text-gold md:text-6xl">Catering</h2>
		<p class="mx-auto mb-14 max-w-2xl text-center text-lg text-cream/80">
			Euer Event, unser Foodtruck &ndash; für unvergessliche Momente mit authentischer rumänischer
			Küche.
		</p>

		<!-- Anlässe Grid -->
		<div class="mb-14 grid gap-6 md:grid-cols-3">
			<div class="rounded-lg border border-gold/20 bg-cream/5 p-6 text-center">
				<div class="mb-4 text-3xl">&#127866;</div>
				<h3 class="mb-2 text-lg font-semibold text-gold">Hochzeiten</h3>
				<p class="text-sm text-cream/70">
					Macht euren großen Tag besonders &ndash; mit rumänischen Spezialitäten frisch vom Grill.
					Rustikales Flair trifft auf Festlichkeit.
				</p>
			</div>

			<div class="rounded-lg border border-gold/20 bg-cream/5 p-6 text-center">
				<div class="mb-4 text-3xl">&#127970;</div>
				<h3 class="mb-2 text-lg font-semibold text-gold">Firmenfeiern</h3>
				<p class="text-sm text-cream/70">
					Sommerfest, Jubiläum oder Teambuilding? Wir sorgen für zufriedene Bäuche und gute
					Stimmung bei euren Mitarbeitern.
				</p>
			</div>

			<div class="rounded-lg border border-gold/20 bg-cream/5 p-6 text-center">
				<div class="mb-4 text-3xl">&#127879;</div>
				<h3 class="mb-2 text-lg font-semibold text-gold">Private Feiern</h3>
				<p class="text-sm text-cream/70">
					Geburtstag, Gartenparty oder Familientreffen &ndash; wir kommen mit dem Foodtruck direkt
					zu euch und kümmern uns ums Essen.
				</p>
			</div>
		</div>

		<!-- USPs -->
		<div class="mb-14 rounded-lg border border-gold/30 bg-gold/5 p-8">
			<h3 class="mb-6 text-center text-xl font-semibold text-gold">Was wir mitbringen</h3>
			<div class="grid gap-4 text-sm text-cream/80 md:grid-cols-2">
				<div class="flex items-start gap-3">
					<span class="mt-0.5 text-gold">&#10003;</span>
					<span>Unser voll ausgestatteter Foodtruck &ndash; autark und flexibel</span>
				</div>
				<div class="flex items-start gap-3">
					<span class="mt-0.5 text-gold">&#10003;</span>
					<span>Frische Zubereitung vor Ort &ndash; euer Event wird zum Erlebnis</span>
				</div>
				<div class="flex items-start gap-3">
					<span class="mt-0.5 text-gold">&#10003;</span>
					<span>Individuelle Menüplanung abgestimmt auf eure Gästezahl</span>
				</div>
				<div class="flex items-start gap-3">
					<span class="mt-0.5 text-gold">&#10003;</span>
					<span>Flexible Anpassung an Allergien und Ernährungswünsche</span>
				</div>
				<div class="flex items-start gap-3">
					<span class="mt-0.5 text-gold">&#10003;</span>
					<span>Events ab 30 Personen &ndash; von intim bis groß</span>
				</div>
				<div class="flex items-start gap-3">
					<span class="mt-0.5 text-gold">&#10003;</span>
					<span>Einsatzbereit in der gesamten Region</span>
				</div>
			</div>
		</div>

		<!-- CTA -->
		<div class="text-center">
			<p class="mb-8 text-cream/70">
				Erzählt uns von eurem Event &ndash; wir erstellen euch ein unverbindliches Angebot.
			</p>
			<div class="flex flex-col items-center justify-center gap-6 sm:flex-row">
				<OrnateButton href="mailto:hallo@graffen-foodtruck.de?subject=Catering-Anfrage">
					<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
						/>
					</svg>
					Catering anfragen
				</OrnateButton>
			</div>
		</div>
	</div>
</section>
