package main

// featuresComponent renders a Gotham-styled feature cards grid.
templ featuresComponent(data FeaturesData) {
	<section class="py-20 flex-1">
		<div class="max-w-6xl mx-auto px-4">
			if data.SectionTitle != "" {
				<h2 class="text-3xl font-bold text-center mb-12 gotham-accent">{ data.SectionTitle }</h2>
			}
			<div class={ "grid gap-8", featureGridCols(data.Columns) }>
				for _, feature := range data.Features {
					<div class="p-6 gotham-surface rounded-lg gotham-border border hover:border-primary/30 transition-colors">
						if feature.Icon != "" {
							<div class="mb-4 gotham-accent">
								@iconSVG(feature.Icon)
							</div>
						}
						<h3 class="text-xl font-semibold text-foreground mb-3">{ feature.Title }</h3>
						if feature.Description != "" {
							<p class="text-muted-foreground leading-relaxed">{ feature.Description }</p>
						}
					</div>
				}
			</div>
		</div>
	</section>
}

// featureGridCols returns the appropriate grid column class.
func featureGridCols(cols int) string {
	switch cols {
	case 1:
		return "grid-cols-1"
	case 2:
		return "grid-cols-1 md:grid-cols-2"
	case 4:
		return "grid-cols-1 md:grid-cols-2 lg:grid-cols-4"
	default:
		return "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
	}
}