import React from 'react';
import { BarChart3, UserCheck, Search } from 'lucide-react';

const techCards = [
  { icon: BarChart3, title: 'Big Data & AI-Powered Insights', desc: 'Harnessing data and AI for accurate, actionable results.' },
  { icon: UserCheck, title: 'Personalized Diagnostics', desc: 'Tailored testing for your unique health profile.' },
  { icon: Search, title: 'Early Detection for Better Outcomes', desc: 'Identifying risks early for proactive care.' },
];

const HowTechWorks = () => (
  <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">How Our Diagnostic Technology Works</h2>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
        {techCards.map(({ icon: Icon, title, desc }) => (
          <div key={title} 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">{title}</h3>
            <p className="text-gray-600 text-base">{desc}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);
export default HowTechWorks;