/* global React, ReactDOM, Nav, Hero, StatsBar, HowItWorks, CtaBand, Differentials, Testimonials, LiveSales, Comparativo, FAQ, Partners, Blog, Footer, SimulatorNav, StepShell, BrandStep, ModelStep, YearStep, VersionStep, DetailsStep, ContactStep, AnalyzingStep, Summary, OfferReveal, Success, FIPE, QuickEvalModal */ const initialData = () => ({ mode: null, // 'placa' | 'manual' plate: '', brand: '', // manual: codigoMarca (Parallelum) | placa: nome da marca brandName: '', model: '', // manual: codigoModelo (grupo até escolher a característica, depois o código real) | placa: nome do modelo modelName: '', modelVariants: [], // manual: versões [{codigo,nome}] do modelo-base escolhido — usado pelas etapas Ano e Características year: '', version: '', // manual: codigoAno (ex: "2023-1") | placa: modeloFipe versionName: '', km: 60000, condition: 'bom', nome: '', // capturado na etapa "Seus dados", antes de mostrar a oferta telefone: '', email: '', cep: '', cpf: '', cupom: '', rua: '', numero: '', complemento: '', bairro: '', cidade: '', uf: '', // preenchidos via ViaCEP a partir do CEP scheduled: null, // {date, slot} }); // Junta os campos de endereço num texto só, pra mandar no WhatsApp/email — // usado tanto no lead inicial quanto no agendamento final, evita repetir a // mesma montagem duas vezes (e divergir se um dia mudar o formato). const enderecoCompleto = (d) => d.rua ? `${d.rua}, ${d.numero}${d.complemento ? ` - ${d.complemento}` : ''} - ${d.bairro}, ${d.cidade}/${d.uf}` : ''; function AmperApp() { // Screens: 'landing' | 'simulator' | 'analyzing' | 'offer' | 'success' const [screen, setScreen] = React.useState('landing'); // Simulator step 1..5 (brand, model, year, version, details) const [step, setStep] = React.useState(1); const [data, setData] = React.useState(initialData); const [offerValue, setOfferValue] = React.useState(0); // Dados reais da oferta vindos do backend (null = usa o estimador local) const [apiOffer, setApiOffer] = React.useState(null); const [apiError, setApiError] = React.useState(null); const [apiErrorCode, setApiErrorCode] = React.useState(null); // plate→manual transition: hint banner const [plateHint, setPlateHint] = React.useState(false); // Popup de avaliação rápida — todo botão "Avaliar meu carro" da home QUE // NÃO seja o card do próprio Hero abre isso em vez de ir direto pro // assistente passo-a-passo (pedido do Rian: só o card do Hero é o "modo // completo" visível na tela; o resto é sempre popup, igual em todo lugar). const [showEvalModal, setShowEvalModal] = React.useState(false); const openEvalModal = () => setShowEvalModal(true); const handleStart = (payload = {}) => { setShowEvalModal(false); setData(d => ({ ...initialData(), ...payload })); setApiOffer(null); setApiError(null); setApiErrorCode(null); if (payload.mode === 'placa') { // A placa é resolvida pelo backend inteiro de uma vez (marca+modelo+ano+ // preço) — pula direto pro passo 5 (km/estado); o goToOffer chama a API. setPlateHint(false); setStep(5); } else if (payload.mode === 'manual' && payload.brand && payload.model && payload.year) { setPlateHint(false); setStep(4); // skip to version } else { setPlateHint(false); setStep(1); } setScreen('simulator'); window.scrollTo({ top: 0, behavior: 'instant' }); }; const goToOffer = async () => { setScreen('analyzing'); setApiError(null); setApiErrorCode(null); window.scrollTo({ top: 0, behavior: 'instant' }); // Lead inicial — dispara assim que sai da etapa "Seus dados", antes de // mostrar a oferta. A essa altura veículo, km, condição, CPF, endereço e // cupom já foram preenchidos (são passos anteriores a este) — manda tudo // de uma vez, não só nome+telefone, pra o vendedor já ter o quadro // completo no primeiro alerta em vez de esperar o agendamento final. Não // bloqueia o fluxo: se falhar, o consultor só perde o alerta antecipado. if (data.nome && data.telefone) { const veiculo = data.mode === 'placa' ? `Placa ${data.plate}` : `${data.brandName || data.brand} ${data.modelName || data.model}`; window.AmperAPI.leadInicial({ nome: data.nome, telefone: data.telefone, email: data.email, mode: data.mode, veiculo, km: data.km, condicao: data.condition, cpf: data.cpf, cep: data.cep, endereco: enderecoCompleto(data), cupom: data.cupom, }).catch(e => console.error('[goToOffer] Falha ao registrar lead inicial:', e.message) ); } if (data.mode === 'placa') { try { const result = await window.AmperAPI.avaliarPlaca({ placa: data.plate, km: data.km, condicao: data.condition, }); setApiOffer(result); if (result.veiculo) { setData(d => ({ ...d, brand: result.veiculo.marca, brandName: result.veiculo.marca, model: result.veiculo.modelo, modelName: result.veiculo.modelo, year: result.veiculo.ano, version: result.veiculo.modeloFipe || result.veiculo.modelo, versionName: result.veiculo.modeloFipe || result.veiculo.modelo, })); } } catch (e) { // Sem dados reais do veículo não dá pra mostrar oferta — volta pro // fluxo manual com um aviso, em vez de uma tela de oferta quebrada. console.error('[goToOffer] Erro ao consultar placa:', e.message); setApiOffer(null); setApiError(e.message || 'Não conseguimos calcular a oferta para essa placa.'); setApiErrorCode(e.code || null); setPlateHint(true); setScreen('simulator'); setStep(1); window.scrollTo({ top: 0, behavior: 'instant' }); return; } } else { try { const precoData = await window.AmperAPI.getPreco(data.brand, data.model, data.version); const fipeValor = parseFloat( (precoData.Valor || '0').replace(/R\$\s*/g, '').replace(/\./g, '').replace(',', '.') ); if (!fipeValor) throw new Error('Preço FIPE não disponível'); const result = await window.AmperAPI.precoMercado({ fipeValorDireto: fipeValor, ano: Number(data.year), km: data.km, condicao: data.condition, marca: data.brandName, modelo: data.modelName, }); setApiOffer({ ...result, veiculo: { marca: data.brandName, modelo: data.modelName, ano: Number(data.year), modeloFipe: precoData.Modelo || data.modelName, }, }); } catch (e) { console.warn('[goToOffer] manual: FIPE fetch falhou, usando estimativa local:', e.message); setApiOffer(null); } } setScreen('offer'); window.scrollTo({ top: 0, behavior: 'instant' }); }; const handleAccept = (payload) => { // payload carries {date, slot, offer} from the inline scheduler setData(d => ({ ...d, scheduled: { date: payload.date, slot: payload.slot } })); setOfferValue(payload.offer); // Agenda de verdade no backend — dispara WhatsApp + email pro consultor. // Não bloqueia a tela de sucesso: o agendamento (a intenção do cliente) é // real independente do envio da notificação ter funcionado ou não. const veiculo = apiOffer?.veiculo ? `${apiOffer.veiculo.marca} ${apiOffer.veiculo.modelo}` : `${data.brandName || data.brand} ${data.modelName || data.model}`; window.AmperAPI.agendar({ veiculo, km: data.km, condicao: data.condition, oferta: payload.offer, data: `${payload.date.weekday} ${payload.date.day}/${payload.date.month}`, horario: payload.slot, modo: 'casa', nome: data.nome, telefone: data.telefone, email: data.email, cep: data.cep, cpf: data.cpf, cupom: data.cupom, endereco: enderecoCompleto(data), }).catch(e => console.error('[handleAccept] Falha ao registrar agendamento:', e.message)); setScreen('success'); window.scrollTo({ top: 0, behavior: 'instant' }); }; const handleReset = () => { setScreen('landing'); setData(initialData()); setPlateHint(false); setApiErrorCode(null); setStep(1); window.scrollTo({ top: 0, behavior: 'instant' }); }; // Render by screen if (screen === 'landing') { return (
); } if (screen === 'simulator') { const totalSteps = 6; const update = (patch) => setData(d => ({ ...d, ...patch })); // auto-advance helper: set field, then jump to next step const autoNext = (patch, nextStep) => { setData(d => ({ ...d, ...patch })); // small delay so user sees the selection highlight before step swap setTimeout(() => setStep(nextStep), 160); }; let body = null, canNext = false, title = '', subtitle = '', showButtons = true, nextLabel = 'Continuar'; if (step === 1) { title = 'Qual a marca do seu carro?'; subtitle = plateHint ? (apiErrorCode === 'QUOTA_EXCEEDED' ? 'Estamos com alta demanda nas consultas automáticas por placa agora. Selecione a marca manualmente — leva menos de 1 minuto.' : `Não conseguimos decodificar a placa ${data.plate || ''} automaticamente. Selecione a marca para continuarmos.`) : 'Começamos pela marca. Dados reais da Tabela FIPE.'; body = autoNext({ brand: v.codigo, brandName: v.nome, model: '', modelName: '', modelVariants: [], year: '', version: '', versionName: '' }, 2)}/>; showButtons = false; // auto-advance } else if (step === 2) { title = 'E o modelo?'; subtitle = 'Selecione o modelo do seu veículo.'; body = autoNext({ model: v.codigo, modelName: v.nome, modelVariants: v.variants, year: '', version: '', versionName: '' }, 3)}/>; showButtons = false; } else if (step === 3) { title = 'Ano do veículo?'; subtitle = 'Informe o ano de fabricação.'; body = autoNext({ year: y, version: '', versionName: '' }, 4)}/>; showButtons = false; } else if (step === 4) { title = 'Características do veículo'; subtitle = 'Motor, carroceria e combustível — influencia direto no valor final.'; body = autoNext({ model: v.codigo, modelName: v.nome, version: v.anoCodigo, versionName: v.anoNome }, 5)}/>; showButtons = false; } else if (step === 5) { title = 'Quilometragem e estado'; subtitle = data.mode === 'placa' ? `Placa ${data.plate} identificada. Informe a quilometragem e condição para calcular sua oferta.` : 'Quase lá. Essas informações afinam a avaliação.'; body = ( <> {apiError && (
Não conseguimos calcular a oferta para essa placa. Tente novamente em alguns instantes ou use o fluxo manual.
)} update({ km: v })} condition={data.condition} setCondition={(v) => update({ condition: v })}/> ); canNext = true; nextLabel = 'Continuar'; showButtons = true; } else if (step === 6) { title = 'Seus dados'; subtitle = 'Só pra agendar sua vistoria e te avisar quando a oferta estiver pronta.'; body = ( update({ nome: v })} setTelefone={(v) => update({ telefone: v })} setEmail={(v) => update({ email: v })} setCep={(v) => update({ cep: v })} setCpf={(v) => update({ cpf: v })} setCupom={(v) => update({ cupom: v })} setRua={(v) => update({ rua: v })} setNumero={(v) => update({ numero: v })} setComplemento={(v) => update({ complemento: v })} setBairro={(v) => update({ bairro: v })} setCidade={(v) => update({ cidade: v })} setUf={(v) => update({ uf: v })} /> ); canNext = data.nome.trim().length > 1 && window.isValidPhone(data.telefone) && window.isValidEmail(data.email) && data.cep.replace(/\D/g, '').length === 8 && window.isValidCpf(data.cpf) && data.rua.trim().length > 0 && data.numero.trim().length > 0 && data.bairro.trim().length > 0 && data.cidade.trim().length > 0 && data.uf.trim().length === 2; nextLabel = 'Ver minha oferta'; showButtons = true; } return (
5, 6: false, }} onStepClick={(n) => { if (data.mode === 'placa') return; // allow navigating to any step already reached OR any step whose prerequisites are filled const canGo = n === 1 || (n === 2 && data.brand) || (n === 3 && data.brand && data.model) || (n === 4 && data.brand && data.model && data.year) || (n === 5 && data.brand && data.model && data.year && data.version) || (n === 6 && data.brand && data.model && data.year && data.version); if (canGo) setStep(n); }} /> 1 ? () => setStep(step - 1) : null} onForward={(() => { const filled = { 1: !!data.brand, 2: !!data.model, 3: !!data.year, 4: !!data.version, 5: true }; return step < 6 && filled[step] ? () => setStep(step + 1) : null; })()} onNext={showButtons ? (step === 5 ? () => { setStep(6); window.scrollTo({ top: 0, behavior: 'instant' }); } : goToOffer) : null} nextLabel={nextLabel} nextDisabled={!canNext} aside={} > {body}
); } if (screen === 'analyzing') { return (
); } if (screen === 'offer') { return (
setScreen('simulator')} />
); } if (screen === 'success') { const offer = offerValue || window.amperOffer(window.estimatePrice(data)); return (
); } return null; } window.AmperApp = AmperApp;