---
import { Image } from 'astro:assets';
import receiptWeb from '@/assets/images/receipt-web.png';
import { icons } from '@/config/icons';
import { t } from '@/i18n';
import Container from '@/components/ui/Container.astro';

const { title, highlight, text, imageAlt, features } = t.digitalReceipt;
---

<section aria-labelledby="digital-receipt-title">
	<Container>
		<div
			class="bg-violet-glow flex flex-col gap-6.25 rounded-card px-5 py-6.25 text-white [--glow-x:85%] [--glow-y:85%] lg:flex-row-reverse lg:items-center lg:gap-27.5 lg:p-10 lg:[--glow-x:16%] lg:[--glow-y:50%]"
		>
			<div class="flex flex-col gap-6.25 lg:flex-1">
				<div class="flex flex-col gap-2.5">
					<h2 id="digital-receipt-title" class="text-heading-sm font-semibold text-balance lg:text-heading">
						{title}{' '}
						<span class="text-mint lg:block">{highlight}</span>
					</h2>
					<p class="text-xl font-light">{text}</p>
				</div>
				{
					features.map((feature) => {
						const Icon = icons[feature.icon];
						return (
							<div class="flex flex-col gap-2.5">
								<h3 class="flex items-center gap-2.5 text-xl font-semibold">
									<Icon class="size-6 shrink-0" aria-hidden="true" />
									{feature.title}
								</h3>
								<p class="font-light">{feature.text}</p>
							</div>
						);
					})
				}
			</div>
			<Image
				src={receiptWeb}
				alt={imageAlt}
				widths={[319, 638]}
				sizes="(min-width: 64rem) 20rem, 90vw"
				class="mx-auto h-auto w-full max-w-80 shrink-0 lg:mx-0"
			/>
		</div>
	</Container>
</section>