@using QRRapidoApp.Models
@{
    ViewData["Title"] = "Planos de API — QRRapido";
    Layout = "~/Views/Shared/_Layout.cshtml";

    var currentTier = ViewBag.CurrentTier as ApiPlanTier? ?? ApiPlanTier.Free;
    var errorMsg    = TempData["Error"] as string;
    var isEn        = (ViewBag.Culture as string) == "en";
    var isEs        = (ViewBag.Culture as string) == "es";
    var devBase     = isEn ? "/en/Developer" : isEs ? "/es/Developer" : "/Developer";

    string T(string pt, string es, string en = null) => isEn && en != null ? en : isEs ? es : pt;
}

<div class="container mt-4 mb-5">

    <div class="text-center mb-5">
        <h1 class="h2 fw-bold">@T("Planos de API", "Planes de API", "API Plans")</h1>
        <p class="text-muted">
            @T("Escolha o plano que melhor se adapta à sua integração.",
               "Elegí el plan porã que mejor se adapte a tu integración.",
               "Choose the plan that best fits your integration.")
            <br>
            @T("Todos os planos incluem a", "Todos los planes incluyen la", "All plans include the")
            <strong>API REST</strong>
            @T("com autenticação por chave.", "con autenticación por clave.", "with key authentication.")
        </p>
        @if (!string.IsNullOrEmpty(errorMsg))
        {
            <div class="alert alert-danger d-inline-block mt-2">@errorMsg</div>
        }
    </div>

    <div class="row g-4 justify-content-center">

        <!-- Free -->
        <div class="col-md-6 col-lg-3">
            <div class="card h-100 border-0 shadow-sm @(currentTier == ApiPlanTier.Free ? "border border-secondary border-2" : "")">
                <div class="card-header bg-secondary text-white text-center py-3">
                    <h5 class="mb-0">Free</h5>
                </div>
                <div class="card-body text-center">
                    <div class="display-5 fw-bold my-3">R$0</div>
                    <p class="text-muted small">@T("para sempre", "para siempre")</p>
                    <ul class="list-unstyled text-start small mt-3">
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>@T("5 QRs vitalícios (cota gratuita)", "5 QRs de por vida (cuota gratuita)")</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>10 req/min</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>500 req/@T("mês", "mes")</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>PNG @T("e", "ha") WebP</li>
                        <li class="mb-2 text-muted"><i class="fas fa-times me-2"></i>@T("Suporte prioritário", "Soporte prioritario")</li>
                    </ul>
                </div>
                <div class="card-footer bg-white text-center pb-4">
                    @if (currentTier == ApiPlanTier.Free)
                    {
                        <span class="badge bg-secondary px-3 py-2">@T("Plano atual", "Plan actual")</span>
                    }
                    else
                    {
                        <span class="text-muted small">@T("Plano gratuito", "Plan gratuito")</span>
                    }
                </div>
            </div>
        </div>

        <!-- Starter -->
        <div class="col-md-6 col-lg-3">
            <div class="card h-100 border-0 shadow-sm @(currentTier == ApiPlanTier.Starter ? "border border-primary border-2" : "")">
                <div class="card-header bg-primary text-white text-center py-3">
                    <h5 class="mb-0">Starter</h5>
                </div>
                <div class="card-body text-center">
                    <div class="display-5 fw-bold my-3">R$29</div>
                    <p class="text-muted small">@T("por mês", "por mes")</p>
                    <ul class="list-unstyled text-start small mt-3">
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>@T("Créditos inclusos na cota", "Créditos incluidos en la cuota")</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>50 req/min</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>10.000 req/@T("mês", "mes")</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>PNG, WebP @T("e", "ha") SVG</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>@T("Suporte por e-mail", "Soporte por e-mail")</li>
                    </ul>
                </div>
                <div class="card-footer bg-white text-center pb-4">
                    @if (currentTier == ApiPlanTier.Starter)
                    {
                        <span class="badge bg-primary px-3 py-2">@T("Plano atual", "Plan actual")</span>
                    }
                    else
                    {
                        <form method="post" asp-action="SubscribeApi" asp-controller="Developer">
                            <input type="hidden" name="planTier" value="Starter">
                            <button class="btn btn-primary w-100" type="submit">@T("Assinar Starter", "Suscribir Starter")</button>
                        </form>
                    }
                </div>
            </div>
        </div>

        <!-- Pro -->
        <div class="col-md-6 col-lg-3">
            <div class="card h-100 border-0 shadow @(currentTier == ApiPlanTier.Pro ? "border border-warning border-2" : "border border-warning")">
                <div class="card-header bg-warning text-dark text-center py-3 position-relative">
                    <h5 class="mb-0">Pro</h5>
                    <span class="position-absolute top-0 end-0 translate-middle badge bg-danger" style="font-size:.6rem;">@T("Popular", "Popular")</span>
                </div>
                <div class="card-body text-center">
                    <div class="display-5 fw-bold my-3">R$99</div>
                    <p class="text-muted small">@T("por mês", "por mes")</p>
                    <ul class="list-unstyled text-start small mt-3">
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>@T("Créditos inclusos na cota", "Créditos incluidos en la cuota")</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>200 req/min</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>100.000 req/@T("mês", "mes")</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>PNG, WebP @T("e", "ha") SVG</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>@T("Suporte prioritário", "Soporte prioritario")</li>
                    </ul>
                </div>
                <div class="card-footer bg-white text-center pb-4">
                    @if (currentTier == ApiPlanTier.Pro)
                    {
                        <span class="badge bg-warning text-dark px-3 py-2">@T("Plano atual", "Plan actual")</span>
                    }
                    else
                    {
                        <form method="post" asp-action="SubscribeApi" asp-controller="Developer">
                            <input type="hidden" name="planTier" value="Pro">
                            <button class="btn btn-warning fw-bold w-100" type="submit">@T("Assinar Pro", "Suscribir Pro")</button>
                        </form>
                    }
                </div>
            </div>
        </div>

        <!-- Business -->
        <div class="col-md-6 col-lg-3">
            <div class="card h-100 border-0 shadow-sm @(currentTier == ApiPlanTier.Business ? "border border-success border-2" : "")">
                <div class="card-header bg-success text-white text-center py-3">
                    <h5 class="mb-0">Business</h5>
                </div>
                <div class="card-body text-center">
                    <div class="display-5 fw-bold my-3">R$299</div>
                    <p class="text-muted small">@T("por mês", "por mes")</p>
                    <ul class="list-unstyled text-start small mt-3">
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>@T("Créditos inclusos na cota", "Créditos incluidos en la cuota")</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>500 req/min</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>500.000 req/@T("mês", "mes")</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>PNG, WebP @T("e", "ha") SVG</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>@T("Suporte dedicado + SLA", "Soporte dedicado + SLA")</li>
                    </ul>
                </div>
                <div class="card-footer bg-white text-center pb-4">
                    @if (currentTier == ApiPlanTier.Business)
                    {
                        <span class="badge bg-success px-3 py-2">@T("Plano atual", "Plan actual")</span>
                    }
                    else
                    {
                        <form method="post" asp-action="SubscribeApi" asp-controller="Developer">
                            <input type="hidden" name="planTier" value="Business">
                            <button class="btn btn-success w-100" type="submit">@T("Assinar Business", "Suscribir Business")</button>
                        </form>
                    }
                </div>
            </div>
        </div>
    </div>

    <!-- Nota de créditos separados -->
    <div class="alert alert-info mt-4 text-center">
        <i class="fas fa-info-circle me-2"></i>
        @T("A assinatura de API é", "La suscripción de API es")
        <strong>@T("independente", "independiente")</strong>
        @T("dos créditos de QR do site. Os planos pagos liberam rate limits maiores para a API. Créditos de QR continuam sendo comprados separadamente.",
           "de los créditos de QR del sitio. Los planes pagos liberan rate limits mayores para la API. Los créditos de QR se compran por separado.")
    </div>

    <div class="text-center mt-3">
        <a href="@devBase" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-2"></i>@T("Voltar ao Portal", "Volver al Portal", "Back to Portal")
        </a>
    </div>
</div>