@page "/docs/quickstart"
@model Nalu.Web.Pages.Docs.QuickstartModel
@{
    ViewData["Title"] = "Quickstart — NaLU AI Docs";
    ViewData["Description"] = "Primeira chamada ao NaLU AI em menos de 2 minutos. cURL, JavaScript, Python e C#.";
}

<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="/docs" class="hover:underline">Docs</a> / Quickstart
        </div>
        <h1 class="text-3xl font-extrabold text-gray-900 mb-2">Quickstart</h1>
        <p class="text-gray-500">Primeira chamada em menos de 2 minutos.</p>
    </div>
</section>

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

        <!-- Step 1 -->
        <div>
            <h2 class="text-lg font-bold text-gray-900 mb-3">1. Obtenha sua API Key</h2>
            <p class="text-gray-600 text-sm mb-3">
                <a href="/login" class="text-nalu-600 font-semibold hover:underline">Crie uma conta grátis</a>
                e acesse o <a href="/painel" class="text-nalu-600 font-semibold hover:underline">Painel</a>.
                Sua API Key aparece logo na primeira tela (formato <code class="bg-slate-100 px-1 rounded text-xs">nalu-XXXXXXXXXX</code>).
            </p>
            <div class="bg-amber-50 border border-amber-100 rounded-xl px-4 py-3 text-sm text-amber-800">
                Plano Free inclui <strong>3.000 créditos/mês</strong> sem cartão.
            </div>
        </div>

        <!-- Step 2 -->
        <div>
            <h2 class="text-lg font-bold text-gray-900 mb-3">2. Faça a primeira chamada</h2>
            <p class="text-gray-600 text-sm mb-4">Valide um CPF em linguagem natural:</p>

            <div x-data="{ tab: 'curl' }" class="space-y-3">
                <div class="flex gap-2 text-sm font-medium border-b border-gray-100 pb-2">
                    <button onclick="qsTab('curl')" id="qs-curl" class="qs-btn qs-active px-3 py-1 rounded-lg bg-slate-800 text-white text-xs">cURL</button>
                    <button onclick="qsTab('js')" id="qs-js" class="qs-btn px-3 py-1 rounded-lg text-slate-500 hover:text-slate-800 text-xs">JavaScript</button>
                    <button onclick="qsTab('py')" id="qs-py" class="qs-btn px-3 py-1 rounded-lg text-slate-500 hover:text-slate-800 text-xs">Python</button>
                    <button onclick="qsTab('cs')" id="qs-cs" class="qs-btn px-3 py-1 rounded-lg text-slate-500 hover:text-slate-800 text-xs">C#</button>
                </div>

                <div id="qs-content-curl" class="qs-content bg-slate-900 rounded-xl p-5 font-mono text-sm text-slate-300 overflow-x-auto leading-relaxed">
<pre>curl https://api.naluai.dev/v1/extract/cpf \
  -H "Authorization: Bearer SUA_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "agent_input": "Qual o seu CPF?",
    "user_input": "meu cpf é 111.444.777-35",
    "language": "pt-BR"
  }'</pre>
                </div>

                <div id="qs-content-js" class="qs-content hidden bg-slate-900 rounded-xl p-5 font-mono text-sm text-slate-300 overflow-x-auto leading-relaxed">
<pre>const res = await fetch('https://api.naluai.dev/v1/extract/cpf', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer SUA_API_KEY',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    agent_input: 'Qual o seu CPF?',
    user_input: 'meu cpf é 111.444.777-35',
    language: 'pt-BR',
  }),
});

const data = await res.json();
console.log(data.extracted_value); // "111.444.777-35"</pre>
                </div>

                <div id="qs-content-py" class="qs-content hidden bg-slate-900 rounded-xl p-5 font-mono text-sm text-slate-300 overflow-x-auto leading-relaxed">
<pre>import requests

response = requests.post(
    'https://api.naluai.dev/v1/extract/cpf',
    headers={
        'Authorization': 'Bearer SUA_API_KEY',
        'Content-Type': 'application/json',
    },
    json={
        'agent_input': 'Qual o seu CPF?',
        'user_input': 'meu cpf é 111.444.777-35',
        'language': 'pt-BR',
    },
)

data = response.json()
print(data['extracted_value'])  # "111.444.777-35"</pre>
                </div>

                <div id="qs-content-cs" class="qs-content hidden bg-slate-900 rounded-xl p-5 font-mono text-sm text-slate-300 overflow-x-auto leading-relaxed">
<pre>using var client = new HttpClient();
client.DefaultRequestHeaders.Add("Authorization", "Bearer SUA_API_KEY");

var body = new { agent_input = "Qual o seu CPF?", user_input = "meu cpf é 111.444.777-35", language = "pt-BR" };
var resp = await client.PostAsJsonAsync("https://api.naluai.dev/v1/extract/cpf", body);
var result = await resp.Content.ReadFromJsonAsync&lt;JsonElement&gt;();

Console.WriteLine(result.GetProperty("extracted_value").GetString()); // "111.444.777-35"</pre>
                </div>
            </div>
        </div>

        <!-- Step 3: Response -->
        <div>
            <h2 class="text-lg font-bold text-gray-900 mb-3">3. Interprete a resposta</h2>
            <div class="bg-slate-900 rounded-xl p-5 font-mono text-sm text-slate-300 overflow-x-auto leading-relaxed mb-4">
<pre>{
  "obtained": true,
  "extracted_value": "111.444.777-35",
  "certain": true,
  "confidence": "high",
  "value_format": "string",
  "suggestion_to_agent": null
}</pre>
            </div>
            <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-2 text-left text-gray-700 font-semibold">Campo</th>
                        <th class="px-4 py-2 text-left text-gray-700 font-semibold">Tipo</th>
                        <th class="px-4 py-2 text-left text-gray-700 font-semibold">Descrição</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    <tr><td class="px-4 py-2 font-mono text-xs text-nalu-600">obtained</td><td class="px-4 py-2 text-gray-500">bool</td><td class="px-4 py-2 text-gray-600">true = dado extraído com sucesso</td></tr>
                    <tr><td class="px-4 py-2 font-mono text-xs text-nalu-600">extracted_value</td><td class="px-4 py-2 text-gray-500">string?</td><td class="px-4 py-2 text-gray-600">Valor normalizado ou null</td></tr>
                    <tr><td class="px-4 py-2 font-mono text-xs text-nalu-600">certain</td><td class="px-4 py-2 text-gray-500">bool</td><td class="px-4 py-2 text-gray-600">false = pedir confirmação ao usuário</td></tr>
                    <tr><td class="px-4 py-2 font-mono text-xs text-nalu-600">confidence</td><td class="px-4 py-2 text-gray-500">string</td><td class="px-4 py-2 text-gray-600">low / medium / high</td></tr>
                    <tr><td class="px-4 py-2 font-mono text-xs text-nalu-600">suggestion_to_agent</td><td class="px-4 py-2 text-gray-500">string?</td><td class="px-4 py-2 text-gray-600">Frase sugerida quando obtained=false</td></tr>
                </tbody>
            </table>
        </div>

        <!-- Next steps -->
        <div class="border-t border-gray-100 pt-8">
            <div class="font-semibold text-gray-700 mb-3">Próximos passos</div>
            <div class="grid sm:grid-cols-3 gap-3">
                <a href="/docs/api-reference" class="border border-gray-100 rounded-xl p-4 hover:border-nalu-300 transition-colors">
                    <div class="font-semibold text-sm text-gray-900 mb-1">API Reference →</div>
                    <div class="text-xs text-gray-500">Todos os 14 endpoints</div>
                </a>
                <a href="/docs/mcp" class="border border-gray-100 rounded-xl p-4 hover:border-nalu-300 transition-colors">
                    <div class="font-semibold text-sm text-gray-900 mb-1">MCP Server →</div>
                    <div class="text-xs text-gray-500">Integrar com Claude Code</div>
                </a>
                <a href="/playground" class="border border-gray-100 rounded-xl p-4 hover:border-nalu-300 transition-colors">
                    <div class="font-semibold text-sm text-gray-900 mb-1">Playground →</div>
                    <div class="text-xs text-gray-500">Testar sem código</div>
                </a>
            </div>
        </div>
    </div>
</section>

@section Scripts {
<script>
function qsTab(name) {
    document.querySelectorAll('.qs-content').forEach(el => el.classList.add('hidden'));
    document.querySelectorAll('.qs-btn').forEach(el => {
        el.classList.remove('bg-slate-800', 'text-white');
        el.classList.add('text-slate-500');
    });
    document.getElementById('qs-content-' + name).classList.remove('hidden');
    var btn = document.getElementById('qs-' + name);
    btn.classList.add('bg-slate-800', 'text-white');
    btn.classList.remove('text-slate-500');
}
</script>
}
