import React, { useState } from 'react';
import { Heart, Phone, Mail, MapPin, Instagram, Facebook, Youtube } from 'lucide-react';

export const Footer: React.FC = () => {
  const [modalType, setModalType] = useState<'privacy' | 'terms' | 'disclaimer' | null>(null);

  return (
    <footer className="bg-slate-900 text-slate-300 pt-16 pb-12 border-t border-slate-800">
      <div className="container">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-10 mb-12">
          {/* Brand info */}
          <div className="lg:col-span-2">
            <div className="flex items-center gap-3 mb-4">
              <div className="w-[96px] h-[96px] rounded-full overflow-hidden bg-white shadow-md flex items-center justify-center border border-slate-700 p-0.5">
                <img
                  src="/manus-storage/ChatGPTImageAug9,2026,02_56_14PM_ab6111e5.png"
                  alt="Sky Health Centre Logo"
                  className="w-full h-full object-cover"
                />
              </div>
              <div>
                <div className="text-3xl sm:text-4xl font-black text-white tracking-tight">स्काई हेल्थ सेंटर</div>
                <div className="text-xs font-bold text-sky-400">फतेहपुर, गोगरी, जमालपुर, खगड़िया</div>
              </div>
            </div>
            <p className="text-slate-400 text-sm leading-relaxed mb-6 max-w-sm">
              "त्वचा, बाल और फिजियोथेरेपी से जुड़ी समस्याओं के लिए सरल और भरोसेमंद देखभाल।" फतेहपुर, गोगरी, जमालपुर, खगड़िया में स्वास्थ्य सेवाओं के लिए विश्वसनीय केंद्र।
            </p>
            <div className="space-y-2 text-xs text-slate-400 mb-6">
              <div className="flex items-center gap-2">
                <Phone className="w-4 h-4 text-sky-400" />
                <span>+91-9939332200</span>
              </div>
              <div className="flex items-center gap-2">
                <MapPin className="w-4 h-4 text-sky-400" />
                <span>फतेहपुर, गोगरी, जमालपुर, खगड़िया, बिहार 851203</span>
              </div>
            </div>

            {/* Social Icons */}
            <div className="flex items-center gap-3">
              <a href="https://www.instagram.com/skyhealthycentre?igsh=MWpqdnNwYW1pb3g4eg==" target="_blank" rel="noopener noreferrer" className="w-9 h-9 rounded-xl bg-slate-800 hover:bg-pink-600 text-slate-300 hover:text-white flex items-center justify-center transition-colors">
                <Instagram className="w-4 h-4" />
              </a>
              <a href="https://www.facebook.com/share/1H29s9E6g5/" target="_blank" rel="noopener noreferrer" className="w-9 h-9 rounded-xl bg-slate-800 hover:bg-blue-600 text-slate-300 hover:text-white flex items-center justify-center transition-colors">
                <Facebook className="w-4 h-4" />
              </a>
              <a href="https://www.youtube.com/@Skyhealthycentre" target="_blank" rel="noopener noreferrer" className="w-9 h-9 rounded-xl bg-slate-800 hover:bg-red-600 text-slate-300 hover:text-white flex items-center justify-center transition-colors">
                <Youtube className="w-4 h-4" />
              </a>
              <a href="https://share.google/f3HOhHCcLU5jBfkJg" target="_blank" rel="noopener noreferrer" className="w-9 h-9 rounded-xl bg-slate-800 hover:bg-emerald-600 text-slate-300 hover:text-white flex items-center justify-center transition-colors">
                <MapPin className="w-4 h-4" />
              </a>
            </div>
          </div>

          {/* Quick Links */}
          <div>
            <h4 className="text-white font-bold text-base mb-4">त्वरित लिंक (Quick Links)</h4>
            <ul className="space-y-2.5 text-sm">
              <li><a href="#home" className="hover:text-sky-400 transition-colors">होम</a></li>
              <li><a href="#about" className="hover:text-sky-400 transition-colors">हमारे बारे में</a></li>
              <li><a href="#services" className="hover:text-sky-400 transition-colors">सेवाएं</a></li>
              <li><a href="#conditions" className="hover:text-sky-400 transition-colors">बीमारियां / समस्याएं</a></li>
              <li><a href="#how-it-works" className="hover:text-sky-400 transition-colors">कैसे काम करता है</a></li>
            </ul>
          </div>

          {/* Services */}
          <div>
            <h4 className="text-white font-bold text-base mb-4">मुख्य सेवाएं (Services)</h4>
            <ul className="space-y-2.5 text-sm">
              <li><a href="#services" className="hover:text-sky-400 transition-colors">त्वचा की देखभाल</a></li>
              <li><a href="#services" className="hover:text-sky-400 transition-colors">बालों की देखभाल</a></li>
              <li><a href="#services" className="hover:text-sky-400 transition-colors">फिजियोथेरेपी</a></li>
              <li><a href="#services" className="hover:text-sky-400 transition-colors">जोड़ों का दर्द</a></li>
              <li><a href="#services" className="hover:text-sky-400 transition-colors">कमर व घुटना दर्द</a></li>
            </ul>
          </div>

          {/* Legal / Policies */}
          <div>
            <h4 className="text-white font-bold text-base mb-4">नीति एवं नियम (Legal)</h4>
            <ul className="space-y-2.5 text-sm">
              <li>
                <button onClick={() => setModalType('privacy')} className="hover:text-sky-400 transition-colors text-left">
                  Privacy Policy
                </button>
              </li>
              <li>
                <button onClick={() => setModalType('terms')} className="hover:text-sky-400 transition-colors text-left">
                  Terms & Conditions
                </button>
              </li>
              <li>
                <button onClick={() => setModalType('disclaimer')} className="hover:text-sky-400 transition-colors text-left">
                  Medical Disclaimer
                </button>
              </li>
            </ul>
          </div>
        </div>

        {/* Bottom Copyright */}
        <div className="pt-8 border-t border-slate-800 flex flex-col sm:flex-row items-center justify-between text-xs text-slate-500 gap-4">
          <p>© 2026 Sky Health Centre. All Rights Reserved.</p>
          <p>फतेहपुर, गोगरी, जमालपुर, खगड़िया, बिहार 851203 में स्वास्थ्य एवं फिजियोथेरेपी सेवा।</p>
        </div>
      </div>

      {/* Policy Modal */}
      {modalType && (
        <div className="fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4">
          <div className="bg-white rounded-3xl max-w-lg w-full p-8 text-slate-800 relative shadow-2xl animate-in fade-in zoom-in-95 duration-200">
            <h3 className="text-2xl font-bold mb-4 text-blue-700">
              {modalType === 'privacy' && 'Privacy Policy'}
              {modalType === 'terms' && 'Terms & Conditions'}
              {modalType === 'disclaimer' && 'Medical Disclaimer'}
            </h3>
            <div className="text-sm text-slate-600 leading-relaxed space-y-3 max-h-96 overflow-y-auto mb-6 pr-2">
              {modalType === 'privacy' && (
                <p>
                  स्काई हेल्थ सेंटर आपकी गोपनीयता का सम्मान करता है। आपके द्वारा फॉर्म या WhatsApp पर साझा की गई जानकारी (नाम, फोन नंबर, समस्या) का उपयोग केवल आपकी स्वास्थ्य सेवा और अपॉइंटमेंट समन्वय के लिए किया जाता है। हम आपका डेटा किसी तीसरे पक्ष के साथ साझा नहीं करते हैं।
                </p>
              )}
              {modalType === 'terms' && (
                <p>
                  इस वेबसाइट पर दी गई जानकारी सामान्य स्वास्थ्य जागरूकता और परामर्श बुकिंग के उद्देश्य से है। सेवाएं उपलब्धता और डॉक्टर के परामर्श के अधीन हैं। समय बुकिंग की पुष्टि फोन या WhatsApp के माध्यम से की जाती है।
                </p>
              )}
              {modalType === 'disclaimer' && (
                <p>
                  <strong>Medical Disclaimer:</strong> इस वेबसाइट की सामग्री केवल सूचना और परामर्श के लिए है। यह पेशेवर चिकित्सीय निदान, सलाह या उपचार का विकल्प नहीं है। किसी भी गंभीर स्वास्थ्य समस्या के लिए हमेशा योग्य डॉक्टर से मिलें। हम शत-प्रतिशत इलाज या गारंटी का दावा नहीं करते।
                </p>
              )}
            </div>
            <button
              onClick={() => setModalType(null)}
              className="w-full py-3 bg-blue-700 hover:bg-blue-800 text-white font-bold rounded-xl shadow-md transition-all"
            >
              बंद करें (Close)
            </button>
          </div>
        </div>
      )}
    </footer>
  );
};
