<script>
	import { fade } from 'svelte/transition';
	import { MetaTags } from 'svelte-meta-tags';

	let about = [
		{
			id: 1,
			title: 'History',
			photo: 'history.jpg',
			link: '/about/history',
			description:
				' The Afghanistan Cricket Federation was established in 1995. It was granted affiliate membership by  the International Cricket Council (ICC) in 2001 and this year marked the beginning of an incredible journey in the history of sports, and subsequently being granted associate membership of the Asian Cricket Council (ACC) in 2003.'
		},
		{
			id: 2,
			title: 'Chairman Office',
			photo: 'chairman.jpg',
			link: '/about/chairman-office',
			description:
				' Pride and pleasure are linked to national players.  They have done a lot for the country, the journey continues and they are bringing more pride to the country and the nation.\n' +
				'\n' +
				'In the meetings that I have attended so far with other members of the ICC and ACC, I have always strived to speak for Afghanistan to be acknowledged for its true worth because ACB is still given the funds and/or grants by the ICC as we received prior to our Full membership. '
		},
		{
			id: 3,
			title: 'CEO Office',
			photo: 'CEO.jpg',
			link: '/about/ceo-office',
			description:
				' Pride and pleasure are linked to national players.  They have done a lot for the country, the journey continues and they are bringing more pride to the country and the nation.\n' +
				'\n' +
				'In the meetings that I have attended so far with other members of the ICC and ACC, I have always strived to speak for Afghanistan to be acknowledged for its true worth because ACB is still given the funds and/or grants by the ICC as we received prior to our Full membership. '
		},

		{
			id: 4,
			title: 'Board Members',
			photo: 'board-members.jpg',
			description:
				" The ACB stands as the pivotal institution driving the growth and development of cricket within the nation's borders. Comprising a diverse array of dedicated board members, the ACB's leadership team brings together a wealth of expertise from both the cricketing arena and administrative realms. These visionary members collectively steer the board's strategic decisions, ensuring the sport's flourishing future in Afghanistan. Their tireless commitment to fostering talent, expanding infrastructure, and promoting cricket at all levels underscores their profound role in shaping the country's sporting landscape. With a keen eye on both international recognition and grassroots participation, the board members of ACB form an integral force, propelling Afghan cricket to new heights of achievement and global prominence."
		},
		{
			id: 5,
			title: 'Management Board',
			photo: 'management-board.png',
			description:
				"The Afghanistan Cricket Board's (ACB) Management Board embodies the driving force behind the operational and organizational facets of cricket within the nation. Comprising a skilled and forward-thinking group of professionals, this diverse team brings together expertise spanning from sports management to financial stewardship. Guided by a shared vision of enhancing the sport's footprint, the Management Board's strategic decisions and meticulous planning pave the way for successful tournaments, player development, and infrastructural growth. Their dynamic leadership ensures the smooth orchestration of cricketing events, nurturing talent, and fostering partnerships that bolster Afghanistan's presence on the global cricketing stage. As custodians of the sport's administration, the ACB Management Board plays a crucial role in elevating Afghan cricket to unprecedented levels of excellence and recognition."
		},
		{
			id: 6,
			title: 'acb publications',
			photo: 'acb-publications.jpg',
			description:
				' The Afghanistan Cricket Federation was established in 1995. It was granted affiliate membership by  the International Cricket Council (ICC) in 2001 and this year marked the beginning of an incredible journey in the history of sports, and subsequently being granted associate membership of the Asian Cricket Council (ACC) in 2003.'
		},
		{
			id: 7,
			title: 'ICC',
			photo: 'icc.jpg',
			description:
				' The Afghanistan Cricket Federation was established in 1995. It was granted affiliate membership by  the International Cricket Council (ICC) in 2001 and this year marked the beginning of an incredible journey in the history of sports, and subsequently being granted associate membership of the Asian Cricket Council (ACC) in 2003.'
		},
		{
			id: 8,
			title: 'Documents',
			link: '/about/laws-and-code-of-conducts',
			photo: 'documents.jpg',
			description:
				' The Afghanistan Cricket Federation was established in 1995. It was granted affiliate membership by  the International Cricket Council (ICC) in 2001 and this year marked the beginning of an incredible journey in the history of sports, and subsequently being granted associate membership of the Asian Cricket Council (ACC) in 2003.'
		}
	];
</script>

<MetaTags
	title="Afghanistan Cricket Board"
	titleTemplate="%s | About"
	description="The Afghanistan Cricket Federation was established in 1995. It was granted affiliate membership by the International Cricket Council (ICC) in 2001 and this year marked the beginning of an incredible journey in the history of sports, and subsequently being granted associate membership of the Asian Cricket Council (ACC) in 2003."
	canonical="https://acb.af/"
	openGraph={{
		type: 'website',
		url: 'https://acb.af',
		title: 'Afghanistan Cricket Board',
		description:
			'The Afghanistan Cricket Federation was established in 1995. It was granted affiliate membership by the International Cricket Council (ICC) in 2001 and this year marked the beginning of an incredible journey in the history of sports, and subsequently being granted associate membership of the Asian Cricket Council (ACC) in 2003.',
		images: [
			{
				url: 'https://cdn.cricket.af/logo-md.png',
				alt: 'Afghanistan Cricket Board',
				width: 800,
				height: 600,
				secureUrl: 'https://cdn.cricket.af/logo-md.png',
				type: 'image/jpeg'
			}
		],

		siteName: 'ACB'
	}}
	twitter={{
		site: 'https://acb.af',
		cardType: 'summary_large_image',
		title: 'Afghanistan Cricket Board',
		description:
			'The Afghanistan Cricket Federation was established in 1995. It was granted affiliate membership by the International Cricket Council (ICC) in 2001 and this year marked the beginning of an incredible journey in the history of sports, and subsequently being granted associate membership of the Asian Cricket Council (ACC) in 2003.',
		image: 'https://cdn.cricket.af/logo-md.png',
		imageAlt: 'Afghanistan Cricket Board'
	}}
	facebook={{
		appId: ''
	}}
/>

<div in:fade={{ duration: 300, delay: 0 }}>
	<section
		class=" mb-10 h-104 w-full bg-white bg-[url('/img/about/header.webp')] bg-cover bg-center pt-20"
	>
		<div
			class="h-full w-full bg-[url('/img/about/header-back-drop.webp')] bg-cover bg-center"
		></div>

		<div class=" m-auto flex h-92 max-w-6xl flex-col space-y-20">
			<div
				class="m-auto -mt-4 h-8 w-64 bg-red-600 text-center text-2xl font-bold text-white uppercase"
			>
				About the ACB
			</div>
		</div>
	</section>

	<section class="mb-20 w-full">
		<div class="m-auto flex max-w-6xl flex-col space-y-20">
			<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
				{#each about as ab (ab.id)}
					<a href={ab.link} class="p-5 md:p-0">
						<div
							class="relative h-80 w-full bg-cover bg-center md:h-72 md:w-100"
							style="background-image: url('/img/about/{ab.photo}')"
						>
							<div
								class="label absolute top-3 -left-[11px] z-10 w-52 rounded-tl rounded-tr rounded-br bg-sky-500 text-center text-2xl font-bold text-white uppercase before:border-b before:border-b-sky-600 md:text-lg
                    "
							>
								{ab.title}
							</div>
						</div>
						<div
							class="relative -top-10 left-4 w-full overflow-hidden bg-gradient-to-b from-blue-600 to-blue-900 px-3 py-2 text-justify text-2xl font-bold text-white md:w-100 md:text-lg"
						>
							<p class="line-clamp-4">
								{ab.description}
							</p>
						</div>
					</a>
				{/each}
			</div>
		</div>
	</section>
</div>

<style>
	.label::before {
		border-color: rgba(66, 214, 151, 0);
		border-bottom-color: #5084c4;
	}

	.label::before {
		position: absolute;
		bottom: -0.475rem;
		left: 3px;
		height: 0;
		width: 0;
		transform: rotate(45deg);
		content: ' ';
		pointer-events: none;
		border-width: 0.525rem;
	}
</style>
