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

export default function VisionaryBeginningsSection({ data }: { data: AboutVisionaryBeginningsData }) {
  return (
    <div className="w-full bg-[#f4f7fb]">
      <div className="w-full px-[20px] lg:px-[72px] py-[32px]"><div className="max-w-[1297px] mx-auto">
      <div className="flex flex-col gap-[44px]">
        <div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-[20px] lg:gap-8">
          <h2
            className="font-heading text-[44px] lg:text-[60px] leading-[1.04] tracking-[-1.32px] lg:tracking-[-0.48px] text-[#060505] max-w-[749px]"
          >
            {data.heading}
          </h2>
          <div className="flex flex-col justify-between h-auto lg:h-[116px] max-w-[442px] gap-[16px] lg:gap-0">
            <p
              className="font-sans text-[16px] font-medium leading-[1.5] pb-[16px]"
              style={{ color: 'rgba(35, 35, 35, 0.6)',
                borderBottom: '1px solid rgba(77, 0, 3, 0.20)',
              }}
            >
              {data.description}
            </p>
      </div></div>
    </div>
        <div className="w-full aspect-square lg:aspect-auto lg:h-[441px] rounded-[15px] overflow-hidden mt-[25px]">
          <img src={data.mobileBannerImage || data.bannerImage} alt="MGM Group team meeting" className="w-full h-full object-cover lg:hidden" loading="lazy" />
          <img src={data.bannerImage} alt="MGM Group team meeting" className="hidden lg:block w-full h-full object-cover" loading="lazy" />
        </div>
      </div>
      </div>
    </div>
  )
}