import { Check } from "lucide-react";
import { Button } from "@/components/ui/button";

export default function Welcome() {
  const features = [
    "24/7 Emergency Services",
    "Pre-Planning Services", 
    "Grief Support Resources",
    "Veteran Services"
  ];

  return (
    <section className="py-16 bg-lightgray">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          <div>
            <img 
              src="https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&h=400" 
              alt="Funeral home exterior" 
              className="rounded-lg shadow-lg w-full" 
            />
          </div>
          <div>
            <h2 className="font-serif text-3xl md:text-4xl font-bold mb-6">Welcome to our Funeral Caring Home</h2>
            <p className="text-gray-600 mb-4">
              For over 50 years, our family has been dedicated to serving families in their time of greatest need. 
              We understand that losing a loved one is one of life's most difficult experiences, and we're here to 
              provide compassionate support and guidance.
            </p>
            <p className="text-gray-600 mb-6">
              Our experienced staff is committed to helping you create a meaningful tribute that celebrates the 
              life and legacy of your loved one while providing comfort to family and friends.
            </p>
            
            <div className="space-y-3 mb-8">
              {features.map((feature, index) => (
                <div key={index} className="flex items-center">
                  <div className="w-5 h-5 rounded-full bg-gold flex items-center justify-center mr-3">
                    <Check className="w-3 h-3 text-white" />
                  </div>
                  <span>{feature}</span>
                </div>
              ))}
            </div>

            <Button className="bg-gold hover:bg-gold/90 text-white px-8 py-3 rounded-md font-semibold transition-colors duration-300">
              Contact Us
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
}