package main

// leadershipGridComponent renders the corporate-modernist:leadership_grid block.
templ leadershipGridComponent(data LeadershipGridData) {
	<section class="cm-section" data-block="corporate-modernist:leadership_grid">
		<div class="cm-content-well">
			if data.Title != "" {
				<h2 class="cm-heading" style="font-size: 1.875rem; margin: 0 0 2rem 0;">
					<span class="cm-heading-h2-accent">{ data.Title }</span>
				</h2>
			}
			if len(data.Members) > 0 {
				<div class="cm-leadership-grid">
					for _, m := range data.Members {
						<article class="cm-card">
							if m.Photo != "" {
								<img src={ m.Photo } alt={ leadershipGridPhotoAlt(m) } style="width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; margin-bottom: 1rem; border-radius: 4px;"/>
							} else {
								<span class="cm-img-empty" style="aspect-ratio: 1 / 1; margin-bottom: 1rem; border-radius: 4px;"></span>
							}
							<div class="cm-display" style="font-size: 1.125rem; font-weight: 600; margin: 0;">{ m.Name }</div>
							if m.Role != "" {
								<div class="cm-stat-label" style="margin-top: 0.25rem;">{ m.Role }</div>
							}
							if m.Bio != "" {
								<p class="cm-text" style="margin: 0.75rem 0 0 0; font-size: 0.95rem; line-height: 1.55;">{ m.Bio }</p>
							}
							if m.LinkedIn != "" {
								<div style="margin-top: 1rem;">
									<a class="cm-btn-outline" href={ templ.SafeURL(m.LinkedIn) } style="font-size: 0.875rem; padding: 0.375rem 0.75rem;">LinkedIn</a>
								</div>
							}
						</article>
					}
				</div>
			} else {
				<p class="cm-stat-label">No team members configured.</p>
			}
		</div>
	</section>
}

func leadershipGridPhotoAlt(m LeadershipGridMember) string {
	if m.Name != "" {
		return m.Name
	}
	return "Team member portrait"
}