---
import { Image } from "astro:assets";
import BaseLayout from "@layouts/BaseLayout.astro";
import { IconArrowUpRightFromSquare } from "@components/icons";
import { ImageSamStickerJuicebox } from "@assets/images";
import EnhancedTooltips from "@components/EnhancedTooltips.astro";
---

<BaseLayout pageTitle="About me">
  <Fragment slot="head">
    <meta property="og:description" content="About Bad Manners." />
    <meta name="description" content="More information about me, my name, and my fursona." />
  </Fragment>
  <article class="h-card" aria-labelledby="title-about-me">
    <h1 id="title-about-me" class="text-2xl sm:text-3xl">About me</h1>
    <section>
      <p class="mb-4 mt-5 text-left indent-6 sm:mb-3 sm:mt-6 sm:px-5 sm:indent-12">
        You can call me <b class="p-name font-semibold">Bad Manners</b>, <b class="p-nickname font-semibold">Manners</b
        >, <b class="p-nickname font-semibold"><abbr>BM</abbr></b>, <b class="p-nickname font-semibold">Bad</b>, <b
          class="p-nickname font-semibold">Briefcase</b
        >... many choices to pick from! My pronouns are <span
          class="p-pronoun font-medium underline decoration-current decoration-dotted"
          title="he/him/his/his/himself"
          data-tooltip>he/him</span
        > and <span
          class="p-pronoun font-medium underline decoration-current decoration-dotted"
          title="they/them/their/theirs/themself"
          data-tooltip>they/them</span
        >. The term "bad manners" comes from gaming, referencing when someone acts in a purposefully disrespectful and
        taunting manner towards other players &ndash; and I chose this moniker as it has plenty of personal meanings
        attached to it.
      </p>
    </section>
    <section class="h-card">
      <p class="my-4 text-left indent-6 sm:mb-3 sm:px-5 sm:indent-12">
        You can also call me <b class="p-first-name font-semibold">Sam</b>, which is my <span class="p-category"
          >fursona</span
        >'s name. He is a <span class="p-note">mimic and maned wolf hybrid</span>, and you can learn more about him by
        clicking on him below!
      </p>
      <figure class="mt-4">
        <a
          href="/sam_brendan"
          class="u-url group mx-auto mb-1 block w-max max-w-full pb-0 sm:mb-3"
          aria-label="Information about Sam"
        >
          <Image
            src={ImageSamStickerJuicebox}
            class="u-photo max-w-full transition-transform group-hover:scale-105 motion-reduce:transition-none motion-reduce:group-hover:scale-100"
            alt="Sam Brendan with googly eyes and fangs showing from his lips, sipping from the straw of a banana juice box as some of the liquid escapes his mouth. His main feature is the briefcase he has for a face, with a wide maw and googly eyes. Art by OliveCow."
            loading="eager"
            height={320}
          />
        </a>
        <figcaption class="text-base">
          A sticker of Sam by
          <a
            class="h-card u-url text-link transition-colors motion-reduce:transition-none"
            href="https://olivecowcommissions.carrd.co"
            rel="nofollow"
            target="_blank"
          >
            <span class="p-name underline">OliveCow</span>
            <IconArrowUpRightFromSquare width="0.75rem" height="0.75rem" class="inline" />
          </a>.
        </figcaption>
      </figure>
    </section>
  </article>
</BaseLayout>

<EnhancedTooltips />