"use client";
import Image from "next/image";
import ContratosBg from "@/assets/contratos-bg.jpg";
import { PageIntroPreloader } from "@/components/ui";

type ContratosHeroProps = {
  isLoaded: boolean;
  handleResolve: () => void;
};

const ContratosHero = ({ isLoaded, handleResolve }: ContratosHeroProps) => {
  return (
    <>
      <PageIntroPreloader isLoaded={isLoaded} />
      <section className="mt-[6.25rem] md:mt-0">
        <div className="relative overflow-hidden">
          <Image
            ref={(el) => {
              // Si la imagen ya está en caché, "onLoad" puede no disparar (más común en
              // Safari/WebKit) y el preloader quedaría trabado para siempre.
              if (el?.complete) handleResolve();
            }}
            src={ContratosBg}
            alt="Imagen de fondo"
            priority
            className="size-full absolute object-cover"
            onLoad={handleResolve}
            onError={handleResolve}
          />

          <div className="contigo-container text-white pt-28 pb-20 md:pt-56 md:pb-28">
            <h1 className="drop-shadow-[0_0.375rem_0.75rem_rgba(0,0,0,0.55)] text-[min(10vw,1.875rem)] md:text-[min(5vw,3.125rem)] font-medium">
              Contratos <br className="xs:hidden" />
              de adhesión
            </h1>
          </div>
        </div>
      </section>
    </>
  );
};

export default ContratosHero;