import type { FaqHero } from '../types';

/*
 * Hero da página FAQ — faixa slim (banner baixo), mesmo chrome da Atendimento:
 * imagem full-bleed + máscara azul à esquerda no desktop, cobrindo tudo no
 * mobile + eyebrow/título brancos. Sem link FAQ. pt libera o header.
 */
export function HeroSection({ hero }: { hero: FaqHero }) {
    return (
        <section className="relative isolate w-full overflow-hidden">
            <img
                src={hero.image || hero.mobileImage}
                alt=""
                className="absolute inset-0 -z-10 size-full object-cover object-[50%_62%]"
            />
            <div className="hero-overlay-blue absolute inset-0 -z-10 web:hidden" aria-hidden />
            <div className="hero-overlay-blue absolute inset-y-0 left-0 -z-10 hidden w-[57%] web:block" aria-hidden />

            <div className="mx-auto flex min-h-[280px] w-full max-w-[1440px] flex-col justify-center px-7 pb-10 pt-[96px] web:h-[680px] web:px-[140px] web:pb-0 web:pt-[120px]">
                <span className="text-body font-bold text-white">{hero.eyebrow}</span>
                <h1 className="mt-2 text-heading-md font-bold text-white web:text-heading-lg">{hero.title}</h1>
            </div>
        </section>
    );
}