import { BlueskyLogo, PdslsLogo, StandardSiteLogo, TangledLogo } from '@/app/components'

export function Footer() {
    return (
        <div className="relative flex gap-x-8 lg:gap-x-16 xl:gap-x-24 justify-center border-t border-border bg-base-200 px-8 pt-12 pb-24 sm:py-32">
            <section className="hidden md:flex shrink-0 w-32"></section>

            <footer className="flex gap-4 flex-col items-center text-center sm:text-left sm:flex-row sm:items-end sm:justify-between w-xl min-w-0">
                <div className="flex items-center sm:items-start flex-col gap-4 sm:gap-6">
                    <StandardSiteLogo className="size-7 text-base-content" />
                    <div className="flex sm:flex-col gap-1 sm:gap-0">
                        <span className="font-medium text-base tracking-tight text-base-content">
                            Standard.site
                        </span>
                        <span className="font-medium sm:text-sm tracking-tight text-muted-content">
                            &copy; {new Date().getFullYear()}
                        </span>
                    </div>
                </div>

                <div className="flex flex-col gap-4 items-center sm:items-end sm:gap-8">
                    <div className="order-last sm:order-first w-fit flex justify-end items-center gap-4">
                        <a href="https://bsky.app/profile/standard.site" target="_blank">
                            <BlueskyLogo className="h-5 w-auto text-muted-content hover:text-muted transition-colors" />
                        </a>
                        <a href="https://tangled.org/standard.site" target="_blank">
                            <TangledLogo className="h-5 w-auto text-muted-content hover:text-muted transition-colors" />
                        </a>
                        <a href="https://pdsls.dev/at://did:plc:re3ebnp5v7ffagz6rb6xfei4/com.atproto.lexicon.schema" target="_blank">
                            <PdslsLogo className="h-5 w-auto text-muted-content hover:text-muted transition-colors" />
                        </a>
                    </div>
                    <div className="flex flex-col sm:items-end">
                        <span className="font-medium text-base tracking-tight text-base-content">
                            Built by the community
                        </span>
                        <span className="text-sm tracking-tight text-muted-content">
                            Designed for the ATmosphere
                        </span>
                    </div>
                </div>
            </footer>

            <section className="hidden md:flex shrink-0 w-32"></section>
        </div>
    )
}
