@{
    var isEn  = (Context.Request.Path.Value ?? "").StartsWith("/en");
    var isEs  = (Context.Request.Path.Value ?? "").StartsWith("/es");
    string T(string pt, string es, string en) => isEn ? en : isEs ? es : pt;

    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewData["Title"] = T(
        "API para Desenvolvedores — QR Rapido",
        "API para Desarrolladores — QR Rapido",
        "Developer API — QR Rapido");
}

<!-- ======================== HERO ======================== -->
<section class="bg-primary text-white py-5">
    <div class="container text-center">
        <div class="mb-3">
            <span class="badge bg-warning text-dark fw-semibold px-3 py-2 fs-6">
                <i class="fas fa-code me-1"></i> API REST
            </span>
        </div>
        <h1 class="display-5 fw-bold mb-3">
            @T("Gere QR codes diretamente na sua aplicação",
               "Generá QR codes directamente en tu aplicación",
               "Generate QR codes directly in your application")
        </h1>
        <p class="lead mb-4 opacity-75">
            @T("Integração simples, resposta rápida, múltiplos formatos de imagem.",
               "Integración simple, respuesta rápida, múltiples formatos de imagen.",
               "Simple integration, fast response, multiple image formats.")
        </p>
        <div class="d-flex gap-3 justify-content-center flex-wrap">
            @if (ViewBag.IsAuthenticated == true)
            {
                <a href="/Developer" class="btn btn-warning btn-lg fw-bold">
                    <i class="fas fa-key me-2"></i>@T("Acessar Portal do Desenvolvedor", "Acceder al Portal del Desarrollador", "Go to Developer Portal")
                </a>
            }
            else
            {
                <a href="/Account/Login" class="btn btn-warning btn-lg fw-bold">
                    <i class="fas fa-rocket me-2"></i>@T("Criar conta grátis", "Crear cuenta gratis", "Create free account")
                </a>
                <a href="/Account/Login" class="btn btn-outline-light btn-lg">
                    @T("Já tenho conta", "Ya tengo cuenta", "I already have an account")
                </a>
            }
        </div>
        <p class="mt-3 small opacity-60">
            <i class="fas fa-gift me-1"></i>
            @T("Plano Free inclui 5 QRs grátis e 500 requisições/mês",
               "Plan Free incluye 5 QRs gratis y 500 solicitudes/mes",
               "Free plan includes 5 QRs and 500 requests/month")
        </p>
    </div>
</section>

<!-- ======================== COMO FUNCIONA ======================== -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="text-center mb-4">
            <h2 class="fw-bold">@T("Como funciona", "Cómo funciona", "How it works")</h2>
            <p class="text-muted">@T("Três passos para integrar QR codes na sua stack", "Tres pasos para integrar QR codes en tu stack", "Three steps to integrate QR codes into your stack")</p>
        </div>
        <div class="row g-4 text-center">
            <div class="col-md-4">
                <div class="card border-0 h-100 shadow-sm">
                    <div class="card-body py-4">
                        <div class="display-5 text-primary mb-3">1</div>
                        <h5 class="fw-bold">@T("Crie sua conta", "Creá tu cuenta", "Create your account")</h5>
                        <p class="text-muted small">@T("Cadastro gratuito com Google ou Microsoft. Nenhum cartão necessário para começar.", "Registro gratuito con Google o Microsoft. No se necesita tarjeta para empezar.", "Free sign-up with Google or Microsoft. No card needed to start.")</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card border-0 h-100 shadow-sm border-primary border-2">
                    <div class="card-body py-4">
                        <div class="display-5 text-primary mb-3">2</div>
                        <h5 class="fw-bold">@T("Gere sua API key", "Generá tu API key", "Generate your API key")</h5>
                        <p class="text-muted small">@T("No portal do desenvolvedor, crie uma chave em segundos. Até 5 chaves ativas por conta.", "En el portal del desarrollador, creá una clave en segundos. Hasta 5 claves activas por cuenta.", "In the developer portal, create a key in seconds. Up to 5 active keys per account.")</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card border-0 h-100 shadow-sm">
                    <div class="card-body py-4">
                        <div class="display-5 text-primary mb-3">3</div>
                        <h5 class="fw-bold">@T("Faça sua primeira chamada", "Hacé tu primera llamada", "Make your first call")</h5>
                        <p class="text-muted small">@T("Envie um POST com o conteúdo e receba o QR como PNG, WebP ou SVG.", "Enviá un POST con el contenido y recibí el QR como PNG, WebP o SVG.", "Send a POST with the content and receive the QR as PNG, WebP or SVG.")</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ======================== FORMATOS ======================== -->
<section class="py-5">
    <div class="container">
        <div class="text-center mb-4">
            <h2 class="fw-bold">@T("Formatos de imagem suportados", "Formatos de imagen soportados", "Supported image formats")</h2>
            <p class="text-muted">@T("Escolha o formato ideal para cada caso de uso", "Elegí el formato ideal para cada caso de uso", "Choose the ideal format for each use case")</p>
        </div>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body text-center py-4">
                        <div class="mb-3">
                            <span class="badge bg-primary fs-5 px-4 py-2 rounded-pill">PNG</span>
                        </div>
                        <h5 class="fw-bold">@T("Compatibilidade universal", "Compatibilidad universal", "Universal compatibility")</h5>
                        <p class="text-muted small">@T("Funciona em qualquer plataforma, navegador e sistema operacional. Ideal para e-mail, impressão e exibição em telas.", "Funciona en cualquier plataforma, navegador y sistema operativo. Ideal para e-mail, impresión y visualización en pantallas.", "Works on any platform, browser and OS. Ideal for email, printing and screen display.")</p>
                        <span class="badge bg-success-subtle text-success border border-success-subtle mt-2">@T("Todos os planos", "Todos los planes", "All plans")</span>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body text-center py-4">
                        <div class="mb-3">
                            <span class="badge bg-info fs-5 px-4 py-2 rounded-pill">WebP</span>
                        </div>
                        <h5 class="fw-bold">@T("Menor tamanho, alta qualidade", "Menor tamaño, alta calidad", "Smaller size, high quality")</h5>
                        <p class="text-muted small">@T("Até 30% menor que PNG. Perfeito para aplicações web e mobile onde performance importa.", "Hasta 30% más pequeño que PNG. Perfecto para aplicaciones web y mobile donde el rendimiento importa.", "Up to 30% smaller than PNG. Perfect for web and mobile apps where performance matters.")</p>
                        <span class="badge bg-success-subtle text-success border border-success-subtle mt-2">@T("Todos os planos", "Todos los planes", "All plans")</span>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card border-0 shadow-sm h-100 border-warning border-2">
                    <div class="card-body text-center py-4">
                        <div class="mb-3">
                            <span class="badge bg-warning text-dark fs-5 px-4 py-2 rounded-pill">SVG</span>
                        </div>
                        <h5 class="fw-bold">@T("Vetorial, escala infinita", "Vectorial, escala infinita", "Vector, infinite scale")</h5>
                        <p class="text-muted small">@T("Qualidade perfeita em qualquer tamanho, de um crachá a um outdoor. Arquivo menor e personalizável via CSS.", "Calidad perfecta en cualquier tamaño, desde una credencial hasta una cartelera. Archivo más pequeño y personalizable vía CSS.", "Perfect quality at any size, from a badge to a billboard. Smaller file and customizable via CSS.")</p>
                        <span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle mt-2">@T("Planos pagos", "Planes pagos", "Paid plans")</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ======================== EXEMPLOS DE CÓDIGO ======================== -->
<section class="py-5 bg-dark text-white">
    <div class="container">
        <div class="text-center mb-4">
            <h2 class="fw-bold">@T("Fácil de integrar", "Fácil de integrar", "Easy to integrate")</h2>
            <p class="text-white-50">@T("Uma chamada. Um QR code. Em qualquer linguagem.", "Una llamada. Un QR code. En cualquier lenguaje.", "One call. One QR code. In any language.")</p>
        </div>

        <!-- Abas de linguagem -->
        <ul class="nav nav-pills justify-content-center mb-4" id="codeTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="tab-curl" data-bs-toggle="pill" data-bs-target="#pane-curl" type="button" role="tab">
                    <i class="fas fa-terminal me-1"></i> cURL
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="tab-js" data-bs-toggle="pill" data-bs-target="#pane-js" type="button" role="tab">
                    <i class="fab fa-js me-1"></i> JavaScript
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="tab-python" data-bs-toggle="pill" data-bs-target="#pane-python" type="button" role="tab">
                    <i class="fab fa-python me-1"></i> Python
                </button>
            </li>
        </ul>

        <div class="tab-content" id="codeTabsContent">

            <!-- cURL -->
            <div class="tab-pane fade show active" id="pane-curl" role="tabpanel">
                <div class="position-relative">
                    <pre class="bg-black text-success rounded-3 p-4 fs-6 overflow-auto"><code>curl -X POST https://qrrapido.site/api/v1/QRManager/generate \
  -H "X-API-Key: qr_SuaChaveAqui" \
  -H "Content-Type: application/json" \
  -d '{
    "content": "https://seusite.com.br",
    "type": "url",
    "outputFormat": "png"
  }' \
  --output qrcode.png</code></pre>
                    <button class="btn btn-sm btn-outline-secondary position-absolute top-0 end-0 m-3 copy-btn" data-target="curl">
                        <i class="fas fa-copy"></i>
                    </button>
                </div>
            </div>

            <!-- JavaScript -->
            <div class="tab-pane fade" id="pane-js" role="tabpanel">
                <div class="position-relative">
                    <pre class="bg-black text-success rounded-3 p-4 fs-6 overflow-auto"><code>const response = await fetch(
  'https://qrrapido.site/api/v1/QRManager/generate',
  {
    method: 'POST',
    headers: {
      'X-API-Key': 'qr_SuaChaveAqui',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      content: 'https://seusite.com.br',
      type: 'url',
      outputFormat: 'webp'   // 'png' | 'webp' | 'svg'
    })
  }
);

const blob = await response.blob();
const url  = URL.createObjectURL(blob);
document.querySelector('#qr-img').src = url;</code></pre>
                    <button class="btn btn-sm btn-outline-secondary position-absolute top-0 end-0 m-3 copy-btn" data-target="js">
                        <i class="fas fa-copy"></i>
                    </button>
                </div>
            </div>

            <!-- Python -->
            <div class="tab-pane fade" id="pane-python" role="tabpanel">
                <div class="position-relative">
                    <pre class="bg-black text-success rounded-3 p-4 fs-6 overflow-auto"><code>import requests

response = requests.post(
    'https://qrrapido.site/api/v1/QRManager/generate',
    headers={
        'X-API-Key': 'qr_SuaChaveAqui',
        'Content-Type': 'application/json'
    },
    json={
        'content': 'https://seusite.com.br',
        'type': 'url',
        'outputFormat': 'svg'   # 'png' | 'webp' | 'svg'
    }
)

with open('qrcode.svg', 'wb') as f:
    f.write(response.content)</code></pre>
                    <button class="btn btn-sm btn-outline-secondary position-absolute top-0 end-0 m-3 copy-btn" data-target="python">
                        <i class="fas fa-copy"></i>
                    </button>
                </div>
            </div>

        </div>

        <!-- Resposta -->
        <div class="mt-4 text-center text-white-50 small">
            <i class="fas fa-info-circle me-1"></i>
            @T("A API retorna a imagem diretamente no corpo da resposta (binário). Header ", "La API devuelve la imagen directamente en el cuerpo de la respuesta (binario). Header ", "The API returns the image directly in the response body (binary). Header ")
            <code class="text-warning">Content-Type: image/png</code>@T(" | ", " | ", " | ")<code class="text-warning">image/webp</code>@T(" | ", " | ", " | ")<code class="text-warning">image/svg+xml</code>
        </div>
    </div>
</section>

<!-- ======================== TIPOS DE QR ======================== -->
<section class="py-5">
    <div class="container">
        <div class="text-center mb-4">
            <h2 class="fw-bold">@T("Tipos de QR suportados", "Tipos de QR soportados", "Supported QR types")</h2>
            <p class="text-muted">@T("Passe o campo", "Pasá el campo", "Pass the field") <code>type</code> @T("na requisição", "en la solicitud", "in the request")</p>
        </div>
        <div class="row g-3 justify-content-center">
            @foreach (var item in new[] {
                ("url",       "fa-link",        "URL"),
                ("text",      "fa-font",        "Texto"),
                ("wifi",      "fa-wifi",        "WiFi"),
                ("vcard",     "fa-address-card","vCard"),
                ("pix",       "fa-dollar-sign", "PIX"),
                ("whatsapp",  "fa-whatsapp",    "WhatsApp"),
                ("email",     "fa-envelope",    "E-mail"),
                ("sms",       "fa-sms",         "SMS"),
            })
            {
                <div class="col-6 col-md-3 col-lg-2">
                    <div class="card border-0 shadow-sm text-center py-3">
                        <i class="fab @(item.Item2.StartsWith("fa-w") && item.Item1 == "whatsapp" ? item.Item2 : $"fas {item.Item2}") fa-2x text-primary mb-2"></i>
                        <small class="fw-semibold">@item.Item3</small>
                        <br><code class="text-muted" style="font-size:.7rem;">@item.Item1</code>
                    </div>
                </div>
            }
        </div>
    </div>
</section>

<!-- ======================== PLANOS (teaser) ======================== -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold">@T("Planos para cada escala", "Planes para cada escala", "Plans for every scale")</h2>
            <p class="text-muted">@T("De projetos pessoais a sistemas de alto volume.", "De proyectos personales a sistemas de alto volumen.", "From personal projects to high-volume systems.")</p>
        </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 text-center">
                    <div class="card-header bg-secondary text-white py-3">
                        <h5 class="mb-0">Free</h5>
                    </div>
                    <div class="card-body">
                        <div class="display-6 fw-bold my-3">R$0</div>
                        <ul class="list-unstyled text-start small">
                            <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","month")</li>
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>PNG + WebP</li>
                            <li class="mb-2 text-muted"><i class="fas fa-times me-2"></i>SVG</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Starter -->
            <div class="col-md-6 col-lg-3">
                <div class="card h-100 border-0 shadow-sm text-center">
                    <div class="card-header bg-primary text-white py-3">
                        <h5 class="mb-0">Starter</h5>
                    </div>
                    <div class="card-body">
                        <div class="display-6 fw-bold my-3 text-muted">
                            <i class="fas fa-lock fs-4 mb-1 d-block"></i>
                            <span class="fs-6 fw-normal">@T("Faça login para ver o preço", "Iniciá sesión para ver el precio", "Log in to see pricing")</span>
                        </div>
                        <ul class="list-unstyled text-start small">
                            <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","month")</li>
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>PNG + WebP + SVG</li>
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>@T("Suporte e-mail","Soporte e-mail","Email support")</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Pro -->
            <div class="col-md-6 col-lg-3">
                <div class="card h-100 border-0 shadow border-warning text-center">
                    <div class="card-header bg-warning text-dark 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","Popular")</span>
                    </div>
                    <div class="card-body">
                        <div class="display-6 fw-bold my-3 text-muted">
                            <i class="fas fa-lock fs-4 mb-1 d-block"></i>
                            <span class="fs-6 fw-normal">@T("Faça login para ver o preço", "Iniciá sesión para ver el precio", "Log in to see pricing")</span>
                        </div>
                        <ul class="list-unstyled text-start small">
                            <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","month")</li>
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>PNG + WebP + SVG</li>
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>@T("Suporte prioritário","Soporte prioritario","Priority support")</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Business -->
            <div class="col-md-6 col-lg-3">
                <div class="card h-100 border-0 shadow-sm text-center">
                    <div class="card-header bg-success text-white py-3">
                        <h5 class="mb-0">Business</h5>
                    </div>
                    <div class="card-body">
                        <div class="display-6 fw-bold my-3 text-muted">
                            <i class="fas fa-lock fs-4 mb-1 d-block"></i>
                            <span class="fs-6 fw-normal">@T("Faça login para ver o preço", "Iniciá sesión para ver el precio", "Log in to see pricing")</span>
                        </div>
                        <ul class="list-unstyled text-start small">
                            <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","month")</li>
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>PNG + WebP + SVG</li>
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>@T("Suporte dedicado + SLA","Soporte dedicado + SLA","Dedicated support + SLA")</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- Nota de login para preços -->
        <div class="alert alert-info text-center mt-4 mx-auto" style="max-width:560px;">
            <i class="fas fa-info-circle me-2"></i>
            @T(
                "Os preços dos planos pagos estão disponíveis após o login. O cadastro é gratuito e leva menos de 30 segundos.",
                "Los precios de los planes pagos están disponibles después del inicio de sesión. El registro es gratuito y lleva menos de 30 segundos.",
                "Paid plan pricing is available after logging in. Sign-up is free and takes under 30 seconds."
            )
            <div class="mt-2">
                <a href="/Account/Login" class="btn btn-primary btn-sm">
                    <i class="fas fa-sign-in-alt me-1"></i>@T("Entrar / Criar conta", "Iniciar sesión / Crear cuenta", "Login / Create account")
                </a>
            </div>
        </div>
    </div>
</section>

<!-- ======================== CTA FINAL ======================== -->
<section class="py-5 bg-primary text-white text-center">
    <div class="container">
        <h2 class="fw-bold mb-3">@T("Pronto para integrar?", "¿Listo para integrar?", "Ready to integrate?")</h2>
        <p class="lead opacity-75 mb-4">@T("Crie sua conta, gere sua chave e faça o primeiro QR em menos de 2 minutos.", "Creá tu cuenta, generá tu clave y hacé el primer QR en menos de 2 minutos.", "Create your account, generate your key and make the first QR in under 2 minutes.")</p>
        @if (ViewBag.IsAuthenticated == true)
        {
            <a href="/Developer" class="btn btn-warning btn-lg fw-bold">
                <i class="fas fa-key me-2"></i>@T("Ir ao Portal do Desenvolvedor", "Ir al Portal del Desarrollador", "Go to Developer Portal")
            </a>
        }
        else
        {
            <a href="/Account/Login" class="btn btn-warning btn-lg fw-bold">
                <i class="fas fa-rocket me-2"></i>@T("Começar grátis agora", "Empezar gratis ahora", "Start for free now")
            </a>
        }
    </div>
</section>

@section Scripts {
<script>
document.querySelectorAll('.copy-btn').forEach(btn => {
    btn.addEventListener('click', () => {
        const pane = document.getElementById('pane-' + btn.dataset.target);
        const code = pane.querySelector('code').innerText;
        navigator.clipboard.writeText(code).then(() => {
            btn.innerHTML = '<i class="fas fa-check"></i>';
            setTimeout(() => btn.innerHTML = '<i class="fas fa-copy"></i>', 2000);
        });
    });
});
</script>
}