@props(['showTrustBadges' => true])

<section class="relative bg-navy px-6 md:px-12 py-20 md:py-28 text-center overflow-hidden">
    <div aria-hidden="true" class="pointer-events-none absolute inset-0 opacity-40" style="background:radial-gradient(60% 50% at 50% 0%, rgba(201,162,75,0.18), transparent 70%);"></div>

    <div class="relative max-w-3xl mx-auto">
        <div class="text-gold font-extrabold text-sm tracking-[0.2em] uppercase mb-4">Serviços &amp; Planos</div>
        <h1 class="text-4xl sm:text-5xl md:text-[54px] font-black text-white leading-[1.06] tracking-tight mb-5">
            Tudo que teu CNPJ precisa, num só lugar.
        </h1>
        <p class="text-lg md:text-[19px] text-white/75 leading-relaxed max-w-xl mx-auto mb-9">
            Contabilidade completa pra quem vive de MEI, Simples Nacional ou já tem funcionário. Sem contador chato, sem susto no boleto.
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
            <button type="button" class="w-full sm:w-auto bg-gold hover:bg-gold-hover text-navy font-extrabold text-base px-8 py-4 rounded-full transition-colors cursor-pointer">
                Abrir minha empresa grátis
            </button>
            <button type="button" class="w-full sm:w-auto bg-transparent text-white border-2 border-white/30 hover:border-white/60 font-bold text-base px-7 py-[14px] rounded-full transition-colors cursor-pointer">
                Já tenho empresa, quero trocar
            </button>
        </div>
    </div>

    @if($showTrustBadges)
        <div class="relative mt-12 md:mt-14 flex flex-wrap gap-6 md:gap-8 justify-center">
            @foreach ([
                'Sem taxa de abertura',
                'Contador de verdade no WhatsApp',
                'Sem contrato de fidelidade',
            ] as $badge)
                <div class="flex items-center gap-2 text-white/85 text-sm font-bold">
                    <x-check-icon />
                    {{ $badge }}
                </div>
            @endforeach
        </div>
    @endif
</section>