package main

// schematicHeroComponent renders the landing-page hero.
// UAT §13.6 requires the <h1> to render in Space Grotesk at >= 64px on 1440x900.
// UAT §6 requires a scrim layer between the background image and the title text.
templ schematicHeroComponent(data SchematicHeroData) {
	<section data-block="scifi-clean:schematic_hero" class="relative overflow-hidden bg-grid">
		if data.Image != "" {
			<div class="absolute inset-0 z-0">
				<img
					src={ data.Image }
					alt=""
					class="w-full h-full object-cover opacity-25"
				/>
			</div>
		}
		<div class="scrim relative z-10">
			<div class="max-w-6xl mx-auto px-4 py-24 md:py-32">
				if data.Kicker != "" {
					<div class="scifi-mono uppercase tracking-widest text-xs text-accent mb-4">
						{ data.Kicker }
					</div>
				}
				<h1
					class="scifi-h1 font-medium tracking-tight text-foreground"
					style="font-family: var(--font-heading); font-size: clamp(3rem, 6vw, 5rem); line-height: 1.05;"
				>
					if data.Title == "" {
						{ "Untitled mission" }
					} else {
						{ data.Title }
					}
				</h1>
				<div class="mt-8 flex flex-wrap gap-3">
					if data.PrimaryCTA.Text != "" && data.PrimaryCTA.Href != "" {
						<a
							href={ templ.SafeURL(data.PrimaryCTA.Href) }
							class="scifi-mono uppercase tracking-widest text-xs px-5 py-3 bg-primary text-primary-foreground scifi-chevron scifi-focus"
						>
							{ data.PrimaryCTA.Text }
						</a>
					}
					if data.SecondaryCTA.Text != "" && data.SecondaryCTA.Href != "" {
						<a
							href={ templ.SafeURL(data.SecondaryCTA.Href) }
							class="scifi-mono uppercase tracking-widest text-xs px-5 py-3 hairline text-foreground scifi-chevron scifi-focus"
						>
							{ data.SecondaryCTA.Text }
						</a>
					}
				</div>
			</div>
		</div>
	</section>
}