src/lib/components/Recommender.svelte

<script lang="ts">
	import { BUILD_NEEDS, PARTNERS, PARTNER_LOGOS } from '$lib/data/content';
	import SectionHeader from './SectionHeader.svelte';
	import Icon from './Icon.svelte';

	let need = $state('image');
	const active = $derived(BUILD_NEEDS.find((n) => n.id === need)!);
	const partnerById = Object.fromEntries(PARTNERS.map((p) => [p.id, p]));
</script>

<section class="section" id="recommender">
	<div class="wrap">
		<SectionHeader
			coord="05"
			eyebrow="Choose your kit"
			title="What are you building?"
			lede="Tell us the shape of your idea and we’ll point you at the partners and models worth reaching for. Then dig into their pages for the full guide."
		/>

		<div class="rec" style="margin-top:44px">
			<div class="rec__needs">
				{#each BUILD_NEEDS as n, i (n.id)}
					<button class="rec__need" data-on={need === n.id} onclick={() => (need = n.id)}>
						<span class="coord">0{i + 1}</span>
						<div class="rec__needglyph"><Icon name={n.glyph} size={24} sw={1.6} /></div>
						<div class="display" style="font-size:16px;font-stretch:106%">{n.label}</div>
					</button>
				{/each}
			</div>

			<div class="rec__result">
				<div class="rec__resulthead">
					<Icon name="compass" size={20} stroke="var(--forest)" />
					<span class="display rec__resulttitle">
						For a {active.label.toLowerCase()}, reach for:
					</span>
				</div>
				<p class="rec__resultlede">{active.desc}</p>

				<div>
					{#each active.matches as m (m.partner + m.model)}
						{@const p = partnerById[m.partner]}
						<div class="rec__match">
							<div class="partner-logo"><img src={PARTNER_LOGOS[p.id]} alt={p.name} loading="lazy" /></div>
							<div style="min-width:0">
								<div class="rec__matchmeta">
									<span class="display rec__matchname">{m.model}</span>
									<span class="coord">via {p.name}</span>
								</div>
								<p class="rec__matchwhy">{m.why}</p>
							</div>
							<a
								href={'/partners/' + m.partner}
								class="chip"
								style="flex:none;border-color:var(--ink)"
							>
								Open <Icon name="arrow" size={14} />
							</a>
						</div>
					{/each}
				</div>
			</div>
		</div>
	</div>
</section>