@page "/en"
@model Nalu.Web.Pages.En.EnIndexModel
@{
    ViewData["LangPrefix"] = "/en";
    ViewData["PtUrl"] = "/";
    ViewData["Title"] = "Is your chatbot saving 'Good Morning' as the customer's name?";
    ViewData["Description"] = "NaLU AI extracts real data from agent/user dialogues. Name, email, postal code, yes/no and more. From $0.0012 per validation.";
}

<!-- ── 1. HERO ─────────────────────────────────────────────────────────────── -->
<section class="bg-gradient-to-b from-slate-50 to-white pt-20 pb-16">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 text-center">
        <div class="inline-flex items-center gap-2 bg-nalu-50 text-nalu-700 text-xs font-semibold px-3 py-1 rounded-full mb-6">
            13 validators · MCP + REST · 3,000 free credits
        </div>
        <h1 class="text-4xl sm:text-5xl font-extrabold text-gray-900 leading-tight mb-6">
            Is your chatbot saving<br>
            <span class="text-nalu-600">"Good Morning"</span> as the customer's name?
        </h1>
        <p class="text-xl text-gray-500 mb-8 max-w-2xl mx-auto">
            NaLU AI extracts what the user <em>actually</em> said — name, email, postal code, yes/no —
            without confusing greetings with data. Integrates in 30 seconds.
        </p>

        <div class="flex flex-col sm:flex-row items-center justify-center gap-3 mb-8">
            <a href="/en/pricing" class="bg-nalu-600 text-white font-semibold px-6 py-3 rounded-xl hover:bg-nalu-700 transition-colors text-base">
                Start free →
            </a>
            <a href="/en/playground" class="border border-gray-300 text-gray-700 font-medium px-6 py-3 rounded-xl hover:border-nalu-600 hover:text-nalu-600 transition-colors text-base">
                Try the playground
            </a>
        </div>

        <ul class="flex flex-col sm:flex-row items-center justify-center gap-4 text-sm text-gray-600 mb-8">
            <li class="flex items-center gap-2">✓ 3,000 free credits per month</li>
            <li class="flex items-center gap-2">✓ Setup in 30 seconds</li>
            <li class="flex items-center gap-2">✓ Works with n8n, Make, Claude Code, Cursor</li>
        </ul>

        <div class="text-center">
            <span class="text-3xl font-extrabold text-nalu-600">$0.0012</span>
            <span class="text-gray-500 ml-2 text-base">per validation on Starter plan.</span>
            <p class="text-sm text-gray-400 mt-1">≈ R$ 0,0058 · Less than a penny to never save "Good Morning" as a name again.</p>
        </div>
    </div>
</section>

<!-- ── 2. BEFORE / AFTER ─────────────────────────────────────────────────────── -->
<section class="py-16 bg-white">
    <div class="max-w-5xl mx-auto px-4 sm:px-6">
        <h2 class="text-3xl font-bold text-center mb-12">The problem (that everyone has had)</h2>

        <!-- Example 1: Good Morning as name -->
        <div class="grid md:grid-cols-2 gap-6 mb-10">
            <div class="bg-red-50 border border-red-100 rounded-2xl p-6">
                <div class="text-xs font-semibold text-red-500 uppercase tracking-wide mb-3">TRADITIONAL BOT</div>
                <div class="font-mono text-sm space-y-2">
                    <div><span class="text-gray-400">Agent:</span> Hello! What's your name?</div>
                    <div><span class="text-gray-400">User:</span> Good morning! My name is John Smith</div>
                    <div class="mt-3 text-red-600 font-semibold">❌ Saved: "Good Morning My Name Is John Smith"</div>
                </div>
            </div>
            <div class="bg-green-50 border border-green-100 rounded-2xl p-6">
                <div class="text-xs font-semibold text-green-600 uppercase tracking-wide mb-3">WITH NaLU AI (validate_name)</div>
                <div class="font-mono text-sm space-y-2">
                    <div><span class="text-gray-400">extracted_value:</span> <span class="text-green-700 font-bold">"John Smith"</span></div>
                    <div><span class="text-gray-400">certain:</span> true</div>
                    <div><span class="text-gray-400">confidence:</span> "high"</div>
                </div>
                <div class="mt-3 text-xs text-gray-500">Cost: $0.0012 (3 credits)</div>
            </div>
        </div>

        <!-- Example 2: Installments counter-proposal -->
        <div class="grid md:grid-cols-2 gap-6 mb-10">
            <div class="bg-red-50 border border-red-100 rounded-2xl p-6">
                <div class="text-xs font-semibold text-red-500 uppercase tracking-wide mb-3">TRADITIONAL BOT</div>
                <div class="font-mono text-sm space-y-2">
                    <div><span class="text-gray-400">Agent:</span> I can split into 20x of $100. Deal?</div>
                    <div><span class="text-gray-400">User:</span> Can we do 48?</div>
                    <div class="mt-3 text-red-600 font-semibold">❌ Bot understood: $48.00</div>
                </div>
            </div>
            <div class="bg-green-50 border border-green-100 rounded-2xl p-6">
                <div class="text-xs font-semibold text-green-600 uppercase tracking-wide mb-3">WITH NaLU AI (validate_reply) <span class="bg-nalu-100 text-nalu-700 text-xs px-2 py-0.5 rounded-full ml-1">5 credits</span></div>
                <div class="font-mono text-sm space-y-2">
                    <div><span class="text-gray-400">reply_type:</span> <span class="text-green-700 font-bold">counter_proposal</span></div>
                    <div><span class="text-gray-400">extracted_value:</span> "48 installments"</div>
                    <div><span class="text-gray-400">suggestion:</span> "Customer proposes 48 installments..."</div>
                </div>
                <div class="mt-3 text-xs text-gray-500">Cost: $0.0020 (5 credits)</div>
            </div>
        </div>

        <!-- Example 3: Handoff intent -->
        <div class="grid md:grid-cols-2 gap-6">
            <div class="bg-red-50 border border-red-100 rounded-2xl p-6">
                <div class="text-xs font-semibold text-red-500 uppercase tracking-wide mb-3">TRADITIONAL BOT</div>
                <div class="font-mono text-sm space-y-2">
                    <div><span class="text-gray-400">Agent:</span> Anything else I can help with?</div>
                    <div><span class="text-gray-400">User:</span> I'd rather talk to a real person</div>
                    <div class="mt-3 text-red-600 font-semibold">❌ Bot: "I didn't understand. Please rephrase."</div>
                </div>
            </div>
            <div class="bg-green-50 border border-green-100 rounded-2xl p-6">
                <div class="text-xs font-semibold text-green-600 uppercase tracking-wide mb-3">WITH NaLU AI (validate_handoff)</div>
                <div class="font-mono text-sm space-y-2">
                    <div><span class="text-gray-400">obtained:</span> <span class="text-green-700 font-bold">true</span></div>
                    <div><span class="text-gray-400">extracted_value:</span> "human_agent"</div>
                    <div><span class="text-gray-400">urgency:</span> 2</div>
                </div>
                <div class="mt-3 text-xs text-gray-500">Cost: $0.0012 (3 credits)</div>
            </div>
        </div>
    </div>
</section>

<!-- ── 3. HOW IT WORKS ──────────────────────────────────────────────────────── -->
<section class="py-16 bg-slate-50">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 text-center">
        <h2 class="text-3xl font-bold mb-12">How it works</h2>
        <div class="grid md:grid-cols-3 gap-8">
            <div class="bg-white rounded-2xl p-6 shadow-sm">
                <div class="text-3xl mb-4">📨</div>
                <h3 class="font-bold text-lg mb-2">1. Send the dialogue</h3>
                <p class="text-gray-500 text-sm">Agent message + user reply. Two fields. Nothing else.</p>
            </div>
            <div class="bg-white rounded-2xl p-6 shadow-sm">
                <div class="text-3xl mb-4">🧠</div>
                <h3 class="font-bold text-lg mb-2">2. NaLU extracts</h3>
                <p class="text-gray-500 text-sm">Multi-layer semantic extraction. Normalized and validated result.</p>
            </div>
            <div class="bg-white rounded-2xl p-6 shadow-sm">
                <div class="text-3xl mb-4">✅</div>
                <h3 class="font-bold text-lg mb-2">3. Use clean data</h3>
                <p class="text-gray-500 text-sm"><code class="text-nalu-600">obtained: true</code> + validated value. No regex, no hallucination.</p>
            </div>
        </div>
    </div>
</section>

<!-- ── 4. COMIC 1 ─────────────────────────────────────────────────────────── -->
<section class="py-8 bg-white">
    <div class="max-w-3xl mx-auto px-4 sm:px-6">
        <img src="/images/Bomdia.en.png" alt="Comic: bot saving Good Morning as customer name" data-lb class="rounded-2xl w-full shadow-md cursor-zoom-in" />
    </div>
</section>

<!-- ── 5. VALIDATOR CATALOG ───────────────────────────────────────────────── -->
<section class="py-16 bg-slate-50">
    <div class="max-w-6xl mx-auto px-4 sm:px-6">
        <h2 class="text-3xl font-bold text-center mb-4">13 ready-to-use validators</h2>
        <p class="text-center text-gray-500 mb-10">AI validators — multi-layer semantic extraction</p>
        <partial name="_ValidatorGrid" model="Model.Validators" />
        <div class="text-center mt-8">
            <a href="/en/docs/api-reference" class="text-nalu-600 font-medium text-sm hover:underline">View documentation →</a>
        </div>
    </div>
</section>

<!-- ── 6. COMIC 2 — Parcelas ──────────────────────────────────────────────── -->
<section class="py-8 bg-white">
    <div class="max-w-3xl mx-auto px-4 sm:px-6">
        <p class="text-center text-sm text-gray-500 mb-4">
            With NaLU AI's <strong>validate_reply</strong>, the bot understands that "48" in the context
            of an installment offer is a counter-proposal — not a dollar amount.
            Cost per analysis: <strong>$0.0020</strong>. Less than a penny.
        </p>
        <img src="/images/Parcelas.en.png" alt="Comic: 48 installments vs $48" data-lb class="rounded-2xl w-full shadow-md cursor-zoom-in" />
    </div>
</section>

<!-- ── 6b. COMIC 3 — Human agent ─────────────────────────────────────────── -->
<section class="py-8 bg-slate-50">
    <div class="max-w-3xl mx-auto px-4 sm:px-6">
        <p class="text-center text-sm text-gray-500 mb-4">
            With <strong>validate_handoff</strong>, the bot identifies that the customer wants to speak with a human
            — even when they don't say it directly.
            Cost per detection: <strong>$0.0012</strong>.
        </p>
        <div class="grid sm:grid-cols-2 gap-4">
            <div>
                <div class="text-xs font-semibold text-red-500 uppercase tracking-wide mb-2 text-center">Without NaLU</div>
                <img src="/images/Atendente.errado.en.png" alt="Bot ignoring request for human agent" data-lb class="rounded-2xl w-full shadow-md cursor-zoom-in" />
            </div>
            <div>
                <div class="text-xs font-semibold text-green-600 uppercase tracking-wide mb-2 text-center">With NaLU (validate_handoff)</div>
                <img src="/images/Atendente.certo.en.png" alt="NaLU identifying intent to speak with human" data-lb class="rounded-2xl w-full shadow-md cursor-zoom-in" />
            </div>
        </div>
    </div>
</section>

<!-- ── 7. CODE SNIPPETS ───────────────────────────────────────────────────── -->
<section class="py-16 bg-slate-900 text-white">
    <div class="max-w-4xl mx-auto px-4 sm:px-6">
        <h2 class="text-3xl font-bold text-center mb-10">Integrate in 30 seconds</h2>
        <div class="space-y-4">
            <div class="flex gap-2 text-sm font-medium overflow-x-auto pb-2">
                <button onclick="showTab('curl')" id="tab-curl" class="tab-btn tab-active px-4 py-2 rounded-lg bg-slate-700 text-white">cURL</button>
                <button onclick="showTab('reply')" id="tab-reply" class="tab-btn px-4 py-2 rounded-lg text-slate-400 hover:text-white">validate_reply</button>
                <button onclick="showTab('js')" id="tab-js" class="tab-btn px-4 py-2 rounded-lg text-slate-400 hover:text-white">JavaScript</button>
                <button onclick="showTab('csharp')" id="tab-csharp" class="tab-btn px-4 py-2 rounded-lg text-slate-400 hover:text-white">C#</button>
            </div>

            <div id="content-curl" class="tab-content bg-slate-800 rounded-xl p-6 text-sm font-mono text-slate-300 leading-relaxed overflow-x-auto">
<pre>curl https://api.naluai.dev/v1/extract/name \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -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",
#   "confidence": "high",
#   "certain": true
# }</pre>
            </div>

            <div id="content-reply" class="tab-content hidden bg-slate-800 rounded-xl p-6 text-sm font-mono text-slate-300 leading-relaxed overflow-x-auto">
<pre># validate_reply — Conversational context analysis (5 credits)
curl https://api.naluai.dev/v1/extract/reply \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "agent_message": "I can split into 20 installments of $100. Deal?",
    "user_reply": "Can we do 48?"
  }'

# Response:
# {
#   "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..."
# }</pre>
            </div>

            <div id="content-js" class="tab-content hidden bg-slate-800 rounded-xl p-6 text-sm font-mono text-slate-300 leading-relaxed overflow-x-auto">
<pre>const res = await fetch('https://api.naluai.dev/v1/extract/name', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_TOKEN',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    agent_input: 'What is your name?',
    user_input: 'Good morning! My name is John Smith'
  })
});
const { obtained, extracted_value } = await res.json();
// obtained: true, extracted_value: "John Smith"</pre>
            </div>

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

var body = new {
    agent_input = "What is your name?",
    user_input = "Good morning! My name is John Smith"
};

var resp = await client.PostAsJsonAsync(
    "https://api.naluai.dev/v1/extract/name", body);
var result = await resp.Content.ReadFromJsonAsync&lt;ExtractionResponse&gt;();
// result.ExtractedValue == "John Smith"</pre>
            </div>
        </div>
    </div>
</section>

<!-- ── 7. PRICING SUMMARY ─────────────────────────────────────────────────── -->
<section class="py-16 bg-white">
    <div class="max-w-5xl mx-auto px-4 sm:px-6">
        <h2 class="text-3xl font-bold text-center mb-4">Pricing</h2>
        <p class="text-center text-gray-500 mb-10">
            <span class="text-2xl font-bold text-nalu-600">$0.0012</span>
            <span class="text-gray-500"> per validation on Starter plan. </span>
            <span class="text-gray-400 text-sm">≈ R$ 0,0058</span>
        </p>

        <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-10">
            <div class="border border-gray-200 rounded-2xl p-6 text-center">
                <div class="font-bold text-gray-900 mb-2">Free</div>
                <div class="text-3xl font-extrabold text-gray-900 mb-0">$0</div>
                <div class="text-gray-400 text-xs mb-1">forever</div>
                <div class="text-gray-500 text-sm mb-4">3,000 credits/mo</div>
                <a href="/en/pricing" class="block border border-gray-300 rounded-lg py-2 text-sm font-medium hover:border-nalu-500 transition-colors">Start free</a>
            </div>
            <div class="border-2 border-nalu-500 rounded-2xl p-6 text-center relative">
                <div class="absolute -top-3 left-1/2 -translate-x-1/2 bg-nalu-500 text-white text-xs px-3 py-1 rounded-full font-semibold">Popular</div>
                <div class="font-bold text-gray-900 mb-2">Starter</div>
                <div class="text-3xl font-extrabold text-nalu-600 mb-0">$5.90</div>
                <div class="text-gray-400 text-xs mb-1">≈ R$ 29/mo</div>
                <div class="text-gray-500 text-sm mb-4">15,000 credits/mo</div>
                <a href="/en/pricing" class="block bg-nalu-600 text-white rounded-lg py-2 text-sm font-bold hover:bg-nalu-700 transition-colors">Subscribe →</a>
            </div>
            <div class="border border-gray-200 rounded-2xl p-6 text-center">
                <div class="font-bold text-gray-900 mb-2">Indie</div>
                <div class="text-3xl font-extrabold text-nalu-600 mb-0">$13.90</div>
                <div class="text-gray-400 text-xs mb-1">≈ R$ 69/mo</div>
                <div class="text-gray-500 text-sm mb-4">50,000 credits/mo</div>
                <a href="/en/pricing" class="block border border-gray-300 rounded-lg py-2 text-sm font-medium hover:border-nalu-500 transition-colors">Subscribe →</a>
            </div>
            <div class="border border-gray-200 rounded-2xl p-6 text-center">
                <div class="font-bold text-gray-900 mb-2">Pro</div>
                <div class="text-3xl font-extrabold text-nalu-600 mb-0">$39.90</div>
                <div class="text-gray-400 text-xs mb-1">≈ R$ 199/mo</div>
                <div class="text-gray-500 text-sm mb-4">250,000 credits/mo</div>
                <a href="/en/pricing" class="block border border-gray-300 rounded-lg py-2 text-sm font-medium hover:border-nalu-500 transition-colors">Subscribe →</a>
            </div>
        </div>

        <div class="text-center">
            <a href="/en/pricing" class="text-nalu-600 font-medium text-sm hover:underline">See full pricing →</a>
        </div>
    </div>
</section>

<!-- ── 8. FAQ ──────────────────────────────────────────────────────────────── -->
<section class="py-16 bg-slate-50">
    <div class="max-w-3xl mx-auto px-4 sm:px-6">
        <h2 class="text-3xl font-bold text-center mb-10">FAQ</h2>
        <div class="space-y-4">
            @foreach (var faq in Model.Faqs)
            {
                <div class="bg-white rounded-xl border border-gray-100 p-5">
                    <div class="font-semibold text-gray-800 mb-2">@faq.Q</div>
                    <div class="text-gray-500 text-sm">@faq.A</div>
                </div>
            }
        </div>
    </div>
</section>

<!-- ── 9. CTA ──────────────────────────────────────────────────────────────── -->
<section class="py-16 bg-nalu-600 text-white text-center">
    <div class="max-w-xl mx-auto px-4 sm:px-6">
        <h2 class="text-2xl font-bold mb-3">Start with 3,000 free credits</h2>
        <p class="text-nalu-100 mb-6">No credit card. No deadline. Setup in 30 seconds.</p>
        <a href="/login" class="bg-white text-nalu-600 font-bold px-8 py-3 rounded-xl hover:bg-nalu-50 transition-colors inline-block">
            Create free account →
        </a>
    </div>
</section>

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