@page "/casos/parcelas-48x"
@model Nalu.Web.Pages.Casos.Parcelas48xModel
@{
    ViewData["Title"] = "O bug das 48 parcelas: quando seu chatbot confunde quantidade com valor";
    ViewData["Description"] = "Agente oferece 20x de R$100. Cliente diz 'Bora em 48?'. Bot registra R$48. Acontece todo dia. Saiba como validate_reply resolve por R$ 0,0097.";
}

<!-- Header -->
<section class="bg-gradient-to-b from-slate-50 to-white pt-16 pb-10">
    <div class="max-w-3xl mx-auto px-4 sm:px-6">
        <div class="flex items-center gap-3 mb-4">
            <a href="/casos" class="text-gray-400 hover:text-nalu-600 text-sm">← Casos de uso</a>
        </div>
        <div class="text-xs font-semibold text-nalu-600 uppercase tracking-wide mb-3">Caso de uso · validate_reply</div>
        <h1 class="text-3xl sm:text-4xl font-extrabold text-gray-900 leading-tight mb-4">
            "O bug das 48 parcelas": quando seu chatbot confunde quantidade com valor
        </h1>
        <p class="text-xl text-gray-500">
            Acontece todo dia em chatbots de cobrança, vendas e atendimento. E custa vendas.
        </p>
    </div>
</section>

<!-- Intro -->
<section class="py-10 bg-white">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 prose prose-gray max-w-none">
        <p class="text-gray-600 leading-relaxed text-lg">
            Sua empresa treinou um LLM para ser um agente de vendas. Ele oferece parcelamento.
            O cliente responde com um número. O bot extrai o número. Erro: o bot confundiu
            a <em>quantidade de parcelas</em> que o cliente propôs com um <em>valor em reais</em>.
        </p>
        <p class="text-gray-600 leading-relaxed">
            Resultado: proposta errada, cliente frustrado, venda perdida.
            E o pior: o bug é silencioso — o bot não sabe que errou.
        </p>
    </div>
</section>

<!-- O bug em ação -->
<section class="py-10 bg-red-50">
    <div class="max-w-3xl mx-auto px-4 sm:px-6">
        <h2 class="text-2xl font-bold text-red-700 mb-6">O bug em ação</h2>
        <div class="bg-white border border-red-100 rounded-2xl p-6">
            <div class="text-xs font-semibold text-red-500 uppercase tracking-wide mb-4">BOT TRADICIONAL — DIÁLOGO REAL</div>
            <div class="space-y-3 font-mono text-sm">
                <div class="flex gap-3">
                    <span class="text-gray-400 shrink-0">Agente:</span>
                    <span>"Posso parcelar em 20x de R$100. Topa?"</span>
                </div>
                <div class="flex gap-3">
                    <span class="text-gray-400 shrink-0">Usuário:</span>
                    <span>"Bora em 48?"</span>
                </div>
                <div class="mt-4 bg-red-50 rounded-lg p-3">
                    <div class="text-red-600 font-bold">❌ Bot extraiu: "48"</div>
                    <div class="text-red-500 text-xs mt-1">Interpretou como: R$ 48,00</div>
                    <div class="text-red-500 text-xs">Correto seria: 48 parcelas (contraproposta)</div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Por que o LLM erra -->
<section class="py-10 bg-white">
    <div class="max-w-3xl mx-auto px-4 sm:px-6">
        <h2 class="text-2xl font-bold mb-4">Por que o LLM erra sozinho</h2>
        <p class="text-gray-600 leading-relaxed mb-4">
            O LLM genérico recebe apenas a mensagem do usuário: <strong>"Bora em 48?"</strong>.
            Sem contexto de que o agente acabou de oferecer PARCELAS, "48" parece um valor monetário
            ou simplesmente um número sem significado definido.
        </p>
        <p class="text-gray-600 leading-relaxed">
            Mesmo com um sistema prompt bem elaborado, o LLM não foi instruído a analisar
            o <strong>par agente+usuário</strong> como uma unidade semântica — ele vê só
            a resposta isolada.
        </p>
    </div>
</section>

<!-- Como NALU resolve -->
<section class="py-10 bg-green-50">
    <div class="max-w-3xl mx-auto px-4 sm:px-6">
        <h2 class="text-2xl font-bold text-green-700 mb-6">Como o NALU AI resolve com validate_reply</h2>
        <div class="bg-white border border-green-100 rounded-2xl p-6 mb-6">
            <div class="text-xs font-semibold text-green-600 uppercase tracking-wide mb-4">API RESPONSE — validate_reply</div>
            <pre class="font-mono text-sm text-gray-700 leading-relaxed overflow-x-auto">{
  "obtained": true,
  "reply_type": "counter_proposal",
  "extracted_value": "48",
  "value_type": "quantity",
  "extracted_meaning": "Usuário propôs 48 parcelas como
    contraproposta à oferta de 20 parcelas de R$100",
  "confidence": 0.95,
  "needs_clarification": false,
  "suggestion_to_agent": "O cliente está propondo 48 parcelas
    em vez das 20 oferecidas. Você pode ajustar a proposta
    para 48x de um valor menor?"
}</pre>
        </div>
        <p class="text-gray-600 text-sm">
            O <strong>validate_reply</strong> analisa o PAR agente+usuário e entende que "48" é uma
            contraproposta de quantidade de parcelas, não um valor monetário — porque o agente
            acabou de oferecer PARCELAS (20x de R$100), não um preço fixo.
        </p>
    </div>
</section>

<!-- Custo -->
<section class="py-10 bg-white">
    <div class="max-w-3xl mx-auto px-4 sm:px-6">
        <h2 class="text-2xl font-bold mb-6">Custo de resolver</h2>
        <div class="grid sm:grid-cols-2 gap-6">
            <div class="bg-nalu-50 border border-nalu-100 rounded-2xl p-5 text-center">
                <div class="text-sm text-gray-500 mb-1">Custo por análise</div>
                <div class="text-4xl font-extrabold text-nalu-600">R$ 0,0097</div>
                <div class="text-sm text-gray-500 mt-1">5 créditos · plano Starter</div>
            </div>
            <div class="bg-red-50 border border-red-100 rounded-2xl p-5 text-center">
                <div class="text-sm text-gray-500 mb-1">Custo de NÃO resolver</div>
                <div class="text-2xl font-extrabold text-red-600">Venda perdida</div>
                <div class="text-sm text-gray-500 mt-1">Cliente frustrado · dados poluídos</div>
            </div>
        </div>
    </div>
</section>

<!-- Código -->
<section class="py-10 bg-slate-900 text-white">
    <div class="max-w-3xl mx-auto px-4 sm:px-6">
        <h2 class="text-2xl font-bold mb-6">Código de integração</h2>
        <div class="space-y-4">
            <div class="text-sm font-semibold text-slate-400 uppercase tracking-wide">cURL</div>
            <pre class="bg-slate-800 rounded-xl p-5 text-sm font-mono text-slate-300 leading-relaxed overflow-x-auto">curl https://api.naluai.dev/v1/extract/reply \
  -H "Authorization: Bearer SEU_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "agent_message": "Posso parcelar em 20x de R$100. Topa?",
    "user_reply": "Bora em 48?",
    "language": "pt-BR"
  }'</pre>

            <div class="text-sm font-semibold text-slate-400 uppercase tracking-wide mt-6">JavaScript (n8n / Make)</div>
            <pre class="bg-slate-800 rounded-xl p-5 text-sm font-mono text-slate-300 leading-relaxed overflow-x-auto">const { reply_type, extracted_value, value_type } =
  await $http.post('https://api.naluai.dev/v1/extract/reply', {
    agent_message: $node['Agent'].json.message,
    user_reply: $node['User'].json.reply,
    language: 'pt-BR'
  }, { headers: { Authorization: 'Bearer ' + $env.NALU_TOKEN } });

// reply_type === 'counter_proposal'
// extracted_value === '48'
// value_type === 'quantity'</pre>
        </div>
    </div>
</section>

<!-- CTA -->
<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">Teste com seus próprios diálogos</h2>
        <p class="text-nalu-100 mb-6">O playground é grátis. 50 créditos por dia, sem cadastro.</p>
        <a href="/playground?validator=reply" class="bg-white text-nalu-600 font-bold px-8 py-3 rounded-xl hover:bg-nalu-50 transition-colors inline-block">
            Testar no playground →
        </a>
        <p class="text-nalu-200 text-sm mt-4">Ou <a href="/precos" class="underline">criar uma conta</a> e ganhar 3.000 créditos grátis.</p>
    </div>
</section>
