---
import Social from "../ui/Social.astro";
import { Icon } from "astro-icon/components";
import { AstroError } from "astro/errors";
import { getCollection} from "astro:content";

const [staticData] = await getCollection('staticData');

if (!staticData) {
  throw new AstroError("JSON data not found");
}
---

<footer
  class="relative bottom-0 w-full px-4 py-8 font-medium text-blacktext dark:bg-transparent dark:border-b-2 dark:border-zinc-800 dark:text-zinc-300 max-lg:mt-3"
  role="contentinfo"
  aria-label="Site footer"
>
  <nav
    class="mx-auto flex max-w-7xl flex-row items-center justify-between gap-4 text-xl max-xl:px-6 max-sm:flex-col"
    aria-label="Footer navigation"
  >
    <div
      class="relative h-6 cursor-pointer before:absolute before:left-1/2 before:top-1/2 before:h-full before:w-[40%] before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-[#50fd8f25] before:blur-3xl before:opacity-80 before:-z-1 hover:text-mint-500 transition-all [text-shadow:0_1px_2px_#000]"
    >
      <a href="/" aria-label="Return to homepage">
        <!-- This icon represents the logo -->
        <Icon name="logo" aria-hidden="true" />
      </a>
    </div>
    <div class="text-center">
      <a
        href={staticData.data.github}
        class="flex items-center justify-center gap-3 text-base font-normal italic max-sm:text-sm"
        aria-label="About the website development"
        ><Icon name="code" aria-hidden="true" /> Developed by <strong>{staticData.data.alias}</strong>, with Astro</a
      >
    </div>
    <div class="flex items-center justify-center gap-5" role="list" aria-label="Social media links">
      <Social link={`mailto:${staticData.data.email}`} iconName={staticData.data.emailIconName} label={`Send email to ${staticData.data.email}`} />
      <Social link={staticData.data.instagram} iconName={staticData.data.instagramIconName} label={`Visit ${staticData.data.alias} on Instagram`} />
      <Social link={staticData.data.youtube} iconName={staticData.data.youtubeIconName} label={`Visit ${staticData.data.alias} on YouTube`} />
      <Social link={staticData.data.github} iconName={staticData.data.githubIconName} label={`Visit ${staticData.data.alias} on GitHub`} />
      <Social link={staticData.data.linkedin} iconName={staticData.data.linkedinIconName} label={`Visit ${staticData.data.alias} on LinkedIn`} />
    </div>
  </nav>
</footer>