package main

// heroGlitchComponent renders the cyberpunk:hero_glitch block with an RGB-split H1.
templ heroGlitchComponent(data HeroGlitchData) {
	<section
		data-block="cyberpunk:hero_glitch"
		class="cyberpunk-hero relative w-full overflow-hidden py-24 md:py-32"
		style="background-color: hsl(var(--background));"
	>
		if data.Scanlines {
			<div aria-hidden="true" class="scanlines pointer-events-none absolute inset-0" data-scanlines-local></div>
		}
		<div class="relative z-10 max-w-5xl mx-auto px-4 text-center">
			if data.Eyebrow != "" {
				<p class="cyberpunk-eyebrow cyberpunk-mono inline-block px-3 py-1 mb-6 text-xs uppercase tracking-[0.35em]" style="color: hsl(var(--accent)); border: 1px dashed hsl(var(--accent));">
					{ data.Eyebrow }
				</p>
			}
			<h1
				class="glitch cyberpunk-display text-5xl md:text-7xl font-bold leading-[1.05] tracking-tight mb-8"
				data-text={ data.Headline }
				style="color: hsl(var(--foreground)); font-family: var(--font-heading, 'Space Grotesk', system-ui, sans-serif);"
			>
				{ data.Headline }
			</h1>
			if data.Sub != "" {
				<p class="cyberpunk-sub mx-auto max-w-2xl text-lg md:text-xl mb-10" style="color: hsl(var(--muted-foreground));">
					{ data.Sub }
				</p>
			}
			<div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
				if data.CTA.Label != "" {
					<a
						href={ templ.SafeURL(safeHref(data.CTA.Href)) }
						class="cyberpunk-btn rgb-split cyberpunk-mono inline-flex items-center gap-2 px-6 py-3 rounded-md font-semibold uppercase tracking-wider"
						style="background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground));"
					>
						<span>{ data.CTA.Label }</span>
						<span aria-hidden="true" class="caret-blink">_</span>
					</a>
				}
				if data.SecondaryCTA.Label != "" {
					<a
						href={ templ.SafeURL(safeHref(data.SecondaryCTA.Href)) }
						class="cyberpunk-btn-ghost cyberpunk-mono inline-flex items-center gap-2 px-6 py-3 rounded-md font-semibold uppercase tracking-wider"
						style="border: 1px solid hsl(var(--accent)); color: hsl(var(--accent));"
					>
						<span>{ data.SecondaryCTA.Label }</span>
					</a>
				}
			</div>
		</div>
	</section>
}