package main

import "strconv"

// donationCTAComponent renders the moss/clay donation CTA section.
templ donationCTAComponent(data DonationCTAData) {
	<section
		data-block="earthen:donation_cta"
		data-empty?={ data.Empty }
		class="earthen-donation-cta py-16 px-4"
		style="background-color: hsl(var(--card)); color: hsl(var(--card-foreground));"
	>
		<div class="max-w-3xl mx-auto text-center">
			if data.Headline != "" {
				<h2
					class="earthen-display text-3xl md:text-4xl mb-4"
					style={ "font-family: var(--font-heading, \"Fraunces\", \"Playfair Display\", Georgia, serif); color: hsl(var(--primary));" }
				>
					{ data.Headline }
				</h2>
			}
			if data.Body != "" {
				<div
					class="earthen-body text-lg mb-8 mx-auto max-w-xl"
					style={ "font-family: var(--font-body, \"Spectral\", Georgia, serif); color: hsl(var(--foreground));" }
				>
					@templ.Raw(data.Body)
				</div>
			}
			<form action={ templ.SafeURL(donationFormAction(data.ProcessorURL)) } method="get" class="space-y-6">
				<div class="grid grid-cols-1 sm:grid-cols-3 gap-3" role="radiogroup" aria-label="Preset donation amounts">
					for i, tile := range data.Tiles {
						<label
							data-amount-tile
							class="earthen-tile flex items-center justify-center cursor-pointer rounded-lg py-4 px-3 text-lg font-semibold transition-colors"
							style="border: 1px solid hsl(var(--border)); background-color: hsl(var(--background)); color: hsl(var(--foreground));"
						>
							<input
								type="radio"
								name="amount"
								value={ strconv.FormatFloat(tile.Value, 'f', -1, 64) }
								class="sr-only"
								checked?={ i == 0 }
							/>
							<span>{ tile.Label }</span>
						</label>
					}
				</div>
				<div class="flex flex-col sm:flex-row gap-3 items-stretch sm:items-center">
					<label class="sr-only" for="earthen-custom-amount">Custom amount</label>
					<input
						id="earthen-custom-amount"
						type="number"
						name="customAmount"
						min="1"
						step="1"
						placeholder="Other amount"
						class="flex-1 rounded-lg py-3 px-4 text-base"
						style="background-color: hsl(var(--background)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--input));"
					/>
					<button
						type="submit"
						class="earthen-button inline-block rounded-lg py-3 px-6 font-semibold transition-colors"
						style="background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground));"
					>
						{ data.ButtonLabel }
					</button>
				</div>
			</form>
		</div>
	</section>
}

func donationFormAction(url string) string {
	if url == "" {
		return "#"
	}
	return url
}