import type { AboutCompanyData } from "@/lib/strapi/types"

export default function AboutCompanySection({ data }: { data: AboutCompanyData }) {
  return (
    <div className="w-full px-[20px] lg:px-[72px]">
      <div className="max-w-[1297px] mx-auto">
        <div className="relative flex flex-col lg:flex-row gap-[24px] lg:items-end">
          <div
            className="ac-main relative flex flex-col justify-between min-h-[300px] lg:min-h-[582px] w-full lg:w-[647px] lg:flex-shrink-0 p-[24px] rounded-[16px] overflow-hidden"
            style={{ background: 'radial-gradient(ellipse at 42% 84%, rgba(244,247,251,0) 0%, rgba(244,247,251,1) 100%)',
            }}
          >
            <div className="relative z-10">
              <span
                className="inline-flex items-center gap-2 px-[24px] py-[12px] bg-white rounded-[66px] text-[16px] text-[#102443] uppercase"
              >
                <img src={data.badgeIcon} alt="" loading="lazy" className="w-[17px] h-[16px]" />
                {data.badge}
              </span>
            </div>
            <p
              className="relative z-10 text-[16px] font-medium leading-[1.5] max-w-[537px]"
              style={{ color: 'rgba(35, 35, 35, 0.6)',
              }}
            >
              {data.description}
            </p>
          </div>
          <div className="flex-1 min-h-[300px] lg:min-h-[582px] rounded-[14px] overflow-hidden relative">
            <img
              src={data.image}
              alt="MGM Centre Entrance"
              className="w-full h-full object-cover rounded-[14px] absolute inset-0"
              loading="lazy"
            />
          </div>
        </div>
      </div>
    </div>
  )
}