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

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

const trustPoints = [
  { icon: Award, text: '25+ years of R&D' },
  { icon: Users, text: 'Serving underserved communities' },
  { icon: Cpu, text: 'Digital-first platform' },
  { icon: ShieldCheck, text: 'Board-certified lab team' },
  { icon: Globe, text: 'Global partnerships' },
];


const WhyChooseUsBlock = () => (
  <section className="section-padding">
    <div className="container mx-auto px-4 sm:px-6 lg:px-8">
      <div className="text-center mb-12">
        <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4 tracking-tight">Why Choose Us?</h2>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
      {trustPoints.map(({ icon: Icon, text }) => (
          <div key={text} className="bg-white rounded-2xl shadow-md p-8 flex flex-col items-center text-center">
            <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">{text}</h3>
          </div>
        ))}
      </div>
    </div>
  </section>
);
export default WhyChooseUsBlock;