<template>
	<section :class="['relative overflow-hidden rounded-2xl', bgClasses]">
		<!-- Background Pattern -->
		<XMarkPatternBg
			v-if="bg !== 'bold' && bg !== 'gradient'"
			pattern="dots"
			:opacity="0.04"
			class="absolute inset-0 pointer-events-none"
		/>

		<div class="relative z-10 p-8 md:p-12 lg:p-16">
			<div class="grid lg:grid-cols-2 gap-10 lg:gap-16 items-center">
				<!-- Left: Text + Features -->
				<div class="xFadeUp">
					<!-- Title -->
					<h2
						:class="[
							'xText-headline',
							isBold ? 'text-white' : 'text-neutral-900 dark:text-white',
						]"
					>
						{{ title }}
					</h2>

					<!-- Description -->
					<p
						v-if="description"
						:class="[
							'mt-4 text-lg leading-relaxed',
							isBold
								? 'text-white/80'
								: 'text-neutral-600 dark:text-neutral-400',
						]"
					>
						{{ description }}
					</p>

					<!-- Features List -->
					<ul v-if="features.length" class="mt-6 space-y-3">
						<li
							v-for="(feature, index) in features"
							:key="index"
							class="flex items-center gap-3"
						>
							<span
								:class="[
									'flex-shrink-0 w-5 h-5 rounded-full flex items-center justify-center',
									isBold
										? 'bg-white/20'
										: 'bg-primary-100 dark:bg-primary-900/40',
								]"
							>
								<UIcon
									name="i-lucide-check"
									:class="[
										'w-3 h-3',
										isBold
											? 'text-white'
											: 'text-primary-600 dark:text-primary-400',
									]"
								/>
							</span>
							<span
								:class="[
									'text-sm font-medium',
									isBold
										? 'text-white/90'
										: 'text-neutral-700 dark:text-neutral-300',
								]"
							>
								{{ feature }}
							</span>
						</li>
					</ul>
				</div>

				<!-- Right: CTA Card -->
				<div class="xFadeUp" style="transition-delay: 100ms">
					<div
						:class="[
							'rounded-2xl p-8 text-center',
							isBold
								? 'bg-white/10 backdrop-blur-sm border border-white/20'
								: 'bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 shadow-lg',
						]"
					>
						<!-- Icon -->
						<div
							:class="[
								'inline-flex items-center justify-center w-14 h-14 rounded-2xl mb-5',
								isBold
									? 'bg-white/20'
									: 'bg-primary-100 dark:bg-primary-900/40',
							]"
						>
							<UIcon
								name="i-lucide-plus-circle"
								:class="[
									'w-7 h-7',
									isBold
										? 'text-white'
										: 'text-primary-600 dark:text-primary-400',
								]"
							/>
						</div>

						<!-- Card Title -->
						<h3
							:class="[
								'text-xl font-semibold mb-2',
								isBold ? 'text-white' : 'text-neutral-900 dark:text-white',
							]"
						>
							{{ button.label || "Submit a Listing" }}
						</h3>

						<p
							:class="[
								'text-sm mb-6',
								isBold
									? 'text-white/70'
									: 'text-neutral-500 dark:text-neutral-400',
							]"
						>
							Get your product in front of thousands of buyers.
						</p>

						<!-- CTA Button -->
						<UButton
							:to="button.to || '/submit'"
							:label="button.label || 'Submit a Listing'"
							:color="isBold ? 'neutral' : 'primary'"
							:class="
								isBold
									? 'bg-white text-neutral-900 hover:bg-white/90 w-full justify-center'
									: 'w-full justify-center'
							"
							size="lg"
							block
						/>
					</div>
				</div>
			</div>
		</div>
	</section>
</template>

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

const props = defineProps({
	/** Section title */
	title: {
		type: String,
		default: "List your product",
	},
	/** Section description */
	description: {
		type: String,
		default:
			"Reach thousands of buyers actively searching for solutions like yours.",
	},
	/** CTA button config { label, to } */
	button: {
		type: Object,
		default: () => ({
			label: "Submit a Listing",
			to: "/submit",
		}),
	},
	/** Feature bullet points */
	features: {
		type: Array,
		default: () => [
			"Free basic listing",
			"Featured placement available",
			"Analytics dashboard",
		],
	},
	/** Background style */
	bg: {
		type: String,
		default: "subtle",
		validator: (v) => ["subtle", "bold", "gradient"].includes(v),
	},
});

const isBold = computed(() => {
	return props.bg === "bold" || props.bg === "gradient";
});

const bgClasses = computed(() => {
	const variants = {
		subtle: "bg-neutral-100 dark:bg-neutral-900",
		bold: "bg-primary-600 dark:bg-primary-700",
		gradient: "bg-gradient-to-br from-primary-600 to-primary-800",
	};
	return variants[props.bg] || variants.subtle;
});
</script>
