import React, { useState } from 'react';
import { Sparkles, Check, ChevronRight } from 'lucide-react';

interface SpecialtiesProps {
  onBookClick: () => void;
}

export const SpecialtiesSection: React.FC<SpecialtiesProps> = ({ onBookClick }) => {
  const [activeTab, setActiveTab] = useState<'skin' | 'hair' | 'physio'>('skin');

  const skinConditions = [
    'दाद (Ringworm)',
    'खुजली (Itching)',
    'एलर्जी (Allergy)',
    'एक्जिमा (Eczema)',
    'सोरायसिस (Psoriasis)',
    'मुंहासे (Acne / Pimples)',
    'सफेद दाग (Vitiligo)',
    'झाइयां (Melasma)',
    'काले निशान (Dark Spots)',
    'मस्से (Warts)',
    'तिल व अन्य समस्याएं',
    'रूसी व स्कैल्प समस्या',
    'त्वचा पर दाग-धब्बे',
  ];

  const hairConditions = [
    'बाल झड़ना (Hair Fall)',
    'गंजापन (Baldness / Alopecia)',
    'रूसी (Dandruff)',
    'बालों का कमजोर होना',
    'स्कैल्प इंफेक्शन',
    'समय से पहले बाल सफेद होना',
  ];

  const physioConditions = [
    'घुटने का दर्द (Knee Pain)',
    'कमर दर्द (Back Pain)',
    'गर्दन दर्द (Neck Pain)',
    'कंधे का दर्द (Shoulder Pain)',
    'जोड़ों का दर्द (Joint Pain)',
    'साइटिका (Sciatica)',
    'चलने में परेशानी (Walking Difficulty)',
    'हाथ-पैर में कमजोरी (Weakness)',
    'लकवा के बाद पुनर्वास (Paralysis Rehab)',
    'स्ट्रोक के बाद पुनर्वास (Stroke Rehab)',
    'सर्जरी के बाद पुनर्वास (Post-Surgery Rehab)',
    'बुजुर्गों की फिजियोथेरेपी (Geriatric Physio)',
  ];

  return (
    <section id="conditions" className="py-20 bg-slate-50">
      <div className="container">
        {/* Header */}
        <div className="text-center max-w-3xl mx-auto mb-12">
          <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-sky-100 text-sky-800 text-xs font-bold uppercase tracking-wider mb-4">
            <Sparkles className="w-3.5 h-3.5 text-sky-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>

        {/* Tab Buttons */}
        <div className="flex flex-wrap justify-center gap-3 mb-12">
          <button
            onClick={() => setActiveTab('skin')}
            className={`px-6 py-3 rounded-xl font-bold text-sm sm:text-base transition-all flex items-center gap-2 ${activeTab === 'skin' ? 'bg-blue-700 text-white shadow-lg shadow-blue-700/25' : 'bg-white text-slate-700 hover:bg-slate-100 border border-slate-200'}`}
          >
            <span>🧴</span>
            <span>त्वचा रोग / Skin Care</span>
          </button>
          <button
            onClick={() => setActiveTab('hair')}
            className={`px-6 py-3 rounded-xl font-bold text-sm sm:text-base transition-all flex items-center gap-2 ${activeTab === 'hair' ? 'bg-sky-600 text-white shadow-lg shadow-sky-600/25' : 'bg-white text-slate-700 hover:bg-slate-100 border border-slate-200'}`}
          >
            <span>💇</span>
            <span>बालों की समस्या / Hair Care</span>
          </button>
          <button
            onClick={() => setActiveTab('physio')}
            className={`px-6 py-3 rounded-xl font-bold text-sm sm:text-base transition-all flex items-center gap-2 ${activeTab === 'physio' ? 'bg-emerald-600 text-white shadow-lg shadow-emerald-600/25' : 'bg-white text-slate-700 hover:bg-slate-100 border border-slate-200'}`}
          >
            <span>🦵</span>
            <span>फिजियोथेरेपी / Physiotherapy</span>
          </button>
        </div>

        {/* Tab Content Cards */}
        <div className="bg-white rounded-3xl p-8 sm:p-12 shadow-xl border border-slate-200/80 max-w-4xl mx-auto">
          {activeTab === 'skin' && (
            <div>
              <div className="flex items-center gap-3 mb-6 pb-4 border-b border-slate-100">
                <span className="text-3xl">🧴</span>
                <div>
                  <h3 className="text-2xl font-bold text-slate-900">त्वचा रोग परामर्श (Skin Care)</h3>
                  <p className="text-sm text-slate-500">त्वचा से जुड़ी सभी आम और जटिल समस्याओं के लिए विशेषज्ञ परामर्श</p>
                </div>
              </div>
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
                {skinConditions.map((item, idx) => (
                  <div key={idx} className="flex items-center gap-3 p-3.5 rounded-xl bg-sky-50/50 border border-sky-100/80">
                    <Check className="w-4 h-4 text-sky-600 shrink-0" />
                    <span className="text-sm font-semibold text-slate-800">{item}</span>
                  </div>
                ))}
              </div>
            </div>
          )}

          {activeTab === 'hair' && (
            <div>
              <div className="flex items-center gap-3 mb-6 pb-4 border-b border-slate-100">
                <span className="text-3xl">💇</span>
                <div>
                  <h3 className="text-2xl font-bold text-slate-900">बालों की समस्या (Hair Care)</h3>
                  <p className="text-sm text-slate-500">बालों के झड़ने, गंजापन और स्कैल्प की समस्याओं का उचित समाधान</p>
                </div>
              </div>
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
                {hairConditions.map((item, idx) => (
                  <div key={idx} className="flex items-center gap-3 p-3.5 rounded-xl bg-sky-50/50 border border-sky-100/80">
                    <Check className="w-4 h-4 text-sky-600 shrink-0" />
                    <span className="text-sm font-semibold text-slate-800">{item}</span>
                  </div>
                ))}
              </div>
            </div>
          )}

          {activeTab === 'physio' && (
            <div>
              <div className="flex items-center gap-3 mb-6 pb-4 border-b border-slate-100">
                <span className="text-3xl">🦵</span>
                <div>
                  <h3 className="text-2xl font-bold text-slate-900">फिजियोथेरेपी (Physiotherapy & Rehab)</h3>
                  <p className="text-sm text-slate-500">जोड़ों, मांसपेशियों के दर्द और पुनर्वास के लिए विशेषज्ञ फिजियोथेरेपी</p>
                </div>
              </div>
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
                {physioConditions.map((item, idx) => (
                  <div key={idx} className="flex items-center gap-3 p-3.5 rounded-xl bg-emerald-50/50 border border-emerald-100/80">
                    <Check className="w-4 h-4 text-emerald-600 shrink-0" />
                    <span className="text-sm font-semibold text-slate-800">{item}</span>
                  </div>
                ))}
              </div>
            </div>
          )}

          <div className="pt-6 border-t border-slate-100 flex flex-col sm:flex-row items-center justify-between gap-4">
            <p className="text-xs text-slate-500">
              * सभी उपचार और परामर्श मरीज की व्यक्तिगत स्थिति व डॉक्टर की सलाह के आधार पर किए जाते हैं।
            </p>
            <button
              onClick={onBookClick}
              className="px-6 py-3 rounded-xl bg-blue-700 hover:bg-blue-800 text-white font-bold text-sm shadow-md flex items-center gap-2 shrink-0"
            >
              <span>परामर्श के लिए समय बुक करें</span>
              <ChevronRight className="w-4 h-4" />
            </button>
          </div>
        </div>
      </div>
    </section>
  );
};
