import React from 'react';
import { MapPin, CheckCircle, Search } from 'lucide-react';

export const ServiceAreas: React.FC = () => {
  const localAreas = [
    'फतेहपुर गोगरी जमालपुर (मुख्य शहर)',
    'खगड़िया',
    'बोरबे',
    'पसराहा',
    'महेशखूंट',
    'बलथा',
    'चौथम',
    'कलवाड़ा',
    'परबत्ता',
    'गोगरी के आसपास के ग्रामीण क्षेत्र',
  ];

  const seoKeywords = [
    'फतेहपुर गोगरी जमालपुर में फिजियोथेरेपी',
    'खगड़िया में घर पर फिजियोथेरेपी',
    'मेरे पास फिजियोथेरेपिस्ट',
    'गोगरी में त्वचा रोग परामर्श',
    'खगड़िया में बालों की समस्या का परामर्श',
    'जोड़ों के दर्द का इलाज गोगरी',
  ];

  return (
    <section id="areas" className="py-20 bg-white">
      <div className="container">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
          {/* Left: Areas List */}
          <div className="lg:col-span-6">
            <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">
              <MapPin 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">
              हमारे सेवा क्षेत्र (Areas We Serve)
            </h2>
            <p className="text-slate-600 mb-8 leading-relaxed">
              स्काई हेल्थ सेंटर मुख्य रूप से <strong className="text-slate-900">फतेहपुर गोगरी जमालपुर, खगड़िया, बिहार (851203)</strong> और आसपास के क्षेत्रों में क्लिनिक परामर्श तथा घर पर फिजियोथेरेपी सेवा प्रदान करता है।
            </p>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-8">
              {localAreas.map((area, idx) => (
                <div key={idx} className="flex items-center gap-3 p-3 rounded-xl bg-slate-50 border border-slate-200/60">
                  <MapPin className="w-4 h-4 text-sky-600 shrink-0" />
                  <span className="text-sm font-semibold text-slate-800">{area}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Right: SEO Search Terms & Local Map Card */}
          <div className="lg:col-span-6">
            <div className="bg-gradient-to-br from-slate-900 to-blue-950 rounded-3xl p-8 sm:p-10 text-white shadow-xl">
              <div className="flex items-center gap-3 mb-6">
                <div className="w-12 h-12 rounded-2xl bg-white/10 flex items-center justify-center">
                  <Search className="w-6 h-6 text-sky-400" />
                </div>
                <div>
                  <h3 className="text-xl font-bold">लोकप्रिय खोज (Popular Searches)</h3>
                  <p className="text-xs text-slate-400">मरीज अक्सर इन सेवाओं के लिए खोज करते हैं</p>
                </div>
              </div>

              <div className="flex flex-wrap gap-2.5 mb-8">
                {seoKeywords.map((kw, idx) => (
                  <span
                    key={idx}
                    className="px-3.5 py-2 rounded-xl bg-white/10 border border-white/15 text-xs font-medium text-sky-200 hover:bg-white/20 transition-colors"
                  >
                    {kw}
                  </span>
                ))}
              </div>

              <div className="p-4 rounded-2xl bg-white/5 border border-white/10">
                <div className="flex items-center gap-3">
                  <div className="w-3 h-3 rounded-full bg-emerald-500 animate-pulse"></div>
                  <span className="text-sm font-medium text-slate-200">
                    फतेहपुर गोगरी जमालपुर और खगड़िया में घर पर फिजियोथेरेपी बुकिंग के लिए संपर्क करें।
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};
