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

export default function News() {
  const articles = [
    {
      image: "https://images.unsplash.com/photo-1581833971358-2c8b550f87b3?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&h=250",
      date: "March 15, 2024",
      title: "Planning Your Memorial Service",
      description: "Guidance on creating a meaningful memorial service that honors your loved one's life and provides comfort to family.",
      alt: "Memorial garden"
    },
    {
      image: "https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&h=250",
      date: "March 10, 2024",
      title: "Grief Support Resources",
      description: "Our monthly grief support group meetings provide a safe space for healing and sharing experiences.",
      alt: "Support group"
    },
    {
      image: "https://images.unsplash.com/photo-1521737604893-d14cc237f11d?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&h=250",
      date: "March 5, 2024",
      title: "Pre-Planning Benefits",
      description: "Learn about the advantages of pre-planning your funeral arrangements for peace of mind.",
      alt: "Consultation meeting"
    }
  ];

  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">Funeral Latest News</h2>
          <p className="text-gray-600 max-w-2xl mx-auto">
            Stay informed about our services, community events, and resources for families.
          </p>
        </div>

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