package main

// footerGridColumns returns a tailwind grid-column class for n columns.
func footerGridColumns(n int) string {
	switch n {
	case 0, 1:
		return "grid-cols-1"
	case 2:
		return "grid-cols-1 sm:grid-cols-2"
	case 3:
		return "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
	default:
		return "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
	}
}

// footerGridComponent renders the cyberpunk:footer_grid block.
templ footerGridComponent(data FooterGridData) {
	<div
		data-block="cyberpunk:footer_grid"
		class="cyberpunk-footer w-full"
		style="background-color: hsl(var(--card)); color: hsl(var(--muted-foreground));"
	>
		<div class="max-w-6xl mx-auto px-4 py-12">
			if len(data.Columns) > 0 {
				<div class={ "grid gap-8 mb-10 cyberpunk-mono text-sm", footerGridColumns(len(data.Columns)) }>
					for _, col := range data.Columns {
						<div>
							if col.Title != "" {
								<p class="cyberpunk-mono uppercase tracking-widest text-xs mb-4" style="color: hsl(var(--accent));">
									{ col.Title }
								</p>
							}
							if len(col.Links) > 0 {
								<ul class="space-y-2">
									for _, link := range col.Links {
										<li>
											<a
												href={ templ.SafeURL(safeHref(link.Href)) }
												class="cyberpunk-footer-link hover:underline"
												style="color: hsl(var(--foreground));"
											>
												{ link.Label }
											</a>
										</li>
									}
								</ul>
							}
						</div>
					}
				</div>
			} else {
				<p class="cyberpunk-mono mb-6 text-xs uppercase tracking-widest" style="color: hsl(var(--muted-foreground));">
					{ "// add columns to populate this grid" }
				</p>
			}
			<div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-3 pt-6" style="border-top: 1px dashed hsl(var(--border));">
				<p class="cyberpunk-mono text-xs uppercase tracking-widest" style="color: hsl(var(--muted-foreground));">
					BUILD <span style="color: hsl(var(--foreground));">{ data.BuildHash }</span>
				</p>
				if data.ShowStatus {
					<span
						class="cyberpunk-status-pill cyberpunk-mono inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs uppercase tracking-widest"
						style="border: 1px solid hsl(var(--accent)); color: hsl(var(--accent));"
					>
						<span
							aria-hidden="true"
							class="cyberpunk-status-dot inline-block w-2 h-2 rounded-full"
							style="background-color: hsl(var(--accent)); box-shadow: 0 0 6px hsl(var(--accent));"
						></span>
						OK
					</span>
				}
			</div>
		</div>
	</div>
}