interface DownloadSectionProps {
  title: string;
  subtitle: string;
  buttonText: string;
  href: string;
  backgroundImage: string;
}

export default function DownloadSection({
  title,
  subtitle,
  buttonText,
  href,
  backgroundImage,
}: DownloadSectionProps) {
  return (
    <section
      className="relative py-24 px-4 sm:px-6 lg:px-8 bg-cover bg-center bg-fixed"
      style={{ backgroundImage: `url(${backgroundImage})` }}
    >
      {/* Overlay */}
      <div className="absolute inset-0 bg-black/60" />

      <div className="relative z-10 max-w-4xl mx-auto text-center">
        <h2 className="text-4xl sm:text-5xl font-bold text-white mb-4">
          {title}
        </h2>
        <p className="text-xl sm:text-2xl text-white/90 mb-8">
          {subtitle}
        </p>
        <a
          href={href}
          target="_blank"
          rel="noopener noreferrer"
          className="inline-block px-10 py-4 bg-primary text-white font-bold text-lg rounded-md hover:bg-primary-dark transition-all transform hover:scale-105 shadow-lg hover:shadow-xl"
        >
          {buttonText}
        </a>
      </div>
    </section>
  );
}