<script lang="ts">
	import { reveal } from '$lib/actions/reveal';
	import LazyLoadingImg from './LazyLoadingImg.svelte';
	import webDev from '$lib/assets/seenOn/webDev.webp';
	import atadventWorkshop from '$lib/assets/seenOn/atadventWorkshop.webp';
	type Appearance = {
		title: string;
		description: string;
		image: string;
		href: string;
		platform: string; // e.g. 'YouTube', 'Talk', 'Podcast'
		action?: string; // e.g. 'Watch', 'Listen'
	};

	const appearances: Appearance[] = [
		{
			title: 'CodeTV Web Dev Challenge with ATproto',
			description:
				'I was on an episode of CodeTV where me and 5 others rebuilt our personal websites (again) but using ATproto.',
			image: webDev,
			href: 'https://www.youtube.com/watch?v=S-XytKfGCO8',
			platform: 'YouTube',
			action: 'Watch'
		},
		{
			title: 'at://advent, an atproto adventure',
			description:
				'Me and Fig hosted a workshop at the Atmosphere Conf 2026 where we showed off at://advent, an atproto adventure and a fun way for developers to learn atproto.',
			image: atadventWorkshop,
			href: 'https://advent.codes/',
			platform: 'Workshop',
			action: 'Learn'
		}
	];

	const INITIAL_COUNT = 4;
	const LOAD_STEP = 2;
	let visibleCount = $state(INITIAL_COUNT);
	const visibleAppearances = $derived(appearances.slice(0, visibleCount));
	const hasMore = $derived(visibleCount < appearances.length);
</script>

<div id="as-seen-on" class="mt-10 flex flex-col items-center justify-center md:mt-20" use:reveal>
	<div class="flex flex-col items-center justify-center">
		<h1 class="text-center font-urbanist text-2xl font-semibold md:text-5xl">As Seen On</h1>
		<span class="text-md mt-2 px-2 text-center font-urbanist md:mt-4 md:px-5 md:text-xl">
			Talks, videos, and places I've shown up.
		</span>
	</div>
	<div class="container mt-10 grid gap-10 p-4 md:grid-cols-2 xl:grid-cols-3">
		{#each visibleAppearances as item (item.title)}
			<div class="card bg-base-100 shadow-sm transition duration-300 hover:-translate-y-1">
				<figure>
					<LazyLoadingImg class="h-48 w-full" src={item.image} alt={item.title} />
				</figure>
				<div class="card-body">
					<div class="badge font-urbanist badge-secondary">{item.platform}</div>
					<h2 class="card-title font-urbanist text-2xl font-black">{item.title}</h2>
					<p class="text-md font-urbanist font-medium opacity-60">{item.description}</p>
					<div class="mt-2 card-actions justify-end">
						<a
							class="btn font-urbanist btn-primary"
							href={item.href}
							target="_blank"
							rel="noopener noreferrer"
						>
							{item.action ?? 'Watch'}
						</a>
					</div>
				</div>
			</div>
		{/each}
	</div>
	{#if hasMore}
		<button
			class="btn mt-10 font-urbanist btn-primary"
			onclick={() => (visibleCount = Math.min(visibleCount + LOAD_STEP, appearances.length))}
		>
			Load More
		</button>
	{/if}
</div>
