package main

// watercolorHeroComponent renders the watercolor hero with inline SVG blobs.
// Path fill colors come from hsl(var(--primary)) / hsl(var(--accent)) so they
// follow whatever preset is active. A scrim under the headline keeps text
// readable when an image is provided.
templ watercolorHeroComponent(data WatercolorHeroData) {
	<section class="relative overflow-hidden py-20 md:py-28 bg-watercolor-blush" data-block="pastel-dream:watercolor-hero">
		// Decorative watercolor blobs. Inline SVG so fills can reference theme tokens.
		<svg class="absolute -top-12 -left-12 w-[28rem] h-[28rem] -z-0 animate-breathe" viewBox="0 0 400 400" aria-hidden="true">
			<path d="M200,40 C290,40 360,120 360,200 C360,290 280,360 200,360 C110,360 40,280 40,200 C40,110 110,40 200,40 Z" fill="hsl(var(--primary) / 0.22)"></path>
		</svg>
		<svg class="absolute -bottom-16 -right-8 w-[24rem] h-[24rem] -z-0 animate-breathe" viewBox="0 0 400 400" aria-hidden="true">
			<path d="M120,60 C200,40 320,80 360,180 C400,280 320,360 220,360 C120,360 40,300 40,220 C40,160 60,80 120,60 Z" fill="hsl(var(--accent) / 0.30)"></path>
		</svg>
		<div class="relative z-10 max-w-6xl mx-auto px-4 grid md:grid-cols-2 gap-12 items-center">
			<div>
				if data.Eyebrow != "" {
					<p class="font-mono text-xs uppercase tracking-[0.2em] mb-4" style="color: hsl(var(--muted-foreground));">
						{ data.Eyebrow }
					</p>
				}
				<h1 class="font-display brush-underline text-5xl md:text-6xl leading-tight mb-6" style="color: hsl(var(--foreground));">
					@templ.Raw(data.Headline)
				</h1>
				if data.Body != "" {
					<div class="font-body text-lg max-w-prose mb-8" style="color: hsl(var(--foreground) / 0.78);">
						@templ.Raw(data.Body)
					</div>
				}
				if data.CTAText != "" {
					<a href={ templ.SafeURL(data.CTAHref) } class="pastel-pill text-base animate-breathe">
						{ data.CTAText }
					</a>
				}
			</div>
			if data.Image != "" {
				<div class="relative">
					<div class="pastel-card overflow-hidden">
						<img src={ data.Image } alt="" class="w-full h-auto block"/>
					</div>
				</div>
			} else {
				<div class="relative h-64 md:h-80" aria-hidden="true">
					<svg viewBox="0 0 300 240" class="w-full h-full">
						<ellipse cx="150" cy="120" rx="110" ry="80" fill="hsl(var(--secondary) / 0.55)"></ellipse>
						<ellipse cx="120" cy="100" rx="70" ry="50" fill="hsl(var(--accent) / 0.45)"></ellipse>
						<ellipse cx="180" cy="140" rx="60" ry="44" fill="hsl(var(--primary) / 0.40)"></ellipse>
					</svg>
				</div>
			}
		</div>
	</section>
}