import { ContactSection } from "@/components/contact-section";
import { DiscordCard } from "@/components/discord-card";
import { ProjectsSection } from "@/components/projects-section";
import { SectionHeading } from "@/components/section-heading";
import { SiteFooter } from "@/components/site-footer";
import { SiteHeader } from "@/components/site-header";
import { getRepos } from "@/lib/gitea";
import { getDictionary } from "@/lib/i18n/get-dictionary";
import { getLocale } from "@/lib/i18n/get-locale";
import { DISCORD_ID, discordProfileUrl, getLanyard } from "@/lib/lanyard";

export default async function Home() {
    const locale = await getLocale();
    const dict = getDictionary(locale);
    const [repos, presence] = await Promise.all([getRepos(), getLanyard()]);

    return (
        <div id="top" className="flex min-h-full flex-1 flex-col">
            <SiteHeader dict={dict.nav} locale={locale} />
            <main className="mx-auto flex w-full max-w-4xl flex-1 flex-col gap-20 px-5 py-14">
                <section className="pt-6 text-center sm:pt-10">
                    <p className="font-mono text-sm text-blurple-soft">{dict.hero.greeting}</p>
                    <h1 className="mt-2 bg-[linear-gradient(to_right,#7ee7d8,#7ccbff,#7f8cff,#b56dff,#f38ad8)] bg-clip-text text-6xl font-black tracking-tight text-transparent sm:text-7xl">
                        fristy
                    </h1>
                    <p className="mx-auto mt-5 max-w-xl text-zinc-400">{dict.hero.tagline}</p>
                    <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
                        <a
                            href="#projects"
                            className="rounded-full bg-blurple px-6 py-3 text-sm font-semibold text-white transition-colors hover:bg-blurple-soft hover:text-void"
                        >
                            {dict.hero.ctaProjects}
                        </a>
                        <a
                            href="#contact"
                            className="rounded-full border border-white/15 px-6 py-3 text-sm text-zinc-300 transition-colors hover:border-blurple hover:text-white"
                        >
                            {dict.hero.ctaContact}
                        </a>
                    </div>
                </section>

                <section id="discord" className="scroll-mt-24">
                    <SectionHeading
                        kicker="lanyard"
                        title={dict.discord.title}
                        action={
                            <a
                                href={discordProfileUrl(DISCORD_ID)}
                                target="_blank"
                                rel="noopener noreferrer"
                                className="text-sm font-medium text-blurple-soft transition-colors hover:text-white"
                            >
                                {dict.discord.profile} →
                            </a>
                        }
                    />
                    <DiscordCard initial={presence} dict={dict.discord} />
                </section>

                <ProjectsSection repos={repos} dict={dict.projects} locale={locale} />

                <ContactSection dict={dict.contact} />
            </main>
            <SiteFooter dict={dict.footer} />
        </div>
    );
}