interface HeroSectionProps {
    headline: string
    subheadline: string | null
    ctaLabel: string
    ctaUrl: string
    isLoading?: boolean
    backgroundImage?: string | null
}

export default function HeroSection({
    headline,
    subheadline,
    ctaLabel,
    ctaUrl,
    isLoading = false,
    backgroundImage,
}: HeroSectionProps) {
    if (isLoading) {
        return (
            <section
                aria-label="Carregando hero"
                className="relative min-h-[600px] flex items-center justify-center pt-14"
                style={{
                    background:
                        'radial-gradient(ellipse 80% 50% at 50% -20%, rgba(94,106,210,0.08) 0%, transparent 60%), #08090a',
                }}
            >
                <div className="w-full max-w-[800px] mx-auto px-6 text-center animate-pulse">
                    {/* Headline skeleton */}
                    <div className="h-16 md:h-20 lg:h-24 bg-surface-secondary rounded-lg w-3/4 mx-auto mb-6" />
                    {/* Subheadline skeleton */}
                    <div className="h-6 bg-surface-secondary rounded w-1/2 mx-auto mb-3" />
                    <div className="h-6 bg-surface-secondary rounded w-2/5 mx-auto mb-10" />
                    {/* CTA skeleton */}
                    <div className="h-11 bg-surface-secondary rounded w-36 mx-auto" />
                </div>
            </section>
        )
    }

    return (
        <section
            aria-label="Hero principal"
            className="relative min-h-[600px] flex items-center justify-center pt-14 overflow-hidden"
            style={!backgroundImage ? {
                background:
                    'radial-gradient(ellipse 80% 50% at 50% -20%, rgba(94,106,210,0.08) 0%, transparent 60%), #08090a',
            } : undefined}
        >
            {/* Imagem de fundo */}
            {backgroundImage && (
                <>
                    <img
                        src={backgroundImage}
                        alt=""
                        aria-hidden="true"
                        className="absolute inset-0 w-full h-full object-cover"
                        onError={(e) => { (e.currentTarget as HTMLImageElement).style.display = 'none' }}
                    />
                    {/* Overlay escuro para legibilidade */}
                    <div
                        className="absolute inset-0"
                        style={{ background: 'linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.65) 100%)' }}
                    />
                </>
            )}
            <div className="w-full max-w-[800px] mx-auto px-6 text-center py-20 md:py-28">
                <h1
                    className="
            text-[40px] md:text-[48px] lg:text-[72px]
            font-medium text-textPrimary leading-tight
            tracking-display-xl
            mb-6
          "
                    style={{ fontFeatureSettings: '"cv01", "ss03"' }}
                >
                    {headline}
                </h1>

                {subheadline && (
                    <p className="text-lg md:text-xl text-textSecondary font-light leading-relaxed mb-10 max-w-[560px] mx-auto">
                        {subheadline}
                    </p>
                )}

                <a
                    href={ctaUrl}
                    className="
            inline-flex items-center justify-center
            px-6 py-3
            bg-brand-indigo hover:bg-accent-hover
            text-white font-semibold text-sm
            rounded transition-colors duration-200
            focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-violet focus-visible:ring-offset-2 focus-visible:ring-offset-mkt-black
          "
                    aria-label={ctaLabel}
                >
                    {ctaLabel}
                </a>
            </div>
        </section>
    )
}