package main

// featureGridSoftComponent renders the three-up grid. It reflows to 1 column
// at 360px and 2-3 columns at 768px+, satisfying UAT §7.
templ featureGridSoftComponent(data FeatureGridSoftData) {
	<section class="py-16 md:py-20" data-block="pastel-dream:feature-grid-soft">
		<div class="max-w-6xl mx-auto px-4">
			if data.Intro != "" {
				<div class="font-body text-center max-w-2xl mx-auto mb-12 text-lg" style="color: hsl(var(--foreground) / 0.78);">
					@templ.Raw(data.Intro)
				</div>
			}
			if len(data.Items) > 0 {
				<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
					for _, item := range data.Items {
						<article class="pastel-card p-8 transition-transform" style="transition-timing-function: cubic-bezier(.22,1,.36,1); transition-duration: 240ms;">
							if item.Icon != "" {
								<div class="mb-4">
									<img src={ item.Icon } alt="" class="w-12 h-12 object-contain"/>
								</div>
							} else {
								<div class="mb-4 w-12 h-12 rounded-full" style="background-color: hsl(var(--accent) / 0.5);" aria-hidden="true"></div>
							}
							if item.Title != "" {
								<h3 class="font-display text-2xl mb-3" style="color: hsl(var(--foreground));">{ item.Title }</h3>
							}
							if item.Body != "" {
								<p class="font-body text-base" style="color: hsl(var(--foreground) / 0.78); line-height: 1.75;">{ item.Body }</p>
							}
						</article>
					}
				</div>
			} else {
				<div class="text-center font-body text-base" style="color: hsl(var(--muted-foreground));">
					<p>Add up to three cards to the trio.</p>
				</div>
			}
		</div>
	</section>
}