'use client';

import { useTranslations } from 'next-intl';

const countries = [
  { key: 'us', flag: '🇺🇸' },
  { key: 'uk', flag: '🇬🇧' },
  { key: 'de', flag: '🇩🇪' },
  { key: 'fr', flag: '🇫🇷' },
  { key: 'nl', flag: '🇳🇱' },
  { key: 'sg', flag: '🇸🇬' },
  { key: 'au', flag: '🇦🇺' },
  { key: 'hk', flag: '🇭🇰' },
  { key: 'nz', flag: '🇳🇿' },
  { key: 'no', flag: '🇳🇴' },
  { key: 'se', flag: '🇸🇪' },
  { key: 'dk', flag: '🇩🇰' },
  { key: 'fi', flag: '🇫🇮' },
  { key: 'qa', flag: '🇶🇦' },
  { key: 'ae', flag: '🇦🇪' },
] as const;

export default function TargetCountries() {
  const t = useTranslations('TargetCountries');

  return (
    <section className="py-20 bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-16">
          <h2 className="text-3xl sm:text-4xl font-bold text-gray-900">
            {t('title')}
          </h2>
          <p className="mt-4 text-lg text-gray-600 max-w-2xl mx-auto">
            {t('subtitle')}
          </p>
        </div>

        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 sm:gap-6">
          {countries.map((country) => (
            <div
              key={country.key}
              className="flex flex-col items-center p-6 bg-gray-50 rounded-xl border border-gray-100 hover:border-blue-200 hover:shadow-md hover:bg-blue-50/30 transition-all duration-200"
            >
              <span className="text-5xl mb-3" role="img" aria-hidden="true">
                {country.flag}
              </span>
              <span className="text-sm font-medium text-gray-800">
                {t(country.key)}
              </span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}