/* global React, Icon, AmperLogo, fmtBRL, fmtBRLShort, isMarcaNacional, ANO_MAXIMO */
/* selStyle usado também por simulator-steps.jsx (BrandStep), via window.selStyle. */
// #depoimentos removido do menu — a seção Testimonials já não é renderizada
// (tirada a pedido do Rian em 2026-08-30, ver app.jsx), o link ficou morto.
const NAV_LINKS = [['#como-funciona','Como funciona'],['#faq','Dúvidas']];
const Nav = ({ onStart }) => {
const [open, setOpen] = React.useState(false);
React.useEffect(() => {
document.body.style.overflow = open ? 'hidden' : '';
return () => { document.body.style.overflow = ''; };
}, [open]);
return (
{open && (
)}
);
};
/* ---------- QUICK EVAL: form compartilhado (Hero inline + popup) ----------
Extraído do Hero pra ser reaproveitado tal e qual dentro do QuickEvalModal
— qualquer botão da HOME que não seja o card do Hero abre o popup com essa
MESMA experiência, em vez de mandar direto pro assistente passo-a-passo. */
const QuickEvalHeader = () => (
Avaliação instantânea
Quanto vale o seu carro?
60s
);
const QuickEvalForm = ({ onStart }) => {
const [, force] = React.useReducer(x => x + 1, 0);
React.useEffect(() => {
const h = () => force();
window.addEventListener('amper-tweaks-changed', h);
return () => window.removeEventListener('amper-tweaks-changed', h);
}, []);
const copy = (window.__AMPER_COPY) || {};
const ctaLabel = copy.ctaLabel || 'Ver quanto vale';
const [tab, setTab] = React.useState('placa');
const [plate, setPlate] = React.useState('');
// Marca/modelo/ano do fluxo manual — dados reais via window.AmperAPI
// (Parallelum), carregados em cascata conforme o usuário escolhe.
const [brands, setBrands] = React.useState([]);
const [brandsLoading, setBrandsLoading] = React.useState(true);
const [brand, setBrand] = React.useState(''); // codigoMarca
const [models, setModels] = React.useState([]);
const [modelsLoading, setModelsLoading] = React.useState(false);
const [modelGroupKey, setModelGroupKey] = React.useState(''); // modelo-base escolhido (ex: "A3")
const [years, setYears] = React.useState([]);
const [yearsLoading, setYearsLoading] = React.useState(false);
const [year, setYear] = React.useState('');
React.useEffect(() => {
window.AmperAPI.getMarcas()
.then(data => {
// Só marcas comuns no Brasil — corta as exóticas/raras do catálogo real.
const nacionais = (Array.isArray(data) ? data : []).filter(b => isMarcaNacional(b.nome));
setBrands(nacionais);
setBrandsLoading(false);
})
.catch(() => setBrandsLoading(false));
}, []);
React.useEffect(() => {
if (!brand) { setModels([]); return; }
setModelsLoading(true);
window.AmperAPI.getModelos(brand)
.then(data => { setModels(Array.isArray(data) ? data : []); setModelsLoading(false); })
.catch(() => setModelsLoading(false));
}, [brand]);
// Agrupa por modelo-base (ex: "A3") — a FIPE trata cada versão/motorização
// como um modelo à parte, sem isso o select vira uma lista de 50+ nomes
// técnicos. A versão específica (característica) é escolhida depois, já no
// simulador (etapa 4) — o form só precisa achar o modelo e o ano.
// Ver data/fipe.jsx (groupModelos) pro porquê.
const modelGroups = React.useMemo(() => window.groupModelos(models), [models]);
const selectedGroup = modelGroups.find(g => g.key === modelGroupKey);
React.useEffect(() => {
if (!brand || !selectedGroup) { setYears([]); return; }
setYearsLoading(true);
// Soma os anos disponíveis em TODAS as versões do modelo-base escolhido.
window.anosPorVariante(brand, selectedGroup.variants)
.then(r => {
const unique = [...new Set(
r.flatMap(x => x.anos.map(a => a.codigo.split('-')[0] === '32000' ? '0 km' : a.codigo.split('-')[0]))
)]
.filter(y => y === '0 km' || Number(y) <= ANO_MAXIMO)
.sort((a, b) => a === '0 km' ? -1 : b === '0 km' ? 1 : Number(b) - Number(a));
setYears(unique);
setYearsLoading(false);
})
.catch(() => setYearsLoading(false));
}, [brand, selectedGroup]);
const canStartPlate = plate.replace(/[^A-Z0-9]/gi, '').length >= 7;
const canStartManual = brand && selectedGroup && year;
const handlePlate = (e) => {
let v = e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, '').slice(0, 7);
if (v.length > 3) v = v.slice(0, 3) + '-' + v.slice(3);
setPlate(v);
};
const startPlate = () => {
if (!canStartPlate) return;
onStart({ mode: 'placa', plate });
};
const startManual = () => {
if (!canStartManual) return;
const brandName = brands.find(b => String(b.codigo) === brand)?.nome || '';
// model/modelName ainda são o grupo (ex: "A3") — a etapa Características
// do simulador (step 4) resolve pra versão real usando modelVariants.
onStart({
mode: 'manual', brand, brandName,
model: selectedGroup.key, modelName: selectedGroup.nome, modelVariants: selectedGroup.variants,
year,
});
};
return (
<>
{/* Tabs */}
{/* Destaque em amarelo puro (sem fundo) — escolha do Rian 2026-08-30;
o marca-texto chapado incomodava. Só vale em fundo escuro: em
fundo claro amarelo puro fere a regra da marca (usar --gold-deep). */}
Venda por mais. Sem pressa, sem dor de cabeça.
A Amper cuida de tudo: certificado de garantia 1 ano, fotos profissionais, polimento, financiamento aprovado pro comprador. Você continua usando o carro até a venda — e recebe acima de loja e concessionária.
{[
{ icon: , text: 'Use o carro até a venda' },
{ icon: , text: 'Só paga se vender' },
{ icon: , text: 'Garantia + fotos + polimento grátis' },
].map((t, i) => (
{t.icon}
{t.text}
))}
{/* Vidro translúcido escuro — mesma receita do card Turbo (o Rian pediu
igual àquele, não a versão leitosa): fundo quase transparente + blur,
texto claro; os campos (placa/selects) seguem brancos e sólidos. */}
);
};
/* ---------- HERO BG: foto estática da fachada, com leve parallax no scroll.
Volta pro esquema anterior à sequência animada (pin + crossfade escuro) —
o Carlos (feedback do Rian) notou que o fundo tinha mudado, e a sequência
animada foi a raiz de vários bugs de mobile essa sessão (pin com altura
fixa brigando com a viewport real). Imagem clara de dia, por isso o véu
escuro por baixo — o texto do Hero é branco, precisa de contraste. ---------- */
const HeroParallaxBg = () => {
const imgRef = React.useRef(null);
React.useEffect(() => {
let raf = 0;
const onScroll = () => {
cancelAnimationFrame(raf);
raf = requestAnimationFrame(() => {
if (imgRef.current) imgRef.current.style.transform = `translateY(${Math.min(window.scrollY, window.innerHeight * 2) * 0.15}px) scale(1.08)`;
});
};
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
return () => { window.removeEventListener('scroll', onScroll); cancelAnimationFrame(raf); };
}, []);
const isMobile = window.matchMedia('(max-width: 767px)').matches;
return (
);
};
const selStyle = {
width: '100%', height: 48, padding: '0 14px',
border: '1px solid var(--ink-200)', borderRadius: 10,
// color explícito — sem isso o select herda 'white' do card escuro que o
// envolve (.hero-sim-card define color:white pro card inteiro), e como o
// fundo do select é sólido branco, o texto (fechado E as opções da lista)
// fica branco em cima de branco, invisível.
background: 'white', color: 'var(--ink-900)', fontSize: 15, 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 14px center',
};
const Field = ({ label, children }) => (
);
/* ---------- BAR: stats row ---------- */
const StatsBar = () => (
{/* Desktop: mini-card de vidro escuro no canto — substitui o CTA amarelo
gigante que ficava no rodapé (Rian achou exagerado/poluído). Sobe
quando o visitante passa do hero; dá pra fechar no X. */}
Pronto para vender?
Avaliação em 60 segundos. Sem cadastro, sem compromisso.
: null}