package main

// coverStoryComponent renders the 12-column asymmetric cover hero.
// Note: the spec calls for an oversized display headline; this consumes
// `--font-heading` via .font-display and clamps via .text-folio.
templ coverStoryComponent(data CoverStoryData) {
	<section data-block="magazine-bold:cover_story" class="w-full py-12">
		<div class="max-w-6xl mx-auto px-6">
			<div class="mb-grid-asym-cover">
				<div class="mb-col-folio">
					if data.Kicker != "" {
						<div class="font-mono text-kicker text-muted-foreground mb-4">{ data.Kicker }</div>
					}
				</div>
				<div class="mb-col-headline">
					<h1 class="font-display text-folio text-foreground">
						if data.Headline != "" {
							@templ.Raw(data.Headline)
						} else {
							Cover story
						}
					</h1>
				</div>
				<div class="mb-col-deck">
					if data.Deck != "" {
						<div class="font-sans text-deck text-muted-foreground">
							@templ.Raw(data.Deck)
						</div>
					}
				</div>
			</div>
			if data.Image != "" {
				<div class="mt-10">
					<img src={ data.Image } alt="" class="w-full h-auto block" loading="lazy"/>
				</div>
			}
			if data.Link != "" {
				<div class="mt-6">
					<a href={ templ.SafeURL(data.Link) } class="mb-button">
						Read the story →
					</a>
				</div>
			}
		</div>
	</section>
}