<template>
	<section class="w-full relative overflow-hidden min-h-[16rem]" :style="backgroundStyle">
		<div class="absolute inset-0 bg-gradient-to-b from-black/40 to-black/60"></div>

		<div class="container mx-auto px-6 h-full flex flex-col items-center justify-between py-16 relative z-10">
			<!-- Top content with heading and optional subheading -->
			<div class="text-center mt-12 mb-8">
				<h2 class="font-bebas text-4xl md:text-5xl lg:text-6xl text-white tracking-tight leading-none">
					{{ title }}
				</h2>
				<p v-if="subtitle" class="mt-4 text-white/90 text-lg md:text-xl max-w-2xl mx-auto">
					{{ subtitle }}
				</p>

				<!-- Button after title option -->
				<div v-if="buttonPosition === 'after-title'" class="mt-8">
					<NuxtLink
						v-if="href"
						:to="href"
						class="bg-white text-gray-900 hover:bg-gray-200 hover:text-red-600 transition-colors px-8 py-3 rounded-full font-medium"
					>
						{{ buttonText }}
					</NuxtLink>
					<button
						v-else
						@click="$emit('button-click')"
						class="bg-white text-gray-900 hover:bg-gray-200 hover:text-red-600 transition-colors px-8 py-3 rounded-full font-medium"
					>
						{{ buttonText }}
					</button>
				</div>
			</div>

			<!-- Bottom button option -->
			<div v-if="buttonPosition === 'bottom'" class="mb-12">
				<NuxtLink
					v-if="href"
					:to="href"
					class="bg-white text-gray-900 hover:bg-gray-200 hover:text-red-600 transition-colors px-8 py-3 rounded-full font-medium"
				>
					{{ buttonText }}
				</NuxtLink>
				<button
					v-else
					@click="$emit('button-click')"
					class="bg-white text-gray-900 hover:bg-gray-200 hover:text-red-600 transition-colors px-8 py-3 rounded-full font-medium"
				>
					{{ buttonText }}
				</button>
			</div>
		</div>
	</section>
</template>

<script setup lang="ts">
const props = defineProps<{
	backgroundImage: string;
	title: string;
	subtitle?: string;
	buttonText?: string;
	buttonPosition?: "bottom" | "after-title";
	height?: string;
	href?: string;
}>();

const emit = defineEmits(["button-click"]);

const backgroundStyle = computed(() => ({
	backgroundImage: `url('${props.backgroundImage}')`,
	backgroundSize: "cover",
	backgroundPosition: "center",
	height: props.height || "70vh"
}));
</script>
