import { getTranslations } from 'next-intl/server'
import { Link } from '@/navigation'

const PLATFORMS = [
  'YouTube',
  'TikTok',
  'Instagram',
  'Facebook',
  'X (Twitter)',
  'Vimeo',
  'Twitch',
  'SoundCloud',
  'Dailymotion',
]

export async function SupportedPlatformsSection({ locale }: { locale: string }) {
  const t = await getTranslations({ locale, namespace: 'platforms' })

  return (
    <section className="py-16 px-6" aria-labelledby="platforms-heading">
      <div className="max-w-5xl mx-auto text-center">
        <h2 id="platforms-heading" className="text-2xl md:text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-50">
          {t('heading')}
        </h2>
        <p className="mt-2 text-gray-500 dark:text-gray-400">{t('subheading')}</p>

        <div className="mt-8 flex flex-wrap justify-center gap-3">
          {PLATFORMS.map((name) => (
            <span
              key={name}
              className="px-4 py-2 rounded-full border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm font-medium text-gray-700 dark:text-gray-300"
            >
              {name}
            </span>
          ))}
        </div>
        <p className="mt-4 text-sm text-gray-400 dark:text-slate-500">
          {t.rich('more', {
            link: (chunks) => (
              <Link href="/supported-sites" className="text-violet-600 dark:text-violet-400 hover:underline">
                {chunks}
              </Link>
            ),
          })}
        </p>
        <p className="mt-6 text-xs text-gray-400 dark:text-slate-500 max-w-2xl mx-auto">{t('disclaimer')}</p>
      </div>
    </section>
  )
}