import Image from "next/image";
import Link from "next/link";

type ServiceCtaCardProps = {
  title?: string;
  link?: string | null;
  bgImage?: {
    sourceUrl?: string;
    altText?: string | null;
  };
};

export default function ServiceCtaCard({
  title,
  link,
  bgImage,
}: ServiceCtaCardProps) {
  if (!title && !bgImage?.sourceUrl) return null;

  return (
    <div className="relative rounded-2xl overflow-hidden bg-black text-white min-h-[300px] flex items-end">
      {/* Background */}
      {bgImage?.sourceUrl && (
        <Image
          src={bgImage.sourceUrl}
          alt={bgImage.altText || "Service CTA"}
          fill
          className="object-cover"
          priority
          unoptimized
        />
      )}

      {/* Content */}
      <div className="relative z-10 p-6 text-center w-full">
        {title && (
          <h3 className="font-mono font-medium text-xl md:text-2xl mb-4 text-center backdrop-blur-md p-[10px] inline-block bg-[#202020]/15 border border-white/20 rounded">
            {title}
          </h3>
        )}

        <Link
          href={link || "/contact"}
          className="inline-flex bg-white text-[#202020] px-5 py-3 rounded font-medium text-lg border border-white transition"
        >
          Call Us Now
          
        </Link>
      </div>
    </div>
  );
}