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

export default function VitalHero({ data }: { data: VitalHeroData }) {
  return (
    <section className="relative w-full h-[676px] md:h-[711px] flex items-center justify-center overflow-hidden">
      <img
        src={data.mobileImage}
        alt={data.heading}
        loading="lazy"
        className="md:hidden absolute inset-0 w-full h-full object-cover object-top"
      />
      <img
        src={data.desktopImage}
        alt={data.heading}
        loading="lazy"
        className="hidden md:block absolute inset-0 w-full h-full object-cover object-top"
      />
      <div
        className="absolute inset-0"
        style={{
          background:
            "radial-gradient(ellipse at center, rgba(8,19,37,0.4) 0%, rgba(8,19,37,0) 100%)",
        }}
      />
      <h1 className="font-heading relative text-white text-center text-[44px] md:text-[64px] leading-[1.04] tracking-[-1.32px] md:tracking-[-1.92px] px-5 md:px-0 pt-[200px] md:pt-0">
        {data.heading}
      </h1>
    </section>
  )
}