<script lang="ts">
	import { reveal } from '$lib/actions/reveal';
	import LazyLoadingImg from './LazyLoadingImg.svelte';
	import me from '$lib/assets/me.webp';
	import mePumpkin from '$lib/assets/me_pumpkin.webp';
	import GitHubButton from './buttons/GitHubButton.svelte';
	import TangledButton from './buttons/TangledButton.svelte';
</script>

<div id="home" class="hero flex justify-center py-10" use:reveal>
	<div class="hero-content flex-col lg:flex-row-reverse">
		<LazyLoadingImg
			src={me}
			alt=""
			class="max-w-xs rounded-t-[14rem] rounded-b-box shadow-2xl outline outline-base-content/5 md:max-w-md"
			imgClass="block w-full"
		/>
		<div class="text-center lg:text-start">
			<!-- <span class="badge badge-outline badge-lg">Award winning digital agency</span> -->
			<h1 class="font-urbanist text-3xl font-black uppercase md:text-7xl">
				Bailey Townsend
				<!-- <span class="text-base-content/30"> for ambitious brands</span> -->
			</h1>
			<p class="py-6 font-urbanist lg:max-w-lg">
				Bandaid Engineer and open source software developer. I work mostly with <a
					class="link"
					href="https://atproto.com">atproto</a
				>, as well as a hobbyist with embedded firmwares in Rust 🦀. Sometimes serious, mostly just
				killing time.
			</p>
			<div class="grid grid-cols-2 gap-1 max-lg:justify-center md:grid-cols-3 md:gap-2">
				<a
					href="https://bsky.app/profile/pds.dad"
					class="btn rounded-full text-xl font-bold not-italic btn-ghost md:btn-lg"
				>
					<svg fill="none" viewBox="0 0 64 57" width="28" style="width:28px;height:24.9375px;"
						><path
							fill="#0085ff"
							d="M13.873 3.805C21.21 9.332 29.103 20.537 32 26.55v15.882c0-.338-.13.044-.41.867-1.512 4.456-7.418 21.847-20.923 7.944-7.111-7.32-3.819-14.64 9.125-16.85-7.405 1.264-15.73-.825-18.014-9.015C1.12 23.022 0 8.51 0 6.55 0-3.268 8.579-.182 13.873 3.805ZM50.127 3.805C42.79 9.332 34.897 20.537 32 26.55v15.882c0-.338.13.044.41.867 1.512 4.456 7.418 21.847 20.923 7.944 7.111-7.32 3.819-14.64-9.125-16.85 7.405 1.264 15.73-.825 18.014-9.015C62.88 23.022 64 8.51 64 6.55c0-9.818-8.578-6.732-13.873-2.745Z"
						></path></svg
					>
					pds.dad
				</a>
				<a
					href="https://tangled.org/pds.dad"
					class="btn rounded-full font-urbanist font-light btn-ghost md:btn-lg"
				>
					<TangledButton />
				</a>

				<a
					href="https://github.com/fatfingers23"
					class="btn rounded-full text-xl font-bold not-italic btn-ghost md:btn-lg"
				>
					<GitHubButton />
					GitHub
				</a>
			</div>
		</div>
	</div>
</div>
