package main

// caseStudyComponent renders a project case-study spread with a sticky meta rail.
templ caseStudyComponent(data CaseStudyData) {
	<section data-block="noir:case_study" class="py-12">
		<div class="max-w-6xl mx-auto px-6 grid grid-cols-1 md:grid-cols-[14rem_1fr] gap-10">
			<aside class="noir-meta-rail tracked-mono space-y-3">
				if data.Client != "" {
					<div>
						<div style="color: hsl(var(--mutedForeground));">Client</div>
						<div class="mt-1" style="color: hsl(var(--foreground));">{ data.Client }</div>
					</div>
				}
				if data.Year > 0 {
					<div>
						<div style="color: hsl(var(--mutedForeground));">Year</div>
						<div class="mt-1" style="color: hsl(var(--foreground));">{ intToString(data.Year) }</div>
					</div>
				}
				if len(data.Credits) > 0 {
					<div>
						<div style="color: hsl(var(--mutedForeground));">Credits</div>
						<ul class="mt-1 space-y-1" style="color: hsl(var(--foreground));">
							for _, credit := range data.Credits {
								<li>{ credit }</li>
							}
						</ul>
					</div>
				}
			</aside>
			<div class="min-w-0">
				if data.Title != "" {
					<h1 class="noir-display mb-10" style="font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.05; color: hsl(var(--foreground));">
						{ data.Title }
					</h1>
				}
				if len(data.Images) > 0 {
					<div class="space-y-8">
						for _, img := range data.Images {
							<figure class="noir-figure">
								<img src={ img } alt={ data.Title } loading="lazy" class="w-full h-auto block"/>
							</figure>
						}
					</div>
				} else {
					<div class="hairline p-12 text-center tracked-mono" style="color: hsl(var(--mutedForeground));">
						Add photographs to the case study spread.
					</div>
				}
			</div>
		</div>
	</section>
}