<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-border-success bg-background-success-emphasis px-4 py-2 text-base font-medium text-foreground-on-emphasis hover:bg-background-success-emphasis-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-background-default px-3 py-2 text-base text-foreground-default placeholder:text-foreground-placeholder focus:border-foreground-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-foreground-default 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-foreground-default">
			<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-default"></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-background-default/95 text-sm text-foreground-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-foreground-subtle">{card.left}</span>
					<span class="font-medium text-foreground-default">{card.right}</span>
				</div>
				<div class="mx-auto h-20 w-px bg-border-default" 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-foreground-default md:text-6xl">
			Stay in the loop
		</h2>
		<p class="mt-6 max-w-2xl text-xl leading-8 text-foreground-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-background-default 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>
