import { Button } from "@/components/ui/button";

export default function Services() {
  const services = [
    {
      image: "https://images.unsplash.com/photo-1578662996442-48f60103fc96?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&h=300",
      title: "Traditional Funeral",
      description: "Full-service traditional funeral with viewing, ceremony, and burial arrangements.",
      alt: "Traditional funeral service"
    },
    {
      image: "https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&h=300",
      title: "Memorial Service",
      description: "Celebration of life ceremony focusing on memories and legacy of your loved one.",
      alt: "Memorial garden"
    },
    {
      image: "https://images.unsplash.com/photo-1612349317150-e413f6a5b16d?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&h=300",
      title: "Cremation Services",
      description: "Dignified cremation services with memorial options to honor your loved one.",
      alt: "Funeral director"
    }
  ];

  return (
    <section className="py-16 bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-12">
          <h2 className="font-serif text-3xl md:text-4xl font-bold mb-4">Funeral Homes Offer a Service</h2>
          <p className="text-gray-600 max-w-2xl mx-auto">
            Our comprehensive services are designed to support families during their time of need with compassion and professionalism.
          </p>
        </div>

        <div className="grid md:grid-cols-3 gap-8">
          {services.map((service, index) => (
            <div key={index} className="text-center group">
              <div className="relative overflow-hidden rounded-lg mb-4">
                <img 
                  src={service.image} 
                  alt={service.alt}
                  className="w-full h-64 object-cover transform group-hover:scale-105 transition-transform duration-300" 
                />
              </div>
              <h3 className="font-serif text-xl font-semibold mb-2">{service.title}</h3>
              <p className="text-gray-600 mb-4">{service.description}</p>
              <Button className="bg-gold hover:bg-gold/90 text-white px-6 py-2 rounded-md transition-colors duration-300">
                Learn More
              </Button>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}