package main

// cozyFooterComponent renders the cozy footer with newsletter signup,
// a closing affirmation, an optional menu column, and social pill links.
templ cozyFooterComponent(data CozyFooterData) {
	<section class="relative py-16 md:py-20 overflow-hidden bg-watercolor-mint" data-block="pastel-dream:cozy-footer">
		// Decorative watercolor blob, top right
		<svg class="absolute -top-8 -right-8 w-64 h-64 -z-0" viewBox="0 0 300 300" aria-hidden="true">
			<path d="M150,30 C220,30 270,90 270,150 C270,220 200,270 140,270 C80,270 30,210 30,150 C30,90 80,30 150,30 Z" fill="hsl(var(--primary) / 0.16)"></path>
		</svg>
		<div class="relative z-10 max-w-4xl mx-auto px-4 text-center">
			<p class="font-display text-3xl mb-6" style="color: hsl(var(--foreground));">
				{ data.Affirmation }
			</p>
			if data.ShowSignup {
				<form class="flex flex-col sm:flex-row gap-3 max-w-md mx-auto mb-8" data-pastel-signup="true" onsubmit="event.preventDefault();">
					<label class="sr-only" for="pastel-newsletter-email">Email</label>
					<input
						id="pastel-newsletter-email"
						type="email"
						placeholder="you@calm.day"
						class="flex-1 px-5 py-3 font-body rounded-full"
						style="background-color: hsl(var(--input)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--border));"
					/>
					<button type="submit" class="pastel-pill">Stay in touch</button>
				</form>
			}
			if len(data.Social) > 0 {
				<div class="flex justify-center gap-3 flex-wrap mt-6">
					for _, href := range data.Social {
						<a href={ templ.SafeURL(href) } class="px-4 py-2 font-body text-xs uppercase tracking-[0.2em] rounded-full" style="background-color: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border));">
							Visit
						</a>
					}
				</div>
			}
			<p class="font-mono text-xs mt-10" style="color: hsl(var(--muted-foreground));">
				Pastel Dream &middot; with care
			</p>
		</div>
	</section>
}