<template>
	<section class="relative bg-gray-900 text-white py-20 lg:py-32">
		<div v-if="image" class="absolute inset-0 opacity-30">
			<img :src="image" :alt="title" class="w-full h-full object-cover" />
		</div>
		<div class="relative xl:container mx-auto px-6">
			<h1 class="text-4xl lg:text-5xl font-bold mb-4">{{ title }}</h1>
			<p v-if="subtitle" class="text-xl lg:text-2xl text-gray-300 max-w-2xl">{{ subtitle }}</p>
		</div>
	</section>
</template>

<script setup lang="ts">
defineProps<{
	title: string;
	subtitle?: string;
	image?: string;
}>();
</script>
