package main

// footerComponent renders the instrument-bar footer.
// UAT §13.10 requires a callsign element rendered in JetBrains Mono and at
// least one .hairline rule above the footer.
templ footerComponent(data FooterData) {
	<div data-block="scifi-clean:footer" class="w-full">
		<div class="hairline-t pt-8 pb-10">
			<div class="max-w-6xl mx-auto px-4">
				<div class="flex flex-col md:flex-row md:items-start md:justify-between gap-8">
					<div class="space-y-2">
						<div
							data-scifi-callsign
							class="scifi-mono uppercase tracking-widest text-xs text-foreground"
							style="font-family: var(--font-mono);"
						>
							{ data.Callsign }
						</div>
						<p class="scifi-body text-sm text-muted-foreground max-w-md">
							Telemetry, mission briefs, and engineering notes from this surface.
						</p>
					</div>

					if len(data.Links) > 0 {
						<ul class="space-y-2 scifi-body text-sm">
							for _, link := range data.Links {
								<li>
									<a
										href={ templ.SafeURL(safeHref(link.URL)) }
										class="text-muted-foreground hover:text-foreground transition-colors"
									>
										{ link.Text }
									</a>
								</li>
							}
						</ul>
					}

					if data.ShowSignup {
						<form class="space-y-2 max-w-xs" method="post" action="/subscribe">
							<label class="scifi-mono uppercase text-xs tracking-widest text-muted-foreground block">
								Mission updates
							</label>
							<div class="flex hairline">
								<input
									type="email"
									name="email"
									required
									placeholder="ops@station.local"
									class="scifi-body flex-1 px-3 py-2 bg-card text-foreground text-sm focus:outline-none scifi-focus"
								/>
								<button
									type="submit"
									class="scifi-mono uppercase text-xs tracking-widest px-4 py-2 bg-primary text-primary-foreground scifi-chevron scifi-focus"
								>
									Subscribe
								</button>
							</div>
						</form>
					}
				</div>
				<div class="mt-8 hairline-t pt-4 flex items-center justify-between scifi-mono text-xs uppercase tracking-widest text-muted-foreground tabular-nums">
					<span>Project Aurora</span>
					<span>v0.1.0</span>
				</div>
			</div>
		</div>
	</div>
}