import { Card, CardContent } from "@/components/ui/card";

export default function WhenSomeoneDies() {
  const guidanceCards = [
    {
      image: "https://images.unsplash.com/photo-1544731612-de7f96afe55f?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&h=250",
      title: "First Steps",
      description: "Contact us immediately. We're available 24/7 to help guide you through the initial arrangements.",
      alt: "Funeral service ceremony"
    },
    {
      image: "https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&h=250",
      title: "Making Arrangements", 
      description: "Our experienced staff will help you plan a meaningful service that honors your loved one's memory.",
      alt: "Funeral home interior"
    },
    {
      image: "https://images.unsplash.com/photo-1593113598332-cd288d649433?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&h=250",
      title: "Final Services",
      description: "We provide complete funeral and burial services with dignity, respect, and attention to detail.",
      alt: "Cemetery grounds"
    }
  ];

  return (
    <section className="py-16 bg-lightgray">
      <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">When Someone Dies</h2>
          <p className="text-gray-600 max-w-2xl mx-auto">
            We understand this is a difficult time. Here's what you need to know to help guide you through the process.
          </p>
        </div>

        <div className="grid md:grid-cols-3 gap-8">
          {guidanceCards.map((card, index) => (
            <Card key={index} className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
              <img 
                src={card.image} 
                alt={card.alt} 
                className="w-full h-48 object-cover" 
              />
              <CardContent className="p-6">
                <h3 className="font-serif text-xl font-semibold mb-3">{card.title}</h3>
                <p className="text-gray-600 mb-4">{card.description}</p>
                <a href="#" className="text-gold hover:text-gold/80 font-medium">Learn More →</a>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}