
import React from "react";
import { Button } from "@/components/ui/button";
import { ChevronRight } from "lucide-react";
import { Link } from "react-router-dom";

interface HeroSectionProps {
  title: string;
  subtitle: string;
  buttonText?: string;
  buttonLink?: string;
  imageUrl?: string;
}

const HeroSection = ({
  title,
  subtitle,
  buttonText = "Demander une consultation",
  buttonLink = "/contact",
  imageUrl = "/lovable-uploads/b9595a1f-f00e-43c0-b4ca-80fa523503d0.png",
}: HeroSectionProps) => {
  return (
    <div className="relative overflow-hidden bg-white">
      <div className="absolute inset-0 z-0">
        <img
          src={imageUrl}
          alt="Experts en croissance d'entreprise"
          className="w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-gray-900/40"></div>
      </div>
      
      <div className="container mx-auto px-4 py-20 md:py-28 lg:py-36 relative z-10">
        <div className="max-w-3xl">
          <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6 text-white">
            {title}
          </h1>
          <p className="text-lg md:text-xl text-gray-100 mb-8">
            {subtitle}
          </p>
          {buttonText && (
            <Button asChild size="lg" className="font-medium">
              <Link to={buttonLink}>
                {buttonText}
                <ChevronRight className="ml-2 h-4 w-4" />
              </Link>
            </Button>
          )}
        </div>
      </div>
    </div>
  );
};

export default HeroSection;
