/**
 * Copyright (c) 2025 xwra
 * 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,
  BlueskyIcon,
  CodebergIcon,
  DiscordIcon,
  ForgejoIcon,
  GitHubIcon,
  LabelIcon,
  LastfmIcon,
  MailIcon,
  SignalIcon,
  TwitterIcon,
  CommentIcon,
  HeartIcon,
  KofiIcon,
  BitcoinIcon,
  BitcoinCashIcon,
  MoneroIcon,
  NanoIcon,
  LitecoinIcon,
  EthereumIcon,
} from "../components/Icon.tsx";

export default define.page(() => {
  return (
    <>
      <Rain />
      <Centered>
        <Header />
        <Section>
          <Title>
            <HeartIcon class="icon" />
            About me
          </Title>
          <p class="intro">
            <span>
              {" "}
              muxiepuff{" "}
              <span class="alt alt-font">(/ˈmuˌksipʌf/, she/her)</span>
              {" · "}
            </span>
            I'm just your average advocate for open access to information and
            knowledge and aspiring electrical engineer with complementary
            interests in systems programming and linguistics. Neurodivergent
            student passionate about libre software.
          </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={3}>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={3}>Software and code</Title>
            <ul class="labeled-icons">
              <li>
                <Box as="a" href="https://git.acpi.at/mux">
                  <ForgejoIcon /> mux
                </Box>
              </li>
              <li>
                <Box as="a" href="https://codeberg.org/ex">
                  <CodebergIcon /> ex
                </Box>
              </li>
              <li>
                <Box as="a" href="https://github.com/xwra">
                  <GitHubIcon /> xwra
                </Box>
              </li>
            </ul>
          </div>
          <div>
            <Title level={3}>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"
                    title="worf"
                    alt="worf"
                  />
                </a>
              </li>
              <li>
                <a href="https://codeberg.org/paige">
                  <img src="/88x31/paige.gif" title="paige" alt="paige" />
                </a>
              </li>
              <li>
                <a href="https://mugman.tech">
                  <img
                    src="https://mugman.tech/88x31/me.gif"
                    title="mugman"
                    alt="mugman"
                  />
                </a>
              </li>
              <li>
                <a href="https://f.dog">
                  <img
                    src="https://x86.pet/~strawberry/june_88x31.png"
                    title="june"
                    alt="june"
                  />
                </a>
              </li>
              <li>
                <a
                  rel="noopener"
                  referrerpolicy="strict-origin"
                  href="https://rushii.dev"
                >
                  <img
                    src="https://rushii.dev/88x31/rushii.webp"
                    title="rushii's site"
                    alt="rushii's site"
                  />
                </a>
              </li>
              <li>
                <a href="https://www.juwuba.xyz">
                  <img
                    src="https://www.juwuba.xyz/88x31.gif"
                    title="Júlia"
                    alt="Júlia"
                  />
                </a>
              </li>
              <li>
                <a href="https://katelyn.moe/">
                  <img
                    src="https://katelyn.moe/8831.png"
                    title="katelyn"
                    alt="katelyn"
                  />
                </a>
              </li>
              <li>
                <a href="https://meow-d.github.io">
                  <img src="/88x31/meow_d.webp" title="meow_d" alt="meow_d" />
                </a>
              </li>
              <li>
                <a href="https://caitlyn.moe">
                  <img
                    src="https://caitlyn.moe/88x31.png"
                    title="caitlyn"
                    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={3}>Communication</Title>
            <ul class="labeled-icons">
              <li>
                <Box as="a" href="https://discord.com/users/797566974024351745">
                  <DiscordIcon /> @muxiepuff
                </Box>
              </li>
              <li>
                <Box
                  as="a"
                  href="https://signal.me/#eu/gdveRFng4iFhFkB4m5Esr2ciQ5FWZTeSFrCGa2osQ7ZrSu2d48RCdqgDc2nEzWQq"
                >
                  <SignalIcon /> @mux.01
                </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={3}>Donations</Title>
            <ul class="labeled-icons full">
              <li>
                <Box as="a" href="https://ko-fi.com/west">
                  <KofiIcon /> west
                </Box>
              </li>
              <li>
                <Box as="span">
                  <MoneroIcon />{" "}
                  456tmp4CU158sV95Pjh75QfMcANNsRCFTdpmc86G31eKg9urvcYunnuBVyUmazAbuihUXwRDVojkhFTbzg6X2GuAJ7t3MCT
                </Box>
              </li>
              <li>
                <Box as="span">
                  <LitecoinIcon /> ltc1ql30jtr2r0pkr0wshspf465rdupvlpmwacql7wp
                </Box>
              </li>
              <li>
                <Box as="span">
                  <NanoIcon />{" "}nano_1qbbwrzxnutw53kuykdo6zcwteawf3befpbf95zrz66b33yxpz5ans6wrw4w
                </Box>
              </li>
              <li>
                <Box as="span">
                  <BitcoinIcon />{" "} bc1qj3l6cpxz604vlfz5zqlnhzr7g0aq7xlslnmzcm
                </Box>
              </li>
              <li>
                <Box as="span">
                  <BitcoinCashIcon />{" "}bitcoincash:qrs8y70dwzvz2kvxnv30c9k4pxa0vatzvudle5aaa3
                </Box>
              </li>
              <li>
                <Box as="span">
                  <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>
    </>
  );
});