import React, { useState } from 'react';
import { Sparkles, PhoneCall, Calendar, ClipboardCheck, HeartHandshake, Home } from 'lucide-react';

export const HowItWorks: React.FC = () => {
  const [serviceType, setServiceType] = useState<'clinic' | 'home'>('clinic');

  const clinicSteps = [
    { num: '01', title: 'संपर्क करें', desc: 'फोन या WhatsApp के जरिए हमसे संपर्क करें।' },
    { num: '02', title: 'अपनी समस्या बताएं', desc: 'त्वचा, बाल या दर्द से जुड़ी अपनी परेशानी साझा करें।' },
    { num: '03', title: 'समय तय करें', desc: 'अपने अनुकूल परामर्श का समय बुक करें।' },
    { num: '04', title: 'जांच / सलाह', desc: 'केंद्र पर आकर विशेषज्ञ से संपूर्ण जांच व सलाह लें।' },
    { num: '05', title: 'उपचार / फिजियोथेरेपी', desc: 'आवश्यकतानुसार उचित उपचार और फिजियोथेरेपी।' },
    { num: '06', title: 'आगे की देखभाल', desc: 'परामर्श के बाद नियमित फॉलो-अप सहायता।' },
  ];

  const homeSteps = [
    { num: '01', title: 'फोन / WhatsApp करें', desc: 'घर पर फिजियोथेरेपी के लिए कॉल या मैसेज करें।' },
    { num: '02', title: 'समस्या बताएं', desc: 'मरीज की शारीरिक समस्या और दर्द की स्थिति बताएं।' },
    { num: '03', title: 'घर आने का समय तय करें', desc: 'अपने समय के अनुसार फिजियोथेरेपिस्ट का समय तय करें।' },
    { num: '04', title: 'फिजियोथेरेपिस्ट घर आएं', desc: 'निर्धारित समय पर विशेषज्ञ आपके घर पहुंचेंगे।' },
    { num: '05', title: 'समस्या की जांच', desc: 'घर पर ही मरीज की स्थिति का उचित मूल्यांकन।' },
    { num: '06', title: 'जरूरत के अनुसार उपचार', desc: 'घर पर ही आरामदायक फिजियोथेरेपी सत्र।' },
  ];

  return (
    <section id="how-it-works" className="py-20 bg-white">
      <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-blue-100 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>

        {/* Toggle between Clinic and Home Visit */}
        <div className="flex justify-center mb-12">
          <div className="inline-flex p-1.5 bg-slate-100 rounded-2xl border border-slate-200">
            <button
              onClick={() => setServiceType('clinic')}
              className={`px-6 py-3 rounded-xl font-bold text-sm transition-all flex items-center gap-2 ${serviceType === 'clinic' ? 'bg-blue-700 text-white shadow-md' : 'text-slate-700 hover:text-slate-900'}`}
            >
              <span>🏥 क्लिनिक परामर्श (Clinic Visit)</span>
            </button>
            <button
              onClick={() => setServiceType('home')}
              className={`px-6 py-3 rounded-xl font-bold text-sm transition-all flex items-center gap-2 ${serviceType === 'home' ? 'bg-emerald-600 text-white shadow-md' : 'text-slate-700 hover:text-slate-900'}`}
            >
              <Home className="w-4 h-4" />
              <span>घर पर फिजियोथेरेपी (Home Visit)</span>
            </button>
          </div>
        </div>

        {/* Steps Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
          {(serviceType === 'clinic' ? clinicSteps : homeSteps).map((step, idx) => (
            <div
              key={idx}
              className="bg-slate-50/70 rounded-2xl p-6 border border-slate-200/80 hover:border-blue-300 hover:shadow-lg transition-all relative group"
            >
              <div className="flex items-center justify-between mb-4">
                <span className="text-3xl font-extrabold text-blue-600/30 group-hover:text-blue-600 transition-colors">
                  {step.num}
                </span>
                <div className="w-10 h-10 rounded-xl bg-blue-100 text-blue-700 flex items-center justify-center font-bold text-sm">
                  {idx + 1}
                </div>
              </div>
              <h3 className="text-xl font-bold text-slate-900 mb-2">{step.title}</h3>
              <p className="text-sm text-slate-600 leading-relaxed">{step.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};
