import React, { useState } from 'react';
import { ChevronDown, Sparkles, HelpCircle } from 'lucide-react';

export const FaqSection: React.FC = () => {
  const [openIdx, setOpenIdx] = useState<number | null>(0);

  const faqs = [
    {
      q: 'फिजियोथेरेपी कैसे बुक करें?',
      a: 'आप हमारी वेबसाइट पर दिए गए बुकिंग फॉर्म को भरकर, सीधे कॉल करके (+91-9939332200) या WhatsApp के माध्यम से आसानी से फिजियोथेरेपी बुक कर सकते हैं।'
    },
    {
      q: 'क्या घर पर फिजियोथेरेपी की सुविधा है?',
      a: 'हां, बुजुर्गों या चलने-फिरने में असमर्थ मरीजों के लिए फतेहपुर गोगरी जमालपुर और खगड़िया क्षेत्र में घर पर फिजियोथेरेपी की विशेष सुविधा उपलब्ध है।'
    },
    {
      q: 'किन समस्याओं में फिजियोथेरेपी सहायता मिल सकती है?',
      a: 'घुटने का दर्द, कमर दर्द, गर्दन दर्द, कंधे का दर्द, जोड़ों का दर्द, साइटिका, स्ट्रोक व लकवा के बाद पुनर्वास तथा सर्जरी के बाद की रिकवरी में फिजियोथेरेपी सहायता मिलती है।'
    },
    {
      q: 'क्या बुजुर्गों के लिए घर पर फिजियोथेरेपी उपलब्ध है?',
      a: 'बिल्कुल, बुजुर्ग मरीजों की सुविधा को ध्यान में रखते हुए हमारे अनुभवी फिजियोथेरेपिस्ट घर पर आकर उपचार प्रदान करते हैं।'
    },
    {
      q: 'त्वचा की समस्या के लिए कैसे संपर्क करें?',
      a: 'दाद, खुजली, एलर्जी, मुंहासे या एक्जिमा जैसी त्वचा संबंधी समस्याओं के लिए आप हमारे क्लिनिक आ सकते हैं या फोन/WhatsApp पर संपर्क कर सकते हैं।'
    },
    {
      q: 'बाल झड़ने की समस्या के लिए परामर्श कैसे लें?',
      a: 'बालों का झड़ना, गंजापन या रूसी से जुड़ी समस्याओं के उचित परामर्श के लिए आप कॉल या WhatsApp पर संपर्क कर सकते हैं।'
    },
    {
      q: 'क्या WhatsApp से संपर्क कर सकते हैं?',
      a: 'हां, आप किसी भी समय +91-9939332200 पर WhatsApp मैसेज भेजकर अपनी समस्या साझा कर सकते हैं और समय बुक कर सकते हैं।'
    },
    {
      q: 'सेवा किन क्षेत्रों में उपलब्ध है?',
      a: 'हमारी सेवाएं मुख्य रूप से फतेहपुर गोगरी जमालपुर, खगड़िया, बिहार (851203) और आसपास के नजदीकी इलाकों में उपलब्ध हैं।'
    },
    {
      q: 'फीस कितनी है?',
      a: 'परामर्श और फिजियोथेरेपी की फीस समस्या के प्रकार और सेवा (क्लिनिक या घर पर) के अनुसार होती है। अधिक जानकारी के लिए कृपया कॉल करें।'
    },
    {
      q: 'समय कैसे बुक करें?',
      a: 'आप वेबसाइट के बुकिंग फॉर्म में अपनी जानकारी भरकर या सीधे कॉल करके अपने अनुकूल समय तय कर सकते हैं।'
    },
  ];

  return (
    <section id="faq" className="py-20 bg-white">
      <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-sky-100 text-sky-800 text-xs font-bold uppercase tracking-wider mb-4">
            <HelpCircle 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">
            सवाल-जवाब (FAQ)
          </h2>
          <p className="text-base sm:text-lg text-slate-600">
            हमारी सेवाओं से जुड़े अक्सर पूछे जाने वाले महत्वपूर्ण सवाल।
          </p>
        </div>

        {/* FAQ Accordion List */}
        <div className="max-w-3xl mx-auto space-y-4">
          {faqs.map((faq, idx) => {
            const isOpen = openIdx === idx;
            return (
              <div
                key={idx}
                className="bg-slate-50 border border-slate-200/80 rounded-2xl overflow-hidden transition-all shadow-sm"
              >
                <button
                  onClick={() => setOpenIdx(isOpen ? null : idx)}
                  className="w-full px-6 py-4.5 text-left font-bold text-slate-900 flex items-center justify-between gap-4 hover:bg-slate-100/70 transition-colors"
                >
                  <span className="text-base sm:text-lg flex items-center gap-3">
                    <span className="text-sky-700 font-extrabold text-sm">Q{idx + 1}.</span>
                    {faq.q}
                  </span>
                  <ChevronDown
                    className={`w-5 h-5 text-slate-500 transition-transform duration-300 shrink-0 ${isOpen ? 'rotate-180 text-sky-700' : ''}`}
                  />
                </button>
                {isOpen && (
                  <div className="px-6 pb-5 pt-2 text-slate-600 text-sm sm:text-base leading-relaxed border-t border-slate-200/50 bg-white">
                    {faq.a}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};
