import React from 'react';
import { Award, ShieldCheck, HeartPulse, CheckCircle2, MapPin, Users } from 'lucide-react';

export const AboutSection: React.FC = () => {
  return (
    <section id="about" className="py-20 bg-white">
      <div className="container">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
          {/* Left Column: Photo & Visual Highlight */}
          <div className="lg:col-span-5 space-y-6">
            <div className="rounded-3xl overflow-hidden shadow-xl border border-slate-200 aspect-[4/3] bg-slate-950 flex items-center justify-center p-2">
              <img
                src="/manus-storage/file_0000000018008208927a63261c248519_76827caa.png"
                onError={(e) => {
                  (e.target as HTMLImageElement).src = 'https://images.unsplash.com/photo-1519494026892-80bbd2d6fd0d?auto=format&fit=crop&w=800&q=80';
                }}
                alt="Clinic Tour"
                className="w-full h-full object-contain rounded-2xl"
              />
            </div>
            <div className="bg-gradient-to-br from-blue-700 to-sky-600 rounded-3xl p-6 sm:p-8 text-white shadow-xl relative overflow-hidden">
              <div className="absolute top-0 right-0 -mr-16 -mt-16 w-48 h-48 bg-white/10 rounded-full blur-2xl"></div>
              
              <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/20 text-white text-xs font-bold mb-4 backdrop-blur-md">
                <ShieldCheck className="w-4 h-4" />
                <span>भरोसेमंद स्वास्थ्य केंद्र</span>
              </div>

              <h3 className="text-xl sm:text-2xl font-extrabold mb-3 leading-tight">
                स्काई हेल्थ सेंटर, फतेहपुर गोगरी जमालपुर, खगड़िया
              </h3>
              
              <p className="text-sky-100 text-xs sm:text-sm leading-relaxed mb-6">
                त्वचा, बाल और फिजियोथेरेपी से जुड़ी हर स्वास्थ्य समस्या के लिए समर्पित क्लिनिक।
              </p>

              <div className="grid grid-cols-2 gap-4 border-t border-white/20 pt-4">
                <div className="flex items-center gap-3">
                  <div className="w-9 h-9 rounded-xl bg-white/20 flex items-center justify-center font-bold text-sm">
                    15+
                  </div>
                  <div>
                    <div className="text-xs font-bold">वर्षों का अनुभव</div>
                  </div>
                </div>

                <div className="flex items-center gap-3">
                  <div className="w-9 h-9 rounded-xl bg-white/20 flex items-center justify-center">
                    <MapPin className="w-4 h-4 text-white" />
                  </div>
                  <div>
                    <div className="text-xs font-bold">फतेहपुर गोगरी जमालपुर, खगड़िया, बिहार (851203)</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Right Column: Content */}
          <div className="lg:col-span-7">
            <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">
              <HeartPulse 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-6">
              स्काई हेल्थ सेंटर के बारे में
            </h2>

            <p className="text-base sm:text-lg text-slate-600 leading-relaxed mb-6">
              स्काई हेल्थ सेंटर में त्वचा, बाल और फिजियोथेरेपी से जुड़ी समस्याओं के लिए मरीजों को सरल, सुविधाजनक और व्यक्ति की जरूरत के अनुसार देखभाल उपलब्ध कराने पर ध्यान दिया जाता है।
            </p>

            <p className="text-slate-600 leading-relaxed mb-8">
              हमारा मुख्य उद्देश्य फतेहपुर गोगरी जमालपुर, खगड़िया और आसपास के स्थानीय मरीजों को बिना किसी जटिलता के उच्च गुणवत्ता वाली स्वास्थ्य सलाह और फिजियोथेरेपी सहायता प्रदान करना है। बुजुर्गों और चलने-फिरने में असमर्थ मरीजों के लिए घर पर फिजियोथेरेपी सेवा की विशेष सुविधा भी दी जाती है।
            </p>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div className="flex items-start gap-3 p-4 rounded-2xl bg-sky-50/70 border border-sky-100">
                <CheckCircle2 className="w-5 h-5 text-sky-700 shrink-0 mt-0.5" />
                <div>
                  <h4 className="font-bold text-slate-900 text-sm">व्यक्तिगत देखभाल</h4>
                  <p className="text-xs text-slate-600 mt-1">हर मरीज की समस्या को समझकर उचित सलाह।</p>
                </div>
              </div>

              <div className="flex items-start gap-3 p-4 rounded-2xl bg-blue-50/70 border border-blue-100">
                <CheckCircle2 className="w-5 h-5 text-blue-700 shrink-0 mt-0.5" />
                <div>
                  <h4 className="font-bold text-slate-900 text-sm">घरेलू फिजियोथेरेपी</h4>
                  <p className="text-xs text-slate-600 mt-1">जरुरत पड़ने पर घर पर फिजियोथेरेपिस्ट की सुविधा।</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};
