<script>
	// import BottomBorder from "$lib/components/shared/BottomBorder.svelte";
	import ViewAllButton from '$lib/components/shared/ViewAllButton.svelte';
	import TopBorder from '$lib/components/shared/TopBorder.svelte';
	import { t, locale } from '$lib/translations.js';
</script>

<section class="sponsors mb-44 w-full bg-white px-4 pt-20 lg:px-0" style="direction: ltr;">
	<!--    <div class="relative">-->
	<!--        <div class="relative w-64 h-64 bg-red-500 rounded-full filter blur-2xl"></div>-->
	<!--        <div class="relative w-64 h-64 bg-green-500 rounded-full filter blur-2xl left-[12rem] bottom-[10rem]"></div>-->
	<!--        <div class="relative w-64 h-64 bg-yellow-500 rounded-full filter blur-2xl bottom-[20rem]"></div>-->
	<!--    </div>-->

	<div
		class=" items-right relative m-auto flex h-2 max-w-6xl justify-end ltr:flex-row rtl:flex-row-reverse"
	>
		<ViewAllButton
			label={$t('common.view-all')}
			link="/"
			bgColor="bg-red-600"
			iconColor="bg-sky-500"
			textColor="text-white"
		/>
	</div>
	<div class="m-auto flex h-14 max-w-6xl flex-col">
		<TopBorder
			title={$t('common.sponsors-and-partners')}
			textColor="text-sky-600"
			labelWidth="w-[35%]"
		/>
	</div>

	<div
		class=" bottom-[50rem] m-auto flex h-92 max-w-6xl flex-col space-y-20 {$locale !== 'en-US'
			? 'direction-rtl'
			: ''}"
	>
		<div class="grid grid-cols-2 border-b border-gray-300 pb-3">
			<div class="title flex w-full flex-row items-end font-medium text-blue-800 lg:w-60">
				<p class="font-bold uppercase">{$t('common.national-team-sponsor')}</p>
			</div>
			<div
				class="logos col-span-3 mt-4 flex w-full flex-row items-center justify-center space-x-4 pb-4"
			>
				<img src="/img/sponsors/supercola.png" class="h-12" alt="" />
			</div>
		</div>

		<div class="gird grid-cols-2 border-b border-gray-300">
			<div class="title flex w-full flex-row items-end font-medium text-blue-800 lg:w-60">
				<p class="font-bold uppercase">{$t('common.ACB-partners')}</p>
			</div>

			<div
				class="logos col-span-3 mt-4 grid w-full grid-cols-2 place-items-center gap-y-4 space-x-4 pb-4 lg:grid-cols-4"
			>
				<img src="/img/sponsors/kam-air.png" class="h-10" alt="Kam Air" />
				<img src="/img/sponsors/pario.png" class="h-10" alt="PARIO" />
				<img src="/img/sponsors/tyka.png" class="h-10" alt="TYKA" />
				<img src="/img/sponsors/afghan-telecom.png" class="h-10" alt="Afghan Telecom" />
			</div>
		</div>

		<div class="gird grid-cols-2 border-b border-gray-300">
			<div class="title flex w-full flex-row items-end font-medium text-blue-800 lg:w-60">
				<p class="font-bold uppercase">{$t('common.ACB-sponsors')}</p>
			</div>
			<div
				class="logos col-span-3 mt-4 flex w-full flex-row items-center justify-center space-x-4 pb-4"
			>
				<img src="/img/sponsors/dafanews.png" class="h-10" alt="dafaNEWS" />
			</div>
		</div>
	</div>

	<!--    <BottomBorder borderColor="border-gray-400" bgColor="bg-white"/>-->
</section>
