---
import { Image } from "astro:assets";
import { Icon } from "astro-icon/components";
import { SITE, SOCIALS } from "@/consts";
import Container from "@/components/Container.astro";

import pictureOfMe from "@/images/me.jpg";

const CURRENT_YEAR = new Date().getFullYear();
---

<footer class="relative">
    <div class="animate bg-zinc-200 dark:bg-zinc-950/50">
        <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/15 hover:dark:bg-white/10 border-black/15 dark:border-white/20 transition-colors duration-300 ease-in-out"
                    >
                        <div class="relative overflow-hidden w-5 h-4 -mt-1">
                            <Icon
                                name="pixelarticons:arrow-up"
                                class:list="absolute top-0 inset-x-0 text-lg origin-bottom
                                    scale-y-0 group-hover:scale-y-100
                                    transition-all duration-300 ease-in-out"
                            />
                            <Icon
                                name="pixelarticons:chevron-up"
                                class:list="absolute top-0 inset-x-0 text-lg
                                    group-hover:translate-y-4
                                    transition-all duration-300 ease-in-out"
                            />
                        </div>
                        <div
                            class="w-full font-departure group-hover:text-black group-hover:dark:text-white transition-colors duration-300 ease-in-out"
                        >
                            Back to top
                        </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"
                        >
                            <Image
                                src={pictureOfMe}
                                loading="lazy"
                                alt="Me"
                                class="size-6 fill-current rounded-lg mr-2"
                                quality="low"
                            />
                            {SITE.AUTHOR}
                        </a>
                    </div>
                    <div
                        class="flex gap-2 justify-center font-departure sm:justify-end items-center"
                    >
                        <span class="relative flex h-3 w-3">
                            <span
                                class="absolute inline-flex h-full w-full rounded-sm bg-green-500"
                            ></span>
                        </span>
                        All systems normal
                    </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="text-sm font-departure mt-2">
                            &copy; {CURRENT_YEAR} | All rights reserved
                        </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 flex items-center justify-center hover:bg-black/15 dark:hover:bg-white/20 blend"
                                    >
                                        <Icon
                                            name={SOCIAL.ICON}
                                            class:list="text-xl text-center group-hover:fill-black group-hover:dark:fill-white blend"
                                        />
                                    </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>