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

interface EventEnquirySectionProps {
  data: EventEnquiryData
}

export default function EventEnquirySection({ data }: EventEnquirySectionProps) {
  return (
    <div className="bg-white w-full pb-12 lg:pb-20">
      <section className="group relative bg-[#f9f9f9] py-16 lg:py-[64px] overflow-hidden rounded-2xl mx-6 lg:mx-auto lg:max-w-[1297px]">
        {/* Hover Background Gradient */}
        <div
          className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"
          style={{ background: 'radial-gradient(at right top, rgb(255, 220, 225) 0%, rgba(255, 220, 225, 0) 100%), rgb(255, 255, 255)',
          }}
        />
      {/* 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>

      <div className="relative z-10 flex flex-col items-center gap-10 text-center px-6">
        {/* Heading */}
        <h2 className="font-heading font-normal text-[36px] lg:text-[54px] leading-tight lg:leading-[62px] text-[#2a3036] tracking-[-1.08px] max-w-[713px]">
          {data.heading}
        </h2>

        {/* CTA Button */}
        <MGMButton text={data.ctaLabel || "Make an Enquiry"} href={data.ctaHref || "/contact"} />
      </div>
    </section>
    </div>
  )
}