---
import { Image } from 'astro:assets';
import beauty from '@/assets/images/audience-beauty.jpg';
import farmer from '@/assets/images/audience-farmer.jpg';
import tutor from '@/assets/images/audience-tutor.jpg';
import { t } from '@/i18n';
import ScrollRow from '@/components/ui/ScrollRow.astro';
import Section from '@/components/ui/Section.astro';

const { title, intro, items } = t.audience;

const cards = [
	{ ...items.beauty, image: beauty },
	{ ...items.tutor, image: tutor },
	{ ...items.farmer, image: farmer },
];
---

<Section id="kinek" title={title}>
	<p slot="intro" class="text-xl font-light text-muted">
		{intro.before}<strong class="font-semibold text-ink">{intro.strong}</strong>{intro.after}
	</p>

	<ScrollRow class="-mt-2.5 gap-5 lg:gap-8.75">
		{
			cards.map((card) => (
				<li class="flex snap-start flex-col gap-6.25">
					<Image
						src={card.image}
						alt={card.alt}
						widths={[357, 714]}
						sizes="(min-width: 64rem) 22rem, 80vw"
						class="aspect-357/206 w-full rounded-card object-cover"
					/>
					<p class="text-xl font-medium text-muted">{card.title}</p>
				</li>
			))
		}
	</ScrollRow>
</Section>