);
};
// Dropdown padrão dos passos em página cheia — mesma receita visual do
// selStyle usado no popup/Hero (window.selStyle), só que num tamanho maior
// (mais respiro pro toque em tela cheia em vez de dentro de um card apertado).
const stepSelectStyle = {
width: '100%', height: 56, padding: '0 18px',
border: '1px solid var(--ink-200)', borderRadius: 12,
background: 'var(--paper)', color: 'var(--ink-900)', fontSize: 16, fontWeight: 500,
appearance: 'none',
backgroundImage: 'url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'12\' height=\'8\' viewBox=\'0 0 12 8\' fill=\'none\'%3E%3Cpath d=\'M1 1.5L6 6.5L11 1.5\' stroke=\'%230A0A0A\' stroke-width=\'1.6\' stroke-linecap=\'round\' stroke-linejoin=\'round\'/%3E%3C/svg%3E")',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'right 18px center',
};
// --- Step: Brand picker (dados reais via window.AmperAPI) ---
// Lista suspensa em vez de grade de botões — padronizado com o popup/Hero
// (pedido do Rian 2026-09-10: consistência entre todo ponto de entrada).
const BrandStep = ({ value, onSelect }) => {
const [brands, setBrands] = React.useState([]);
const [loading, setLoading] = React.useState(true);
React.useEffect(() => {
window.AmperAPI.getMarcas()
.then(data => { setBrands(Array.isArray(data) ? data : []); setLoading(false); })
.catch(() => {
setBrands(FIPE.brands.map(b => ({ codigo: b.id, nome: b.name })));
setLoading(false);
});
}, []);
// Só marcas comuns no Brasil — corta as exóticas/raras do catálogo real.
const nacionais = brands.filter(b => isMarcaNacional(b.nome));
return (
Marca
);
};
// --- Step: Model (dados reais da marca selecionada) ---
const ModelStep = ({ codigoMarca, value, onSelect }) => {
const [q, setQ] = React.useState('');
const [models, setModels] = React.useState([]);
const [loading, setLoading] = React.useState(true);
React.useEffect(() => {
if (!codigoMarca) return;
setLoading(true);
window.AmperAPI.getModelos(codigoMarca)
.then(data => { setModels(Array.isArray(data) ? data : []); setLoading(false); })
.catch(() => setLoading(false));
}, [codigoMarca]);
// Só o nome-base (ex: "A3") — a versão específica (ex: "A3 Sedan 1.4 TFSI")
// é escolhida depois do ano, na etapa de Características (cada versão só
// existe em determinados anos, então faz mais sentido nessa ordem).
const groups = React.useMemo(() => window.groupModelos(models), [models]);
const list = q
? groups.filter(g => g.nome.toLowerCase().includes(q.toLowerCase()))
: groups;
if (loading) return ;
return (
{list.map(g => {
const active = value === g.key;
return (
);
})}
);
};
// --- Step: Year — soma os anos disponíveis em TODAS as versões do modelo ---
// (uma versão pode só existir em alguns anos; o ano deste passo ainda não
// escolhe a versão, só filtra o que aparece na etapa seguinte).
const YearStep = ({ codigoMarca, variants, value, onSelect }) => {
const [porVariante, setPorVariante] = React.useState([]);
const [loading, setLoading] = React.useState(true);
React.useEffect(() => {
if (!codigoMarca || !variants || variants.length === 0) return;
setLoading(true);
window.anosPorVariante(codigoMarca, variants)
.then(r => { setPorVariante(r); setLoading(false); })
.catch(() => setLoading(false));
}, [codigoMarca, variants]);
const uniqueYears = [...new Set(
porVariante.flatMap(r => r.anos.map(a => a.codigo.split('-')[0] === '32000' ? '0 km' : a.codigo.split('-')[0]))
)]
.filter(y => y === '0 km' || Number(y) <= ANO_MAXIMO) // não mostra ano além do catálogo atual
.sort((a, b) => a === '0 km' ? -1 : b === '0 km' ? 1 : Number(b) - Number(a));
if (loading) return ;
return (
{uniqueYears.map(y => {
const active = value === y;
return (
);
})}
);
};
// --- Step: Características — versão específica (motor/carroceria/combustível)
// que realmente existe no ano escolhido. Ex: escolheu "A3" no modelo e "2020"
// no ano → aqui mostra só as versões de A3 que existiram em 2020.
const VersionStep = ({ codigoMarca, variants, year, value, modelValue, onSelect }) => {
const [porVariante, setPorVariante] = React.useState([]);
const [loading, setLoading] = React.useState(true);
React.useEffect(() => {
if (!codigoMarca || !variants || variants.length === 0) return;
setLoading(true);
window.anosPorVariante(codigoMarca, variants)
.then(r => { setPorVariante(r); setLoading(false); })
.catch(() => setLoading(false));
}, [codigoMarca, variants]);
const yearKey = year === '0 km' ? '32000' : year;
// Cada variante pode ter mais de uma entrada no mesmo ano (combustíveis
// diferentes) — junta variante + entrada-ano num só item selecionável.
const opcoes = porVariante.flatMap(({ variant, anos }) =>
anos
.filter(a => a.codigo.split('-')[0] === yearKey)
.map(a => ({ variantCodigo: variant.codigo, variantNome: variant.nome, anoCodigo: a.codigo, anoNome: a.nome }))
);
React.useEffect(() => {
if (!loading && opcoes.length === 1) {
const o = opcoes[0];
onSelect({ codigo: o.variantCodigo, nome: o.variantNome, anoCodigo: o.anoCodigo, anoNome: o.anoNome });
}
}, [loading, opcoes.length]);
if (loading) return ;
return (
{opcoes.map(o => {
// anoCodigo (ex: "2014-1") não é único entre variantes — cada
// versão tem sua própria lista de anos, então duas versões
// diferentes podem ter o mesmo código. Sem checar a variante junto,
// duas linhas diferentes acendiam como "ativa" ao mesmo tempo.
const active = value === o.anoCodigo && String(modelValue) === String(o.variantCodigo);
return (
);
})}
Dados da Tabela FIPE oficial, atualizada mensalmente.
);
};
// --- Step: KM & Condition ---
const DetailsStep = ({ km, setKm, condition, setCondition }) => (
CEP não encontrado — confere os números ou preenche o endereço manualmente abaixo.
)}
{/* Endereço só aparece depois que o CEP resolveu (ou deu erro — nesse
caso a pessoa preenche tudo na mão). Antes disso não faz sentido
mostrar campos vazios que vão ser sobrescritos em 1 segundo. */}
{(cepStatus === 'ok' || cepStatus === 'error') && (
<>