import React from 'react'

const partners = [
  'شركة النفط اليمنية',
  'مجموعة هائل سعيد أنعم',
  'منظمة الصحة العالمية',
  'اليونيسيف',
  'مركز الملك سلمان',
  'الهلال الأحمر الإماراتي',
  'مؤسسة صلة للتنمية',
  'مؤسسة العون للتنمية',
]

const Partners = () => {
  return (
    <section className="py-12 bg-gray-50 border-y border-gray-100 font-cairo" dir="rtl">
      <div className="container mx-auto px-4 overflow-hidden">
        <h3 className="text-center text-gray-500 mb-8 font-bold">شركاء النجاح</h3>
        <div className="flex animate-scroll whitespace-nowrap space-x-reverse space-x-12">
          {[...partners, ...partners].map((partner, index) => (
            <div 
              key={index} 
              className="inline-block text-medicalGreen-800 font-bold text-xl opacity-60 hover:opacity-100 transition-opacity"
            >
              {partner}
            </div>
          ))}
        </div>
      </div>
      <style jsx>{`
        @keyframes scroll {
          0% { transform: translateX(0); }
          100% { transform: translateX(50%); }
        }
        .animate-scroll {
          display: flex;
          width: 200%;
          animation: scroll 30s linear infinite;
        }
      `}</style>
    </section>
  )
}

export default Partners