@page "/en/validators"
@model Nalu.Web.Pages.En.Validators.EnValidatorsModel
@{
    ViewData["LangPrefix"] = "/en";
    ViewData["PtUrl"] = "/validadores";
    ViewData["Title"] = "Validators — NaLU AI";
    ViewData["Description"] = "13 ready-to-use validators for extracting real data from dialogues. Name, email, postal code, yes/no, handoff, cancel and more.";
}

<section class="bg-gradient-to-b from-slate-50 to-white pt-16 pb-10">
    <div class="max-w-5xl mx-auto px-4 sm:px-6">
        <h1 class="text-3xl font-extrabold text-gray-900 mb-2">Validators</h1>
        <p class="text-gray-500">13 AI validators. Multi-layer semantic extraction + intelligent contextual suggestion.</p>
    </div>
</section>

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

        <!-- ── Universal ───────────────────────────────────────────────────── -->
        <div>
            <div class="flex items-center gap-3 mb-6">
                <span class="text-2xl">🌍</span>
                <div>
                    <h2 class="text-xl font-bold text-gray-900">Universal</h2>
                    <p class="text-sm text-gray-500">Work in any language and country</p>
                </div>
            </div>
            <partial name="_ValidatorGrid" model="Model.Universal" />
        </div>

        <!-- ── Brazilian ──────────────────────────────────────────────────── -->
        <div>
            <div class="flex items-center gap-3 mb-6">
                <span class="text-2xl">🇧🇷</span>
                <div>
                    <h2 class="text-xl font-bold text-gray-900">Brazilian</h2>
                    <p class="text-sm text-gray-500">Validation with Brazil-specific rules (mod 11, ANATEL, Mercosul...)</p>
                </div>
            </div>
            <partial name="_ValidatorGrid" model="Model.Brazilian" />
        </div>

        <!-- ── Coming soon: Universal ─────────────────────────────────────── -->
        <div>
            <div class="flex items-center gap-3 mb-4">
                <span class="bg-slate-100 text-slate-500 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wide">Coming soon</span>
                <h2 class="text-lg font-bold text-gray-700">Universal validators</h2>
            </div>
            <div class="border border-dashed border-slate-200 rounded-2xl p-6 bg-slate-50">
                <div class="grid sm:grid-cols-2 gap-3">
                    @foreach (var v in Model.ComingSoonUniversal)
                    {
                        <div class="flex items-start gap-3">
                            <span class="text-xl">@v.Icon</span>
                            <div>
                                <div class="text-sm font-semibold text-gray-700">@v.Slug</div>
                                <div class="text-xs text-gray-500">@v.Description</div>
                            </div>
                        </div>
                    }
                </div>
            </div>
        </div>

        <!-- ── Coming soon: Brazilian ─────────────────────────────────────── -->
        <div>
            <div class="flex items-center gap-3 mb-4">
                <span class="bg-slate-100 text-slate-500 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wide">Coming soon</span>
                <h2 class="text-lg font-bold text-gray-700">Brazilian validators</h2>
            </div>
            <div class="border border-dashed border-slate-200 rounded-2xl p-6 bg-slate-50">
                <div class="grid sm:grid-cols-2 gap-3">
                    @foreach (var v in Model.ComingSoonBrazilian)
                    {
                        <div class="flex items-start gap-3">
                            <span class="text-xl">@v.Icon</span>
                            <div>
                                <div class="text-sm font-semibold text-gray-700">@v.Slug</div>
                                <div class="text-xs text-gray-500">@v.Description</div>
                            </div>
                        </div>
                    }
                </div>
            </div>
        </div>

    </div>
</section>

<!-- CTA -->
<section class="py-12 bg-nalu-600 text-white text-center">
    <div class="max-w-xl mx-auto px-4 sm:px-6">
        <h2 class="text-xl font-bold mb-3">Try them in the Playground</h2>
        <p class="text-nalu-100 mb-6">10 free calls per day, no signup required.</p>
        <a href="/en/playground" class="bg-white text-nalu-600 font-bold px-8 py-3 rounded-xl hover:bg-nalu-50 transition-colors inline-block">
            Open Playground →
        </a>
    </div>
</section>
