import Link from "next/link";
import { Logo } from "../logo";

export function Footer() {
    return (
        <footer className="relative z-10 py-8 font-fk-grotesk-mono bg-[#101014]">
            <div className="container mx-auto px-6">
                <div className="flex flex-col md:flex-row justify-between items-center">
                    <div className="flex flex-col items-start gap-7">
                        <Logo width="w-[84px]" />
                        <span className="text-xs">ARTIV8 © 2025</span>
                    </div>
                    <div className="text-xs flex flex-col items-end gap-7">
                        <div className="flex items-center uppercase">
                            <div className="pr-2 relative">
                                <Link
                                    href="https://x.com/artivatedotcom"
                                    className="px-2.5 py-2 bg-[#28272c] hover:bg-[#28272c]/60 rounded-md"
                                >
                                    X.COM
                                </Link>
                                <img
                                    src="/images/button-separator-footer.svg"
                                    alt="Separator"
                                    className="absolute w-2 right-0 top-1/2 -translate-y-1/2"
                                />
                            </div>
                            <div className="pr-2 relative">
                                <Link
                                    href="https://github.com/barudak21/artivate"
                                    className="px-2.5 py-2 bg-[#28272c] hover:bg-[#28272c]/60 rounded-md"
                                >
                                    GITHUB
                                </Link>
                                <img
                                    src="/images/button-separator-footer.svg"
                                    alt="Separator"
                                    className="absolute w-2 right-0 top-1/2 -translate-y-1/2"
                                />
                            </div>
                            <div>
                                <Link href="#0" className="px-2.5 py-2 bg-[#28272c] hover:bg-[#28272c]/60 rounded-md">
                                    GITBOOK
                                </Link>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    );
}