import React from 'react';
import { Phone, MessageCircle, Sparkles, CheckCircle2, Award, Home, ShieldCheck, UserCheck } from 'lucide-react';

interface HeroProps {
  onBookClick: () => void;
}

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

  return (
    <section id="home" className="relative pt-32 pb-20 md:pt-40 md:pb-28 overflow-hidden bg-gradient-to-b from-sky-50/80 via-amber-50/20 to-white">
      {/* Background Decorative Blobs */}
      <div className="absolute top-0 right-0 -z-10 w-96 h-96 bg-sky-200/40 rounded-full blur-3xl transform translate-x-1/3 -translate-y-1/4"></div>
      <div className="absolute top-1/2 left-0 -z-10 w-80 h-80 bg-blue-100/50 rounded-full blur-3xl transform -translate-x-1/3"></div>

      <div className="container">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-8 items-center">
          {/* Left Content */}
          <div className="lg:col-span-7 flex flex-col items-start text-left">
            {/* Badge */}
            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-sky-100/80 text-sky-800 text-sm font-semibold mb-6 border border-sky-200 shadow-sm animate-in fade-in duration-500">
              <Home className="w-4 h-4 text-sky-700" />
              <span>घर पर फिजियोथेरेपी की सुविधा उपलब्ध (Home Visit Available)</span>
            </div>

            {/* Main H1 */}
            <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-slate-900 tracking-tight leading-[1.2] mb-6">
              स्किन, बाल और फिजियोथेरेपी की देखभाल <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-700 to-sky-600">एक ही जगह</span>
            </h1>

            {/* Paragraph */}
            <p className="text-lg md:text-xl text-slate-600 font-normal leading-relaxed mb-8 max-w-2xl">
              त्वचा और बालों से जुड़ी समस्याओं के साथ-साथ जोड़, कमर, गर्दन और शरीर के दर्द के लिए फिजियोथेरेपी की सुविधा। जरूरत के अनुसार घर पर सेवा उपलब्ध।
            </p>

            {/* Experience Highlight */}
            <div className="flex items-center gap-3 mb-8 bg-blue-50/80 border border-blue-200/60 px-5 py-3 rounded-2xl shadow-sm">
              <div className="w-10 h-10 rounded-xl bg-blue-700 text-white flex items-center justify-center font-bold text-lg shadow-sm">
                15+
              </div>
              <div>
                <div className="text-sm font-bold text-slate-900">वर्षों का समृद्ध अनुभव</div>
                <div className="text-xs text-slate-600">विशेषज्ञ और भरोसेमंद स्वास्थ्य देखभाल</div>
              </div>
            </div>

            {/* Three Main CTAs */}
            <div className="flex flex-wrap gap-3.5 w-full sm:w-auto mb-10">
              <button
                onClick={onBookClick}
                className="flex-1 sm:flex-none flex items-center justify-center gap-2 px-7 py-4 text-base font-bold text-white bg-blue-700 hover:bg-blue-800 rounded-xl shadow-lg shadow-blue-700/25 hover:shadow-xl transition-all"
              >
                <Sparkles className="w-5 h-5" />
                <span>समय बुक करें</span>
              </button>
              <a
                href="tel:+919939332200"
                className="flex-1 sm:flex-none flex items-center justify-center gap-2 px-6 py-4 text-base font-bold text-sky-800 bg-sky-50 hover:bg-sky-100 rounded-xl border border-sky-300 shadow-sm transition-all"
              >
                <Phone className="w-5 h-5 text-sky-700" />
                <span>अभी कॉल करें</span>
              </a>
              <a
                href={whatsappUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="w-full sm:w-auto flex items-center justify-center gap-2 px-6 py-4 text-base font-bold text-white bg-emerald-600 hover:bg-emerald-700 rounded-xl shadow-md shadow-emerald-600/20 transition-all"
              >
                <MessageCircle className="w-5 h-5 fill-white" />
                <span>WhatsApp पर पूछें</span>
              </a>
            </div>

            {/* Trust Points */}
            <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 w-full pt-6 border-t border-slate-200/80">
              <div className="flex items-center gap-2">
                <CheckCircle2 className="w-5 h-5 text-sky-600 shrink-0" />
                <span className="text-xs sm:text-sm font-semibold text-slate-700">15+ वर्षों का अनुभव</span>
              </div>
              <div className="flex items-center gap-2">
                <CheckCircle2 className="w-5 h-5 text-sky-600 shrink-0" />
                <span className="text-xs sm:text-sm font-semibold text-slate-700">घर पर फिजियोथेरेपी</span>
              </div>
              <div className="flex items-center gap-2">
                <CheckCircle2 className="w-5 h-5 text-sky-600 shrink-0" />
                <span className="text-xs sm:text-sm font-semibold text-slate-700">व्यक्तिगत देखभाल</span>
              </div>
              <div className="flex items-center gap-2">
                <CheckCircle2 className="w-5 h-5 text-sky-600 shrink-0" />
                <span className="text-xs sm:text-sm font-semibold text-slate-700">आसान अपॉइंटमेंट</span>
              </div>
            </div>
          </div>

          {/* Right Visual / Service Highlights Card with Photo */}
          <div className="lg:col-span-5">
            <div className="relative mx-auto max-w-md lg:max-w-none">
              {/* Featured Clinic Photo Header */}
              <div className="mb-4 rounded-3xl overflow-hidden shadow-xl border border-slate-200/80 aspect-[16/10]">
                <img
                  src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?auto=format&fit=crop&w=800&q=80"
                  alt="Sky Health Centre Consultation"
                  className="w-full h-full object-cover hover:scale-105 transition-transform duration-500"
                />
              </div>

              {/* Main Card */}
              <div className="bg-white rounded-3xl p-6 sm:p-8 shadow-2xl border border-slate-100 relative z-10">
                <div className="text-center mb-6">
                  <div className="inline-block p-3 rounded-2xl bg-sky-50 text-sky-700 mb-3">
                    <ShieldCheck className="w-10 h-10" />
                  </div>
                  <h3 className="text-xl font-bold text-slate-900">स्काई हेल्थ सेंटर</h3>
                  <p className="text-sm text-slate-500">फतेहपुर गोगरी जमालपुर, खगड़िया, बिहार 851203</p>
                </div>

                {/* Three Visual Service Badges */}
                <div className="space-y-4">
                  <div className="flex items-center gap-4 p-4 rounded-2xl bg-sky-50/70 border border-sky-100 hover:bg-sky-100/70 transition-colors">
                    <div className="w-12 h-12 rounded-xl bg-blue-600 text-white flex items-center justify-center text-2xl shadow-md">
                      🧴
                    </div>
                    <div>
                      <h4 className="font-bold text-slate-900">त्वचा की देखभाल (Skin Care)</h4>
                      <p className="text-xs text-slate-600">मुंहासे, दाद, खुजली, एक्जिमा व सोरायसिस</p>
                    </div>
                  </div>

                  <div className="flex items-center gap-4 p-4 rounded-2xl bg-blue-50/70 border border-blue-100 hover:bg-blue-100/70 transition-colors">
                    <div className="w-12 h-12 rounded-xl bg-sky-600 text-white flex items-center justify-center text-2xl shadow-md">
                      💇
                    </div>
                    <div>
                      <h4 className="font-bold text-slate-900">बालों की देखभाल (Hair Care)</h4>
                      <p className="text-xs text-slate-600">बाल झड़ना, गंजापन व रूसी का समाधान</p>
                    </div>
                  </div>

                  <div className="flex items-center gap-4 p-4 rounded-2xl bg-emerald-50/70 border border-emerald-100 hover:bg-emerald-100/70 transition-colors">
                    <div className="w-12 h-12 rounded-xl bg-emerald-600 text-white flex items-center justify-center text-2xl shadow-md">
                      🦵
                    </div>
                    <div>
                      <h4 className="font-bold text-slate-900">फिजियोथेरेपी (Physiotherapy)</h4>
                      <p className="text-xs text-slate-600">घुटने, कमर, गर्दन और जोड़ों का दर्द</p>
                    </div>
                  </div>
                </div>

                <div className="mt-6 pt-6 border-t border-slate-100 flex items-center justify-between text-xs text-slate-500 font-medium">
                  <span className="flex items-center gap-1.5">
                    <UserCheck className="w-4 h-4 text-blue-600" />
                    अनुभवी विशेषज्ञ परामर्श
                  </span>
                  <a href="#services" className="text-sky-700 hover:underline font-bold">सभी सेवाएं देखें →</a>
                </div>
              </div>

              {/* Decorative Accent Card Behind */}
              <div className="absolute -bottom-6 -right-6 w-full h-full bg-gradient-to-br from-blue-600/20 to-sky-400/20 rounded-3xl -z-10 blur-md"></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};
