---
import { getCollection } from "astro:content";
import { Layout } from "@/layouts";
import { ProjectCard } from "@/components";

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

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

const projects = await getCollection("projects");
---

<Layout>
	<Fragment slot="left">
		<header class="page-head">
			<img
				src="/kittens.webp"
				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'."
			/>
			<div class="title">
				<h1 class="name">apirl</h1>
				<h2 class="name-ext">or whatever idk!!</h2>
				<p class="pronouns">fae/faer</p>
			</div>
			<p class="subtitle">
				stupid {"{rat,cat}"}girl frontend developer thing!
			</p>
		</header>
	</Fragment>

	<Fragment slot="right">
		<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>projects</h2>
			</header>
			<div class="content projects">
				{
					projects.map((project) => (
						<ProjectCard page={project.id} project={project.data} />
					))
				}
			</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>
	.testimonials {
		display: flex;
		flex-direction: column;
		gap: 1.25rem;
	}

	figure.testimonial {
		display: 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));
			}
		}
	}

	.projects {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}
</style>