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

export default function SaflHero({ data }: { data: SaflHeroData }) {
  return (
    <section className="relative w-full overflow-hidden pt-[80px] lg:pt-[90px] bg-white flex flex-col">
      <div className="relative z-10 flex flex-col items-center text-center px-[9px] lg:px-6 pt-8 lg:pt-0 shrink-0">
        <h1 className="font-accent text-[44px] lg:text-[64px] text-[#20262b] leading-[1.04] tracking-[-1.32px] lg:tracking-[-1.92px] max-w-[304px] lg:max-w-none font-bold">
          {data.heading}
        </h1>
        <p className="text-[16px] text-[#20262b]/60 leading-[1.5] max-w-[353px] lg:max-w-[442px] mt-2 lg:mt-4">
          {data.description}
        </p>
      </div>

      <div className="relative w-full flex-1 flex flex-col justify-end mt-[40px] lg:mt-[60px]">
        {data.mobileBackgroundImage ? (
          <img
            src={data.mobileBackgroundImage}
            alt={data.heading}
            loading="eager"
            className="lg:hidden w-full h-auto object-contain"
          />
        ) : null}
        {data.desktopBackgroundImage ? (
          <img
            src={data.desktopBackgroundImage}
            alt={data.heading}
            loading="eager"
            className="hidden lg:block w-full h-auto max-h-[70vh] object-contain object-bottom mx-auto"
          />
        ) : null}
      </div>
    </section>
  )
}