function VehicleScreen({ vehicle, onBack, onNav, onOpen }) { const { Button, Badge, Tabs, SpecList, Price, Dialog, Toast, Tooltip, Icon, Logo } = window.Ds55VeCulosDesignSystem_b5c845; const [tab, setTab] = React.useState('FICHA'); const [foto, setFoto] = React.useState(0); const [midia, setMidia] = React.useState('FOTOS'); const fotos = vehicle.fotos || []; const trilho = React.useRef(null); /* uma trilha só: no celular quem passa a foto é o dedo, no desktop as setas. O índice corrente fica num ref — ler o scrollLeft no meio de uma rolagem suave devolveria a foto que está passando, não a que foi pedida. */ const fotoRef = React.useRef(0); const mostrar = React.useCallback((i, suave = true) => { fotoRef.current = i; setFoto(i); const el = trilho.current; if (el) el.scrollTo({ left: i * el.clientWidth, behavior: suave ? 'auto' : 'instant' }); }, []); const passa = React.useCallback(d => { const n = fotos.length; if (!n) return; mostrar((fotoRef.current + d + n) % n); }, [fotos.length, mostrar]); const aoRolar = () => { const el = trilho.current; if (!el || !el.clientWidth) return; const i = Math.round(el.scrollLeft / el.clientWidth); fotoRef.current = i; setFoto(i); }; React.useEffect(() => { const tecla = e => { if (e.key === 'ArrowRight') passa(1); if (e.key === 'ArrowLeft') passa(-1); }; window.addEventListener('keydown', tecla); return () => window.removeEventListener('keydown', tecla); }, [passa]); /* a trilha some ao trocar para vídeo: ao voltar, recoloca na foto corrente */ React.useEffect(() => { if (midia === 'VÍDEO') return; const el = trilho.current; if (el) el.scrollTo({ left: foto * el.clientWidth, behavior: 'instant' }); }, [midia]); const [tocando, setTocando] = React.useState(false); const [modal, setModal] = React.useState(null); /* 'visita' | 'laudo' */ const [horario, setHorario] = React.useState(null); const seg = (window.SEGMENTOS || []).find(s => s.id === vehicle.segmento) || { label: 'CURADORIA 55', cor: 'var(--seg-primeiro)', texto: 'var(--preto-asfalto)' }; /* linha de ficha: ícone, rótulo em etiqueta e valor em fonte de leitura. O SpecList do DS (mono, caixa alta, sem quebra) serve para dados curtos; para frases ele espreme e estoura — por isso as abas usam esta linha. */ const Linha = ({ icon, label, value }) => (

{label && {label}} {value}

); const Grupo = ({ titulo, children }) => (

{titulo && {titulo}} {children}

); const conteudo = { FICHA: (

), EQUIPAMENTOS: (

{(vehicle.equipamentos || []).map(e => )} {(vehicle.preparo || []).map(e => )}

), LAUDO: vehicle.laudoPendente ? (

{vehicle.laudo}

) : (

{vehicle.curadoria}

), 'HISTÓRICO': (

Documentação conferida antes do anúncio. O histórico completo acompanha o laudo em PDF.

) }; return (

{/* cabeçalho escuro: o carro se apresenta antes da ficha */}

{vehicle.marca ? `${vehicle.marca} · ` : ''}{seg.label} · {vehicle.id}

{vehicle.model}

{[`FOTOS · ${fotos.length}`, 'VÍDEO'].map(m => ( ))}

{midia !== 'VÍDEO' ? (

{fotos.length ?

{fotos.map((src, i) => (

{`${vehicle.model}

))}

: FOTO · FUNDO NEUTRO · 4:3} {fotos.length > 0 && {String(foto + 1).padStart(2, '0')} / {String(fotos.length).padStart(2, '0')}} {fotos.length > 1 && ['anterior', 'proxima'].map(dir => ( ))}

) : (

VÍDEO · APRESENTAÇÃO SEM CORTE · 16:9

)}

{fotos.map((src, i) => ( ))}

{/* coluna de compra: bloco escuro, o único CTA colorido do site */}

{vehicle.laudoPendente ? LAUDO A CAMINHO : LAUDO APROVADO} {vehicle.status && {vehicle.status}}

NOTA DE CURADORIA

{vehicle.curadoria}

{/* abas: no desktop seguem na coluna 1, sob as miniaturas; no celular, depois do CTA */}

{conteudo[tab]}

{/* os demais carros do estoque, para a visita não morrer nesta ficha */} {onOpen && window.ESTOQUE.length > 1 && (

OUTROS DO ESTOQUE

{window.ESTOQUE.filter(v => v.id !== vehicle.id).map(v => { const cor = ((window.SEGMENTOS || []).find(x => x.id === v.segmento) || {}).cor || 'var(--preto-asfalto)'; return (

onOpen(v)} style={{ cursor: 'pointer', display: 'flex', flexDirection: 'column', gap: 'var(--esp-3)' }}>

{(v.fotos || [])[0] && {v.model}

{v.model}

} {v.status && {v.status}}

{v.model}

R$ {v.price.toLocaleString('pt-BR')}

); })}

)}

); } Object.assign(window, { VehicleScreen });