<template>
	<main class="pb-20">
		<!-- Hero -->
		<PageHero title="Anfahrt" subtitle="So finden Sie uns in Stuttgart" />

		<!-- Map and Address -->
		<section class="py-12 lg:py-16">
			<div class="xl:container mx-auto px-6">
				<div class="grid lg:grid-cols-2 gap-12">
					<!-- Map -->
					<div>
						<LocationMap
							:address="{
								name: CONTACT_INFO.name,
								street: CONTACT_INFO.street,
								postalCode: CONTACT_INFO.postalCode,
								city: CONTACT_INFO.city,
							}"
							:show-address="false"
						/>
					</div>

					<!-- Address and Directions -->
					<div class="space-y-8">
						<div class="bg-white rounded-xl shadow-lg p-8">
							<h2 class="text-xl font-bold mb-6">Adresse</h2>
							<ContactInfo :contact="CONTACT_INFO" />
						</div>

						<div class="bg-gray-50 rounded-xl p-8">
							<h3 class="text-lg font-bold mb-4">Anfahrt mit dem Auto</h3>
							<p class="text-gray-600">Wir befinden uns in Stuttgart-Ost im Stadtteil Gaisburg. Parkmöglichkeiten finden Sie in den umliegenden Straßen.</p>
						</div>

						<div class="bg-gray-50 rounded-xl p-8">
							<h3 class="text-lg font-bold mb-4">Mit öffentlichen Verkehrsmitteln</h3>
							<p class="text-gray-600">
								<strong>Stadtbahn:</strong> Haltestelle Ostendplatz (U4, U9)<br />
								Von dort ca. 5 Minuten Fußweg.
							</p>
						</div>
					</div>
				</div>
			</div>
		</section>

		<!-- Opening Hours Teaser -->
		<section class="py-12 lg:py-16 bg-gray-900 text-white">
			<div class="xl:container mx-auto px-6 text-center">
				<h2 class="text-2xl font-bold mb-4">Besuchen Sie uns</h2>
				<p class="text-gray-300 mb-8">Wir freuen uns auf Ihren Besuch in unserer Werkstatt.</p>
				<NuxtLink to="/oeffnungszeiten" class="inline-block px-8 py-3 bg-white text-gray-900 font-semibold rounded-full hover:bg-gray-100 transition-colors"> Öffnungszeiten ansehen </NuxtLink>
			</div>
		</section>
	</main>
</template>

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

useSeoMeta({
	title: "Anfahrt | MUELLERPRINTS",
	description: `Besuchen Sie uns in Stuttgart: ${CONTACT_INFO.street}, ${CONTACT_INFO.postalCode} ${CONTACT_INFO.city}. Jetzt Route planen.`,
	ogTitle: "Anfahrt | MUELLERPRINTS",
	ogDescription: `So finden Sie uns: ${CONTACT_INFO.street}, ${CONTACT_INFO.postalCode} ${CONTACT_INFO.city}`,
});
</script>
