---
import { Image } from "astro:assets"
import Description from "~/components/Description.astro"
import Layout from "~/layouts/Layout.astro"
import { getLocale, getUI } from "~/utils/i18n"
export { getStaticPaths } from "~/utils/i18n"
import Button from "~/components/Button.astro"

const locale = getLocale(Astro)

const {
  routes: { about },
  layout,
} = getUI(locale)
---

<Layout title={layout.about.title} description={layout.about.description}>
  <main class="container flex min-h-screen w-full flex-col gap-24 py-24">
    <div class="flex w-full flex-col gap-6">
      <Description class="text-6xl font-bold leading-none">{about.title}</Description>
      <Description class="max-w-4xl">
        {about.description}
      </Description>
      <Button href="/donate" class="w-fit" isPrimary>{about.littleHelp}</Button>
    </div>
    <div class="flex w-full flex-col gap-4">
      <div class="text-4xl font-bold leading-none lg:text-5xl">{about.mainTeam.title}</div>
      <Description>
        {about.mainTeam.description}
      </Description>
      <div class="flex flex-col gap-6">
        {
          Object.entries(about.mainTeam.members).map(([team, members]) => (
            <div class="flex flex-col gap-2">
              <div class="text-3xl font-semibold">
                {about.mainTeam.subTitle[team as keyof typeof about.mainTeam.subTitle]}
              </div>
              <ul class="flex flex-col gap-2">
                {Object.entries(members).map(([_key, member]) => (
                  <li class="text-sm">
                    {member.link && typeof member.link === "string" ? (
                      <a href={member.link}>
                        <strong class="zen-link font-bold">{member.name}</strong>
                      </a>
                    ) : (
                      <strong class="font-bold">{member.name}</strong>
                    )}
                    <span class="opacity-80">: {member.description}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))
        }
      </div>
    </div>
    <div class="flex w-full flex-col gap-4">
      <div class="text-4xl font-bold leading-none lg:text-5xl">{about.contributors.title}</div>
      <Description>
        {about.contributors.description}
      </Description>
      <div class="flex w-fit flex-col gap-4">
        <Description class="text-3xl font-semibold lg:text-4xl"
          >{about.contributors.browser}</Description
        >
        <a href="https://github.com/zen-browser/desktop/graphs/contributors"
          ><Image
            src="https://contributors-img.web.app/image?repo=zen-browser/desktop"
            alt="Contributors"
            width={500}
            height={500}
          /></a
        >
      </div>
      <div class="flex w-fit flex-col gap-4">
        <Description class="text-3xl font-semibold lg:text-4xl"
          >{about.contributors.website}</Description
        >
        <a href="https://github.com/zen-browser/www/graphs/contributors"
          ><Image
            src="https://contributors-img.web.app/image?repo=zen-browser/www"
            alt="Contributors (website)"
            width={500}
            height={500}
          /></a
        >
      </div>
    </div>
  </main>
</Layout>