---
import CheckIcon from '@/assets/icons/check.svg';
import { t } from '@/i18n';
import Section from '@/components/ui/Section.astro';

const { title, feature, paper, app, rows } = t.comparison;

const rowClass = 'flex h-13.75 items-center';
const headClass = 'flex h-12.5 items-start';
---

<Section id="osszehasonlitas" title={title}>
	{/* Mobile: one card per feature. */}
	<ul class="flex flex-col gap-2.5 lg:hidden">
		{
			rows.map((row) => (
				<li class="flex flex-col gap-2.5">
					<h3 class="font-semibold uppercase">{row.label}</h3>
					<dl class="grid grid-cols-[45fr_55fr]">
						<div class="flex flex-col rounded-l-tag bg-ink/8 py-2.5 pr-2.5 pl-5">
							<dt class="text-sm font-light text-muted">{paper}</dt>
							<dd class="font-semibold">{row.paper}</dd>
						</div>
						<div class="flex flex-col rounded-r-tag bg-ink py-2.5 pr-2.5 pl-5 text-white">
							<dt class="text-sm font-light">{app}</dt>
							<dd class="flex items-center gap-1.5 font-semibold">
								<CheckIcon class="size-5 shrink-0 text-mint" aria-hidden="true" />
								{row.appShort}
							</dd>
						</div>
					</dl>
				</li>
			))
		}
	</ul>

	{/* Desktop: a three-column table with a dark highlighted column. */}
	<div class="relative hidden overflow-hidden rounded-card border border-ink/20 bg-white lg:block">
		<div class="bg-violet-glow absolute inset-y-0 right-0 w-[40.5%] [--glow-x:100%] [--glow-y:100%]" aria-hidden="true"></div>
		<table class="relative w-full table-fixed text-xl font-medium">
			<colgroup>
				<col class="w-[24.5%]" />
				<col class="w-[35%]" />
				<col class="w-[40.5%]" />
			</colgroup>
			<thead class="text-2xl">
				<tr>
					<th scope="col" class="pt-5 pl-10 text-left">
						<div class:list={[headClass, 'border-b border-ink/20']}><span class="sr-only">{feature}</span></div>
					</th>
					<th scope="col" class="pt-5 text-left font-medium">
						<div class:list={[headClass, 'border-b border-ink/20 pr-1.5']}>{paper}</div>
					</th>
					<th scope="col" class="pt-5 pr-5 pl-10 text-left font-medium text-white">
						<div class:list={[headClass, 'border-b border-white/20']}>{app}</div>
					</th>
				</tr>
			</thead>
			<tbody>
				{
					rows.map((row, index) => {
						const last = index === rows.length - 1;
						return (
							<tr>
								<th scope="row" class:list={['pl-10 text-left font-medium', last && 'pb-5']}>
									<div class:list={[rowClass, !last && 'border-b border-ink/20']}>{row.label}</div>
								</th>
								<td class:list={[last && 'pb-5']}>
									<div class:list={[rowClass, 'pr-1.5', !last && 'border-b border-ink/20']}>{row.paper}</div>
								</td>
								<td class:list={['pr-5 pl-10 text-white', last && 'pb-5']}>
									<div class:list={[rowClass, 'gap-6.25', !last && 'border-b border-white/20']}>
										<CheckIcon class="size-5 shrink-0 text-mint" aria-hidden="true" />
										{row.app}
									</div>
								</td>
							</tr>
						);
					})
				}
			</tbody>
		</table>
	</div>
</Section>