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

export type ContactApproachData = {
  approachSubtitle?: string | null;
  approachTitle?: string | null;
  approachDescription?: string | null;
  approachButtonText?: string | null;
  approachButtonLink?: string | null;
  approachImage?: {
    node?: {
      sourceUrl?: string | null;
      altText?: string | null;
    } | null;
  } | null;
};


type Props = {
  data: ContactApproachData;
};

export default function ContactApproach({ data }: Props) {
  return (
    <section className="bg-[#F3F3F3] py-20 md:py-28">
      <div className="container mx-auto px-4 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">

        {/* LEFT CONTENT */}
        <div className="max-w-xl">
          {data.approachSubtitle && (
            <span className="block text-base tracking-widest text-[#202020]/60 mb-3">
              {data.approachSubtitle}
            </span>
          )}

          {data.approachTitle && (
            <h2 className="font-mono font-medium text-3xl md:text-4xl lg:text-4xl text-[#202020] mb-6">
              {data.approachTitle}
            </h2>
          )}


          {data.approachDescription && (
            <div
              className="text-[#202020]/70 text-lg space-y-4 mb-8"
              dangerouslySetInnerHTML={{ __html: data.approachDescription }}
            />
          )}

          {/* CTA */}
          {data.approachButtonText && (
            <Link
              href={data.approachButtonLink ?? "#"}
              className="inline-flex items-center gap-2 border border-[#202020]/50 px-6 py-3 rounded text-[16px] font-medium text-[#202020] hover:bg-[#202020] hover:text-white transition"
            >
              {data.approachButtonText}
              <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>

        {/* RIGHT IMAGE */}
        <div className="relative w-full max-w-xl ml-auto">
          {data.approachImage?.node?.sourceUrl && (
            <Image
              src={data.approachImage.node.sourceUrl}
              alt={data.approachImage.node.altText || "Partnership approach"}
              width={640}
              height={480}
              className="rounded-lg object-cover"
              priority
              unoptimized
            />
          )}
        </div>

      </div>
    </section>
  );
}