/**
 * Copyright (c) 2025 misties
 * SPDX-License-Identifier: AGPL-3.0-or-later
 */

import { define } from "../utils.ts";
import Time from "../islands/Time.tsx";
import Rain from "../islands/Rain.tsx";
import { Centered, Section } from "../components/Layout.tsx";
import Title from "../components/Title.tsx";
import TintedImage from "../components/Tinted.tsx";
import Link from "../components/Link.tsx";
import Header from "../components/Header.tsx";
import Footer from "../components/Footer.tsx";
import Box from "../components/Box.tsx";
import Meow from "../islands/Meow.tsx";
import Name from "../islands/Name.tsx";
import Code from "../islands/Code.tsx";
import {
	AttachmentIcon,
	BitcoinCashIcon,
	BitcoinIcon,
	BlueskyIcon,
	CodebergIcon,
	CommentIcon,
	DiscordIcon,
	EthereumIcon,
	ForgejoIcon,
	GitHubIcon,
	GitHubSponsorsIcon,
	HeartIcon,
	KofiIcon,
	LabelIcon,
	LastfmIcon,
	LitecoinIcon,
	MailIcon,
	MoneroIcon,
	NanoIcon,
	SignalIcon,
	TwitterIcon,
} from "../components/Icon.tsx";

export default define.page(() => {
	return (
		<>
			<Rain />
			<Centered>
				<Header />
				<Section>
					<Title>
						<HeartIcon class="icon" />
						About me
					</Title>
					<p class="alt">
						<small>
							<i>
								uhhhhh g'day, name's laura and i go by she/her pronouns and i'm
								a veeeery sweet <s>autist</s>{" "}
								girl passionate about free software!! ty for your time ^^
							</i>
						</small>
					</p>
					<p class="intro">
						Advocate for open access to information and knowledge and aspiring
						electrical engineer with complementary interests in systems
						programming and linguistics.
					</p>
					<p class="intro">
						On the side, I maintain a modest FreeBSD server where I self-host
						this website and various services. This is nothing particularly
						impressive, just a growing curiosity about systems administration.
						Service status and uptime available{" "}
						<Link href="https://glance.acpi.at">here</Link>.
					</p>
					<Time />
				</Section>
				<Section>
					<Title>
						<LabelIcon class="icon" />
						Links
					</Title>
					<div>
						<Title level={2}>Social platforms</Title>
						<ul class="labeled-icons">
							<li>
								<Box as="a" href="https://bsky.app/profile/acpi.at">
									<BlueskyIcon /> @acpi.at
								</Box>
							</li>
							<li>
								<Box as="a" href="https://last.fm/user/auwora">
									<LastfmIcon /> @auwora
								</Box>
							</li>
						</ul>
					</div>
					<div>
						<Title level={2}>Software and code</Title>
						<ul class="labeled-icons">
							<li>
								<Box as="a" href="https://git.acpi.at/w">
									<ForgejoIcon /> w
								</Box>
							</li>
							<li>
								<Box as="a" href="https://codeberg.org/ex">
									<CodebergIcon /> ex
								</Box>
							</li>
							<li>
								<Box as="a" href="https://github.com/misties">
									<GitHubIcon /> misties
								</Box>
							</li>
						</ul>
					</div>
					<div>
						<Title level={2}>Congenial folks</Title>
						<ul class="labeled-icons b88x31">
							<li>
								<Meow />
							</li>
							<li>
								<a href="https://worf.win">
									<img src="https://worf.win/images/worfwin.gif" alt="worf" />
								</a>
							</li>
							<li>
								<a href="https://codeberg.org/paige">
									<img src="/88x31/paige.gif" alt="paige" />
								</a>
							</li>
							<li>
								<a href="https://mugman.tech">
									<img src="https://mugman.tech/88x31/me.gif" alt="mugman" />
								</a>
							</li>
							<li>
								<a href="https://f.dog">
									<img
										src="https://x86.pet/~strawberry/june_88x31.png"
										alt="june"
									/>
								</a>
							</li>
							<li>
								<a
									rel="noopener"
									referrerpolicy="strict-origin"
									href="https://rushii.dev"
								>
									<img
										src="https://rushii.dev/88x31/rushii.webp"
										alt="rushii's site"
									/>
								</a>
							</li>
							<li>
								<a href="https://www.juwuba.xyz">
									<img src="https://www.juwuba.xyz/88x31.gif" alt="Júlia" />
								</a>
							</li>
							<li>
								<a href="https://katelyn.moe/">
									<img src="https://katelyn.moe/8831.png" alt="katelyn" />
								</a>
							</li>
							<li>
								<a href="https://meow-d.github.io">
									<img src="/88x31/meow_d.webp" alt="meow_d" />
								</a>
							</li>
							<li>
								<a href="https://caitlyn.moe">
									<img src="https://caitlyn.moe/88x31.png" alt="caitlyn" />
								</a>
							</li>
						</ul>
					</div>
				</Section>
				<Section>
					<Title>
						<CommentIcon class="icon" />
						Contact
					</Title>
					<p class="intro">
						Feel free to reach out through any of the platforms listed above.
						For email correspondence, you can reach me at{" "}
						<Code>base64 -d &lt;&lt;&lt; bXV4QGFjcGkuYXQK</Code>.
					</p>
					<p class="intro">
						Psst! When discussing sensitive matters over email or other insecure
						communication channels, I'd really appreciate it if you could
						encrypt your message with my{" "}
						<Link href="/pgp-key.asc">PGP key</Link> (fingerprint:{" "}
						<Code>AC14 9A39 5013 C572 CA74 8799 BCD2 117C 99E6 9817</Code>).
					</p>
					<div>
						<Title level={2}>Communication</Title>
						<ul class="labeled-icons">
							<li>
								<Box as="a" href="https://discord.com/users/797566974024351745">
									<DiscordIcon /> @wwwife
								</Box>
							</li>
							<li>
								<Box
									as="a"
									href="https://signal.me/#eu/yT8nprAP8x3r7RwHXKKMEiSirvd1OJ7azkDBbtE7_ICqtKH-z_NM7Kqv13e9hiv-"
								>
									<SignalIcon /> @laura.120
								</Box>
							</li>
						</ul>
					</div>
					<hr />
					<p class="intro">
						If you enjoy throwing money at people on the internet, please
						consider me! It keeps the server alive, fuels my tinkering with
						esoteric technology, and helps me navigate some rough financial
						patches and stay afloat while things are tight.
					</p>
					<div>
						<Title level={2}>Donations</Title>
						<ul class="labeled-icons full">
							<li>
								<Box as="a" href="https://ko-fi.com/west" title="Ko-fi">
									<KofiIcon /> west
								</Box>
							</li>
							<li>
								<Box
									as="a"
									href="https://github.com/sponsors/misties"
									title="GitHub Sponsors"
								>
									<GitHubSponsorsIcon /> misties
								</Box>
							</li>
							<li>
								<Box as="span" title="Monero (XMR)">
									<MoneroIcon />{" "}
									456tmp4CU158sV95Pjh75QfMcANNsRCFTdpmc86G31eKg9urvcYunnuBVyUmazAbuihUXwRDVojkhFTbzg6X2GuAJ7t3MCT
								</Box>
							</li>
							<li>
								<Box as="span" title="Litecoin (LTC)">
									<LitecoinIcon /> ltc1ql30jtr2r0pkr0wshspf465rdupvlpmwacql7wp
								</Box>
							</li>
							<li>
								<Box as="span" title="Nano (XNO)">
									<NanoIcon />{" "}
									nano_1qbbwrzxnutw53kuykdo6zcwteawf3befpbf95zrz66b33yxpz5ans6wrw4w
								</Box>
							</li>
							<li>
								<Box as="span" title="Bitcoin (BTC)">
									<BitcoinIcon /> bc1qj3l6cpxz604vlfz5zqlnhzr7g0aq7xlslnmzcm
								</Box>
							</li>
							<li>
								<Box as="span" title="Bitcoin Cash (BCH)">
									<BitcoinCashIcon />{" "}
									bitcoincash:qrs8y70dwzvz2kvxnv30c9k4pxa0vatzvudle5aaa3
								</Box>
							</li>
							<li>
								<Box as="span" title="Ethereum (ETH)">
									<EthereumIcon /> 0x9bb671035Dde19C674769592AbC20E63f36b5Aa9
								</Box>
							</li>
						</ul>
					</div>
				</Section>
				<Section>
					<Title>
						<AttachmentIcon class="icon" />
						Extra
					</Title>
					<ul id="extra">
						<li>
							<TintedImage
								src="/extra/mumengo.gif"
								colour="var(--theme-accent-title)"
							/>
						</li>
						<li>
							<TintedImage
								src="/extra/nenezil.gif"
								colour="var(--theme-accent-title)"
							/>
						</li>
					</ul>
				</Section>
				<Footer />
			</Centered>
		</>
	);
});