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

const name = "EFEELE";
const email = "hello@efeele.dev";
const github = "https://github.com/EFEELE";
const linkedin = "https://www.linkedin.com/in/efeele/";
const instagram = "https://www.instagram.com/efeele.dev/";
const youtube = "https://www.youtube.com/@efeeledev";
---

<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="https://github.com/EFEELE"
        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>EFEELE</strong>, with Astro</a
      >
    </div>
    <div class="flex items-center justify-center gap-5" role="list" aria-label="Social media links">
      <Social link={email} iconName="envelope" label={`Send email to ${email}`} />
      <Social link={instagram} iconName="instagram" label={`Visit ${name} on Instagram`} />
      <Social link={youtube} iconName="youtube" label={`Visit ${name} on YouTube`} />
      <Social link={github} iconName="github" label={`Visit ${name} on GitHub`} />
      <Social link={linkedin} iconName="linkedin" label={`Visit ${name} on LinkedIn`} />
    </div>
  </nav>
</footer>