<template>
	<main class="pb-20">
		<PageHero title="Kontakt" subtitle="Wir freuen uns auf Ihre Nachricht" />

		<section class="py-12 lg:py-16">
			<div class="xl:container mx-auto px-6">
				<div class="grid lg:grid-cols-2 gap-12">
					<!-- Contact Form -->
					<div>
						<h2 class="text-2xl font-bold mb-6">Schreiben Sie uns</h2>
						<ContactForm />
					</div>

					<!-- Contact Info -->
					<div class="space-y-8">
						<div class="bg-gray-50 rounded-xl p-8">
							<h2 class="text-xl font-bold mb-6">Kontaktdaten</h2>
							<ContactInfo :contact="CONTACT_INFO" />
						</div>

						<div class="bg-gray-50 rounded-xl p-8">
							<h3 class="text-lg font-bold mb-4">Öffnungszeiten</h3>
							<OpeningHours :hours="OPENING_HOURS" />
						</div>

						<div class="flex flex-col sm:flex-row gap-4">
							<NuxtLink to="/anfahrt" class="flex-1 text-center px-6 py-3 border-2 border-gray-900 text-gray-900 font-semibold rounded-full hover:bg-gray-100 transition-colors"> Anfahrt </NuxtLink>
							<NuxtLink to="/oeffnungszeiten" class="flex-1 text-center px-6 py-3 border-2 border-gray-900 text-gray-900 font-semibold rounded-full hover:bg-gray-100 transition-colors"> Öffnungszeiten </NuxtLink>
						</div>
					</div>
				</div>
			</div>
		</section>
	</main>
</template>

<script setup lang="ts">
import { CONTACT_INFO, OPENING_HOURS } from "~/composables/usePageContent";

useSeoMeta({
	title: "Kontakt | MUELLERPRINTS",
	description: "Kontaktieren Sie MUELLERPRINTS per Telefon, E-Mail oder über unser Kontaktformular. Wir freuen uns auf Ihre Nachricht.",
});
</script>
