package main

// marqueeHeroComponent renders the wide hero with stepped ziggurat frame and sunburst overlay.
templ marqueeHeroComponent(data MarqueeHeroData) {
	<section data-block="art-deco:marquee_hero" class="relative w-full overflow-hidden deco-grain" style="background-color: hsl(var(--foreground)); color: hsl(var(--background));">
		if data.Image != "" {
			<div class="absolute inset-0 z-0" aria-hidden="true">
				<img src={ data.Image } alt="" class="w-full h-full object-cover" style="opacity: 0.5;"/>
				<div class="absolute inset-0" style="background-color: hsl(var(--foreground) / 0.55);"></div>
			</div>
		}
		<div class="absolute inset-x-0 top-0 h-24 z-10 pointer-events-none deco-sunburst" aria-hidden="true"></div>
		<div class="relative z-20 max-w-4xl mx-auto px-4 py-32 text-center">
			<div class="deco-frame inline-block px-12 py-10" style="background-color: hsl(var(--foreground) / 0.6); border-color: hsl(var(--primary));">
				if data.Eyebrow != "" {
					<p class="deco-caps mb-4 text-xs" style="color: hsl(var(--primary));">{ data.Eyebrow }</p>
				}
				if data.Title != "" {
					<h1
						class="deco-caps deco-underline mb-6 text-5xl md:text-6xl lg:text-7xl"
						style="font-family: var(--font-heading, &quot;Italiana&quot;, &quot;Cinzel&quot;, Georgia, serif); color: hsl(var(--background));"
					>
						{ data.Title }
					</h1>
				}
				if data.Subtitle != "" {
					<div
						class="text-lg md:text-xl mb-8 max-w-2xl mx-auto"
						style="color: hsl(var(--background) / 0.9);"
					>
						@templ.Raw(data.Subtitle)
					</div>
				}
				if data.CTALabel != "" && data.CTAHref != "" {
					<a href={ templ.SafeURL(data.CTAHref) } class="deco-pill" style="background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary));">
						{ data.CTALabel }
					</a>
				}
			</div>
		</div>
	</section>
}