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

<BaseLayout pageTitle="About me">
  <meta slot="head-description" property="og:description" content="About Bad Manners." />
  <article aria-labelledby="title-about-me">
    <h1 id="title-about-me" class="text-2xl sm:text-3xl">About me</h1>
    <section>
      <p class="my-5 sm:my-6 sm:px-5 md:px-6">
        You can call me <b>Bad Manners</b>, <b>Manners</b>, <b>BM</b>, <b>Bad</b>, <b>Bananas</b>... many choices to
        pick from! My pronouns are "he/him". You can also call me <b>Sam</b>, which is my fursona's name. He is a mimic
        and maned wolf hybrid, and you can learn more about him by clicking on him below!
      </p>
      <figure class="mt-4">
        <a
          href="/sam_brendan"
          class="group mx-auto mb-1 block w-max max-w-full pb-0 sm:mb-3"
          aria-label="Learn more about Sam"
        >
          <Image
            src={ImageSamStickerJuicebox}
            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. Art by OliveCow."
            class="max-w-full transition-transform group-hover:scale-105 motion-reduce:transition-none motion-reduce:group-hover:scale-100"
            loading="eager"
            height={320}
          />
        </a>
        <figcaption class="text-base">
          A sticker of Sam by
          <a
            class="text-link transition-colors motion-reduce:transition-none"
            href="https://olivecow.carrd.co/"
            target="_blank"
          >
            <span class="underline">OliveCow</span>
            <IconArrowUpRightFromSquare width="0.75rem" height="0.75rem" class="inline" />
          </a>.
        </figcaption>
      </figure>
    </section>
  </article>
</BaseLayout>