@page "/en/pricing"
@model Nalu.Web.Pages.En.PricingModel
@{
    ViewData["LangPrefix"] = "/en";
    ViewData["PtUrl"] = "/precos";
    ViewData["Title"] = "Pricing — from $0.0012 per validation";
    ViewData["Description"] = "NaLU AI plans: Free, Starter ($5.90), Indie ($13.90), Pro ($39.90). From $0.0012 per validation.";

    string PlanButton(string plan, string defaultCss, string activeCss)
    {
        if (!Model.IsAuthenticated)
            return $"<a href=\"/login?returnUrl={Uri.EscapeDataString("/checkout?plan=" + plan)}\" class=\"block text-center {defaultCss}\">Sign in / Register →</a>";
        if (Model.CurrentPlan == plan)
            return $"<span class=\"block text-center {activeCss} cursor-default opacity-70\">Current plan ✓</span>";
        return $"<a href=\"/checkout?plan={plan}\" class=\"block text-center {defaultCss}\">Subscribe →</a>";
    }
}

@if (Model.CheckoutError != null)
{
    <div class="bg-red-50 border border-red-200 text-red-700 text-sm px-4 py-3 text-center">
        @Model.CheckoutError
    </div>
}

<!-- Hero -->
<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">How much does it cost to fix your chatbot?</h1>
        <div class="text-7xl font-extrabold text-nalu-600 my-4">$0.0012</div>
        <p class="text-xl text-gray-500 mb-1">per validation on the Starter plan.</p>
        <p class="text-gray-400 text-base mb-4">≈ R$ 0,0058</p>
        <div class="space-y-1 text-gray-400 text-base">
            <p>Less than a drop of coffee per call.</p>
            <p>Less than the cost of a text message.</p>
            <p>Less than losing <em>ONE</em> customer who gave up</p>
            <p>because the bot didn't understand what they said.</p>
        </div>
    </div>
</section>

<!-- Plan cards -->
<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">For testing and personal projects</div>
                <div class="text-4xl font-extrabold text-gray-900 mb-0">$0</div>
                <div class="text-gray-400 text-xs mb-1">forever</div>
                <div class="text-gray-400 text-sm mb-6">&nbsp;</div>
                <ul class="text-sm text-gray-600 space-y-2 mb-6 flex-1">
                    <li>✓ 3,000 credits/month</li>
                    <li>✓ 13 validators</li>
                    <li>✓ Playground</li>
                    <li>✓ Full docs</li>
                    <li class="text-gray-400">– Email: no support</li>
                </ul>
                @if (!Model.IsAuthenticated)
                {
                    <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">Sign in / Register →</a>
                }
                else if (Model.CurrentPlan == "free")
                {
                    <span class="block text-center border border-gray-200 rounded-xl py-2.5 text-sm font-semibold opacity-60 cursor-default">Current plan ✓</span>
                }
                else
                {
                    <a href="/checkout?plan=free" 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">Downgrade</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">Most popular</div>
                <div class="font-bold text-gray-900 text-lg mb-1">Starter</div>
                <div class="text-gray-500 text-sm mb-3">For startups and MVPs</div>
                <div class="text-3xl font-extrabold text-nalu-600 mb-0">$5.90</div>
                <div class="text-xs text-gray-400 mb-1">≈ R$ 29/month</div>
                <div class="text-xs text-nalu-600 font-semibold mb-1">$0.0012 per validation</div>
                <div class="text-gray-400 text-sm mb-6">15,000 credits/month</div>
                <ul class="text-sm text-gray-600 space-y-2 mb-6 flex-1">
                    <li>✓ 15,000 credits/month</li>
                    <li>✓ Everything in Free</li>
                    <li>✓ Dashboard</li>
                    <li>✓ Email support 72h</li>
                </ul>
                @Html.Raw(PlanButton("starter",
                    "bg-nalu-600 text-white rounded-xl py-2.5 text-sm font-bold hover:bg-nalu-700 transition-colors",
                    "bg-nalu-100 text-nalu-700 rounded-xl py-2.5 text-sm font-bold"))
            </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">For growing products</div>
                <div class="text-3xl font-extrabold text-nalu-600 mb-0">$13.90</div>
                <div class="text-xs text-gray-400 mb-1">≈ R$ 69/month</div>
                <div class="text-xs text-nalu-600 font-semibold mb-1">$0.00083 per validation</div>
                <div class="text-gray-400 text-sm mb-6">50,000 credits/month</div>
                <ul class="text-sm text-gray-600 space-y-2 mb-6 flex-1">
                    <li>✓ 50,000 credits/month</li>
                    <li>✓ Everything in Starter</li>
                    <li>✓ Email support 24h</li>
                    <li>✓ Priority queue</li>
                </ul>
                @Html.Raw(PlanButton("indie",
                    "border border-gray-300 rounded-xl py-2.5 text-sm font-semibold hover:border-nalu-500 hover:text-nalu-600 transition-colors",
                    "border border-nalu-200 text-nalu-700 rounded-xl py-2.5 text-sm font-semibold"))
            </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">For products at scale</div>
                <div class="text-3xl font-extrabold text-nalu-600 mb-0">$39.90</div>
                <div class="text-xs text-gray-400 mb-1">≈ R$ 199/month</div>
                <div class="text-xs text-nalu-600 font-semibold mb-1">$0.00048 per validation</div>
                <div class="text-gray-400 text-sm mb-6">250,000 credits/month</div>
                <ul class="text-sm text-gray-600 space-y-2 mb-6 flex-1">
                    <li>✓ 250,000 credits/month</li>
                    <li>✓ Everything in Indie</li>
                    <li>✓ 99% SLA</li>
                    <li>✓ 8h support</li>
                </ul>
                @Html.Raw(PlanButton("pro",
                    "border border-gray-300 rounded-xl py-2.5 text-sm font-semibold hover:border-nalu-500 hover:text-nalu-600 transition-colors",
                    "border border-nalu-200 text-nalu-700 rounded-xl py-2.5 text-sm font-semibold"))
            </div>
        </div>
    </div>
</section>

<!-- Credit cost table -->
<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">How much does each validator cost?</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">Validator</th>
                        <th class="px-5 py-3 text-center font-semibold text-gray-700">Credits</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">Name, email, postal code, yes/no, birthdate, handoff, cancel, company, CPF, CEP, phone, CNPJ, plate</td>
                        <td class="px-5 py-3 text-center font-bold text-gray-900">3</td>
                        <td class="px-5 py-3 text-center text-nalu-600 font-semibold">$0.0012</td>
                        <td class="px-5 py-3 text-center text-nalu-600 font-semibold">$0.00048</td>
                    </tr>
                    <tr class="bg-nalu-50 hover:bg-nalu-100">
                        <td class="px-5 py-3 text-gray-700 font-semibold">
                            🧠 validate_reply (context analysis)
                            <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">$0.0020</td>
                        <td class="px-5 py-3 text-center text-nalu-600 font-bold">$0.00080</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <p class="text-center text-xs text-gray-400 mt-3">BRL prices: Starter ≈ R$ 0,0058 · Pro ≈ R$ 0,0024</p>
    </div>
</section>

<!-- Example calculation -->
<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">How far does each plan go?</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">💡 Real example: WhatsApp billing chatbot</div>
            <p class="text-blue-700 text-sm mb-4">Typical validations per month:</p>
            <ul class="text-sm text-blue-700 space-y-1 mb-4">
                <li>• 200 name extractions (×3 cr = 600 cr)</li>
                <li>• 200 email validations (×3 cr = 600 cr)</li>
                <li>• 100 reply context analyses (×5 cr = 500 cr)</li>
                <li class="font-bold mt-2">• Total: 1,700 credits = fits in Free!</li>
            </ul>
            <p class="text-blue-800 text-sm">
                Scaled up? With Starter ($5.90/mo), the same bot handles 8× more customers
                at just <strong>$0.0012 per validation</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">
                The coffee you had today cost more than 1,000 validations.
            </p>
        </div>
    </div>
</section>

<!-- FAQ -->
<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">Pricing FAQ</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">What happens when my credits run out?</div>
                <div class="text-gray-500 text-sm">Calls return 429 with an upgrade suggestion. No surprise charges. Your data and keys remain intact.</div>
            </div>
            <div class="bg-white rounded-xl border border-gray-100 p-5">
                <div class="font-semibold text-gray-800 mb-2">Why does validate_reply cost 5 credits?</div>
                <div class="text-gray-500 text-sm">It requires deep context analysis of the agent+user pair as a semantic unit. Other AI validators use multi-layer semantic extraction and cost 3 credits.</div>
            </div>
            <div class="bg-white rounded-xl border border-gray-100 p-5">
                <div class="font-semibold text-gray-800 mb-2">Can I change plans?</div>
                <div class="text-gray-500 text-sm">Yes, at any time. Upgrades are immediate. Downgrades take effect on the next billing cycle.</div>
            </div>
            <div class="bg-white rounded-xl border border-gray-100 p-5">
                <div class="font-semibold text-gray-800 mb-2">What payment methods are accepted?</div>
                <div class="text-gray-500 text-sm">Credit and debit cards via Stripe. Billing is in BRL (Brazilian Real). International cards are accepted.</div>
            </div>
            <div class="bg-white rounded-xl border border-gray-100 p-5">
                <div class="font-semibold text-gray-800 mb-2">Is there an annual discount?</div>
                <div class="text-gray-500 text-sm">Coming soon (phase 2). Sign up to be notified.</div>
            </div>
        </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">Start with 3,000 free credits</h2>
        <p class="text-nalu-100 mb-6">No credit card. No deadline. Setup in 30 seconds.</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">
            Create free account →
        </a>
    </div>
</section>
