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

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

<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"
                            ></line>
                            <polyline
                                points="12 19 5 12 12 5"
                                class="translate-x-1 group-hover:translate-x-0 transition-all duration-300 ease-in-out"
                            ></polyline>
                        </svg>
                        <div
                            class="w-full 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-full"
                            />
                            {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>
                        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 mt-2">
                            &copy; 2024 | 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 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>
