---
import okita from '@assets/okita.png'
import atlas from '@assets/atlas.png'
import foxcat from '@assets/lurker.png'
import padoru from '@assets/padoru.png'
import { Image } from 'astro:assets'

import packagejson from '../../package.json'
const version = packagejson.version
const release = `https://forgejo.neshweb.net/Firq/firq-dev-website/releases/tag/${version}`
---

<footer>
  <div>
    “Fate/Grand Order” is a trademark of Notes Co., Ltd. | Game Assets ©
    Aniplex Inc. used under fair use. | View <a
      class="linker"
      href="https://fate-go.us"
      target="_blank"
      rel="noopener noreferrer">the official website</a
    > for more information.<br />
     I am in no way affiliated with Fate/Grand Order, Aniplex, Type Moon or
    Lasengle. I claim no ownership of any of the assets used that are created by
    any of the mentioned companies.<br />
     All of the opinions expressed are my own and may not reflect those of the
    asset providers.
  </div>
  <br />
  <div>
    Thanks to <a
      href=" https://atlasacademy.io/"
      target="_blank"
      rel="noopener noreferrer">Atlas Academy</a
    > for providing the servant and ce images.
    <div class="sticky-image-wrapper">
      <Image src={atlas} alt="Icon of Atlas Academy" />
    </div>
  </div>
  <br />
  <div>
    Thanks to <a
      href="https://mitsunee.com"
      target="_blank"
      rel="noopener noreferrer">Mitsunee</a
    > for the support when building this site. I could not have done it without
    you 🧡 Check out <a
      href="https://mitsunee.com"
      target="_blank"
      rel="noopener noreferrer">her own website here</a
    >
    <div class="sticky-image-wrapper">
      <Image src={foxcat} alt="Best Foxcat" />
    </div>
  </div>
  <br />
  <div>
    Thanks to <a
      href="https://mastodon.neshweb.net/@neshura"
      target="_blank"
      rel="noopener noreferrer">Neshura</a
    > for providing me with a place to develop, store and host this site. Check
    out
    <a href="https://www.neshweb.net" target="_blank" rel="noopener noreferrer"
      >his site here</a
    >
    <div class="sticky-image-wrapper">
      <Image src={okita} alt="" style="height:67px" />
    </div>
  </div>
  <br />
  <div>
    Thanks to <a
      href="https://twitter.com/its_Anthony_J"
      target="_blank"
      rel="noopener noreferrer">AnthonyJ</a
    > for providing me with the custom Shishou favicon.
    <div class="sticky-image-wrapper">
      <Image src={padoru} alt="Hashire sori yo ..." width={64} height={64} quality={100}/>
    </div>
  </div>
  <br />
  <div>
    Website version: <a href={release} target="_blank" rel="noopener noreferrer"
      >{version}</a
    >
  </div>
</footer>

<style>
  footer {
    color: var(--c-primary-text);
    bottom: 0;
  }
  footer > div > a {
    color: var(--c-primary-text);
  }
  .sticky-image-wrapper {
    position: fixed;
    bottom: 0;
    right: 50%;
  }
  :hover > .sticky-image-wrapper > img {
    transform: translate(-50%, -100px);
  }
  .sticky-image-wrapper > img {
    display: block;
    position: absolute;
    bottom: -100px;
    height: 64px;
    width: 64px;
    transition: transform var(--a-time-slow) var(--a-animation-1);
    transform: translateX(-50%);
  }
</style>