<template>
	<section class="py-16 md:py-24" :class="backgroundClasses">
		<UContainer>
			<div class="max-w-2xl mx-auto text-center">
				<h2 v-if="title" class="text-2xl md:text-3xl font-bold mb-4">
					{{ title }}
				</h2>
				<p v-if="description" class="opacity-70 mb-8">
					{{ description }}
				</p>

				<UForm :state="form" @submit="onSubmit">
					<div class="flex flex-col sm:flex-row gap-4">
						<UFormField name="email" class="flex-1">
							<UInput
								v-model="form.email"
								type="email"
								:placeholder="emailPlaceholder"
								size="xl"
								:ui="inputStyles"
								required
							/>
						</UFormField>
						<UFormField v-if="showZip" name="zip">
							<UInput
								v-model="form.zip"
								:placeholder="zipPlaceholder"
								size="xl"
								:ui="inputStyles"
							/>
						</UFormField>
						<UButton
							type="submit"
							size="xl"
							color="primary"
							:label="buttonLabel"
							:loading="loading"
						/>
					</div>
				</UForm>

				<p v-if="disclaimer" class="text-xs opacity-50 mt-4">
					{{ disclaimer }}
				</p>
			</div>
		</UContainer>
	</section>
</template>

<script setup>
const props = defineProps({
	title: {
		type: String,
		default: "",
	},
	description: {
		type: String,
		default: "",
	},
	emailPlaceholder: {
		type: String,
		default: "Email address",
	},
	zipPlaceholder: {
		type: String,
		default: "Zip code",
	},
	buttonLabel: {
		type: String,
		default: "Subscribe",
	},
	disclaimer: {
		type: String,
		default: "",
	},
	showZip: {
		type: Boolean,
		default: false,
	},
	variant: {
		type: String,
		default: "dark",
	},
});

const emit = defineEmits(["submit"]);

const form = reactive({
	email: "",
	zip: "",
});

const loading = ref(false);

const backgroundClasses = computed(() => {
	const variants = {
		dark: "bg-deep-900 text-white",
		light: "bg-gray-50 text-gray-900",
		transparent: "",
	};
	return variants[props.variant] || variants.dark;
});

const inputStyles = computed(() => {
	if (props.variant === "dark") {
		return {
			root: "bg-white/10 border-white/20 text-white placeholder:text-white/50",
		};
	}
	return {};
});

const onSubmit = async () => {
	loading.value = true;
	try {
		emit("submit", { ...form });
		form.email = "";
		form.zip = "";
	} finally {
		loading.value = false;
	}
};
</script>