NALU/src/Nalu.Web/Pages/En/Docs/Quickstart.cshtml

@page "/en/docs/quickstart"
@model Nalu.Web.Pages.En.Docs.EnQuickstartModel
@{
    ViewData["LangPrefix"] = "/en";
    ViewData["PtUrl"] = "/docs/quickstart";
    ViewData["Title"] = "Quickstart — NaLU AI Docs";
    ViewData["Description"] = "First NaLU AI call in under 2 minutes. cURL, JavaScript, Python and 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="/en/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">First call in under 2 minutes.</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-xl font-bold text-gray-900 mb-4">1. Get your API key</h2>
            <p class="text-gray-600 mb-4">
                <a href="/login" class="text-nalu-600 font-semibold hover:underline">Create a free account</a> →
                Dashboard → API Keys → <strong>Generate key</strong>.
            </p>
            <div class="bg-amber-50 border border-amber-200 rounded-xl px-4 py-3 text-sm text-amber-800">
                Free plan includes <strong>3,000 credits/month</strong> (no credit card required).
            </div>
        </div>

        <!-- Step 2 -->
        <div>
            <h2 class="text-xl font-bold text-gray-900 mb-4">2. Your first call — validate_name</h2>
            <div class="bg-slate-900 rounded-xl p-5 font-mono text-sm text-slate-300 overflow-x-auto mb-3">
<pre>curl https://api.naluai.dev/v1/extract/name \
  -H "Authorization: Bearer nalu_YOUR_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "agent_input": "What is your name?",
    "user_input":  "Good morning! My name is John Smith",
    "language":    "en"
  }'</pre>
            </div>
            <div class="bg-green-50 border border-green-100 rounded-xl p-5 font-mono text-sm text-green-800 overflow-x-auto">
<pre>{
  "obtained":        true,
  "extracted_value": "John Smith",
  "certain":         true,
  "confidence":      "high",
  "value_format":    "string",
  "credits_used":    3
}</pre>
            </div>
        </div>

        <!-- Step 3 -->
        <div>
            <h2 class="text-xl font-bold text-gray-900 mb-4">3. In JavaScript</h2>
            <div class="bg-slate-900 rounded-xl p-5 font-mono text-sm text-slate-300 overflow-x-auto">
<pre>const res = await fetch('https://api.naluai.dev/v1/extract/name', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer nalu_YOUR_KEY',
    'Content-Type':  'application/json'
  },
  body: JSON.stringify({
    agent_input: 'What is your name?',
    user_input:  'Good morning! My name is John Smith',
    language:    'en'
  })
});
const data = await res.json();

if (data.obtained) {
  console.log('Name:', data.extracted_value); // "John Smith"
} else {
  // Re-ask the user
  console.log('Suggestion:', data.smart_suggestion);
}</pre>
            </div>
        </div>

        <!-- Step 4 -->
        <div>
            <h2 class="text-xl font-bold text-gray-900 mb-4">4. In Python</h2>
            <div class="bg-slate-900 rounded-xl p-5 font-mono text-sm text-slate-300 overflow-x-auto">
<pre>import requests

r = requests.post(
    "https://api.naluai.dev/v1/extract/name",
    headers={"Authorization": "Bearer nalu_YOUR_KEY"},
    json={
        "agent_input": "What is your name?",
        "user_input":  "Good morning! My name is John Smith",
        "language":    "en"
    }
)
data = r.json()
print(data["extracted_value"])  # "John Smith"</pre>
            </div>
        </div>

        <!-- validate_reply -->
        <div>
            <h2 class="text-xl font-bold text-gray-900 mb-2">5. validate_reply — context analysis</h2>
            <p class="text-gray-500 text-sm mb-4">For analyzing the full agent ↔ user exchange (costs 5 credits):</p>
            <div class="bg-slate-900 rounded-xl p-5 font-mono text-sm text-slate-300 overflow-x-auto mb-3">
<pre>curl https://api.naluai.dev/v1/extract/reply \
  -H "Authorization: Bearer nalu_YOUR_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "agent_message": "I can split into 20 installments of $100. Deal?",
    "user_reply":    "Can we do 48?"
  }'</pre>
            </div>
            <div class="bg-green-50 border border-green-100 rounded-xl p-5 font-mono text-sm text-green-800 overflow-x-auto">
<pre>{
  "reply_type":          "counter_proposal",
  "extracted_value":     "48",
  "value_type":          "quantity",
  "extracted_meaning":   "48 installments, not $48",
  "confidence":          0.95,
  "suggestion_to_agent": "Customer proposes 48 installments instead of 20.",
  "credits_used":        5
}</pre>
            </div>
        </div>

        <!-- Next steps -->
        <div class="bg-slate-50 rounded-2xl p-6">
            <div class="font-bold text-gray-900 mb-3">Next steps</div>
            <ul class="space-y-2 text-sm text-gray-600">
                <li>→ <a href="/en/docs/api-reference" class="text-nalu-600 hover:underline">API Reference</a> — all endpoints and parameters</li>
                <li>→ <a href="/en/docs/n8n" class="text-nalu-600 hover:underline">N8N integration</a> — no-code setup</li>
                <li>→ <a href="/en/docs/mcp" class="text-nalu-600 hover:underline">MCP Server</a> — Claude Code / Cursor</li>
                <li>→ <a href="/en/playground" class="text-nalu-600 hover:underline">Playground</a> — test without code</li>
            </ul>
        </div>
    </div>
</section>