import React from 'react';
import { Sparkles } from 'lucide-react';

export const ImageGallery: React.FC = () => {
  const images = [
    {
      url: '/manus-storage/ChatGPTImageAug12,2026,11_51_22PM_627e4905.png',
      fallbackUrl: 'https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?auto=format&fit=crop&w=800&q=80',
      title: 'त्वचा एवं बाल परामर्श',
      subtitle: 'Skin & Hair Consultation',
    },
    {
      url: '/manus-storage/ChatGPTImageAug13,2026,10_53_54AM_eca3f710.png',
      fallbackUrl: 'https://images.unsplash.com/photo-1584515979956-d9f6e5d09982?auto=format&fit=crop&w=800&q=80',
      title: 'एडवांस फिजियोथेरेपी',
      subtitle: 'Advanced Physiotherapy & Pain Relief',
    },
    {
      url: '/manus-storage/file_0000000055c4820b8229717c2536af9f_246fac78.png',
      fallbackUrl: 'https://images.unsplash.com/photo-1579684385127-1ef15d508118?auto=format&fit=crop&w=800&q=80',
      title: 'व्यक्तिगत देखभाल',
      subtitle: 'Personalized Care & Treatment Plan',
    },
    {
      url: '/manus-storage/file_0000000009ac82309c1b193a3925d7d8_a012cc1b.png',
      fallbackUrl: 'https://images.unsplash.com/photo-1629909613654-28e377c37b09?auto=format&fit=crop&w=800&q=80',
      title: 'होम विजिट फिजियोथेरेपी',
      subtitle: 'Home Visit Therapy',
    },
  ];

  return (
    <section className="py-20 bg-white">
      <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">
            हमारी जानकारी और सेवाएं (Gallery)
          </h2>
          <p className="text-base sm:text-lg text-slate-600">
            त्वचा, बाल और फिजियोथेरेपी देखभाल की कुछ झलकियां।
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          {images.map((img, idx) => (
            <div
              key={idx}
              className="group relative rounded-3xl overflow-hidden shadow-xl border border-slate-200/80 bg-slate-950 aspect-[3/2] flex items-center justify-center p-2"
            >
              <img
                src={img.url}
                alt={img.title}
                onError={(e) => {
                  if (img.fallbackUrl) {
                    (e.target as HTMLImageElement).src = img.fallbackUrl;
                  }
                }}
                className="w-full h-full object-contain rounded-2xl group-hover:scale-[1.02] transition-transform duration-500"
              />
              <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-slate-950/95 via-slate-950/50 to-transparent p-6 flex flex-col justify-end pt-12">
                <span className="text-xs font-semibold text-sky-300 mb-1">{img.subtitle}</span>
                <h3 className="text-xl font-bold text-white">{img.title}</h3>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};
