@page "/docs"
@model Nalu.Web.Pages.Docs.IndexModel
@{
    ViewData["Title"] = "Documentação — NaLU AI";
    ViewData["Description"] = "Documentação NaLU AI: quickstart, API reference, MCP server, fluxos, créditos e erros.";
}

<section class="bg-gradient-to-b from-slate-50 to-white pt-16 pb-10">
    <div class="max-w-4xl mx-auto px-4 sm:px-6">
        <h1 class="text-3xl font-extrabold text-gray-900 mb-2">Documentação</h1>
        <p class="text-gray-500">Tudo que você precisa para integrar o NaLU AI ao seu chatbot.</p>
    </div>
</section>

<section class="py-10 bg-white">
    <div class="max-w-4xl mx-auto px-4 sm:px-6">
        <div class="grid sm:grid-cols-2 gap-4">

            <a href="/docs/quickstart" class="group border border-gray-100 rounded-2xl p-6 hover:border-nalu-300 hover:shadow-sm transition-all">
                <div class="text-2xl mb-3">🚀</div>
                <div class="font-bold text-gray-900 mb-1 group-hover:text-nalu-600">Quickstart</div>
                <div class="text-sm text-gray-500">Primeira chamada em menos de 2 minutos. cURL, JS, Python.</div>
            </a>

            <a href="/docs/api-reference" class="group border border-gray-100 rounded-2xl p-6 hover:border-nalu-300 hover:shadow-sm transition-all">
                <div class="text-2xl mb-3">📖</div>
                <div class="font-bold text-gray-900 mb-1 group-hover:text-nalu-600">API Reference</div>
                <div class="text-sm text-gray-500">Todos os endpoints, parâmetros, tipos de resposta e códigos de erro.</div>
            </a>

            <a href="/docs/mcp" class="group border border-gray-100 rounded-2xl p-6 hover:border-nalu-300 hover:shadow-sm transition-all">
                <div class="text-2xl mb-3">🤖</div>
                <div class="font-bold text-gray-900 mb-1 group-hover:text-nalu-600">MCP Server</div>
                <div class="text-sm text-gray-500">Integração com Claude, Cursor e qualquer cliente MCP via JSON-RPC 2.0.</div>
            </a>

            <a href="/docs/creditos" class="group border border-gray-100 rounded-2xl p-6 hover:border-nalu-300 hover:shadow-sm transition-all">
                <div class="text-2xl mb-3">💳</div>
                <div class="font-bold text-gray-900 mb-1 group-hover:text-nalu-600">Créditos</div>
                <div class="text-sm text-gray-500">Como o sistema de créditos funciona, custo por validador e limites de plano.</div>
            </a>

            <a href="/docs/fluxos" class="group border border-gray-100 rounded-2xl p-6 hover:border-nalu-300 hover:shadow-sm transition-all">
                <div class="text-2xl mb-3">🔀</div>
                <div class="font-bold text-gray-900 mb-1 group-hover:text-nalu-600">Fluxos</div>
                <div class="text-sm text-gray-500">Diagramas de fluxo para integração com n8n, Make e chatbots customizados.</div>
            </a>

            <a href="/docs/erros" class="group border border-gray-100 rounded-2xl p-6 hover:border-nalu-300 hover:shadow-sm transition-all">
                <div class="text-2xl mb-3">⚠️</div>
                <div class="font-bold text-gray-900 mb-1 group-hover:text-nalu-600">Erros</div>
                <div class="text-sm text-gray-500">Códigos HTTP, payloads de erro e como lidar com rate limit e falhas de serviço.</div>
            </a>

            <a href="/docs/n8n" class="group border border-gray-100 rounded-2xl p-6 hover:border-nalu-300 hover:shadow-sm transition-all">
                <div class="text-2xl mb-3">⚡</div>
                <div class="font-bold text-gray-900 mb-1 group-hover:text-nalu-600">N8N</div>
                <div class="text-sm text-gray-500">Integre NaLU ao N8N sem código. Passo a passo com HTTP Request, IF e Switch.</div>
            </a>

            <a href="/docs/seguranca" class="group border border-gray-100 rounded-2xl p-6 hover:border-nalu-300 hover:shadow-sm transition-all">
                <div class="text-2xl mb-3">🔒</div>
                <div class="font-bold text-gray-900 mb-1 group-hover:text-nalu-600">Segurança</div>
                <div class="text-sm text-gray-500">Como o pipeline protege seus fluxos contra manipulações, injeção e comportamentos inesperados da IA.</div>
            </a>
        </div>

        <!-- Quick ref -->
        <div class="mt-10 bg-slate-900 rounded-2xl p-6">
            <div class="text-xs font-semibold text-slate-400 uppercase tracking-wide mb-4">Referência rápida</div>
            <pre class="font-mono text-sm text-slate-300 leading-relaxed overflow-x-auto">curl https://api.naluai.dev/v1/extract/cpf \
  -H "Authorization: Bearer SUA_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "agent_input": "Qual seu CPF?",
    "user_input": "meu cpf é 111.444.777-35",
    "language": "pt-BR"
  }'

# Resposta
{
  "obtained": true,
  "extracted_value": "111.444.777-35",
  "certain": true,
  "value_format": "string"
}</pre>
        </div>
    </div>
</section>
