<script lang="ts">
	import { EVENT, FOOTER_LINKS } from '$lib/data/content';
	import TopoBackdrop from './TopoBackdrop.svelte';
	import StampBadge from './StampBadge.svelte';
</script>

<footer class="footer">
	<TopoBackdrop opacity={0.08} stroke="rgba(244,238,225,.4)" />
	<div class="wrap" style="position:relative">
		<div style="display:flex;justify-content:space-between;flex-wrap:wrap;gap:32px">
			<div style="max-width:340px">
				<div class="display" style="font-size:30px">BUILD SMALL</div>
				<p style="color:rgba(244,238,225,.7);margin-top:12px;font-size:14.5px">
					{EVENT.tagline} A Hugging Face × Gradio hackathon.
				</p>
				<div style="margin-top:18px"><StampBadge glyph="trees" accent="var(--amber)" size={68} /></div>
			</div>
			<div style="display:flex;gap:56px;flex-wrap:wrap">
				{#each FOOTER_LINKS as [heading, links] (heading)}
					<div>
						<div class="coord" style="color:rgba(244,238,225,.55);margin-bottom:14px">
							{heading.toUpperCase()}
						</div>
						<div style="display:flex;flex-direction:column;gap:10px">
							{#each links as [label, href] (label)}
								<a {href} style="color:rgba(244,238,225,.85);font-size:14.5px;width:fit-content">{label}</a>
							{/each}
						</div>
					</div>
				{/each}
			</div>
		</div>
		<hr class="dash-rule" style="margin:40px 0 22px;border-color:rgba(244,238,225,.22)" />
		<div style="display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px">
			<span class="coord" style="color:rgba(244,238,225,.5)">© 2026 Build Small · made small with love</span>
			<span class="coord" style="color:rgba(244,238,225,.5)">
				≤ {EVENT.paramCap} params · open weights · run it yourself
			</span>
		</div>
	</div>
</footer>
