<x-layout
    title="Simulador de Honorários | OPCON Soluções Contábeis"
    description="Preencha o perfil da sua empresa e receba uma proposta personalizada da OPCON. Sem compromisso.">

    {{-- Hero --}}
    <section class="pt-36 pb-16" style="background: #f8fafc;">
        <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <span class="badge badge-green mb-5 reveal">100% gratuito e sem compromisso</span>
            <h1 class="display-xl reveal" style="transition-delay: 0.08s;">
                Simulador de
                <span class="text-gradient-green"> Honorários Contábeis</span>
            </h1>
            <p class="text-lg mt-5 leading-relaxed max-w-2xl mx-auto reveal" style="color: #565656; transition-delay: 0.16s;">
                Preencha o perfil da sua empresa em 2 minutos. Nossa equipe analisará e enviará uma proposta
                personalizada com todos os valores e detalhes.
            </p>
        </div>
    </section>

    {{-- Simulator --}}
    <section class="py-16 pb-28" style="background: #ffffff;" x-data="simuladorForm()">

        <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">

            {{-- Success state --}}
            <div x-show="enviado" x-cloak style="text-align:center; padding: 4rem 2rem;">
                <div style="width:72px; height:72px; background:#e8f8f1; border-radius:50%; display:flex; align-items:center; justify-content:center; margin: 0 auto 1.5rem;">
                    <svg width="32" height="32" fill="none" stroke="#25b87e" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                </div>
                <h2 style="font-size:1.75rem; font-weight:700; color:#1e3a5f; margin-bottom:1rem;">Perfil enviado com sucesso!</h2>
                <p style="color:#565656; font-size:1.0625rem; max-width:480px; margin:0 auto 2rem;">
                    Nossa equipe irá analisar seu perfil e entrar em contato em breve com uma proposta personalizada.
                </p>
                <a href="{{ route('home') }}"
                   style="display:inline-flex; align-items:center; gap:0.5rem; padding:0.75rem 1.75rem; background:#25b87e; color:#fff; font-weight:600; border-radius:10px; text-decoration:none;">
                    Voltar ao início
                </a>
            </div>

            {{-- Form --}}
            <div x-show="!enviado">

                {{-- Step indicators --}}
                <div style="display:flex; align-items:center; gap:0.5rem; margin-bottom:2.5rem; justify-content:center;">
                    <template x-for="(step, i) in steps" :key="i">
                        <div style="display:flex; align-items:center; gap:0.5rem;">
                            <div :style="`width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:700; transition:all 0.2s; background:${currentStep > i ? '#25b87e' : (currentStep === i ? '#1e3a5f' : '#e2e8f0')}; color:${currentStep >= i ? '#fff' : '#94a3b8'};`">
                                <span x-show="currentStep > i">
                                    <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
                                </span>
                                <span x-show="currentStep <= i" x-text="i + 1"></span>
                            </div>
                            <span style="font-size:0.8125rem; color:#64748b;" x-text="step" x-show="currentStep === i" class="hidden sm:inline"></span>
                            <div x-show="i < steps.length - 1" style="width:2rem; height:2px; background:#e2e8f0; margin:0 0.25rem;"></div>
                        </div>
                    </template>
                </div>

                {{-- Step 1: Situação --}}
                <div x-show="currentStep === 0" class="card-premium p-6 sm:p-8 reveal">
                    <h2 style="font-size:1.25rem; font-weight:700; color:#1e3a5f; margin-bottom:0.5rem;">
                        Qual é a situação da sua empresa?
                    </h2>
                    <p style="color:#94a3b8; font-size:0.875rem; margin-bottom:1.5rem;">Selecione a opção que melhor descreve seu momento atual.</p>

                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                        <label class="cursor-pointer" @click="situacao = 'iniciando'">
                            <div class="p-5 rounded-xl border-2 transition-all duration-200 text-center"
                                 :class="situacao === 'iniciando' ? 'border-[#25b87e] bg-[#e8f8f1]' : 'border-[#e2e8f0] hover:border-[#25b87e]'">
                                <div class="text-3xl mb-3">🚀</div>
                                <p class="text-sm font-semibold" style="color:#1e3a5f;">Iniciando</p>
                                <p class="text-xs mt-1" style="color:#94a3b8;">Empresa nova ou MEI</p>
                            </div>
                        </label>
                        <label class="cursor-pointer" @click="situacao = 'ate50k'">
                            <div class="p-5 rounded-xl border-2 transition-all duration-200 text-center"
                                 :class="situacao === 'ate50k' ? 'border-[#25b87e] bg-[#e8f8f1]' : 'border-[#e2e8f0] hover:border-[#25b87e]'">
                                <div class="text-3xl mb-3">📈</div>
                                <p class="text-sm font-semibold" style="color:#1e3a5f;">Até R$ 50k/mês</p>
                                <p class="text-xs mt-1" style="color:#94a3b8;">Pequena empresa</p>
                            </div>
                        </label>
                        <label class="cursor-pointer" @click="situacao = 'acima50k'">
                            <div class="p-5 rounded-xl border-2 transition-all duration-200 text-center"
                                 :class="situacao === 'acima50k' ? 'border-[#25b87e] bg-[#e8f8f1]' : 'border-[#e2e8f0] hover:border-[#25b87e]'">
                                <div class="text-3xl mb-3">🏢</div>
                                <p class="text-sm font-semibold" style="color:#1e3a5f;">Acima de R$ 50k</p>
                                <p class="text-xs mt-1" style="color:#94a3b8;">Empresa estabelecida</p>
                            </div>
                        </label>
                    </div>

                    <div x-show="situacao === 'acima50k'" class="mt-4">
                        <label class="block text-sm font-medium mb-2" style="color:#1e3a5f;">Faturamento médio mensal</label>
                        <select x-model="faturamento_faixa" class="w-full rounded-xl px-4 py-3 text-sm" style="border:1.5px solid #e2e8f0; background:#f8fafc; color:#1e3a5f; outline:none;">
                            <option value="">Selecione a faixa...</option>
                            <option value="50k-100k">R$ 50k – R$ 100k</option>
                            <option value="100k-200k">R$ 100k – R$ 200k</option>
                            <option value="200k-500k">R$ 200k – R$ 500k</option>
                            <option value="acima-500k">Acima de R$ 500k</option>
                        </select>
                    </div>

                    <div class="mt-6 flex justify-end">
                        <button @click="nextStep()" :disabled="!situacao || (situacao === 'acima50k' && !faturamento_faixa)"
                                style="padding:0.6875rem 1.75rem; background:#25b87e; color:#fff; font-weight:600; font-size:0.9375rem; border-radius:10px; border:none; cursor:pointer; display:flex; align-items:center; gap:0.5rem; opacity:1; transition:opacity 0.15s;"
                                :style="(!situacao || (situacao === 'acima50k' && !faturamento_faixa)) ? 'opacity:0.4;cursor:not-allowed' : ''">
                            Próximo
                            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                        </button>
                    </div>
                </div>

                {{-- Step 2: Regime + Estrutura --}}
                <div x-show="currentStep === 1" class="card-premium p-6 sm:p-8 reveal">
                    <h2 style="font-size:1.25rem; font-weight:700; color:#1e3a5f; margin-bottom:0.5rem;">
                        Estrutura da empresa
                    </h2>
                    <p style="color:#94a3b8; font-size:0.875rem; margin-bottom:1.5rem;">Regime tributário e equipe.</p>

                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium mb-2" style="color:#1e3a5f;">Regime tributário atual (ou pretendido)</label>
                            <select x-model="regime" class="w-full rounded-xl px-4 py-3 text-sm" style="border:1.5px solid #e2e8f0; background:#f8fafc; color:#1e3a5f; outline:none;">
                                <option value="">Selecione...</option>
                                <option value="Simples Nacional">Simples Nacional</option>
                                <option value="Lucro Presumido">Lucro Presumido</option>
                                <option value="Lucro Real">Lucro Real</option>
                                <option value="MEI">MEI</option>
                                <option value="Não sei">Não sei / Estou abrindo</option>
                            </select>
                        </div>

                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium mb-2" style="color:#1e3a5f;">Funcionários CLT</label>
                                <select x-model="funcionarios" class="w-full rounded-xl px-4 py-3 text-sm" style="border:1.5px solid #e2e8f0; background:#f8fafc; color:#1e3a5f; outline:none;">
                                    <option value="0">Nenhum</option>
                                    <option value="1-2">1 – 2</option>
                                    <option value="3-5">3 – 5</option>
                                    <option value="6-10">6 – 10</option>
                                    <option value="11-20">11 – 20</option>
                                    <option value="acima-20">Acima de 20</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-2" style="color:#1e3a5f;">Sócios com pró-labore</label>
                                <select x-model="prolabore" class="w-full rounded-xl px-4 py-3 text-sm" style="border:1.5px solid #e2e8f0; background:#f8fafc; color:#1e3a5f; outline:none;">
                                    <option value="0">Nenhum</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3+">3 ou mais</option>
                                </select>
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-medium mb-2" style="color:#1e3a5f;">Notas fiscais emitidas por mês (estimativa)</label>
                            <select x-model="nf_mes" class="w-full rounded-xl px-4 py-3 text-sm" style="border:1.5px solid #e2e8f0; background:#f8fafc; color:#1e3a5f; outline:none;">
                                <option value="">Selecione...</option>
                                <option value="0-10">Até 10</option>
                                <option value="11-30">11 – 30</option>
                                <option value="31-80">31 – 80</option>
                                <option value="81-200">81 – 200</option>
                                <option value="acima-200">Acima de 200</option>
                            </select>
                        </div>
                    </div>

                    <div class="mt-6 flex justify-between">
                        <button @click="currentStep--" style="padding:0.6875rem 1.25rem; background:transparent; color:#64748b; font-weight:500; font-size:0.9375rem; border-radius:10px; border:1.5px solid #e2e8f0; cursor:pointer; display:flex; align-items:center; gap:0.5rem;">
                            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
                            Voltar
                        </button>
                        <button @click="nextStep()" :disabled="!regime"
                                style="padding:0.6875rem 1.75rem; background:#25b87e; color:#fff; font-weight:600; font-size:0.9375rem; border-radius:10px; border:none; cursor:pointer; display:flex; align-items:center; gap:0.5rem;"
                                :style="!regime ? 'opacity:0.4;cursor:not-allowed' : ''">
                            Próximo
                            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                        </button>
                    </div>
                </div>

                {{-- Step 3: Complexidade --}}
                <div x-show="currentStep === 2" class="card-premium p-6 sm:p-8 reveal">
                    <h2 style="font-size:1.25rem; font-weight:700; color:#1e3a5f; margin-bottom:0.5rem;">
                        Complexidade e fidelidade
                    </h2>
                    <p style="color:#94a3b8; font-size:0.875rem; margin-bottom:1.5rem;">Nos ajuda a entender melhor o seu negócio.</p>

                    <div class="space-y-5">
                        <div>
                            <label class="block text-sm font-medium mb-3" style="color:#1e3a5f;">Complexidade das operações</label>
                            <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                                <template x-for="opt in [{v:'baixa', icon:'😊', label:'Baixa', desc:'Operações simples'}, {v:'media', icon:'📊', label:'Média', desc:'Operações diversificadas'}, {v:'alta', icon:'🔬', label:'Alta', desc:'Múltiplos CNAEs / importação'}]" :key="opt.v">
                                    <label class="cursor-pointer" @click="complexidade = opt.v">
                                        <div class="p-4 rounded-xl border-2 transition-all duration-200 text-center"
                                             :class="complexidade === opt.v ? 'border-[#25b87e] bg-[#e8f8f1]' : 'border-[#e2e8f0] hover:border-[#25b87e]'">
                                            <div class="text-2xl mb-2" x-text="opt.icon"></div>
                                            <p class="text-sm font-semibold" style="color:#1e3a5f;" x-text="opt.label"></p>
                                            <p class="text-xs mt-1" style="color:#94a3b8;" x-text="opt.desc"></p>
                                        </div>
                                    </label>
                                </template>
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-medium mb-3" style="color:#1e3a5f;">Contrato pretendido</label>
                            <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                                <template x-for="opt in [{v:'mensal', icon:'📅', label:'Mensal', desc:'Flexibilidade total'}, {v:'anual', icon:'📆', label:'Anual', desc:'Planejamento garantido'}, {v:'indefinido', icon:'🤝', label:'Indefinido', desc:'Ainda não sei'}]" :key="opt.v">
                                    <label class="cursor-pointer" @click="fidelidade = opt.v">
                                        <div class="p-4 rounded-xl border-2 transition-all duration-200 text-center"
                                             :class="fidelidade === opt.v ? 'border-[#25b87e] bg-[#e8f8f1]' : 'border-[#e2e8f0] hover:border-[#25b87e]'">
                                            <div class="text-2xl mb-2" x-text="opt.icon"></div>
                                            <p class="text-sm font-semibold" style="color:#1e3a5f;" x-text="opt.label"></p>
                                            <p class="text-xs mt-1" style="color:#94a3b8;" x-text="opt.desc"></p>
                                        </div>
                                    </label>
                                </template>
                            </div>
                        </div>
                    </div>

                    <div class="mt-6 flex justify-between">
                        <button @click="currentStep--" style="padding:0.6875rem 1.25rem; background:transparent; color:#64748b; font-weight:500; font-size:0.9375rem; border-radius:10px; border:1.5px solid #e2e8f0; cursor:pointer; display:flex; align-items:center; gap:0.5rem;">
                            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
                            Voltar
                        </button>
                        <button @click="nextStep()" :disabled="!complexidade || !fidelidade"
                                style="padding:0.6875rem 1.75rem; background:#25b87e; color:#fff; font-weight:600; font-size:0.9375rem; border-radius:10px; border:none; cursor:pointer; display:flex; align-items:center; gap:0.5rem;"
                                :style="(!complexidade || !fidelidade) ? 'opacity:0.4;cursor:not-allowed' : ''">
                            Próximo
                            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                        </button>
                    </div>
                </div>

                {{-- Step 4: Contato --}}
                <div x-show="currentStep === 3" class="card-premium p-6 sm:p-8 reveal">
                    <h2 style="font-size:1.25rem; font-weight:700; color:#1e3a5f; margin-bottom:0.5rem;">
                        Seus dados de contato
                    </h2>
                    <p style="color:#94a3b8; font-size:0.875rem; margin-bottom:1.5rem;">
                        Usaremos apenas para enviar sua proposta personalizada. Sem spam, prometemos.
                    </p>

                    <div class="space-y-4">
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium mb-1.5" style="color:#1e3a5f;">Seu nome <span style="color:#ef4444;">*</span></label>
                                <input type="text" x-model="name" placeholder="João Silva"
                                       class="w-full rounded-xl px-4 py-3 text-sm" style="border:1.5px solid #e2e8f0; background:#f8fafc; color:#1e3a5f; outline:none; width:100%;">
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1.5" style="color:#1e3a5f;">Empresa</label>
                                <input type="text" x-model="company" placeholder="Nome da empresa"
                                       class="w-full rounded-xl px-4 py-3 text-sm" style="border:1.5px solid #e2e8f0; background:#f8fafc; color:#1e3a5f; outline:none; width:100%;">
                            </div>
                        </div>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium mb-1.5" style="color:#1e3a5f;">E-mail <span style="color:#ef4444;">*</span></label>
                                <input type="email" x-model="email" placeholder="joao@empresa.com.br"
                                       class="w-full rounded-xl px-4 py-3 text-sm" style="border:1.5px solid #e2e8f0; background:#f8fafc; color:#1e3a5f; outline:none; width:100%;">
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1.5" style="color:#1e3a5f;">WhatsApp</label>
                                <input type="tel" x-model="phone" placeholder="(63) 9 0000-0000"
                                       class="w-full rounded-xl px-4 py-3 text-sm" style="border:1.5px solid #e2e8f0; background:#f8fafc; color:#1e3a5f; outline:none; width:100%;">
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium mb-1.5" style="color:#1e3a5f;">Observações (opcional)</label>
                            <textarea x-model="observacoes" rows="3" placeholder="Conte mais sobre sua empresa, necessidades específicas..."
                                      class="w-full rounded-xl px-4 py-3 text-sm resize-none" style="border:1.5px solid #e2e8f0; background:#f8fafc; color:#1e3a5f; outline:none; width:100%;"></textarea>
                        </div>
                    </div>

                    <div x-show="erroEnvio" class="mt-4 p-3 rounded-lg" style="background:#fef2f2; border:1px solid #fca5a5;">
                        <p class="text-sm" style="color:#dc2626;" x-text="erroEnvio"></p>
                    </div>

                    <div class="mt-6 flex justify-between items-center">
                        <button @click="currentStep--" style="padding:0.6875rem 1.25rem; background:transparent; color:#64748b; font-weight:500; font-size:0.9375rem; border-radius:10px; border:1.5px solid #e2e8f0; cursor:pointer; display:flex; align-items:center; gap:0.5rem;">
                            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
                            Voltar
                        </button>
                        <button @click="enviar()" :disabled="loading || !name || !email"
                                style="padding:0.6875rem 1.75rem; background:#25b87e; color:#fff; font-weight:600; font-size:0.9375rem; border-radius:10px; border:none; cursor:pointer; display:flex; align-items:center; gap:0.5rem;"
                                :style="(loading || !name || !email) ? 'opacity:0.6;cursor:not-allowed' : ''">
                            <span x-show="loading">
                                <svg width="16" height="16" class="animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
                            </span>
                            <span x-show="!loading">
                                <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>
                            </span>
                            <span x-show="!loading">Solicitar proposta</span>
                            <span x-show="loading">Enviando...</span>
                        </button>
                    </div>

                    <p class="mt-4 text-center text-xs" style="color:#94a3b8;">
                        Ao enviar, você concorda com nossa
                        <a href="{{ route('privacidade') }}" style="color:#25b87e; text-decoration:none;">Política de Privacidade</a>.
                        Nenhum cartão de crédito necessário.
                    </p>
                </div>

            </div>{{-- /form --}}

        </div>
    </section>

    {{-- Trust section --}}
    <section class="py-14" style="background: #f8fafc;">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 text-center">
                <div class="p-6 rounded-2xl" style="background:#fff; border:1px solid #e8eef4;">
                    <div class="text-3xl mb-3">⚡</div>
                    <p class="font-semibold text-sm" style="color:#1e3a5f;">Resposta rápida</p>
                    <p class="text-xs mt-1" style="color:#94a3b8;">Proposta enviada em até 24h</p>
                </div>
                <div class="p-6 rounded-2xl" style="background:#fff; border:1px solid #e8eef4;">
                    <div class="text-3xl mb-3">🔒</div>
                    <p class="font-semibold text-sm" style="color:#1e3a5f;">Seus dados protegidos</p>
                    <p class="text-xs mt-1" style="color:#94a3b8;">Não compartilhamos suas informações</p>
                </div>
                <div class="p-6 rounded-2xl" style="background:#fff; border:1px solid #e8eef4;">
                    <div class="text-3xl mb-3">✅</div>
                    <p class="font-semibold text-sm" style="color:#1e3a5f;">Sem compromisso</p>
                    <p class="text-xs mt-1" style="color:#94a3b8;">Analise a proposta com calma</p>
                </div>
            </div>
        </div>
    </section>

    <script>
    function simuladorForm() {
        return {
            currentStep: 0,
            steps: ['Situação', 'Estrutura', 'Complexidade', 'Contato'],

            situacao: '',
            faturamento_faixa: '',
            regime: '',
            funcionarios: '0',
            prolabore: '0',
            nf_mes: '',
            complexidade: '',
            fidelidade: '',

            name: '',
            email: '',
            phone: '',
            company: '',
            observacoes: '',

            loading: false,
            enviado: false,
            erroEnvio: '',

            nextStep() {
                if (this.currentStep < this.steps.length - 1) {
                    this.currentStep++;
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                }
            },

            async enviar() {
                this.erroEnvio = '';
                if (!this.name.trim() || !this.email.trim()) {
                    this.erroEnvio = 'Por favor, preencha seu nome e e-mail.';
                    return;
                }
                this.loading = true;
                try {
                    const res = await fetch('{{ route("simulador.store") }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                            'Accept': 'application/json',
                        },
                        body: JSON.stringify({
                            name:              this.name,
                            email:             this.email,
                            phone:             this.phone,
                            company:           this.company,
                            situacao:          this.situacao,
                            regime:            this.regime,
                            faturamento_faixa: this.faturamento_faixa,
                            funcionarios:      this.funcionarios,
                            prolabore:         this.prolabore,
                            nf_mes:            this.nf_mes,
                            complexidade:      this.complexidade,
                            fidelidade:        this.fidelidade,
                            observacoes:       this.observacoes,
                        }),
                    });
                    const json = await res.json();
                    if (json.ok) {
                        this.enviado = true;
                        window.scrollTo({ top: 0, behavior: 'smooth' });
                    } else {
                        this.erroEnvio = json.message || 'Erro ao enviar. Tente novamente.';
                    }
                } catch (e) {
                    this.erroEnvio = 'Erro de conexão. Verifique sua internet e tente novamente.';
                } finally {
                    this.loading = false;
                }
            },
        };
    }
    </script>

</x-layout>
