---
import { Icon } from "astro-icon/components";

import { socials } from "@assets/socials.ts";
import Link from "@components/Link.astro";
---

<footer
  class="footer -z-10 bg-gray-900 px-8 py-8 text-center text-white"
  transition:name="footer"
>
  <div class="socials p-2">
    <ul class="flex justify-center space-x-4">
      {
        socials.map((social) => (
          <li class="inline-block">
            <a
              href={social.url}
              target="_blank"
              rel="noopener noreferrer"
              class="social-icon"
              aria-label={social.name}
            >
              <Icon
                name={social.icon}
                class="text-primary h-12 w-12 transition hover:text-white"
              />
            </a>
          </li>
        ))
      }
    </ul>
  </div>
  <p class="p-2 text-sm">
    Copyright &copy; <span id="footer-year"></span> Nathan Cummins.
  </p>
  <div class="statements grid grid-cols-1 gap-x-16 lg:grid-cols-2">
    <p class="col-span-1 p-2 text-xs italic">
      I support and believe in the values of open source software and
      communities. This website is made from scratch using the <Link
        href="https://astro.build/">Astro framework</Link
      >
      and with <Link href="https://tailwindcss.com/">Tailwind CSS</Link>. The
      full source code is available on my self-hosted <Link
        href="https://git.nathancummins.com.au/encie22/portfolio"
      >
        Gitea repository</Link
      >.
    </p>
    <p class="col-span-1 p-2 text-xs italic">
      I acknowledge that the land on which I work and live is the traditional
      lands of the Kaurna people. I pay respect to their cultural beliefs and to
      their Elders past, present, and emerging.
    </p>
  </div>
</footer>

<script is:inline data-astro-rerun>
  document.getElementById("footer-year").innerText = new Date().getFullYear();
</script>