@page "/en/docs"
@model Nalu.Web.Pages.En.Docs.EnIndexModel
@{
    ViewData["LangPrefix"] = "/en";
    ViewData["PtUrl"] = "/docs";
    ViewData["Title"] = "Documentation — NaLU AI";
    ViewData["Description"] = "NaLU AI documentation: quickstart, API reference, MCP server, credits and errors.";
}

<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">Documentation</h1>
        <p class="text-gray-500">Everything you need to integrate NaLU AI into your 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="/en/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">First call in under 2 minutes. cURL, JS, Python.</div>
            </a>

            <a href="/en/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">All endpoints, parameters, response types and error codes.</div>
            </a>

            <a href="/en/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">Integration with Claude Code, Cursor and any MCP client via JSON-RPC 2.0.</div>
            </a>

            <a href="/en/docs/credits" 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">Credits</div>
                <div class="text-sm text-gray-500">How the credit system works, cost per validator and plan limits.</div>
            </a>

            <a href="/en/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">Integrate NaLU into N8N without code. Step-by-step with HTTP Request, IF and Switch.</div>
            </a>

            <a href="/en/docs/errors" 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">Errors</div>
                <div class="text-sm text-gray-500">HTTP codes, error payloads and how to handle rate limits and service failures.</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">Quick reference</div>
            <pre class="font-mono text-sm text-slate-300 leading-relaxed overflow-x-auto">curl https://api.naluai.dev/v1/extract/name \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "agent_input": "What is your name?",
    "user_input": "Good morning! My name is John Smith",
    "language": "en"
  }'

# Response
{
  "obtained": true,
  "extracted_value": "John Smith",
  "certain": true,
  "value_format": "string"
}</pre>
        </div>
    </div>
</section>
