<template>
	<main class="pb-20">
		<PageHero title="Zahlung" subtitle="Sichere Zahlungsmöglichkeiten für Ihren Einkauf" />

		<!-- Dynamic Payment Methods from API -->
		<section class="py-12 lg:py-16">
			<div class="xl:container mx-auto px-6">
				<div v-if="pending" class="text-center py-8">
					<LoadingSpinner />
				</div>

				<div v-else-if="paymentMethods.length > 0" class="grid md:grid-cols-2 gap-8">
					<div v-for="method in paymentMethods" :key="method.id" class="bg-gray-50 rounded-xl p-6">
						<div class="flex justify-between items-start mb-3">
							<h2 class="text-xl font-semibold">{{ method.name }}</h2>
							<span v-if="method.price > 0" class="text-sm text-gray-500 bg-white px-2 py-1 rounded">+ {{ formatPrice(method.price) }}</span>
						</div>
						<p v-if="method.description" class="text-gray-600 leading-relaxed">{{ method.description }}</p>
					</div>
				</div>
			</div>
		</section>

		<!-- Security Note -->
		<section class="py-12 lg:py-16 bg-gray-50">
			<div class="xl:container mx-auto px-6">
				<div class="max-w-2xl mx-auto text-center">
					<div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-white mb-6">
						<svg class="w-8 h-8 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
						</svg>
					</div>
					<h2 class="text-2xl font-bold mb-4">Sicher bezahlen</h2>
					<p class="text-gray-600">Alle Zahlungen werden über verschlüsselte Verbindungen abgewickelt. Ihre Daten sind bei uns sicher.</p>
				</div>
			</div>
		</section>
	</main>
</template>

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

const shopApi = useShopApi();

const { data: paymentData, status } = await useAsyncData("payment-methods", async () => {
	const response = await shopApi.getPaymentMethods();
	// 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 paymentMethods = computed(() => paymentData.value || []);

function formatPrice(price: number) {
	return numberFormatter(price, "EUR");
}

useSeoMeta({
	title: "Zahlung | MUELLERPRINTS",
	description: "Zahlungsmöglichkeiten bei MUELLERPRINTS: PayPal, Kreditkarte, Lastschrift, Barzahlung. Sichere und bequeme Bezahlung."
});
</script>
