export default function TrustedMarquee() {
  const partners = [
    { name: "Qatar Foundation", logo: "🏛️" },
    { name: "Hamad Medical", logo: "🏥" },
    { name: "Sidra Medicine", logo: "⚕️" },
    { name: "Qatar Airways", logo: "✈️" },
    { name: "Ooredoo", logo: "📱" },
    { name: "Qatar National Bank", logo: "🏦" },
    { name: "Aspire Zone", logo: "🏟️" },
    { name: "Education City", logo: "🎓" },
    { name: "Katara", logo: "🎭" },
    { name: "The Pearl", logo: "🏝️" },
  ];

  // Duplicate for seamless loop
  const allPartners = [...partners, ...partners];

  return (
    <div className="relative overflow-hidden py-12">
      <div className="absolute inset-y-0 left-0 z-10 w-32 bg-gradient-to-r from-white via-white/80 to-transparent dark:from-slate-900 dark:via-slate-900/80" />
      <div className="absolute inset-y-0 right-0 z-10 w-32 bg-gradient-to-l from-white via-white/80 to-transparent dark:from-slate-900 dark:via-slate-900/80" />

      <div className="flex animate-marquee">
        {allPartners.map((partner, index) => (
          <div
            key={`${partner.name}-${index}`}
            className="mx-8 flex flex-shrink-0 items-center gap-3"
          >
            <span className="text-4xl">{partner.logo}</span>
            <span className="text-lg font-medium text-gray-700 dark:text-gray-300">
              {partner.name}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}
