import Link from "next/link";
export type CareersCTAData = {
  careersTitle?: string | null;
  careersDescription?: string | null;
  careersEmailFields?: string | null;
  careersButtonText?: string | null;
  careersButtonLink?: string | null;
  backgroundImageUrl?: {
    node?: {
      sourceUrl?: string | null;
    } | null;
  } | null;
};

type Props = {
  data: CareersCTAData;
};

export default function CareersCTA({ data }: Props) {
  const bgImage = data.backgroundImageUrl?.node?.sourceUrl;

  if (!bgImage) return null;

  return (
    <div className="relative -mt-16 lg:-mt-[90px] z-10">
      <div className="max-w-5xl mx-auto px-4 py-4 rounded-2xl relative z-11 bg-white">

        <div
          className="relative mx-auto rounded-2xl overflow-hidden bg-cover bg-center"
          style={{ backgroundImage: `url(${bgImage})` }}
        >
          {/* Overlay */}
          <div className="absolute inset-0 bg-black/50" />

          {/* Content */}
          <div className="relative z-10 px-6 py-12 md:px-14 md:py-16 text-center text-white">

            {data.careersTitle && (
              <h2 className="font-mono font-medium text-2xl md:text-3xl lg:text-[40px] mb-4">
                {data.careersTitle}
              </h2>
            )}

            {data.careersDescription && (
              <p className="text-white/70 text-lg font-medium max-w-2xl mx-auto mb-6">
                {data.careersDescription}
              </p>
            )}

            {data.careersEmailFields && (
              <a
                href={`mailto:${data.careersEmailFields}`}
                className="inline-flex items-center gap-2 text-lg mb-6 text-white"
              >
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16" className="shrink-0">
                  <path fill="currentColor" d="M4 3a2 2 0 0 0-2 2v.201l6 3.231l6-3.23V5a2 2 0 0 0-2-2zm10 3.337L8.237 9.44a.5.5 0 0 1-.474 0L2 6.337V11a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2z"/>
                </svg>
                {data.careersEmailFields}
              </a>
            )}

            {data.careersButtonText && data.careersButtonLink && (
              <div>
                <Link
                  href={data.careersButtonLink}
                  className="inline-flex items-center gap-2 border border-[#ffffff]/50 px-6 py-3 rounded text-[16px] font-medium text-[#fff] bg-transparent hover:bg-[#ffffff] hover:text-[#202020] transition"
                >
                  {data.careersButtonText}
                  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <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>
            )}
          </div>
        </div>

      </div>
    </div>
  );
}