<template>
	<main class="pb-20">
		<!-- Hero -->
		<PageHero :title="ABOUT_CONTENT.hero.title" :subtitle="ABOUT_CONTENT.hero.subtitle" :image="ABOUT_CONTENT.hero.image" />

		<!-- Main Content -->
		<PageSection v-for="(section, index) in ABOUT_CONTENT.sections" :key="index" :title="section.title" :content="section.content" :variant="index % 2 === 0 ? 'white' : 'gray'" />

		<!-- Production Images -->
		<section class="py-12 lg:py-16 bg-gray-50">
			<div class="xl:container mx-auto px-6">
				<h2 class="text-2xl lg:text-3xl font-bold mb-8">Einblicke in unsere Werkstatt</h2>
				<div class="grid md:grid-cols-3 gap-6">
					<img v-for="(image, index) in ABOUT_CONTENT.images" :key="index" :src="image" alt="Produktion" class="rounded-xl shadow-lg w-full aspect-[4/3] object-cover" loading="lazy" />
				</div>
			</div>
		</section>

		<!-- Contact CTA -->
		<section class="py-12 lg:py-16">
			<div class="xl:container mx-auto px-6 text-center">
				<h2 class="text-2xl lg:text-3xl font-bold mb-4">Fragen?</h2>
				<p class="text-gray-600 mb-8 max-w-xl mx-auto">Wir freuen uns auf Ihre Nachricht. Besuchen Sie uns in Stuttgart oder schreiben Sie uns.</p>
				<div class="flex flex-col sm:flex-row gap-4 justify-center">
					<NuxtLink to="/kontakt" class="px-8 py-3 bg-gray-900 text-white font-semibold rounded-full hover:bg-gray-800 transition-colors"> Kontakt aufnehmen </NuxtLink>
					<NuxtLink to="/anfahrt" class="px-8 py-3 border-2 border-gray-900 text-gray-900 font-semibold rounded-full hover:bg-gray-100 transition-colors"> Anfahrt </NuxtLink>
				</div>
			</div>
		</section>
	</main>
</template>

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

useSeoMeta({
	title: "Über uns | MUELLERPRINTS",
	description: "Handarbeit aus Stuttgart seit über 30 Jahren. Wir kombinieren traditionelles Buchbinderhandwerk mit moderner Technik.",
	ogTitle: "Über uns | MUELLERPRINTS",
	ogDescription: "Handarbeit aus Stuttgart seit über 30 Jahren.",
});
</script>
