@page
@model PrecosModel
@{
    ViewData["Title"] = "Preços — a partir de R$ 0,0019 por validação";
    ViewData["Description"] = "Planos NALU AI: Free, Starter (R$29), Indie (R$69), Pro (R$199). A partir de R$ 0,0019 por validação. Menos que uma gota de café.";
}

<!-- Hero de pricing -->
<section class="bg-gradient-to-b from-slate-50 to-white pt-20 pb-10">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 text-center">
        <h1 class="text-3xl font-bold text-gray-600 mb-2">Quanto custa consertar seu chatbot?</h1>
        <div class="text-7xl font-extrabold text-nalu-600 my-4">R$ 0,0019</div>
        <p class="text-xl text-gray-500 mb-2">por validação no plano Starter.</p>
        <div class="space-y-1 text-gray-400 text-base">
            <p>Menos que uma gota de café por chamada.</p>
            <p>Menos que o custo de um SMS.</p>
            <p>Menos que o prejuízo de <em>UM</em> cliente que desistiu</p>
            <p>porque o bot não entendeu o que ele disse.</p>
        </div>
    </div>
</section>

<!-- Cards de plano -->
<section class="py-12 bg-white">
    <div class="max-w-6xl mx-auto px-4 sm:px-6">
        <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">

            <!-- Free -->
            <div class="border border-gray-200 rounded-2xl p-6 flex flex-col">
                <div class="font-bold text-gray-900 text-lg mb-1">Free</div>
                <div class="text-gray-400 text-sm mb-4">Para testar e projetos pessoais</div>
                <div class="text-4xl font-extrabold text-gray-900 mb-1">R$ 0</div>
                <div class="text-gray-400 text-sm mb-6">para sempre</div>
                <ul class="text-sm text-gray-600 space-y-2 mb-6 flex-1">
                    <li>✓ 3.000 créditos/mês</li>
                    <li>✓ 13 validadores</li>
                    <li>✓ Playground</li>
                    <li>✓ Docs completa</li>
                    <li class="text-gray-400">– Email: sem suporte</li>
                </ul>
                <a href="/login" class="block text-center border border-gray-300 rounded-xl py-2.5 text-sm font-semibold hover:border-nalu-500 hover:text-nalu-600 transition-colors">
                    Começar grátis
                </a>
            </div>

            <!-- Starter -->
            <div class="border-2 border-nalu-500 rounded-2xl p-6 flex flex-col relative">
                <div class="absolute -top-3.5 left-1/2 -translate-x-1/2 bg-nalu-500 text-white text-xs px-4 py-1 rounded-full font-bold">Mais popular</div>
                <div class="font-bold text-gray-900 text-lg mb-1">Starter</div>
                <div class="text-gray-500 text-sm mb-3">Para startups e MVPs</div>
                <div class="text-3xl font-extrabold text-nalu-600 mb-0">R$ 0,0019</div>
                <div class="text-xs text-gray-400 mb-1">por validação</div>
                <div class="text-gray-400 text-sm mb-6">R$ 29/mês · 15.000 créditos</div>
                <ul class="text-sm text-gray-600 space-y-2 mb-6 flex-1">
                    <li>✓ 15.000 créditos/mês</li>
                    <li>✓ Tudo do Free</li>
                    <li>✓ Dashboard</li>
                    <li>✓ Email 72h</li>
                </ul>
                <a href="/checkout?plan=starter" class="block text-center bg-nalu-600 text-white rounded-xl py-2.5 text-sm font-bold hover:bg-nalu-700 transition-colors">
                    Assinar →
                </a>
            </div>

            <!-- Indie -->
            <div class="border border-gray-200 rounded-2xl p-6 flex flex-col">
                <div class="font-bold text-gray-900 text-lg mb-1">Indie</div>
                <div class="text-gray-500 text-sm mb-3">Para produtos em crescimento</div>
                <div class="text-3xl font-extrabold text-nalu-600 mb-0">R$ 0,0014</div>
                <div class="text-xs text-gray-400 mb-1">por validação</div>
                <div class="text-gray-400 text-sm mb-6">R$ 69/mês · 50.000 créditos</div>
                <ul class="text-sm text-gray-600 space-y-2 mb-6 flex-1">
                    <li>✓ 50.000 créditos/mês</li>
                    <li>✓ Tudo do Starter</li>
                    <li>✓ Email 24h</li>
                    <li>✓ Priority queue</li>
                </ul>
                <a href="/checkout?plan=indie" class="block text-center border border-gray-300 rounded-xl py-2.5 text-sm font-semibold hover:border-nalu-500 hover:text-nalu-600 transition-colors">
                    Assinar →
                </a>
            </div>

            <!-- Pro -->
            <div class="border border-gray-200 rounded-2xl p-6 flex flex-col">
                <div class="font-bold text-gray-900 text-lg mb-1">Pro</div>
                <div class="text-gray-500 text-sm mb-3">Para produtos em escala</div>
                <div class="text-3xl font-extrabold text-nalu-600 mb-0">R$ 0,0008</div>
                <div class="text-xs text-gray-400 mb-1">por validação</div>
                <div class="text-gray-400 text-sm mb-6">R$ 199/mês · 250.000 créditos</div>
                <ul class="text-sm text-gray-600 space-y-2 mb-6 flex-1">
                    <li>✓ 250.000 créditos/mês</li>
                    <li>✓ Tudo do Indie</li>
                    <li>✓ SLA 99%</li>
                    <li>✓ Suporte 8h</li>
                </ul>
                <a href="/checkout?plan=pro" class="block text-center border border-gray-300 rounded-xl py-2.5 text-sm font-semibold hover:border-nalu-500 hover:text-nalu-600 transition-colors">
                    Assinar →
                </a>
            </div>
        </div>
    </div>
</section>

<!-- Tabela de créditos por validador -->
<section class="py-12 bg-slate-50">
    <div class="max-w-3xl mx-auto px-4 sm:px-6">
        <h2 class="text-2xl font-bold text-center mb-6">Quanto custa cada validador?</h2>
        <div class="bg-white rounded-2xl border border-gray-100 overflow-hidden">
            <table class="w-full text-sm">
                <thead class="bg-gray-50 border-b border-gray-100">
                    <tr>
                        <th class="px-5 py-3 text-left font-semibold text-gray-700">Validador</th>
                        <th class="px-5 py-3 text-center font-semibold text-gray-700">Créditos</th>
                        <th class="px-5 py-3 text-center font-semibold text-gray-700">Starter</th>
                        <th class="px-5 py-3 text-center font-semibold text-gray-700">Pro</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    <tr class="hover:bg-gray-50">
                        <td class="px-5 py-3 text-gray-700">CPF, CEP, CNPJ, email, telefone, placa, CEP internacional</td>
                        <td class="px-5 py-3 text-center font-bold text-gray-900">1</td>
                        <td class="px-5 py-3 text-center text-nalu-600 font-semibold">R$ 0,0019</td>
                        <td class="px-5 py-3 text-center text-nalu-600 font-semibold">R$ 0,0008</td>
                    </tr>
                    <tr class="hover:bg-gray-50">
                        <td class="px-5 py-3 text-gray-700">Nome, sim/não, data nascimento, handoff, cancelamento, empresa</td>
                        <td class="px-5 py-3 text-center font-bold text-gray-900">2</td>
                        <td class="px-5 py-3 text-center text-nalu-600 font-semibold">R$ 0,0039</td>
                        <td class="px-5 py-3 text-center text-nalu-600 font-semibold">R$ 0,0016</td>
                    </tr>
                    <tr class="bg-nalu-50 hover:bg-nalu-100">
                        <td class="px-5 py-3 text-gray-700 font-semibold">
                            🧠 validate_reply (análise de contexto)
                            <span class="ml-2 bg-nalu-500 text-white text-xs px-2 py-0.5 rounded-full">Premium</span>
                        </td>
                        <td class="px-5 py-3 text-center font-bold text-gray-900">5</td>
                        <td class="px-5 py-3 text-center text-nalu-600 font-bold">R$ 0,0097</td>
                        <td class="px-5 py-3 text-center text-nalu-600 font-bold">R$ 0,0040</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</section>

<!-- Quanto rende cada plano -->
<section class="py-12 bg-white">
    <div class="max-w-3xl mx-auto px-4 sm:px-6">
        <h2 class="text-2xl font-bold text-center mb-8">Quanto rende cada plano?</h2>

        <div class="bg-blue-50 border border-blue-100 rounded-2xl p-6 mb-6">
            <div class="font-bold text-blue-800 mb-3">💡 Exemplo real: chatbot de cobrança via WhatsApp</div>
            <p class="text-blue-700 text-sm mb-4">Validações típicas por mês:</p>
            <ul class="text-sm text-blue-700 space-y-1 mb-4">
                <li>• 200 extrações de nome (×2 cred = 400 cred)</li>
                <li>• 200 validações de CPF (×1 cred = 200 cred)</li>
                <li>• 100 análises de contexto reply (×5 cred = 500 cred)</li>
                <li class="font-bold mt-2">• Total: 1.100 créditos = cabe no Free!</li>
            </ul>
            <p class="text-blue-800 text-sm">
                Cresceu? Com o Starter (R$ 29/mês), o mesmo bot atende 10× mais clientes
                pelo custo de <strong>R$ 0,0019 por validação</strong>.
            </p>
        </div>

        <div class="bg-amber-50 border border-amber-100 rounded-2xl p-5 text-center">
            <p class="text-amber-800 font-medium">
                O café que você tomou hoje custou mais que 1.000 validações.
            </p>
        </div>
    </div>
</section>

<!-- FAQ Pricing -->
<section class="py-12 bg-slate-50">
    <div class="max-w-3xl mx-auto px-4 sm:px-6">
        <h2 class="text-2xl font-bold text-center mb-8">Dúvidas sobre preço</h2>
        <div class="space-y-4">
            <div class="bg-white rounded-xl border border-gray-100 p-5">
                <div class="font-semibold text-gray-800 mb-2">E se meus créditos acabarem?</div>
                <div class="text-gray-500 text-sm">Chamadas retornam 429 com sugestão de upgrade. Sem cobrança surpresa. Seus dados e chaves continuam intactos.</div>
            </div>
            <div class="bg-white rounded-xl border border-gray-100 p-5">
                <div class="font-semibold text-gray-800 mb-2">Por que validate_reply custa 5 créditos?</div>
                <div class="text-gray-500 text-sm">Usa modelo de IA maior (70B) e analisa o contexto completo do par agente+usuário. Os outros usam regras determinísticas ou modelos leves.</div>
            </div>
            <div class="bg-white rounded-xl border border-gray-100 p-5">
                <div class="font-semibold text-gray-800 mb-2">Posso mudar de plano?</div>
                <div class="text-gray-500 text-sm">Sim, a qualquer momento. Upgrade é imediato. Downgrade no próximo ciclo de cobrança.</div>
            </div>
            <div class="bg-white rounded-xl border border-gray-100 p-5">
                <div class="font-semibold text-gray-800 mb-2">Aceita Pix ou boleto?</div>
                <div class="text-gray-500 text-sm">Aceitamos cartão de crédito e débito via Stripe. Pix em breve.</div>
            </div>
            <div class="bg-white rounded-xl border border-gray-100 p-5">
                <div class="font-semibold text-gray-800 mb-2">Tem desconto anual?</div>
                <div class="text-gray-500 text-sm">Em breve (fase 2). Cadastre-se para ser notificado.</div>
            </div>
        </div>
    </div>
</section>

<!-- CTA final -->
<section class="py-16 bg-nalu-600 text-white text-center">
    <div class="max-w-xl mx-auto px-4 sm:px-6">
        <h2 class="text-2xl font-bold mb-3">Comece com 3.000 créditos grátis</h2>
        <p class="text-nalu-100 mb-6">Sem cartão. Sem prazo. Setup em 30 segundos.</p>
        <a href="/login" class="bg-white text-nalu-600 font-bold px-8 py-3 rounded-xl hover:bg-nalu-50 transition-colors inline-block">
            Criar conta grátis →
        </a>
    </div>
</section>
