"use client"

import MGMButton from '@/components/MGMButton'
import type { CareersExploreJobsData } from '@/lib/strapi/types'

export default function ExploreJobsSection({ data }: { data?: CareersExploreJobsData } = {}) {
  const heading = data?.heading ?? 'Explore Our Job Opportunities'
  const ctaLabel = data?.ctaLabel ?? 'view current openings'
  const ctaHref = data?.ctaHref ?? '/contact'

  return (
    <section className="bg-[#f4f7fb] py-[40px] lg:py-[64px]">
      <div className="max-w-[1440px] mx-auto px-[20px] lg:px-[72px]">
        <div className="relative bg-[#f9f9f9] rounded-[16px] overflow-hidden flex flex-col items-center justify-center p-[20px] lg:p-[64px] gap-[24px] lg:gap-[40px]">
          {/* Decorative background shapes - Desktop */}
          <img
            src="/assets/careers/explore-overlay.svg"
            alt=""
            aria-hidden="true"
            className="absolute pointer-events-none hidden lg:block"
            style={{ width: 800,
              height: 770,
              top: 'calc(50% - 111px)',
              left: 'calc(50% + 678px)',
              transform: 'translate(-50%, -50%)',
            }}
          />
          <img
            src="/assets/careers/explore-overlay.svg"
            alt=""
            aria-hidden="true"
            className="absolute pointer-events-none hidden lg:block"
            style={{ width: 800,
              height: 770,
              top: 'calc(50% + 210px)',
              left: 'calc(50% - 648px)',
              transform: 'translate(-50%, -50%)',
            }}
          />

          {/* Decorative background shapes - Mobile */}
          <img
            src="/assets/careers/explore-overlay.svg"
            alt=""
            aria-hidden="true"
            className="absolute pointer-events-none lg:hidden opacity-100"
            style={{ width: 240,
              height: 231,
              top: '-10px',
              right: '-30px',
            }}
          />
          <img
            src="/assets/careers/explore-overlay.svg"
            alt=""
            aria-hidden="true"
            className="absolute pointer-events-none lg:hidden opacity-100"
            style={{ width: 240,
              height: 231,
              bottom: '-10px',
              left: '-30px',
            }}
          />

          {/* Title */}
          <h2
            className="font-heading relative z-10 text-[32px] lg:text-[54px] leading-[41px] lg:leading-[62px] tracking-[-0.64px] lg:tracking-[-1.08px] text-[#2a3036] text-center max-w-[377px]"
          >
            {heading}
          </h2>

          {/* CTA Button */}
          <div className="relative z-10">
            <MGMButton text={ctaLabel} href={ctaHref} />
          </div>
        </div>
      </div>
    </section>
  )
}