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

<section class="section" id="partners">
	<div class="wrap">
		<SectionHeader
			coord="06"
			eyebrow="The outfitters"
			title="Seven partners stocked the shed"
			lede="Models, tools and compute from across the small-AI world. Tap any one for its full kit and support channels."
		/>
		<div class="partner-grid" style="margin-top:44px">
			{#each PARTNERS as p (p.id)}
				<a class="partner-card" href={'/partners/' + p.id}>
					<div class="partner-logo"><img src={PARTNER_LOGOS[p.id]} alt={p.name} loading="lazy" /></div>
					<p style="margin-top:16px;color:var(--ink-2);font-size:14.5px;min-height:44px;text-wrap:pretty">
						{p.one}
					</p>
					<div style="display:flex;align-items:center;justify-content:space-between;margin-top:14px">
						<span class="chip" style="pointer-events:none;padding:5px 11px;font-size:11.5px">{p.tag}</span>
						<Icon name="arrow" size={18} stroke="var(--ink-soft)" />
					</div>
				</a>
			{/each}
			<div
				class="partner-card"
				style="display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:10px;background:var(--kraft)"
			>
				<span class="coord">FIND THE RIGHT ONE</span>
				<a href="#recommender" class="display" style="font-size:22px;color:var(--forest)">
					Use the kit recommender →
				</a>
			</div>
		</div>
	</div>
</section>
