---
import { SITE, SOCIALS } from "@consts"
import Container from "@components/Container.astro"
---

<footer class="relative bg-white dark:bg-black">
  <div class="animate">
    <section class="py-5">
      <Container size="md">
        <div class="flex items-center justify-center sm:justify-end">
          <button id="back-to-top" aria-label="Back to top of page" class="group flex w-fit p-1.5 gap-1.5 text-sm items-center border rounded hover:bg-black/5 hover:dark:bg-white/10 border-black/15 dark:border-white/20 transition-colors duration-300 ease-in-out">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="stroke-current group-hover:stroke-black group-hover:dark:stroke-white rotate-90">
              <line x1="19" y1="12" x2="5" y2="12" class="scale-x-0 group-hover:scale-x-100 translate-x-3 group-hover:translate-x-0 transition-all duration-300 ease-in-out" />
              <polyline points="12 19 5 12 12 5" class="translate-x-1 group-hover:translate-x-0 transition-all duration-300 ease-in-out" />
            </svg>
            <div class="w-full group-hover:text-black group-hover:dark:text-white transition-colors duration-300 ease-in-out">
              В начало
            </div>
          </button>
        </div>
      </Container>
    </section>
  
    <section class=" py-5 overflow-hidden whitespace-nowrap border-t border-black/10 dark:border-white/25">
      <Container size="md">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <div class="flex flex-col items-center sm:items-start">
            <a href="/" class="flex gap-1 w-fit font-semibold text-current hover:text-black dark:hover:text-white transition-colors duration-300 ease-in-out">
              <svg class="size-6 fill-current">
                <use href="/brand.svg#brand"/>
              </svg>
              {SITE.TITLE}
            </a>
          </div>
          <div class="flex gap-2 justify-center sm:justify-end items-center">
            <span class="relative flex h-3 w-3">
              <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-300"></span>
              <span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
            </span>
            Все системы в норме
          </div>
        </div>
      </Container>
    </section>
  
    <section class=" py-5 overflow-hidden whitespace-nowrap border-t border-black/10 dark:border-white/25">
      <Container size="md">
        <div class="h-full grid grid-cols-1 sm:grid-cols-2 gap-3">
          <div class="order-2 sm:order-1 flex flex-col items-center justify-center sm:items-start">
            <div class="legal">
              <a href="/legal/terms" class="text-current hover:text-black dark:hover:text-white transition-colors duration-300 ease-in-out">
                Условия использования
              </a> |
              <a href="/legal/privacy" class="text-current hover:text-black dark:hover:text-white transition-colors duration-300 ease-in-out">
                Конфиденциальности
              </a>
            </div>
            <div class="text-sm mt-2">
              &copy; 2024 | @iTKeyS
            </div>
          </div>
  
          <div class="order-1 sm:order-2 flex justify-center sm:justify-end">
            <div class="flex flex-wrap gap-1 items-center justify-center">
              {
                SOCIALS.map((SOCIAL) => (
                  <a 
                    href={SOCIAL.HREF} 
                    target="_blank" 
                    aria-label={`${SITE.TITLE} on ${SOCIAL.NAME}`} 
                    class="group size-10 rounded-full p-2 items-center justify-center hover:bg-black/5 dark:hover:bg-white/20  blend"
                  >
                    <svg class="size-full fill-current group-hover:fill-black group-hover:dark:fill-white blend">
                      <use href={`/social.svg#${SOCIAL.ICON}`} />
                    </svg>
                  </a>
                ))
              }
              </div>
          </div>
        </div>
      </Container>
    </section>
  </div>

</footer>

<script is:inline>
  function goBackToTop(event) {
    event.preventDefault()
    window.scrollTo({
        top: 0,
        behavior: "smooth"
    })
  }

  function inintializeBackToTop() {
    const backToTop = document.getElementById("back-to-top")
    backToTop?.addEventListener("click", goBackToTop)
  }

  document.addEventListener("astro:after-swap", inintializeBackToTop)
  inintializeBackToTop()
</script>