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

export default function Staff() {
  const staff = [
    {
      image: "https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&h=300",
      name: "Sarah Johnson",
      title: "Funeral Director",
      description: "Licensed funeral director with 15 years of experience serving families with compassion."
    },
    {
      image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&h=300",
      name: "Michael Davis", 
      title: "Assistant Director",
      description: "Dedicated to helping families through difficult times with personalized care and attention."
    },
    {
      image: "https://images.unsplash.com/photo-1494790108755-2616b612b977?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&h=300",
      name: "Emily Rodriguez",
      title: "Grief Counselor",
      description: "Licensed counselor specializing in grief support and family counseling services."
    },
    {
      image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&h=300",
      name: "Robert Wilson",
      title: "Operations Manager", 
      description: "Ensures all arrangements are handled with the highest level of professionalism and care."
    }
  ];

  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">Recent Funeral Obituaries</h2>
          <p className="text-gray-600 max-w-2xl mx-auto">
            Our dedicated staff brings years of experience and genuine compassion to every family we serve.
          </p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
          {staff.map((member, index) => (
            <Card key={index} className="text-center bg-white rounded-lg p-6 shadow-md hover:shadow-lg transition-shadow duration-300">
              <CardContent className="p-0">
                <img 
                  src={member.image} 
                  alt={member.name} 
                  className="w-24 h-24 rounded-full mx-auto mb-4 object-cover" 
                />
                <h3 className="font-serif text-lg font-semibold mb-2">{member.name}</h3>
                <p className="text-gold font-medium mb-2">{member.title}</p>
                <p className="text-gray-600 text-sm">{member.description}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}