SectionSponsors.astro

---
import { texts } from '../../i18n/home'
import SectionTitle from '../SectionTitle.astro'
import CenteredPanel from '../CenteredPanel.astro'
import type { ISponsor } from '../../types/sponsors'
import SponsorsGroup from './sponsors/SponsorsGroup.astro'

const sponsors = Object.values(import.meta.glob('../../data/sponsors/*.md', { eager: true })) as {
  frontmatter: ISponsor
}[]

interface Props {
  lang: string
}

const { lang } = Astro.props
const t = texts[lang as keyof typeof texts]

function filterSponsorsByTier(tier: string): ISponsor[] {
  return sponsors.filter((s) => s.frontmatter.tier === tier).map((s) => s.frontmatter)
}

const bronze = filterSponsorsByTier('bronze')
const silver = filterSponsorsByTier('silver')
const gold = filterSponsorsByTier('gold')
const platinum = filterSponsorsByTier('platinum')
const main = filterSponsorsByTier('main')
---

<div class="flex flex-col items-center gap-4">
  <SectionTitle title={t['sponsors.title']} />
  <CenteredPanel text={t['sponsors.description']} />

  <div class="w-full flex flex-col gap-8">
    <SponsorsGroup
      lang={lang}
      title={t['sponsors.main']}
      sponsors={main}
      bgColor="bg-tier-main"
      textColor="text-contrast-tier-main"
      size={200}
    />
    <SponsorsGroup
      lang={lang}
      title={t['sponsors.platinum']}
      sponsors={platinum}
      bgColor="bg-tier-platinum"
      textColor="text-contrast-tier-platinum"
      size={150}
    />
    <SponsorsGroup
      lang={lang}
      title={t['sponsors.gold']}
      sponsors={gold}
      bgColor="bg-tier-gold"
      textColor="text-contrast-tier-gold"
      size={120}
    />
    <SponsorsGroup
      lang={lang}
      title={t['sponsors.silver']}
      sponsors={silver}
      bgColor="bg-tier-silver"
      textColor="text-contrast-tier-silver"
      size={100}
    />
    <SponsorsGroup
      lang={lang}
      title={t['sponsors.bronze']}
      sponsors={bronze}
      bgColor="bg-tier-bronze"
      textColor="text-contrast-tier-bronze"
      size={80}
    />
  </div>
</div>