<script lang="ts">
	import GoogleButton from '$lib/components/GoogleButton.svelte';
</script>

<svelte:head>
	<title>CodeQuest</title>
</svelte:head>

<div class="relative overflow-hidden min-h-[70vh]">
	<div class="max-w-7xl mx-auto">
		<div
			class="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-lg lg:w-full lg:pb-28 xl:max-w-xl xl:pb-32 "
		>
			<main
				class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28"
			>
				<div class="sm:text-center lg:text-left">
					<h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl">
						<div class="hidden lg:block">
							<span class="block">Solve Some Problems</span>
							<span class="block text-indigo-600">Hone Your Skills</span>
						</div>
					</h1>
					<p
						class="mt-3 text-base text-gray-500 text-center lg:text-left
            sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-lg lg:mx-0"
					>
						CodeQuest is a challenge of 10 different programming puzzles.
						<br />
						Designed to be open and accessible to all.
						<br />
						Open to <i>any</i> language and technology you like.
					</p>
					<div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
						<div class="rounded-md shadow w-48 md:w-auto mx-auto md:m-0">
							<a href="#details" class="btn px-8 py-3 md:px-10 md:py-4 text-lg rounded">
								Learn More
							</a>
						</div>
					</div>
				</div>
			</main>
		</div>
	</div>
	<div class="lg:absolute lg:inset-y-0 lg:right-3 lg:w-1/2">
		<img
			class="h-56 w-full object-fit sm:h-72 md:h-96 lg:w-full lg:h-full"
			src="/undraw_code_inspection.svg"
			alt=""
		/>
	</div>
</div>

<section class="slant bg-indigo-200">
	<div class="wrapper">
		<div
			id="details"
			class="container mx-auto md:min-h-[40vh] p-12 md:p-0 md:flex items-center justify-evenly flex-row-reverse gap-12 lg:gap-8"
		>
			<div class="mt-8 md:mt-8 w-full md:max-w-sm lg:max-w-lg">
				<div class="text-center md:text-left">
					<h1 class=" tracking-tight font-semibold text-gray-900 text-3xl flex items-center">
						How it Works
						<!-- prettier-ignore -->
						<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 mt-[5px] ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
            </svg>
					</h1>
				</div>
				<p class="lg:text-lg font-medium mt-2">
					CodeQuest is not like most other programming competitions. Instead, it is heavily inspired
					by the <a href="https://adventofcode.com">Advent of Code </a>. Instead of submitting code
					which will be tested and evaluated by CodeQuest, <i>only your final answers</i> will be
					validated to an input you can inspect and verify.
					<br /> <br />
					This is an opportunity for you to use tools that
					<strong>you enjoy</strong>, and demonstrate your skills and expertise.
				</p>
				<a class="flex items-center mt-2" href="/about">
					Learn More
					<!-- prettier-ignore -->
					<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mt-[2px]" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" /> </svg>
				</a>
			</div>
			<div class="mt-16 md:mt-8">
				<img
					class="w-96 object-fit md:w-96 lg:h-80 lg:h-full lg:max-w-lg md:scale-x-[-1]"
					src="/undraw_thought_process.svg"
					alt=""
				/>
			</div>
		</div>
	</div>
</section>

<section class="bg-indigo-100 pt-[7vw]">
	<div
		class="container mx-auto lg:min-h-[40vh] p-12 md:p-0 lg:flex items-end justify-evenly gap-12 lg:gap-8"
	>
		<div class="mt-8 w-full md:max-w-lg mx-auto lg:mx-0 lg:max-w-lg">
			<div class="text-center lg:text-left">
				<h1
					class=" tracking-tight font-semibold text-gray-900 text-3xl flex items-center flex gap-2"
				>
					Details
					<!-- prettier-ignore -->
					<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 mt-.5 ml-1" viewBox="0 0 20 20" fill="currentColor"> <path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" /> <path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z" /> </svg>
				</h1>
			</div>
			<p class="lg:text-lg font-medium mt-2">
				<strong>CodeQuest</strong> will be hosted on Friday, April 29 in F-201. We highly encourage everyone
				to join. The entire competition will take place over approximately 2 hours, where we will spend
				10-15 minutes preparing and geting ready, before the competition of 90 minutes will start. Please
				try to get here by 15:15 so we can finish by 5pm!
			</p>
			<a class="flex items-center mt-2" href="/#">
				Calendar Invite
				<!-- prettier-ignore -->
				<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mt-[2px]" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" /> </svg>
			</a>
		</div>
		<div class="mt-8 w-full md:max-w-lg mx-auto lg:mx-0 lg:max-w-lg">
			<div class="text-center lg:text-left">
				<h1
					class="tracking-tight font-semibold text-gray-900 text-3xl flex items-center gap flex-2"
				>
					Contest Prizes
					<!-- prettier-ignore -->
					<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 mt-.5 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" /> </svg>
				</h1>
			</div>
			<p class="lg:text-lg font-medium mt-2">
				While we encourage everyone to join and have fun, prizes will be awarded. We want to
				recognize, promote, and encourage students who have cultivated their programming skills both
				within class, and outside of school.
				<br />
			</p>
			<div class="mt-2">
				<strong>Top 3 Performance Prizes</strong>
				<ol class="list-decimal  font-medium ml-6">
					<li>IDR 350,000</li>
					<li>IDR 125,000</li>
					<li>IDR 75,000</li>
				</ol>
			</div>
			<a class="flex items-center mt-2" href="/about">
				Learn More
				<!-- prettier-ignore -->
				<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mt-[2px]" viewBox="0 0 20 20" fill="currentColor" > <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" /> </svg>
			</a>
		</div>
	</div>

	<hr class="border-indigo-400 border-2 max-w-xs mx-auto my-12 lg:my-24" />

	<div class="mt-8 md:mt-8 w-full md:max-w-sm lg:max-w-lg mx-auto">
		<h1 class="text-center tracking-tight font-semibold text-gray-900 text-2xl">Join Now</h1>
		<p class="mt-2 pb-8 text-center">
			Log in with your JIS Email and join CodeQuest!
			<br />
			<br />
			<GoogleButton />
		</p>
	</div>
</section>

<style lang="postcss">
	.slant {
		clip-path: polygon(0 7vw, 0 100%, 100% calc(100% - 7vw), 100% 0);
		margin: 0 0 -7vw;
	}

	.slant .wrapper {
		padding: 9vw 0;
	}
</style>
