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

export default function EntertainmentHero({ data }: { data: EntertainmentHeroData }) {
  return (
    <section className="relative w-full h-[667px] md:h-[841px] overflow-hidden">
      <video
        src={data.mobileVideoUrl}
        autoPlay
        loop
        muted
        playsInline
        className="md:hidden absolute inset-0 w-full h-full object-cover"
      />
      <video
        src={data.desktopVideoUrl}
        autoPlay
        loop
        muted
        playsInline
        className="hidden md:block absolute inset-0 w-full h-full object-cover"
      />
      <div
        className="absolute inset-0"
       
      />

      <div className="relative z-10 flex flex-col items-center h-full pt-[120px] md:pt-[140px] px-[9px] md:px-8">
        <div className="flex flex-col items-center gap-1 text-center">
          <h1 className="font-accent text-[white] text-[44px] md:text-[64px] leading-[1.04] tracking-[-1.32px] md:tracking-[-1.92px] max-w-[304px] md:max-w-none font-bold">
            {data.heading}
          </h1>
          <p className="font-sans text-[white] text-[16px] leading-[1.5] font-medium max-w-[353px] md:max-w-[442px]">
            {data.description}
          </p>
        </div>
      </div>
    </section>
  )
}