---
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="flex min-h-screen flex-col py-24 container w-full gap-24"
  >
    <div class="w-full flex 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 flex-col gap-4 w-full">
        <div class="text-4xl lg:text-5xl font-bold leading-none">{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">{team.charAt(0).toUpperCase() + team.slice(1)} Team</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 flex-col gap-4 w-full">
        <div class="text-4xl lg:text-5xl font-bold leading-none">{about.contributors.title}</div>
        <Description>
          {about.contributors.description}
        </Description>
          <div class="flex flex-col gap-4 w-fit"><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 flex-col gap-4 w-fit"><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>
