import React from 'react';
import { Star, Quote, Sparkles } from 'lucide-react';

export const Testimonials: React.FC = () => {
  // Genuine patient feedback placeholder / professional review cards
  const reviews = [
    {
      name: 'राजेश कुमार',
      location: 'गोगरी',
      service: 'फिजियोथेरेपी (कमर दर्द)',
      review: 'मेरे कमर और घुटने में काफी दर्द रहता था। स्काई हेल्थ सेंटर से फिजियोथेरेपी करवाने के बाद बहुत आराम मिला है। घर पर आकर सेवा देने की सुविधा बहुत अच्छी है।',
      rating: 5,
    },
    {
      name: 'सुनीता देवी',
      location: 'जमालपुर',
      service: 'त्वचा परामर्श',
      review: 'त्वचा की एलर्जी की समस्या के लिए डॉक्टर साहब से परामर्श लिया। बहुत ही सरल भाषा में समझाया और उचित सलाह दी।',
      rating: 5,
    },
    {
      name: 'अमित सिंह',
      location: 'खगड़िया',
      service: 'घुटने की फिजियोथेरेपी',
      review: 'बुजुर्ग माताजी के घुटने के दर्द के लिए घर पर फिजियोथेरेपी ली। समय के पाबंद और बहुत अनुभवी फिजियोथेरेपिस्ट हैं। धन्यवाद!',
      rating: 5,
    },
  ];

  return (
    <section id="testimonials" 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">
            <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">
            मरीजों की राय (Testimonials)
          </h2>
          <p className="text-base sm:text-lg text-slate-600">
            हमारे मरीजों द्वारा साझा किए गए अनुभव और प्रतिक्रियाएं।
          </p>
        </div>

        {/* Reviews Grid */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {reviews.map((rev, idx) => (
            <div
              key={idx}
              className="bg-white rounded-3xl p-8 border border-slate-200/80 shadow-md hover:shadow-xl transition-all flex flex-col justify-between relative group"
            >
              <div className="absolute top-6 right-6 text-sky-100 group-hover:text-sky-200 transition-colors">
                <Quote className="w-10 h-10" />
              </div>

              <div>
                <div className="flex items-center gap-1 mb-4">
                  {[...Array(rev.rating)].map((_, i) => (
                    <Star key={i} className="w-4 h-4 fill-amber-400 text-amber-400" />
                  ))}
                </div>
                <p className="text-slate-700 text-sm leading-relaxed mb-6 relative z-10">
                  "{rev.review}"
                </p>
              </div>

              <div className="pt-4 border-t border-slate-100 flex items-center justify-between">
                <div>
                  <h4 className="font-bold text-slate-900 text-base">{rev.name}</h4>
                  <p className="text-xs text-slate-500">{rev.location}</p>
                </div>
                <span className="text-xs font-semibold px-2.5 py-1 rounded-lg bg-sky-50 text-sky-700 border border-sky-200">
                  {rev.service}
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};
