<template>
	<div :class="containerClasses">
		<!-- Grid Layout -->
		<template v-if="layout === 'grid'">
			<div :class="gridClasses">
				<article
					v-for="(feature, index) in features"
					:key="feature.title"
					class="xFadeUp group"
					:style="{ transitionDelay: `${index * 100}ms` }"
				>
					<!-- Icon -->
					<div
						v-if="feature.icon"
						class="w-12 h-12 rounded-xl bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center mb-4 transition-transform duration-300 group-hover:scale-110"
					>
						<UIcon :name="feature.icon" class="w-6 h-6 text-primary-500" />
					</div>

					<!-- Image -->
					<figure
						v-if="feature.img?.src"
						class="aspect-video rounded-xl overflow-hidden mb-4 xHover-zoom"
					>
						<img
							:src="feature.img.src"
							:alt="feature.img.alt || feature.title"
							class="w-full h-full object-cover"
						/>
					</figure>

					<!-- Title -->
					<h3 class="xText-title text-neutral-900 dark:text-white">
						{{ feature.title }}
					</h3>

					<!-- Description -->
					<p class="mt-2 text-neutral-600 dark:text-neutral-400">
						{{ feature.description }}
					</p>

					<!-- Link -->
					<NuxtLink
						v-if="feature.link"
						:to="
							typeof feature.link === 'string' ? feature.link : feature.link.to
						"
						:target="
							typeof feature.link === 'object' ? feature.link.target : undefined
						"
						class="inline-flex items-center gap-1 mt-4 text-primary-500 hover:text-primary-600 font-medium text-sm transition-colors group/link"
					>
						{{
							typeof feature.link === "object" && feature.link.label
								? feature.link.label
								: "Learn more"
						}}
						<UIcon
							name="i-lucide-arrow-right"
							class="w-4 h-4 transition-transform duration-300 group-hover/link:translate-x-1"
						/>
					</NuxtLink>
				</article>
			</div>
		</template>

		<!-- List Layout -->
		<template v-else-if="layout === 'list'">
			<div class="space-y-12">
				<article
					v-for="(feature, index) in features"
					:key="feature.title"
					class="flex flex-col md:flex-row gap-6 xFadeUp group"
					:style="{ transitionDelay: `${index * 100}ms` }"
				>
					<!-- Icon -->
					<div
						v-if="feature.icon"
						class="flex-shrink-0 w-12 h-12 rounded-xl bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center transition-transform duration-300 group-hover:scale-110"
					>
						<UIcon :name="feature.icon" class="w-6 h-6 text-primary-500" />
					</div>

					<!-- Content -->
					<div class="flex-1">
						<h3 class="xText-title text-neutral-900 dark:text-white">
							{{ feature.title }}
						</h3>
						<p class="mt-2 text-neutral-600 dark:text-neutral-400">
							{{ feature.description }}
						</p>
						<NuxtLink
							v-if="feature.link"
							:to="
								typeof feature.link === 'string'
									? feature.link
									: feature.link.to
							"
							:target="
								typeof feature.link === 'object'
									? feature.link.target
									: undefined
							"
							class="inline-flex items-center gap-1 mt-4 text-primary-500 hover:text-primary-600 font-medium text-sm transition-colors group/link"
						>
							{{
								typeof feature.link === "object" && feature.link.label
									? feature.link.label
									: "Learn more"
							}}
							<UIcon
								name="i-lucide-arrow-right"
								class="w-4 h-4 transition-transform duration-300 group-hover/link:translate-x-1"
							/>
						</NuxtLink>
					</div>
				</article>
			</div>
		</template>

		<!-- Alternating Layout -->
		<template v-else-if="layout === 'alternating'">
			<div class="space-y-24 lg:space-y-32">
				<article
					v-for="(feature, index) in features"
					:key="feature.title"
					class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center xFadeUp group"
					:style="{ transitionDelay: `${index * 100}ms` }"
				>
					<!-- Image -->
					<figure
						v-if="feature.img?.src"
						class="aspect-[4/3] rounded-2xl overflow-hidden xHover-zoom shadow-lg"
						:class="{ 'lg:order-2': index % 2 !== 0 }"
					>
						<img
							:src="feature.img.src"
							:alt="feature.img.alt || feature.title"
							class="w-full h-full object-cover"
						/>
					</figure>

					<!-- Content -->
					<div :class="{ 'lg:order-1': index % 2 !== 0 }">
						<!-- Icon -->
						<div
							v-if="feature.icon"
							class="w-14 h-14 rounded-xl bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center mb-6 transition-transform duration-300 group-hover:scale-110"
						>
							<UIcon :name="feature.icon" class="w-7 h-7 text-primary-500" />
						</div>

						<h3
							class="xText-headline text-neutral-900 dark:text-white xText-balance"
						>
							{{ feature.title }}
						</h3>
						<p
							class="mt-4 text-lg text-neutral-600 dark:text-neutral-400 leading-relaxed"
						>
							{{ feature.description }}
						</p>
						<NuxtLink
							v-if="feature.link"
							:to="
								typeof feature.link === 'string'
									? feature.link
									: feature.link.to
							"
							:target="
								typeof feature.link === 'object'
									? feature.link.target
									: undefined
							"
							class="inline-flex items-center gap-2 mt-6 text-primary-500 hover:text-primary-600 font-medium transition-colors group/link"
						>
							{{
								typeof feature.link === "object" && feature.link.label
									? feature.link.label
									: "Learn more"
							}}
							<UIcon
								name="i-lucide-arrow-right"
								class="w-5 h-5 transition-transform duration-300 group-hover/link:translate-x-1"
							/>
						</NuxtLink>
					</div>
				</article>
			</div>
		</template>
	</div>
</template>

<script setup>
// Initialize scroll reveal animations automatically
useScrollReveal();

const props = defineProps({
	/** Array of features [{ icon?, title, description?, img?, link? }] */
	features: {
		type: Array,
		default: () => [
			{
				icon: "i-lucide-zap",
				title: "Lightning Fast",
				description: "Built for performance from the ground up.",
			},
			{
				icon: "i-lucide-shield",
				title: "Secure by Default",
				description: "Enterprise-grade security out of the box.",
			},
			{
				icon: "i-lucide-layers",
				title: "Fully Customizable",
				description: "Adapt every component to match your brand.",
			},
		],
	},
	/** Display layout */
	layout: {
		type: String,
		default: "grid",
		validator: (v) => ["grid", "list", "alternating"].includes(v),
	},
	/** Grid columns (for grid layout) */
	columns: {
		type: Number,
		default: 3,
		validator: (v) => [2, 3, 4].includes(v),
	},
});

const containerClasses = computed(() => {
	return props.layout === "alternating" ? "max-w-6xl mx-auto" : "";
});

const gridClasses = computed(() => {
	const cols = {
		2: "grid md:grid-cols-2 gap-8",
		3: "grid md:grid-cols-2 lg:grid-cols-3 gap-8",
		4: "grid md:grid-cols-2 lg:grid-cols-4 gap-8",
	};
	return cols[props.columns];
});
</script>
