import React from 'react';
import { Instagram, Facebook, Youtube, MapPin, Sparkles, ExternalLink } from 'lucide-react';

export const SocialMediaSection: React.FC = () => {
  const socialLinks = [
    {
      name: 'Instagram',
      handle: '@skyhealthycentre',
      desc: 'स्वास्थ्य टिप्स, रील्स और अपडेट्स देखें',
      icon: <Instagram className="w-6 h-6 text-pink-600" />,
      bg: 'bg-pink-50 hover:bg-pink-100 border-pink-200',
      textColor: 'text-pink-700',
      url: 'https://www.instagram.com/skyhealthycentre?igsh=MWpqdnNwYW1pb3g4eg==',
    },
    {
      name: 'Facebook',
      handle: 'Sky Health Centre Fatehpur',
      desc: 'हमारे पेज को लाइक करें और जुड़े रहें',
      icon: <Facebook className="w-6 h-6 text-blue-600" />,
      bg: 'bg-blue-50 hover:bg-blue-100 border-blue-200',
      textColor: 'text-blue-700',
      url: 'https://www.facebook.com/share/1H29s9E6g5/',
    },
    {
      name: 'Google Business Profile',
      handle: 'स्काई हेल्थ सेंटर, फतेहपुर',
      desc: 'गूगल मैप्स पर समीक्षा और दिशा-निर्देश देखें',
      icon: <MapPin className="w-6 h-6 text-emerald-600" />,
      bg: 'bg-emerald-50 hover:bg-emerald-100 border-emerald-200',
      textColor: 'text-emerald-700',
      url: 'https://share.google/f3HOhHCcLU5jBfkJg',
    },
    {
      name: 'YouTube',
      handle: '@Skyhealthycentre',
      desc: 'फिजियोथेरेपी व्यायाम और स्वास्थ्य वीडियो',
      icon: <Youtube className="w-6 h-6 text-red-600" />,
      bg: 'bg-red-50 hover:bg-red-100 border-red-200',
      textColor: 'text-red-700',
      url: 'https://www.youtube.com/@Skyhealthycentre',
    },
  ];

  return (
    <section className="py-20 bg-slate-50 border-t border-slate-200/80">
      <div className="container">
        <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">
            <Sparkles 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-4">
            सोशल मीडिया पर हमसे जुड़ें (Social Media)
          </h2>
          <p className="text-base sm:text-lg text-slate-600">
            हमारे सोशल मीडिया चैनलों और गूगल बिजनेस प्रोफाइल पर स्वास्थ्य संबंधी टिप्स और अपडेट्स प्राप्त करें।
          </p>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {socialLinks.map((item, idx) => (
            <a
              key={idx}
              href={item.url}
              target="_blank"
              rel="noopener noreferrer"
              className={`rounded-3xl p-6 border transition-all duration-300 shadow-sm hover:shadow-lg flex flex-col justify-between group ${item.bg}`}
            >
              <div>
                <div className="w-12 h-12 rounded-2xl bg-white shadow-sm flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
                  {item.icon}
                </div>
                <h3 className="text-lg font-bold text-slate-900 mb-1 flex items-center justify-between">
                  <span>{item.name}</span>
                  <ExternalLink className="w-4 h-4 opacity-50 group-hover:opacity-100 transition-opacity" />
                </h3>
                <p className={`text-xs font-bold mb-2 ${item.textColor}`}>{item.handle}</p>
                <p className="text-xs text-slate-600 leading-relaxed">
                  {item.desc}
                </p>
              </div>

              <div className="mt-6 pt-4 border-t border-slate-200/50 flex items-center justify-between text-xs font-bold text-slate-700">
                <span>विजिट करें</span>
                <span>→</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};
