import React from 'react';
import { Award, Home, ShieldCheck, HeartHandshake, PhoneCall, Headphones } from 'lucide-react';

export const WhyChooseUs: React.FC = () => {
  const reasons = [
    {
      icon: <Award className="w-8 h-8 text-blue-700" />,
      title: '15+ वर्षों का अनुभव',
      desc: 'त्वचा, बाल और फिजियोथेरेपी क्षेत्र में वर्षों का समृद्ध अनुभव और विशेषज्ञता।',
    },
    {
      icon: <Home className="w-8 h-8 text-emerald-600" />,
      title: 'घर पर फिजियोथेरेपी',
      desc: 'बुजुर्गों और चलने में असमर्थ मरीजों के लिए घर पर विशेष फिजियोथेरेपी सत्र।',
    },
    {
      icon: <ShieldCheck className="w-8 h-8 text-sky-600" />,
      title: 'सरल और सुविधाजनक सेवा',
      desc: 'बिना किसी जटिलता के सीधी, स्पष्ट और पारदर्शी स्वास्थ्य सेवाएं।',
    },
    {
      icon: <HeartHandshake className="w-8 h-8 text-blue-600" />,
      title: 'व्यक्ति की जरूरत के अनुसार देखभाल',
      desc: 'हर मरीज की शारीरिक स्थिति और समस्या के अनुसार व्यक्तिगत उपचार योजना।',
    },
    {
      icon: <PhoneCall className="w-8 h-8 text-emerald-700" />,
      title: 'आसान फोन / WhatsApp संपर्क',
      desc: 'तुरंत बातचीत और समय बुक करने के लिए आसान फोन और WhatsApp सुविधा।',
    },
    {
      icon: <Headphones className="w-8 h-8 text-sky-700" />,
      title: 'फॉलो-अप सहायता',
      desc: 'उपचार के बाद नियमित संपर्क और स्वास्थ्य की निरंतर निगरानी।',
    },
  ];

  return (
    <section className="py-20 bg-slate-50">
      <div className="container">
        {/* Header */}
        <div className="text-center max-w-3xl mx-auto mb-16">
          <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-blue-100 text-blue-800 text-xs font-bold uppercase tracking-wider mb-4">
            <span>भरोसेमंद स्वास्थ्य केंद्र</span>
          </div>
          <h2 className="text-3xl sm:text-4xl font-extrabold text-slate-900 tracking-tight mb-4">
            हमें क्यों चुनें?
          </h2>
          <p className="text-base sm:text-lg text-slate-600">
            फतेहपुर में मरीजों का पसंदीदा और विश्वसनीय स्वास्थ्य केंद्र।
          </p>
        </div>

        {/* Reasons Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {reasons.map((item, idx) => (
            <div
              key={idx}
              className="bg-white rounded-3xl p-8 border border-slate-200/80 shadow-md hover:shadow-xl hover:border-blue-300 transition-all group"
            >
              <div className="w-16 h-16 rounded-2xl bg-sky-50 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                {item.icon}
              </div>
              <h3 className="text-xl font-bold text-slate-900 mb-3">{item.title}</h3>
              <p className="text-slate-600 text-sm leading-relaxed">{item.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};
