<template>
	<main class="pb-20">
		<!-- Hero -->
		<PageHero title="Öffnungszeiten" subtitle="Besuchen Sie uns in unserer Werkstatt in Stuttgart" />

		<!-- Opening Hours -->
		<section class="py-12 lg:py-16">
			<div class="xl:container mx-auto px-6">
				<div class="max-w-lg mx-auto">
					<div class="bg-white rounded-xl shadow-lg p-8">
						<h2 class="text-xl font-bold mb-6">Unsere Öffnungszeiten</h2>
						<OpeningHours :hours="OPENING_HOURS" />
					</div>

					<div class="mt-8 p-6 bg-gray-50 rounded-xl">
						<p class="text-gray-600 text-sm">
							<strong>Hinweis:</strong> Außerhalb der regulären Öffnungszeiten sind wir nach Vereinbarung erreichbar. Kontaktieren Sie uns gerne telefonisch oder per E-Mail.
						</p>
					</div>
				</div>
			</div>
		</section>

		<!-- Contact Info -->
		<section class="py-12 lg:py-16 bg-gray-50">
			<div class="xl:container mx-auto px-6">
				<div class="max-w-lg mx-auto text-center">
					<h2 class="text-2xl font-bold mb-6">Kontakt</h2>
					<div class="bg-white rounded-xl shadow-lg p-8 text-left">
						<ContactInfo :contact="CONTACT_INFO" />
					</div>
					<div class="mt-8">
						<NuxtLink to="/anfahrt" class="inline-flex items-center gap-2 px-8 py-3 bg-gray-900 text-white font-semibold rounded-full hover:bg-gray-800 transition-colors">
							<IconMapPin class="w-5 h-5" />
							Anfahrt anzeigen
						</NuxtLink>
					</div>
				</div>
			</div>
		</section>
	</main>
</template>

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

useSeoMeta({
	title: "Öffnungszeiten | MUELLERPRINTS",
	description: "Besuchen Sie uns in Stuttgart. Montag bis Freitag geöffnet. Außerhalb der Öffnungszeiten nach Vereinbarung.",
	ogTitle: "Öffnungszeiten | MUELLERPRINTS",
	ogDescription: "Besuchen Sie uns in Stuttgart. Montag bis Freitag geöffnet.",
});
</script>
