<script lang="ts">
	import ArrowRight from '$icon/arrow-right';

	const activityCards = [
		{ left: 'created', right: 'new-knot', x: 'left-[8%]', y: 'top-[28%]', width: 'w-48' },
		{ left: 'starred', right: 'tiny-compiler', x: 'left-[22%]', y: 'top-[62%]', width: 'w-72' },
		{ left: 'opened', right: 'stacked-prs', x: 'left-[48%]', y: 'top-[45%]', width: 'w-80' },
		{ left: 'merged', right: 'microvm-ci', x: 'left-[66%]', y: 'top-[20%]', width: 'w-72' },
		{ left: 'followed', right: 'self-hosted', x: 'left-[75%]', y: 'top-[58%]', width: 'w-64' }
	];

	const ticks = Array.from({ length: 160 }, (_, index) => index);
</script>

{#snippet marketingButton(label: string, showArrow: boolean, className: string)}
	<button
		class="inline-flex cursor-pointer items-center justify-center gap-2 rounded border border-success-border bg-success px-4 py-2 text-base font-medium text-success-fg hover:bg-success-hover {className}"
		type="submit"
	>
		{label}
		{#if showArrow}
			<ArrowRight class="size-4" aria-hidden="true" />
		{/if}
	</button>
{/snippet}

{#snippet signupForm(
	id: string,
	label: string,
	showArrow: boolean,
	formClass: string,
	buttonClass: string
)}
	<form class={formClass} method="get" action="/signup">
		<label class="sr-only" for={id}>Email</label>
		<input
			{id}
			type="email"
			name="id"
			required
			placeholder="Enter your email"
			class="min-w-0 flex-1 rounded border border-border-strong bg-surface px-3 py-2 text-base text-fg placeholder:text-fg-faint focus:border-fg-subtle focus:outline-none"
		/>
		{@render marketingButton(label, showArrow, buttonClass)}
	</form>
{/snippet}

<section class="overflow-hidden px-6 pb-24 pt-28 md:pb-32 md:pt-36">
	<div class="mx-auto grid max-w-screen-xl grid-cols-1 items-center gap-14 md:grid-cols-2">
		<h1
			class="text-6xl font-bold leading-[0.98] tracking-[-0.05em] text-fg-strong md:text-7xl lg:text-8xl"
		>
			tightly-knit<br />social coding.
		</h1>

		<div class="max-w-2xl space-y-6 text-xl leading-8 text-fg">
			<p>The next-generation social coding platform.</p>
			<p>
				We envision a place where developers have ownership of their code, communities can freely
				self-govern and most importantly, coding can be social and fun again.
			</p>
			{@render signupForm('hero-email', 'Join now', true, 'flex max-w-lg gap-2', '')}
		</div>
	</div>

	<div class="relative mx-auto mt-28 hidden h-72 max-w-screen-xl md:block" aria-hidden="true">
		<div class="absolute inset-x-0 bottom-10 flex items-end gap-[5px] opacity-35">
			{#each ticks as tick (tick)}
				<span class="h-4 w-px bg-border-strong" class:h-7={tick % 24 === 0}></span>
			{/each}
		</div>
		<div class="absolute inset-x-0 bottom-14 h-px bg-border"></div>
		{#each activityCards as card, index (card.right)}
			<div
				class={`activity-card absolute ${card.x} ${card.y} ${card.width} overflow-hidden rounded border border-border-strong bg-surface/95 text-sm text-fg-muted shadow-2xl`}
			>
				<div class="flex items-center gap-2 border-l border-border-strong px-4 py-3">
					<span class="size-5 rounded-full bg-orange-300/90"></span>
					<span class="text-fg-subtle">{card.left}</span>
					<span class="font-medium text-fg">{card.right}</span>
				</div>
				<div class="mx-auto h-20 w-px bg-border" class:hidden={index === 0}></div>
			</div>
		{/each}
	</div>
</section>

<section class="px-6 py-28 md:py-40">
	<div class="mx-auto flex max-w-3xl flex-col items-center text-center">
		<h2 class="text-5xl font-bold tracking-[-0.04em] text-fg-strong md:text-6xl">
			Stay in the loop
		</h2>
		<p class="mt-6 max-w-2xl text-xl leading-8 text-fg-muted">
			We've got a newsletter. Punch in your email to stay updated on what we're shipping at Tangled.
		</p>
		{@render signupForm(
			'newsletter-email',
			'Subscribe',
			false,
			'mt-8 flex w-full max-w-lg rounded border border-border-strong bg-surface p-2',
			'ml-2'
		)}
	</div>
</section>

<style>
	.activity-card {
		--marketing-card-shadow: rgb(229 231 235 / 0.6);
		--tw-shadow-color: var(--marketing-card-shadow);
	}

	@media (prefers-color-scheme: dark) {
		.activity-card {
			--marketing-card-shadow: rgb(3 7 18 / 0.3);
		}
	}
</style>
