---
import { LinkList, ProjectCard, UsesCard } from "@/components";
import { LANGUAGES as LANG } from "@/constants";
import { Layout } from "@/layouts";

import type { Link, Project, UsesCategory } from "@/types";

const links: Link[] = [
	{
		title: "tangled (git)",
		href: "https://tangled.org/did:web:vt3e.cat",
	},
	{
		title: "bluesky",
		href: "https://witchsky.app/profile/did:web:vt3e.cat",
	},
];

const projects: Project[] = [
	{
		name: "bluebell",
		description: "a pretty client for bluesky on the web.",
		links: {
			live: "https://bbell.vt3e.cat",
			source: "https://tangled.org/bbell.vt3e.cat",
		},
		languages: [LANG.Vue, LANG.TypeScript],
	},
	{
		name: "website",
		description: "this website!!",
		links: {
			source: "https://tangled.org/vt3e.cat/catsite",
		},
		languages: [LANG.Astro, LANG.TypeScript],
	},
	{
		name: "flake",
		description: "my nix flake used on my server & desktop.",
		links: {
			source: "https://tangled.org/vt3e.cat/flake",
		},
		languages: [LANG.Nix],
	},
	{
		name: "cmd",
		description: "a fully typesafe, lighweight cli framework",
		links: {
			source: "https://git.vt3e.cat/cmd.git",
		},
		languages: [LANG.TypeScript],
	},
];

const uses: UsesCategory[] = [
	{
		title: "desktop",
		description: "my desktop setup that is really fast (not!) and usable",
		items: [
			{ label: "purpose", value: "desktop" },
			{ label: "operating system", value: "nixos 26.05" },
			{ label: "ram", value: "16gb" },
			{ label: "cpu", value: "intel core i5-3470" },
			{ label: "gpu", value: "rx 6400" },
		],
	},
	{
		title: "ivy",
		description: "my home server",
		items: [
			{ label: "purpose", value: "server" },
			{ label: "operating system", value: "nixos 26.05" },
			{ label: "model", value: "hp proliant dl360 g9" },
			{ label: "ram", value: "48gb" },
			{ label: "cpu", value: "intel xeon e5-2620 v4 x2" },
		],
	},
	{
		title: "phone",
		description: "my daily driver phone",
		items: [
			{ label: "model", value: "pixel 9a", subtext: "google" },
			{ label: "os", value: "android 16" },
		],
	},
	{
		title: "software",
		description: "the software i use",
		items: [
			{
				label: "theme",
				value: "evergarden",
				link: "https://evergarden.moe/",
			},
			{
				label: "editor",
				value: "zed",
				link: "https://zed.dev/",
			},
			{
				label: "terminal",
				value: "foot",
				link: "https://codeberg.org/dnkl/foot",
			},
			{
				label: "browser",
				value: "firefox",
			},
			{
				label: "window manager",
				value: "sway",
			},
			{
				label: "shell",
				value: "fish",
				link: "https://fishshell.com/",
			},
		],
	},
];
---

<Layout>
	<header class="page-head">
		<div class="title">
			<h1>viii</h1>
			<p class="pronouns">it/she</p>
		</div>
		<p class="subtitle">
			demifem {"{rat,cat}"}girl frontend developer thing!
		</p>
	</header>

	<section class="links">
		<header><h2>links</h2></header>
	    <LinkList links={links} />
	</section>

	<section class="projects">
		<header>
			<h2>projects</h2>
			<p>some things that are public that i am working on!</p>
		</header>
		<div class="project-list">
			{projects.map((project) => <ProjectCard project={project} />)}
		</div>
	</section>

	<section class="uses">
    	<header>
    		<h2>uses</h2>
    		<p>things that i use!</p>
    	</header>

        <div class="uses-list">
            {uses.map((category) => <UsesCard category={category} />)}
        </div>
	</section>

</Layout>

<style>
	.links ul {
		display: inline-flex;
		flex-direction: column;
		gap: 0.5rem;
		list-style: none;

		li {
			margin-left: 2ch;
		}

		a {
			--fg: var(--subtext1);

			display: inline-flex;
			align-items: center;
			gap: 1ch;

			font-size: 1.25rem;
			font-weight: 500;

			svg {
				width: 1.5rem;
				height: 1.5rem;
			}
		}
	}

	.projects .project-list,
	.uses .uses-list {
		border-radius: 1.5rem;
		overflow: hidden;
		border: 2px solid hsla(var(--overlay0) / 0.25);

		margin-top: 0.75rem;
		display: flex;
		flex-direction: column;
		background-color: hsl(var(--container-bg));

		.project:first-child,
		.uses-category:first-child {
			padding-top: 0.75rem;
		}

		.project:not(:last-child),
		.uses-category:not(:last-child) {
			border-bottom: 2px solid hsla(var(--overlay0) / 0.25);
		}

		.uses-category:last-child .items.item :last-child {
			padding-bottom: 0.75rem;
		}

		/*margin-left: -0.5rem;
        margin-right: -0.5rem;*/
	}
</style>