src/lib/components/Prizes.svelte

<script lang="ts">
	import { EVENT, TRACKS, SPONSOR_PRIZES, BONUS_BADGES, PRIZE_FILTERS } from '$lib/data/content';
	import SectionHeader from './SectionHeader.svelte';
	import Icon from './Icon.svelte';
	import TrackPodium from './prizes/TrackPodium.svelte';
	import SponsorCard from './prizes/SponsorCard.svelte';
	import BonusBadge from './prizes/BonusBadge.svelte';

	let filter = $state('all');

	const showGeneral = $derived(['all', 'general'].includes(filter));
	const showSponsor = $derived(['all', 'sponsor'].includes(filter));
	const showBonus = $derived(['all', 'bonus'].includes(filter));
</script>

<section class="section" id="prizes">
	<div class="wrap">
		<div
			style="display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px"
		>
			<SectionHeader
				coord="04"
				eyebrow="The prize table"
				title="{EVENT.waysToWin} ways to win"
				lede="A $48k cash pool plus 20k Modal credits, two NVIDIA RTX GPUs and ChatGPT Pro — across track placements, sponsor challenges, and collectable bonus badges."
			/>
			<div style="display:flex;gap:18px;align-items:flex-end">
				<div>
					<div class="display" style="font-size:56px;color:var(--amber);line-height:1">$48k</div>
					<div class="coord">cash pool</div>
				</div>
				<div>
					<div class="display" style="font-size:56px;color:var(--forest);line-height:1">+{EVENT.waysToWin}</div>
					<div class="coord">ways to win</div>
				</div>
			</div>
		</div>

		<div class="prize-tabs" style="margin-top:36px;margin-bottom:36px">
			{#each PRIZE_FILTERS as f (f.id)}
				<button class="chip" data-on={filter === f.id} onclick={() => (filter = f.id)}>
					{f.label}
				</button>
			{/each}
		</div>

		<div style="display:flex;flex-direction:column;gap:56px">
			{#if showGeneral}
				<div>
					<div class="coord" style="margin-bottom:16px">GENERAL TRACK PRIZES · AWARDED PER TRACK</div>
					<div class="podium">
						{#each TRACKS as t (t.id)}
							<TrackPodium track={t} />
						{/each}
					</div>
				</div>
			{/if}

			{#if showSponsor}
				<div>
					<div class="coord" style="margin-bottom:16px">SPONSOR PRIZES · OWN CRITERIA PER PRIZE</div>
					<div class="sponsor-grid">
						{#each SPONSOR_PRIZES as s (s.id)}
							<div><SponsorCard {s} /></div>
						{/each}
					</div>
				</div>
			{/if}

			{#if showBonus}
				<div>
					<div
						class="coord"
						style="margin-bottom:16px;display:flex;align-items:center;gap:8px"
					>
						BONUS BADGES · TAP FOR DETAILS <Icon name="arrow" size={15} stroke="var(--ink-faint)" />
					</div>
					<div class="badge-grid">
						{#each BONUS_BADGES as b (b.id)}
							<div><BonusBadge {b} /></div>
						{/each}
					</div>
				</div>
			{/if}
		</div>
	</div>
</section>