package main

// heroComponent renders a Gotham-styled hero section.
templ heroComponent(data HeroData) {
	<section class="relative py-32 overflow-hidden">
		if data.BackgroundURL != "" {
			<div class="absolute inset-0 z-0">
				<img src={ data.BackgroundURL } alt="" class="w-full h-full object-cover opacity-20"/>
				<div class="absolute inset-0 bg-gradient-to-b from-background/80 via-background/60 to-background"></div>
			</div>
		}
		<div class="relative z-10 max-w-4xl mx-auto px-4 text-center">
			<h1 class="text-5xl md:text-6xl font-bold mb-6">
				<span class="gotham-accent">{ data.Headline }</span>
			</h1>
			if data.Subheadline != "" {
				<p class="text-xl md:text-2xl text-muted-foreground mb-10 max-w-2xl mx-auto">{ data.Subheadline }</p>
			}
			if data.CTAText != "" && data.CTAURL != "" {
				<a
					href={ templ.SafeURL(data.CTAURL) }
					class="inline-block px-8 py-4 gotham-accent-bg text-primary-foreground font-semibold rounded-lg transition-colors text-lg"
				>
					{ data.CTAText }
				</a>
			}
		</div>
	</section>
}