import Link from "next/link";
export type ContactCTAData = {
  ctaTitle?: string | null;
  ctaButtonText?: string | null;
  ctaButtonLink?: string | null;
  ctaBackgroundImage?: {
    node?: {
      sourceUrl?: string | null;
    } | null;
  } | null;
};

type Props = {
  data: ContactCTAData;
};

export default function ContactCTA({ data }: Props) {
  if (!data.ctaTitle || !data.ctaBackgroundImage?.node?.sourceUrl) {
    return null;
  }

  return (
    <section
      className="py-28 bg-cover bg-center text-white text-center"
      style={{
        backgroundImage: `url(${data.ctaBackgroundImage.node.sourceUrl})`,
      }}
    >
      <div className="max-w-3xl mx-auto px-4 text-center">
        <h2 className="text-3xl md:text-[40px] font-mono font-medium mb-6">
          {data.ctaTitle}
        </h2>

        {data.ctaButtonText && data.ctaButtonLink && (
          <Link
            href={data.ctaButtonLink}
            className="inline-flex items-center gap-2 border border-[#202020]/50 px-6 py-3 rounded text-[16px] font-medium text-[#202020] bg-[#fff] transition"
          >
            {data.ctaButtonText}
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" className="shrink-0">
              <path d="M8.67188 0.5L17.3026 8.73842L8.67188 16.9768" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M17.2999 8.73828L0.5 8.73828" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path>
            </svg>
          </Link>
        )}
      </div>
    </section>
  );
}