"use client"
import MGMButton from './MGMButton'
import type { PartnerCtaData } from '@/lib/strapi/types'

interface PartnerCTAProps {
  data: PartnerCtaData
}

export default function PartnerCTA({ data }: PartnerCTAProps) {
  return (
    <section className="py-20 lg:py-28 bg-white lg:px-5">
      <div className="max-w-[1297px] mx-auto px-6 lg:px-0">
        <div className="relative bg-[#f9f9f9] rounded-2xl overflow-hidden flex flex-col items-center gap-10 py-16 lg:py-20 px-6">
          {/* Decorative vector overlay on left side */}
          <div className="absolute left-0 top-1/2 -translate-y-1/2 w-[400px] lg:w-[600px] h-auto pointer-events-none z-0">
            <img
              src="/assets/about/vector-overlay.png"
              alt=""
              loading="lazy"
              className="w-full h-full object-contain opacity-90"
              aria-hidden="true"
            />
          </div>

          {/* Decorative vector overlay on right side */}
          <div className="absolute right-0 top-1/2 -translate-y-1/2 w-[400px] lg:w-[600px] h-auto pointer-events-none z-0">
            <img
              src="/assets/about/right-overlay.png"
              alt=""
              loading="lazy"
              className="w-full h-full object-contain opacity-90"
              aria-hidden="true"
            />
          </div>

          {/* Heading */}
          <div className="relative z-10 text-center">
            <h2
              className="text-4xl md:text-5xl lg:text-[54px] text-[#2a3036] tracking-[-1.08px] leading-[1.15]"
            >
              {data.heading}
              {data.headingLine2 ? (<><br />{data.headingLine2}</>) : null}
            </h2>
          </div>

          {/* CTA Button */}
          <div className="relative z-10">
            <MGMButton text={data.ctaLabel || "Partner With Us"} href={data.ctaHref || "/contact"} />
          </div>
        </div>
      </div>
    </section>
  )
}