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

<section id="planos" class="bg-navy-light px-6 md:px-12 py-20 md:py-24 text-white">
    <div class="text-center mb-14">
        <div class="text-gold font-extrabold text-sm tracking-[0.2em] uppercase mb-3">Planos</div>
        <h2 class="text-3xl md:text-[38px] font-black tracking-tight mb-3 text-white">Planos que cabem no teu bolso</h2>
        <p class="text-lg text-white/65 max-w-md mx-auto">Preços sugeridos — troca pelos valores reais quando quiser.</p>
    </div>

    <div class="flex flex-col md:flex-row gap-6 justify-center items-center md:items-stretch flex-wrap max-w-6xl mx-auto">
        <x-plan-card
            name="MEI"
            description="Pra quem tá começando com MEI."
            price="59"
            cta="Quero o plano MEI"
            :features="[
                'Abertura grátis',
                'Emissão de notas fiscais',
                'DAS calculado e no prazo',
                'Atendimento pelo WhatsApp',
            ]"
        />

        <x-plan-card
            name="Simples Nacional"
            description="Pra empresa que já saiu do MEI."
            price="189"
            cta="Quero o Simples Nacional"
            :highlighted="true"
            :features="[
                'Contabilidade completa',
                'Apuração de impostos',
                'Pró-labore calculado',
                'Declarações anuais',
                'Contador dedicado',
            ]"
        />

        <x-plan-card
            name="Simples + Folha"
            description="Pra quem já tem equipe (2 funcionários)."
            price="269"
            cta="Quero o Simples + Folha"
            :features="[
                'Tudo do Simples Nacional',
                'Folha até 2 funcionários',
                'Encargos e eSocial',
                'Admissão e demissão',
            ]"
        />
    </div>

    <p class="mt-10 text-center text-[13px] italic text-white/55 max-w-lg mx-auto">
        * Preços sugeridos pra ilustrar a página — me manda os valores reais que eu ajusto certinho.
    </p>

    @if ($showIntegrationNote)
        <div class="mt-12 bg-white/[0.06] border border-white/15 rounded-[20px] px-8 md:px-10 py-8 flex flex-col md:flex-row justify-between items-center gap-6 max-w-6xl mx-auto text-center md:text-left">
            <div>
                <h3 class="font-extrabold text-xl text-white m-0 mb-1.5">Quer ligar esses planos ao Painel do Cliente?</h3>
                <p class="text-sm text-white/70 m-0 max-w-md">Assim que tu confirmar os valores, a gente conecta o plano escolhido direto na área logada.</p>
            </div>
            <button type="button" class="shrink-0 bg-transparent border-2 border-gold text-gold hover:bg-gold/10 font-extrabold text-sm px-6 py-3 rounded-full transition-colors cursor-pointer whitespace-nowrap">
                Falar sobre integração
            </button>
        </div>
    @endif
</section>