package main

// featuredPourComponent renders the featured pour hero card.
templ featuredPourComponent(data FeaturedPourData) {
	<section data-block="coffee:featured_pour" class="my-10">
		<div class="coffee-card max-w-4xl mx-auto p-6 grid gap-6 md:grid-cols-[2fr_3fr] items-center relative">
			<span class="absolute -top-3 left-6 inline-flex items-center gap-1 px-3 py-1 text-xs uppercase tracking-wider rounded-sm bg-accent text-accent-foreground coffee-body">
				Featured
			</span>
			<div class="aspect-square overflow-hidden rounded-sm bg-secondary">
				if data.Image != "" {
					<img src={ data.Image } alt={ data.Name } class="w-full h-full object-cover" loading="lazy"/>
				} else {
					<div class="w-full h-full flex items-center justify-center coffee-body text-sm text-muted-foreground italic">
						Add a hero image
					</div>
				}
			</div>
			<div class="flex flex-col gap-3">
				if data.Name != "" {
					<h3 class="coffee-display text-3xl text-primary">{ data.Name }</h3>
				} else {
					<h3 class="coffee-display text-3xl text-muted-foreground italic">Featured pour</h3>
				}
				if data.Tasting != "" {
					<div class="coffee-body text-foreground prose-sm max-w-none">
						@templ.Raw(data.Tasting)
					</div>
				}
				if data.Price != "" {
					<div class="coffee-price price text-xl">{ data.Price }</div>
				}
			</div>
		</div>
	</section>
}