<template>
	<section
		class="py-8"
		:class="variant === 'light' ? 'bg-white text-gray-700 border-y border-gray-200' : 'bg-gray-900 text-white'"
	>
		<div class="xl:container mx-auto px-6">
			<div class="grid grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-0">
				<div
					v-for="(pillar, index) in pillars"
					:key="pillar.title"
					class="flex items-start gap-3 lg:px-6 lg:border-l lg:first:border-l-0"
					:class="variant === 'light' ? 'lg:border-gray-300' : 'lg:border-gray-400'"
				>
					<component :is="pillar.icon" class="w-6 h-6 flex-shrink-0 opacity-60" />
					<div>
						<h4 class="font-semibold text-sm lg:text-base">{{ pillar.title }}</h4>
						<p class="text-xs lg:text-sm opacity-70 mt-1">{{ pillar.description }}</p>
					</div>
				</div>
			</div>
		</div>
	</section>
</template>

<script setup lang="ts">
withDefaults(defineProps<{
	variant?: "dark" | "light";
}>(), {
	variant: "dark",
});

import IconMapPin from "~/components/icons/IconMapPin.vue";
import IconRecycle from "~/components/icons/IconRecycle.vue";
import IconTruck from "~/components/icons/IconTruck.vue";
import IconShield from "~/components/icons/IconShield.vue";

const pillars = [
	{
		icon: IconMapPin,
		title: "Made in Stuttgart",
		description: "Handgebunden in unserer Werkstatt – keine langen Transportwege.",
	},
	{
		icon: IconRecycle,
		title: "100% Recyclingpapier",
		description: "FSC-zertifiziert, Blauer Engel, CO₂-neutral produziert.",
	},
	{
		icon: IconTruck,
		title: "Schneller Versand",
		description: "Deine Bestellung ist in 2-3 Werktagen bei Dir.",
	},
	{
		icon: IconShield,
		title: "Sicher bezahlen",
		description: "BAR, PayPal, Kreditkarte, Lastschrift – verschlüsselt & geschützt.",
	},
];
</script>
