---
import { Layout } from "@/layouts";

const links = [
	{
		label: "on bluesky",
		href: "https://bsky.app/profile/did:web:vt3e.cat",
	},
	{
		label: "on tangled (git)",
		href: "https://tangled.org/did:web:vt3e.cat",
	},
	{
		label: "on listenbrainz",
		href: "https://listenbrainz.org/user/aprvi",
	},
];

const testimonials = [
	{
		text: "you bring a very SSRI type of vibe to the function",
		author: "khls",
	},
];
---

<Layout>
	<Fragment slot="left">
		<img
			src="/kittens.jpg"
			alt="two small orange & white kittens huddled together on a white surface. there is white text overlay over each of the kittens, the first reads 'you are made of stardust', the last reads 'and i am made of dirt'. there is a date stamp in the bottom right corner, it says '04.04.2008'."
		/>
	</Fragment>
	<Fragment slot="right">
		<header class="page-head">
			<div class="title">
				<h1 class="title">apirl or whatever idk!!</h1>
				<p class="pronouns">fae/faer</p>
			</div>
			<p class="subtitle">
				stupid {"{rat,cat}"}girl frontend developer thing!
			</p>
		</header>

		<section>
			<header>
				<h2>links</h2>
				<p>find me . locate me .</p>
			</header>
			<div class="content links">
				{
					links.map((link) => (
						<a href={link.href} data-text={link.label}>
							{link.label}
						</a>
					))
				}
			</div>
		</section>

		<section>
			<header>
				<h2>testimonials</h2>
			</header>
			<div class="content testimonials">
				{
					testimonials.map((testimonial) => (
						<figure class="testimonial">
							<blockquote>
								<p>"{testimonial.text}"</p>
							</blockquote>
							<figcaption>
								<cite>{testimonial.author}</cite>
							</figcaption>
						</figure>
					))
				}
			</div>
		</section>
	</Fragment>
</Layout>

<style scoped>
	.testimonials {
		display: flex;
		flex-direction: column;
		gap: 1.25rem;
	}

	figure.testimonial {
		display: inline-flex;
		flex-direction: column;

		blockquote {
			p {
				position: relative;
				color: hsl(var(--text));
				line-height: 1;
			}
		}

		figcaption {
			cite {
				font-style: normal;
				font-weight: 600;
				font-size: 0.875rem;
				color: hsl(var(--subtext0));
				line-height: 1;

				&::before {
					content: "— ";
					color: hsl(var(--overlay1));
				}
			}
		}
	}
</style>