package main

// mastheadComponent renders the Editorial masthead. The wordmark is the brand
// signature (Playfair 900 italic). The optional kicker is a small mono caption
// above. A hairline rule sits below the title block. When compact mode is on
// the kicker is suppressed and the layout collapses to one line.
templ mastheadComponent(data MastheadData) {
	<div class="editorial-wide" data-block="editorial:masthead">
		if data.Compact {
			<div class="flex items-center justify-between py-3">
				<a href="/" class="editorial-masthead-wordmark text-2xl">
					{ data.Title }
				</a>
				if data.MenuName != "" {
					<span class="editorial-masthead-kicker">{ data.MenuName }</span>
				}
			</div>
			<hr class="editorial-masthead-rule"/>
		} else {
			<div class="text-center py-6">
				if data.Kicker != "" {
					<div class="editorial-masthead-kicker mb-2">{ data.Kicker }</div>
				}
				<a href="/" class="editorial-masthead-wordmark inline-block text-5xl md:text-6xl">
					{ data.Title }
				</a>
				<hr class="editorial-masthead-rule mt-4"/>
				if data.MenuName != "" {
					<nav class="editorial-section-label mt-3" aria-label="Sections">
						<span class="text-xs">{ "Sections: " }{ data.MenuName }</span>
					</nav>
				}
			</div>
		}
	</div>
}