package main

// heroStatementComponent renders the corporate-modernist:hero_statement block.
templ heroStatementComponent(data HeroStatementData) {
	<section class="cm-section" data-block="corporate-modernist:hero_statement">
		<div class="cm-content-well">
			<div class="cm-swiss-12">
				<div style="grid-column: span 12 / span 12;">
					if data.Eyebrow != "" {
						<div class="cm-eyebrow">{ data.Eyebrow }</div>
					}
					if data.Headline != "" {
						<h1 class="cm-display" style="font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.1; margin: 0 0 1.25rem 0;">
							{ data.Headline }
						</h1>
					}
					if data.Lede != "" {
						<p class="cm-text" style="max-width: 60ch; margin: 0 0 2rem 0;">{ data.Lede }</p>
					}
					if data.HasPrimary || data.HasSecondary {
						<div style="display: flex; flex-wrap: wrap; gap: 0.75rem;">
							if data.HasPrimary {
								<a class="cm-btn-primary" href={ templ.SafeURL(data.PrimaryCTA.Href) }>
									{ heroStatementLabel(data.PrimaryCTA.Label, "Get in touch") }
								</a>
							}
							if data.HasSecondary {
								<a class="cm-btn-outline" href={ templ.SafeURL(data.SecondaryCTA.Href) }>
									{ heroStatementLabel(data.SecondaryCTA.Label, "Learn more") }
								</a>
							}
						</div>
					}
				</div>
			</div>
		</div>
	</section>
}

func heroStatementLabel(label, fallback string) string {
	if label != "" {
		return label
	}
	return fallback
}