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

export default function ContactHero({ data }: { data: ContactHeroData }) {
  return (
    <section className="font-sans bg-[#f4f7fb] pt-[98px]">
      <div className="max-w-[1440px] mx-auto px-[20px] lg:px-[72px] py-[32px] flex flex-col gap-[44px]">
        <div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-[20px] lg:gap-6">
          <h1 className="font-heading text-[#060505] lg:text-[#2a3036] text-[30px] lg:text-[64px] leading-[1.04] tracking-[-1.32px] lg:tracking-[-1.92px] max-w-[749px]">
            {data.heading}
          </h1>
          <div className="flex flex-col gap-[16px] lg:gap-[24px] max-w-[442px]">
            <p className="font-sans text-[16px] leading-[1.5] text-[rgba(35,35,35,0.6)] lg:text-[rgba(42,48,54,0.6)] font-medium">
              {data.description}
            </p>
            <div className="w-full h-px bg-[rgba(42,48,54,0.2)]" />
          </div>
        </div>

        <div className="w-full rounded-[15px] overflow-hidden">
          <img
            src={data.mobileImage}
            alt="Business handshake"
            loading="lazy"
            className="md:hidden w-full h-auto block"
          />
          <img
            src={data.desktopImage}
            alt="Business handshake"
            loading="lazy"
            className="hidden md:block w-full h-auto block"
          />
        </div>
      </div>
    </section>
  )
}