<template>
	<UModal
		v-model:open="isOpen"
		fullscreen
		:ui="{
			header: 'hidden',
			body: 'p-0 overflow-y-auto',
			footer: 'hidden',
			overlay: 'bg-black/90'
		}"
	>
		<!-- Trigger Slot -->
		<slot>
			<UButton
				:label="buttonProps.label"
				:color="buttonProps.color"
				:variant="buttonProps.variant"
				:size="buttonProps.size"
				:leading-icon="buttonProps.icon"
			/>
		</slot>

		<!-- Modal Content -->
		<template #body>
			<!-- Close Button -->
			<UButton
				icon="i-lucide-x"
				color="neutral"
				variant="ghost"
				class="fixed top-4 right-4 z-50 !bg-white/10 backdrop-blur-sm hover:!bg-white/20 !text-white"
				size="lg"
				aria-label="Close"
				@click="isOpen = false"
			/>

			<!-- Scrollable Content -->
			<div class="min-h-screen">
				<!-- Hero Section -->
				<section
					v-if="hero"
					class="relative h-screen flex items-center justify-center"
				>
					<img
						:src="hero.image"
						:alt="hero.title"
						class="absolute inset-0 w-full h-full object-cover"
					/>
					<div class="absolute inset-0 bg-black/40" />
					<div class="relative z-10 text-center text-white px-6">
						<h2 class="xText-display">{{ hero.title }}</h2>
						<p class="mt-4 text-xl text-white/80 max-w-2xl mx-auto">
							{{ hero.subtitle }}
						</p>
					</div>
				</section>

				<!-- Feature Blocks -->
				<template v-for="(block, index) in blocks" :key="index">
					<!-- Full Image Block -->
					<section
						v-if="block.type === 'image'"
						class="relative h-screen"
					>
						<img
							:src="block.image"
							:alt="block.alt"
							class="w-full h-full object-cover"
						/>
					</section>

					<!-- Text Block -->
					<section
						v-else-if="block.type === 'text'"
						class="py-32 px-6"
						:class="block.bg || 'bg-white dark:bg-neutral-950'"
					>
						<div class="max-w-3xl mx-auto">
							<h3 class="xText-headline text-neutral-900 dark:text-white">{{ block.title }}</h3>
							<p class="mt-6 text-lg text-neutral-600 dark:text-neutral-400">
								{{ block.body }}
							</p>
						</div>
					</section>

					<!-- Split Block -->
					<section
						v-else-if="block.type === 'split'"
						class="grid lg:grid-cols-2 min-h-screen"
						:class="{ 'lg:grid-flow-col-dense': block.imagePosition === 'left' }"
					>
						<div
							class="flex items-center p-12 lg:p-20"
							:class="[
								block.bg || 'bg-white dark:bg-neutral-950',
								block.imagePosition === 'left' ? 'lg:col-start-2' : ''
							]"
						>
							<div>
								<h3 class="xText-headline text-neutral-900 dark:text-white">{{ block.title }}</h3>
								<p class="mt-6 text-lg text-neutral-600 dark:text-neutral-400">
									{{ block.body }}
								</p>
								<ul v-if="block.features" class="mt-8 space-y-4">
									<li
										v-for="feature in block.features"
										:key="feature"
										class="flex items-center gap-3"
									>
										<UIcon name="i-lucide-check-circle" class="w-5 h-5 text-primary-500" />
										<span class="text-neutral-700 dark:text-neutral-300">{{ feature }}</span>
									</li>
								</ul>
							</div>
						</div>
						<div
							class="relative min-h-[50vh] lg:min-h-0"
							:class="block.imagePosition === 'left' ? 'lg:col-start-1 lg:row-start-1' : ''"
						>
							<img
								:src="block.image"
								:alt="block.title"
								class="absolute inset-0 w-full h-full object-cover"
							/>
						</div>
					</section>
				</template>

				<!-- CTA Section -->
				<section
					v-if="cta"
					class="py-32 px-6 text-center"
					:class="cta.bg || 'bg-neutral-950'"
				>
					<h3 class="xText-headline text-white">{{ cta.title }}</h3>
					<p class="mt-4 text-xl text-white/70">{{ cta.subtitle }}</p>
					<div class="mt-10">
						<UButton size="xl" :color="cta.button?.color || 'primary'" @click="handleCtaClick">
							{{ cta.button?.label || 'Get Started' }}
						</UButton>
					</div>
				</section>
			</div>
		</template>
	</UModal>
</template>

<script setup>
const props = defineProps({
	/** Hero section configuration */
	hero: {
		type: Object,
		default: null,
	},
	/** Content blocks array */
	blocks: {
		type: Array,
		default: () => [],
	},
	/** CTA section configuration */
	cta: {
		type: Object,
		default: null,
	},
	/** Button configuration object */
	button: {
		type: Object,
		default: () => ({}),
	},
});

const emit = defineEmits(['open', 'close', 'cta-click']);

const isOpen = ref(false);

// Button props with defaults
const buttonProps = computed(() => ({
	label: props.button.label || 'Learn More',
	color: props.button.color || 'primary',
	variant: props.button.variant || 'solid',
	size: props.button.size || 'md',
	icon: props.button.icon || '',
}));

// Handle CTA click
const handleCtaClick = () => {
	emit('cta-click');
};

// Emit events
watch(isOpen, (open) => {
	if (open) {
		emit('open');
	} else {
		emit('close');
	}
});
</script>
