w-312356-main/src/components/TestimonialsRecognition.tsx

import React from 'react';
import { Globe, Award } from 'lucide-react';

const testimonials = [
  {
    icon: Globe,
    title: 'Recognition from Trade Commissioners',
    desc: 'Malaysia/Vietnam – For leadership in diagnostics innovation and global health partnerships.'
  },
  {
    icon: Award,
    title: 'Award-Winning Biotech Company',
    desc: 'Honored for excellence in R&D and digital health delivery.'
  }
];

const TestimonialsRecognition = () => (
  <section className="section-padding bg-gray-50/50">
    <div className="container mx-auto px-4 sm:px-6 lg:px-8">
      <div className="text-center mb-12">
        <h2 className="text-4xl font-bold text-gray-900 mb-6">Recognition & Testimonials</h2>
      </div>
      <div className="flex flex-col md:flex-row justify-center gap-8 max-w-4xl mx-auto">
        {testimonials.map(({ icon: Icon, title, desc }) => (
          <div key={title} className="bg-white rounded-2xl shadow-md p-8 flex flex-col items-center text-center flex-1 min-w-[260px]">
            <div className="w-16 h-16 flex items-center justify-center rounded-full bg-brand-light mb-4">
              <Icon className="h-8 w-8 text-brand" />
            </div>
            <h3 className="text-lg font-semibold text-gray-900 mb-2">{title}</h3>
            <p className="text-gray-600 text-base">{desc}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

export default TestimonialsRecognition;