@page "/validadores"
@model Nalu.Web.Pages.Validadores.IndexModel
@{
    ViewData["Title"] = "Validadores — NALU AI";
    ViewData["Description"] = "13 validadores prontos para extrair dados reais de diálogos. CPF, CEP, nome, email, parcelas e mais.";
}

<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">Validadores</h1>
        <p class="text-gray-500">13 validadores com IA. Extração semântica em camadas + sugestão contextual inteligente.</p>
    </div>
</section>

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

        <!-- ── Brasileiros ─────────────────────────────────────────────────── -->
        <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">Brasileiros</h2>
                    <p class="text-sm text-gray-500">Validação com regras específicas do Brasil (mod 11, ANATEL, Mercosul...)</p>
                </div>
            </div>
            <partial name="_ValidatorGrid" model="Model.Brazilian" />
        </div>

        <!-- ── Universais ──────────────────────────────────────────────────── -->
        <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">Universais</h2>
                    <p class="text-sm text-gray-500">Funcionam em qualquer idioma e país</p>
                </div>
            </div>
            <partial name="_ValidatorGrid" model="Model.Universal" />
        </div>

        <!-- ── Em breve: Universais ───────────────────────────────────────── -->
        <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">Em breve</span>
                <h2 class="text-lg font-bold text-gray-700">Validadores universais</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 bg-white rounded-xl px-4 py-3 border border-slate-100">
                            <span class="text-xl shrink-0">@v.Icon</span>
                            <div>
                                <div class="font-mono text-xs text-slate-500 font-semibold">@v.Slug</div>
                                <div class="text-xs text-gray-500 mt-0.5">@v.Description</div>
                            </div>
                        </div>
                    }
                </div>
                <p class="text-xs text-gray-400 mt-4 text-center">
                    Quer priorizar algum?
                    <a href="mailto:oi@@naluai.com" class="text-nalu-600 hover:underline">Fale com a gente →</a>
                </p>
            </div>
        </div>

        <!-- ── Em breve: Brasileiros ──────────────────────────────────────── -->
        <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">Em breve</span>
                <h2 class="text-lg font-bold text-gray-700">Validadores Brasil</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 bg-white rounded-xl px-4 py-3 border border-slate-100">
                            <span class="text-xl shrink-0">@v.Icon</span>
                            <div>
                                <div class="font-mono text-xs text-slate-500 font-semibold">@v.Slug</div>
                                <div class="text-xs text-gray-500 mt-0.5">@v.Description</div>
                            </div>
                        </div>
                    }
                </div>
                <p class="text-xs text-gray-400 mt-4 text-center">
                    Quer priorizar algum?
                    <a href="mailto:oi@@naluai.com" class="text-nalu-600 hover:underline">Fale com a gente →</a>
                </p>
            </div>
        </div>

        <!-- CTA -->
        <div class="text-center pt-2 pb-8">
            <a href="/playground" class="bg-nalu-600 text-white font-bold px-8 py-3 rounded-xl hover:bg-nalu-700 transition-colors inline-block">
                Testar no Playground →
            </a>
        </div>

    </div>
</section>