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

export default function Hero() {
  return (
    <section className="relative h-96 flex items-center justify-center text-white">
      {/* Background image with overlay */}
      <div 
        className="absolute inset-0 bg-cover bg-center bg-no-repeat"
        style={{
          backgroundImage: "url('https://images.unsplash.com/photo-1578662996442-48f60103fc96?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&h=600')"
        }}
      />
      <div className="absolute inset-0 bg-black bg-opacity-50" />
      
      {/* Hero Content */}
      <div className="relative z-10 text-center max-w-4xl mx-auto px-4">
        <h1 className="font-serif text-4xl md:text-5xl lg:text-6xl font-bold mb-4">
          Arranging Funeral
        </h1>
        <p className="text-lg md:text-xl mb-8 text-gray-200">
          Compassionate care during life's most difficult moments
        </p>
        <Button className="bg-gold hover:bg-gold/90 text-white px-8 py-3 rounded-md font-semibold transition-colors duration-300">
          Learn More
        </Button>
      </div>
    </section>
  );
}