import React from 'react';
import { Phone, MessageCircle, MapPin, Clock, Globe, Mail } from 'lucide-react';

export const ContactSection: React.FC = () => {
  const whatsappUrl = "https://wa.me/919939332200?text=" + encodeURIComponent("नमस्ते स्काई हेल्थ सेंटर, मुझे आपकी सेवा के बारे में जानकारी चाहिए।");

  return (
    <section id="contact" 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">
            <span>हमसे जुड़ें</span>
          </div>
          <h2 className="text-3xl sm:text-4xl font-extrabold text-slate-900 tracking-tight mb-4">
            संपर्क करें (Contact Us)
          </h2>
          <p className="text-base sm:text-lg text-slate-600">
            किसी भी स्वास्थ्य समस्या, परामर्श या फिजियोथेरेपी बुकिंग के लिए संपर्क करें।
          </p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Phone Card */}
          <div className="bg-slate-50 rounded-3xl p-8 border border-slate-200/80 shadow-sm hover:shadow-md transition-all text-center flex flex-col items-center justify-between">
            <div>
              <div className="w-16 h-16 rounded-2xl bg-sky-100 text-sky-700 flex items-center justify-center mx-auto mb-6 shadow-sm">
                <Phone className="w-8 h-8" />
              </div>
              <h3 className="text-xl font-bold text-slate-900 mb-2">फोन कॉल</h3>
              <p className="text-sm text-slate-600 mb-6">सीधे बात करने के लिए कॉल करें</p>
              <a
                href="tel:+919939332200"
                className="text-lg sm:text-xl font-extrabold text-blue-700 hover:underline block mb-6"
              >
                +91-9939332200
              </a>
            </div>
            <a
              href="tel:+919939332200"
              className="w-full py-3 bg-blue-700 hover:bg-blue-800 text-white font-bold text-sm rounded-xl shadow-md transition-all"
            >
              अभी कॉल करें
            </a>
          </div>

          {/* WhatsApp Card */}
          <div className="bg-slate-50 rounded-3xl p-8 border border-slate-200/80 shadow-sm hover:shadow-md transition-all text-center flex flex-col items-center justify-between">
            <div>
              <div className="w-16 h-16 rounded-2xl bg-emerald-100 text-emerald-600 flex items-center justify-center mx-auto mb-6 shadow-sm">
                <MessageCircle className="w-8 h-8 fill-emerald-600 text-emerald-600" />
              </div>
              <h3 className="text-xl font-bold text-slate-900 mb-2">WhatsApp</h3>
              <p className="text-sm text-slate-600 mb-6">मैसेज भेजकर तुरंत जानकारी पाएं</p>
              <a
                href={whatsappUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="text-lg sm:text-xl font-extrabold text-emerald-700 hover:underline block mb-6"
              >
                +91-9939332200
              </a>
            </div>
            <a
              href={whatsappUrl}
              target="_blank"
              rel="noopener noreferrer"
              className="w-full py-3 bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-sm rounded-xl shadow-md transition-all"
            >
              WhatsApp पर चैट करें
            </a>
          </div>

          {/* Location & Time Card */}
          <div className="bg-slate-50 rounded-3xl p-8 border border-slate-200/80 shadow-sm hover:shadow-md transition-all text-center flex flex-col items-center justify-between">
            <div>
              <div className="w-16 h-16 rounded-2xl bg-blue-100 text-blue-700 flex items-center justify-center mx-auto mb-6 shadow-sm">
                <MapPin className="w-8 h-8" />
              </div>
              <h3 className="text-xl font-bold text-slate-900 mb-2">स्थान एवं समय</h3>
              <p className="text-sm text-slate-600 mb-4">
                <strong>पता:</strong> फतेहपुर गोगरी जमालपुर, खगड़िया, बिहार 851203
              </p>
              <p className="text-xs text-slate-500 mb-6 flex items-center justify-center gap-1.5">
                <Clock className="w-4 h-4 text-sky-700" />
                <span>समय: सुबह 9:00 से शाम 7:00 बजे तक</span>
              </p>
            </div>
            <a
              href="#booking"
              className="w-full py-3 bg-slate-800 hover:bg-slate-900 text-white font-bold text-sm rounded-xl shadow-md transition-all"
            >
              समय बुक करें
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};
