import React from 'react';
import { ShieldPlus, UserCheck, Hospital, BookOpen } from 'lucide-react';

const StatisticsTiles = () => {
  const tiles = [
    { 
      icon: <ShieldPlus className="w-6 h-6" style={{ color: '#012068' }} />,
      title: "Primary Trauma Care", 
      description: "Specialized care for Priority One trauma patients in close coordination with the Emergency Department team."
    },
    { 
      icon: <UserCheck className="w-6 h-6" style={{ color: '#012068' }} />,
      title: "24×7 Trauma Surgeon", 
      description: "Round-the-clock availability of trauma surgeons ensures immediate surgical intervention when needed."
    },
    { 
      icon: <Hospital className="w-6 h-6" style={{ color: '#012068' }} />,
      title: "Trauma Intensive & Ward Care", 
      description: "Comprehensive trauma intensive care and dedicated trauma ward services for critical and recovering patients."
    },
    { 
      icon: <BookOpen className="w-6 h-6" style={{ color: '#012068' }} />,
      title: "Trauma Education", 
      description: "Focused education and counseling for patients and families to enhance recovery and awareness."
    },
  ];

  return (
    <section className="py-8 sm:py-12" style={{ backgroundColor: '#f4f4f4' }}>
      <div className="max-w-7xl mx-auto px-4">
        <h2 
          className="text-2xl sm:text-3xl font-semibold text-center mb-8 sm:mb-12" 
          style={{ color: '#012068' }}
        >
          Our Trauma Care Services
        </h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6">
          {tiles.map((tile, index) => (
            <div 
              key={index} 
              className="border border-gray-300 rounded-lg p-5 h-full hover:shadow-lg transition-shadow duration-300" 
              style={{ backgroundColor: '#ffffff' }}
            >
              <div className="flex flex-col h-full">
                <div className="flex items-center mb-3">
                  <div className="flex-shrink-0 mr-3">
                    {tile.icon}
                  </div>
                  <h3 
                    className="text-base sm:text-lg font-medium" 
                    style={{ color: '#012068' }}
                  >
                    {tile.title}
                  </h3>
                </div>
                <p 
                  className="text-sm sm:text-base leading-relaxed flex-grow" style={{ color: '#333' }}
                >
                  {tile.description}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default StatisticsTiles;
