import React from 'react';
import { ArrowRight, Sparkles, CheckCircle, Shield } from 'lucide-react';

interface ServicesOverviewProps {
  onSelectService: (serviceName: string) => void;
}

export const ServicesOverview: React.FC<ServicesOverviewProps> = ({ onSelectService }) => {
  const services = [
    {
      id: 'skin',
      icon: '🧴',
      title: 'त्वचा की देखभाल',
      subtitle: 'Skin Care & Dermatology',
      description: 'खुजली, दाद, एलर्जी, मुंहासे, एक्जिमा, सोरायसिस, सफेद दाग और त्वचा से जुड़ी अन्य समस्याओं के लिए परामर्श।',
      features: ['दाद और खुजली का उपचार', 'मुंहासे और दाग-धब्बे', 'एक्जिमा व सोरायसिस परामर्श'],
      cta: 'त्वचा की समस्या बताएं',
      bgGradient: 'from-blue-50/80 to-sky-50/50',
      accentColor: 'text-blue-700',
      badgeBg: 'bg-blue-100 text-blue-800',
      buttonBg: 'bg-blue-700 hover:bg-blue-800 text-white',
    },
    {
      id: 'hair',
      icon: '💇',
      title: 'बालों की देखभाल',
      subtitle: 'Hair Care & Solutions',
      description: 'बाल झड़ना, गंजापन और बालों से जुड़ी अन्य समस्याओं के लिए परामर्श और उचित देखभाल।',
      features: ['बाल झड़ना रोकना', 'गंजापन परामर्श', 'रूसी और स्कैल्प की देखभाल'],
      cta: 'बालों की समस्या बताएं',
      bgGradient: 'from-sky-50/80 to-blue-50/50',
      accentColor: 'text-sky-700',
      badgeBg: 'bg-sky-100 text-sky-800',
      buttonBg: 'bg-sky-700 hover:bg-sky-800 text-white',
    },
    {
      id: 'physio',
      icon: '🦵',
      title: 'फिजियोथेरेपी',
      subtitle: 'Physiotherapy & Rehab',
      description: 'जोड़ों, घुटने, कमर, गर्दन और शरीर के दर्द के साथ-साथ चलने-फिरने और पुनर्वास से जुड़ी समस्याओं में फिजियोथेरेपी सहायता।',
      features: ['घुटने, कमर व गर्दन का दर्द', 'घर पर फिजियोथेरेपी', 'स्ट्रोक व सर्जरी के बाद पुनर्वास'],
      cta: 'फिजियोथेरेपी बुक करें',
      bgGradient: 'from-emerald-50/80 to-teal-50/50',
      accentColor: 'text-emerald-700',
      badgeBg: 'bg-emerald-100 text-emerald-800',
      buttonBg: 'bg-emerald-600 hover:bg-emerald-700 text-white',
    },
  ];

  return (
    <section id="services" className="py-20 bg-slate-50/60">
      <div className="container">
        {/* Section 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/70 text-blue-800 text-xs font-bold uppercase tracking-wider mb-4">
            <Sparkles className="w-3.5 h-3.5 text-blue-700" />
            <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>

        {/* 3 Large Cards Grid */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {services.map((svc) => (
            <div
              key={svc.id}
              className={`bg-gradient-to-b ${svc.bgGradient} rounded-3xl p-8 border border-slate-200/80 shadow-lg hover:shadow-xl transition-all duration-300 flex flex-col justify-between group`}
            >
              <div>
                {/* Icon & Badge */}
                <div className="flex items-center justify-between mb-6">
                  <div className="w-16 h-16 rounded-2xl bg-white shadow-md flex items-center justify-center text-3xl group-hover:scale-110 transition-transform">
                    {svc.icon}
                  </div>
                  <span className={`text-xs font-bold px-3 py-1 rounded-full ${svc.badgeBg}`}>
                    {svc.subtitle}
                  </span>
                </div>

                {/* Title & Description */}
                <h3 className="text-2xl font-bold text-slate-900 mb-3 group-hover:text-blue-700 transition-colors">
                  {svc.title}
                </h3>
                <p className="text-slate-600 text-sm leading-relaxed mb-6">
                  {svc.description}
                </p>

                {/* Bullet Features */}
                <ul className="space-y-2.5 mb-8 border-t border-slate-200/60 pt-6">
                  {svc.features.map((feat, idx) => (
                    <li key={idx} className="flex items-center gap-2.5 text-sm text-slate-700">
                      <CheckCircle className={`w-4 h-4 ${svc.accentColor} shrink-0`} />
                      <span className="font-medium">{feat}</span>
                    </li>
                  ))}
                </ul>
              </div>

              {/* CTA Button */}
              <button
                onClick={() => onSelectService(svc.title)}
                className={`w-full py-3.5 px-6 rounded-xl font-bold text-sm shadow-md flex items-center justify-center gap-2 ${svc.buttonBg} transition-all`}
              >
                <span>{svc.cta}</span>
                <ArrowRight className="w-4 h-4" />
              </button>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};
