<template>
	<main class="pb-20">
		<PageHero title="Versand" subtitle="Lieferung und Versandkosten" />
		<PageSection :content="VERSAND_CONTENT" />

		<!-- Dynamic Delivery Methods from API -->
		<section class="py-12 lg:py-16 bg-gray-50">
			<div class="xl:container mx-auto px-6">
				<h2 class="text-2xl font-bold mb-8">Verfügbare Versandarten</h2>

				<div v-if="pending" class="text-center py-8">
					<LoadingSpinner />
				</div>

				<div v-else-if="deliveryMethods.length > 0" class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
					<div v-for="method in deliveryMethods" :key="method.id" class="bg-white rounded-xl p-6 shadow-sm">
						<div class="flex justify-between items-start mb-2">
							<h3 class="text-lg font-semibold">{{ method.name }}</h3>
							<span class="text-lg font-bold">{{ formatPrice(method.price) }}</span>
						</div>
						<p v-if="method.description" class="text-gray-600 text-sm">{{ method.description }}</p>
					</div>
				</div>
			</div>
		</section>
	</main>
</template>

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

const shopApi = useShopApi();

const { data: deliveryData, status } = await useAsyncData("delivery-methods", async () => {
	const response = await shopApi.getDeliveryMethods();
	// Flatten Strapi v4 attributes structure
	return (response.data || []).map((item: any) => ({
		id: item.id,
		name: item.attributes?.name ?? item.name,
		price: item.attributes?.price ?? item.price ?? 0,
		description: item.attributes?.description ?? item.description
	}));
});

const pending = computed(() => status.value === "pending");
const deliveryMethods = computed(() => deliveryData.value || []);

function formatPrice(price: number) {
	if (price === 0) return "Kostenlos";
	return numberFormatter(price, "EUR");
}

useSeoMeta({
	title: "Versand | MUELLERPRINTS",
	description: "Informationen zu Lieferung und Versandkosten bei MUELLERPRINTS. Schneller Versand mit DHL und Deutsche Post.",
});
</script>
