@page "/en/docs/credits"
@model Nalu.Web.Pages.En.Docs.EnCreditsModel
@{
    ViewData["LangPrefix"] = "/en";
    ViewData["PtUrl"] = "/docs/creditos";
    ViewData["Title"] = "Credits — NaLU AI Docs";
    ViewData["Description"] = "How the NaLU AI credit system works, cost per validator and plan limits.";
}

<section class="bg-gradient-to-b from-slate-50 to-white pt-16 pb-8">
    <div class="max-w-3xl mx-auto px-4 sm:px-6">
        <div class="text-xs font-semibold text-nalu-600 uppercase tracking-wide mb-3">
            <a href="/en/docs" class="hover:underline">Docs</a> / Credits
        </div>
        <h1 class="text-3xl font-extrabold text-gray-900 mb-2">Credits</h1>
        <p class="text-gray-500">How the NaLU AI credit system works.</p>
    </div>
</section>

<section class="py-10 bg-white">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 space-y-10">

        <div>
            <h2 class="text-xl font-bold text-gray-900 mb-4">What are credits?</h2>
            <p class="text-gray-600 mb-3">Credits are the unit of consumption in NaLU AI. Each API call consumes credits according to the validator used.</p>
            <div class="bg-nalu-50 border border-nalu-100 rounded-xl p-4 text-sm text-nalu-800">
                <strong>Free plan:</strong> 3,000 credits/month + 100 credits/day. Paid plans: monthly credits only (no daily cap).
            </div>
        </div>

        <div>
            <h2 class="text-xl font-bold text-gray-900 mb-4">Cost per validator</h2>
            <div class="overflow-x-auto">
                <table class="w-full text-sm border border-gray-100 rounded-xl overflow-hidden">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-4 py-3 text-left font-semibold text-gray-700">Validator</th>
                            <th class="px-4 py-3 text-center font-semibold text-gray-700">Credits</th>
                            <th class="px-4 py-3 text-center font-semibold text-gray-700">Starter ($5.90)</th>
                            <th class="px-4 py-3 text-center font-semibold text-gray-700">Pro ($39.90)</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-50">
                        <tr>
                            <td class="px-4 py-3 text-gray-700">All standard validators (name, email, CPF, CEP, phone, CNPJ, plate, postal code, yes/no, birthdate, handoff, cancel, company)</td>
                            <td class="px-4 py-3 text-center font-bold">3</td>
                            <td class="px-4 py-3 text-center text-nalu-600 font-semibold">$0.0012</td>
                            <td class="px-4 py-3 text-center text-nalu-600 font-semibold">$0.00048</td>
                        </tr>
                        <tr class="bg-nalu-50">
                            <td class="px-4 py-3 text-gray-700 font-semibold">🧠 validate_reply</td>
                            <td class="px-4 py-3 text-center font-bold">5</td>
                            <td class="px-4 py-3 text-center text-nalu-600 font-bold">$0.0020</td>
                            <td class="px-4 py-3 text-center text-nalu-600 font-bold">$0.00080</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <p class="text-xs text-gray-400 mt-2">BRL equivalent: Starter ≈ R$ 0,0058 · Pro ≈ R$ 0,0024 per standard validation</p>
        </div>

        <div>
            <h2 class="text-xl font-bold text-gray-900 mb-4">Plan comparison</h2>
            <div class="overflow-x-auto">
                <table class="w-full text-sm border border-gray-100 rounded-xl overflow-hidden">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-4 py-3 text-left font-semibold text-gray-700">Plan</th>
                            <th class="px-4 py-3 text-center font-semibold text-gray-700">Credits/month</th>
                            <th class="px-4 py-3 text-center font-semibold text-gray-700">Daily cap</th>
                            <th class="px-4 py-3 text-center font-semibold text-gray-700">Price</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-50">
                        <tr><td class="px-4 py-3">Free</td><td class="px-4 py-3 text-center">3,000</td><td class="px-4 py-3 text-center">100/day</td><td class="px-4 py-3 text-center">$0</td></tr>
                        <tr><td class="px-4 py-3">Starter</td><td class="px-4 py-3 text-center">15,000</td><td class="px-4 py-3 text-center">—</td><td class="px-4 py-3 text-center">$5.90/mo</td></tr>
                        <tr><td class="px-4 py-3">Indie</td><td class="px-4 py-3 text-center">50,000</td><td class="px-4 py-3 text-center">—</td><td class="px-4 py-3 text-center">$13.90/mo</td></tr>
                        <tr><td class="px-4 py-3">Pro</td><td class="px-4 py-3 text-center">250,000</td><td class="px-4 py-3 text-center">—</td><td class="px-4 py-3 text-center">$39.90/mo</td></tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div>
            <h2 class="text-xl font-bold text-gray-900 mb-4">What happens when credits run out?</h2>
            <p class="text-gray-600 mb-3">Calls return <code class="bg-slate-100 px-1.5 py-0.5 rounded text-xs">HTTP 402</code> with:</p>
            <div class="bg-slate-900 rounded-xl p-4 font-mono text-sm text-slate-300">
<pre>{
  "error":   "insufficient_credits",
  "message": "You have 0 credits remaining.",
  "upgrade": "https://naluai.dev/en/pricing"
}</pre>
            </div>
            <p class="text-gray-500 text-sm mt-3">No surprise charges. Your data and keys remain intact. Upgrade at any time to restore access immediately.</p>
        </div>

        <div>
            <h2 class="text-xl font-bold text-gray-900 mb-4">Checking your balance</h2>
            <div class="bg-slate-900 rounded-xl p-4 font-mono text-sm text-slate-300">
<pre>curl https://api.naluai.dev/v1/account/credits \
  -H "Authorization: Bearer nalu_YOUR_KEY"

# Response:
{
  "plan":               "starter",
  "credits_remaining":  12847,
  "credits_used":       2153,
  "credits_total":      15000,
  "resets_at":          "2026-06-01T00:00:00Z"
}</pre>
            </div>
        </div>
    </div>
</section>
