<template>
	<section
		class="relative min-h-svh flex overflow-hidden"
		:class="[
			alignmentClasses,
			verticalAlignClasses,
			{ 'pt-20': includeNavPadding },
		]"
	>
		<!-- Background -->
		<div class="absolute inset-0">
			<!-- Custom Background Slot -->
			<slot name="background">
				<!-- Video Background -->
				<video
					v-if="video?.src"
					:src="video.src"
					:poster="video.poster || img?.src"
					autoplay
					loop
					muted
					playsinline
					class="absolute inset-0 w-full h-full object-cover xParallax"
					data-parallax-speed="0.3"
				/>

				<!-- Image Background -->
				<img
					v-else-if="img?.src"
					:src="img.src"
					:alt="img.alt || ''"
					fetchpriority="high"
					class="absolute inset-0 w-full h-full object-cover xParallax"
					data-parallax-speed="0.3"
				/>
			</slot>

			<!-- Overlay -->
			<div
				v-if="overlay !== 'none'"
				class="absolute inset-0"
				:class="overlayClass"
			/>
		</div>

		<!-- Content -->
		<div class="relative z-10 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
			<div class="max-w-3xl" :class="contentAlignmentClasses">
				<!-- Eyebrow -->
				<p v-if="eyebrow" class="xText-eyebrow text-white/70 mb-4 xFadeUp">
					{{ eyebrow }}
				</p>

				<!-- Title -->
				<h1
					class="xText-display text-white xText-balance xFadeUp"
					style="transition-delay: 100ms"
				>
					<slot name="title">{{ title }}</slot>
				</h1>

				<!-- Subtitle -->
				<p
					v-if="subtitle || $slots.subtitle"
					class="mt-6 text-xl text-white/80 max-w-2xl xFadeUp"
					style="transition-delay: 200ms"
				>
					<slot name="subtitle">{{ subtitle }}</slot>
				</p>

				<!-- Actions -->
				<div
					v-if="buttons.length || $slots.actions"
					class="mt-10 flex flex-wrap gap-4 xFadeUp"
					:class="{
						'justify-center': align === 'center',
						'justify-end': align === 'right',
					}"
					style="transition-delay: 300ms"
				>
					<slot name="actions">
						<UButton
							v-for="(btn, index) in buttons"
							:key="index"
							size="xl"
							:color="btn.color || (index === 0 ? 'primary' : 'neutral')"
							:variant="btn.variant || 'solid'"
							:to="btn.to"
							:icon="btn.icon"
							:class="[
								btn.variant === 'outline' || (index > 0 && !btn.variant)
									? 'bg-white/10 backdrop-blur-sm border-white/40 text-white hover:bg-white/20 hover:border-white/60'
									: '',
							]"
						>
							{{ btn.label }}
						</UButton>
					</slot>
				</div>
			</div>
		</div>

		<!-- Scroll Indicator -->
		<div
			v-if="hasScrollIndicator"
			class="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2"
		>
			<span class="text-xs text-white/50 uppercase tracking-widest"
				>Scroll</span
			>
			<div
				class="w-6 h-10 border-2 border-white/30 rounded-full flex justify-center pt-2"
			>
				<div
					class="w-1.5 h-1.5 bg-white/60 rounded-full animate-[scroll-indicator_2s_ease-in-out_infinite]"
				/>
			</div>
		</div>
	</section>
</template>

<script setup>
const props = defineProps({
	/** Background image object { src: string, alt?: string } */
	img: {
		type: Object,
		default: null,
		validator: (v) => !v || typeof v.src === "string",
	},
	/** Background video object { src: string, poster?: string } */
	video: {
		type: Object,
		default: null,
		validator: (v) => !v || typeof v.src === "string",
	},
	/** Overlay style */
	overlay: {
		type: String,
		default: "gradient",
		validator: (v) => ["light", "heavy", "gradient", "none"].includes(v),
	},
	/** Small text above title */
	eyebrow: {
		type: String,
		default: "",
	},
	/** Main headline */
	title: {
		type: String,
		default: "Your Headline Here",
	},
	/** Supporting text */
	subtitle: {
		type: String,
		default: "",
	},
	/** Action buttons array [{ label, color?, variant?, to?, icon? }] */
	buttons: {
		type: Array,
		default: () => [],
		validator: (v) => v.every((btn) => btn.label),
	},
	/** Content horizontal alignment */
	align: {
		type: String,
		default: "left",
		validator: (v) => ["left", "center", "right"].includes(v),
	},
	/** Content vertical position */
	verticalAlign: {
		type: String,
		default: "center",
		validator: (v) => ["center", "bottom"].includes(v),
	},
	/** Has scroll indicator arrow */
	hasScrollIndicator: {
		type: Boolean,
		default: true,
	},
	/** Add top padding for non-transparent nav */
	includeNavPadding: {
		type: Boolean,
		default: false,
	},
});

const overlayClass = computed(() => {
	const overlays = {
		light: "bg-black/30",
		heavy: "bg-black/60",
		gradient: "bg-gradient-to-t from-black/80 via-black/40 to-transparent",
	};
	return overlays[props.overlay] || "";
});

const alignmentClasses = computed(() => {
	const aligns = {
		left: "text-left",
		center: "text-center",
		right: "text-right",
	};
	return aligns[props.align];
});

const verticalAlignClasses = computed(() => {
	const aligns = {
		center: "items-center",
		bottom: "items-end pb-24",
	};
	return aligns[props.verticalAlign];
});

const contentAlignmentClasses = computed(() => {
	const aligns = {
		left: "",
		center: "mx-auto",
		right: "ml-auto",
	};
	return aligns[props.align];
});
</script>
