/* Technik — Componentes compartilhados (logo, ícones, silhuetas, CarCard) */ /* global React */ const { useState, useMemo, useEffect, useRef } = React; // ─── Logo ───────────────────────────────────────────────────── function TechnikLogo({ height = 32, color, sublabel = true, style }) { // SVG-recreated logo so we can color it dynamically const c = color || 'currentColor'; return (
Technik {/* magnifier with car */} {sublabel && (
Consultoria Automotiva
)}
); } // White variant for dark sidebar function TechnikLogoMark({ height = 38 }) { return (
Technik
Consultoria Automotiva
); } // ─── Icons (line, 1.6 stroke) ───────────────────────────────── const Icon = { Car: (p) => (), Search: (p) => (), Users: (p) => (), History: (p) => (), Reports: (p) => (), Settings: (p) => (), Bell: (p) => (), Plus: (p) => (), Check: (p) => (), ChevronRight: (p) => (), Sparkle: (p) => (), Bookmark: (p) => (), Compare: (p) => (), Filter: (p) => (), Family: (p) => (), Fuel: (p) => (), Suitcase: (p) => (), Star: (p) => (), Lightning: (p) => (), Eye: (p) => (), Download: (p) => (), Trash: (p) => (), Camera: (p) => (), Upload: (p) => (), Menu: (p) => (), Close: (p) => (), }; // ─── Car silhouettes (SVG) ──────────────────────────────────── const CarSilhouette = ({ type = 'suv', stroke = 'currentColor', fill = 'none', sw = 1.4 }) => { const props = { fill, stroke, strokeWidth: sw, strokeLinejoin: 'round', strokeLinecap: 'round' }; switch (type) { case 'sedan': return (); case 'hatch': return (); case 'suv': return (); case 'pickup': return (); case 'coupe': return (); case 'electric': return (); case 'minivan': return (); default: return null; } }; // ─── Match ring ─────────────────────────────────────────────── function MatchRing({ pct = 80, size = 44 }) { return (
{pct}
); } // ─── Fotos dos carros (backend cacheia em Supabase) ─────────── // Mesma lógica de API_BASE: localhost em dev, mesma origem em produção. const CAR_PHOTO_API = window.API_BASE !== undefined ? window.API_BASE : (location.hostname === 'localhost' || location.hostname === '127.0.0.1' ? 'http://localhost:3001' : ''); // Ordem e rótulos das categorias de foto (campo `view` que vem do backend). const VIEW_ORDER = ['front', 'side', 'rear', 'interior']; const VIEW_LABEL_PT = { front: 'Frente', side: 'Lateral', rear: 'Traseira', interior: 'Interior' }; // Agrupa as imagens por categoria, preservando a ordem de VIEW_ORDER e // ignorando views desconhecidas. Devolve só as categorias que têm foto. function groupByView(images) { const out = {}; for (const v of VIEW_ORDER) { const arr = (images || []).filter(im => im.view === v); if (arr.length) out[v] = arr; } return out; } // Escolhe a foto da frente pro card (fallback: primeira disponível). function pickFront(images) { if (!images || !images.length) return null; return images.find(im => im.view === 'front') || images[0]; } function useCarImages({ brand, model, year, enabled = true }) { const [state, setState] = useState({ loading: false, images: [] }); useEffect(() => { if (!enabled || !brand || !model || !year) return; let cancelled = false; setState({ loading: true, images: [] }); const url = `${CAR_PHOTO_API}/api/images/${encodeURIComponent(brand)}/${encodeURIComponent(model)}/${year}`; fetch(url) .then(r => r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))) .then(data => { if (!cancelled) setState({ loading: false, images: data.images || [] }); }) .catch(() => { if (!cancelled) setState({ loading: false, images: [] }); }); return () => { cancelled = true; }; }, [brand, model, year, enabled]); return state; } const _arrow = (side) => ({ position: 'absolute', top: '50%', [side]: 8, transform: 'translateY(-50%)', width: 32, height: 32, borderRadius: '50%', border: 'none', padding: 0, background: 'rgba(0,0,0,0.5)', color: '#fff', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 22, fontWeight: 600, lineHeight: 1, transition: 'background .15s, opacity .15s', opacity: 0.85, }); // Lazy-load via IntersectionObserver. Aspecto 4:3 (mais quadrado). // No card mostra SÓ a foto da frente; clique abre o tour de fotos por categoria. function CarPhoto({ brand, model, year, type = 'suv', eager = false, rounded = false, aspect = '4 / 3', openSignal = 0 }) { const containerRef = useRef(null); const [visible, setVisible] = useState(eager); const [tourOpen, setTourOpen] = useState(false); useEffect(() => { if (visible || !containerRef.current) return; const io = new IntersectionObserver( entries => entries.forEach(e => { if (e.isIntersecting) setVisible(true); }), { rootMargin: '200px' } ); io.observe(containerRef.current); return () => io.disconnect(); }, [visible]); // O card (pai) pode abrir a galeria clicando em qualquer lugar: cada clique // incrementa openSignal. Abrir por aqui mantém a busca de imagens centralizada. useEffect(() => { if (openSignal) setTourOpen(true); }, [openSignal]); const { images, loading } = useCarImages({ brand, model, year, enabled: visible }); const n = images.length; const front = pickFront(images); const containerStyle = { position: 'relative', width: '100%', aspectRatio: aspect, overflow: 'hidden', borderRadius: rounded ? 8 : 0, background: 'rgba(0,0,0,0.04)', }; if (!visible || n === 0) { return (
{visible && loading && (
carregando…
)}
); } return ( <>
setTourOpen(true)} title="Ver todas as fotos" style={{ ...containerStyle, cursor: 'zoom-in' }} > {`${brand} {n > 1 && (
{n}
)}
{tourOpen && ( setTourOpen(false)} /> )} ); } // Modal "Tour por fotos" (estilo galeria Airbnb): faixa de categorias no topo, // uma seção por categoria com foto grande + miniaturas, e lightbox interno com // navegação dentro da categoria. Recebe as imagens já com o campo `view`. function PhotoTourModal({ brand, model, year, images, onClose }) { const grouped = useMemo(() => groupByView(images), [images]); const views = Object.keys(grouped); const [lb, setLb] = useState(null); // { view, idx } | null // Trava o scroll do body enquanto o modal está aberto. useEffect(() => { const prev = document.body.style.overflow; document.body.style.overflow = 'hidden'; return () => { document.body.style.overflow = prev; }; }, []); // Pré-carrega tudo pra navegação instantânea. useEffect(() => { images.forEach(im => { const i = new Image(); i.src = im.url; }); }, [images]); const lbList = lb ? grouped[lb.view] : null; const lbCur = lbList ? lbList[lb.idx % lbList.length] : null; const lbGo = (delta) => (e) => { if (e) e.stopPropagation(); setLb(s => { if (!s) return s; const list = grouped[s.view]; return { ...s, idx: (s.idx + delta + list.length) % list.length }; }); }; useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') { if (lb) setLb(null); else onClose(); } else if (lb && e.key === 'ArrowRight') lbGo(1)(); else if (lb && e.key === 'ArrowLeft') lbGo(-1)(); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [lb]); return ReactDOM.createPortal( // stopPropagation: eventos de um portal sobem pela árvore REACT (não a DOM), // então cliques aqui chegariam no onClick do card e reabririam a galeria.
e.stopPropagation()}> {/* Barra superior: voltar pro top 10 + título do carro */}
{brand} · {year}
{model}
{/* Uma seção por categoria de foto: título + as fotos que temos */}
{views.map(v => (

{VIEW_LABEL_PT[v]}

{grouped[v].map((im, i) => ( {`${model} setLb({ view: v, idx: i })} /> ))}
))}
{/* Lightbox interno (zoom full-screen, navega dentro da categoria) */} {lbCur && (
{ e.stopPropagation(); setLb(null); }} style={{ position: 'fixed', inset: 0, zIndex: 1000000, background: 'rgba(0,0,0,0.94)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'zoom-out' }} > {`${brand} e.stopPropagation()} style={{ maxWidth: '96vw', maxHeight: '92vh', objectFit: 'contain', boxShadow: '0 30px 100px rgba(0,0,0,0.6)', cursor: 'default' }} /> {lbList.length > 1 && ( <>
{VIEW_LABEL_PT[lb.view]} · {(lb.idx % lbList.length) + 1} / {lbList.length}
)}
)}
, document.body ); } // ─── Car catalog ────────────────────────────────────────────── const CARS = [ { id: 'tig', brand: 'Volkswagen', model: 'Tiguan Allspace', year: 2024, type: 'suv', price: 'R$ 312.900', priceN: 312900, match: 96, why: ['Porta-malas de 480L acomoda família e bagagem', '7 lugares para imprevistos', 'Custo de manutenção dentro do orçamento'] }, { id: 'rav', brand: 'Toyota', model: 'RAV4 Hybrid', year: 2024, type: 'electric',price: 'R$ 298.500', priceN: 298500, match: 93, why: ['Híbrido entrega 18 km/L em ciclo urbano', 'Robustez Toyota — revenda preservada', 'Tração AWD para fim-de-semana fora da cidade'] }, { id: 'cor', brand: 'Toyota', model: 'Corolla Altis', year: 2024, type: 'sedan', price: 'R$ 198.700', priceN: 198700, match: 91, why: ['Conforto de viagem premium no segmento', 'Centrais multimídia e ADAS de série', 'Confiabilidade comprovada em consultoria'] }, { id: 'comp', brand: 'Jeep', model: 'Compass Limited', year: 2024, type: 'suv', price: 'R$ 234.900', priceN: 234900, match: 88, why: ['Posição de dirigir alta e visibilidade', 'Pacote off-light para estradas de terra', 'Boa oferta no estoque atual'] }, { id: 'civ', brand: 'Honda', model: 'Civic Touring', year: 2024, type: 'sedan', price: 'R$ 224.500', priceN: 224500, match: 86, why: ['Direção esportiva com baixo consumo', 'Acabamento e isolamento acústico premium', 'Honda Sensing completo de série'] }, { id: 'kic', brand: 'Nissan', model: 'Kicks Exclusive', year: 2024, type: 'suv', price: 'R$ 159.900', priceN: 159900, match: 84, why: ['SUV compacto fácil de manobrar', 'Bom espaço interno para 5 pessoas', 'Dentro do orçamento com folga'] }, { id: 'arg', brand: 'Fiat', model: 'Argo Trekking', year: 2024, type: 'hatch', price: 'R$ 102.700', priceN: 102700, match: 81, why: ['Hatch com visual aventureiro', 'Manutenção econômica e barata', 'Ótimo custo-benefício comprovado'] }, { id: 'ran', brand: 'Ford', model: 'Ranger XLT', year: 2024, type: 'pickup', price: 'R$ 289.000', priceN: 289000, match: 79, why: ['Picape robusta para trabalho e lazer', 'Caçamba de 1.230 litros', 'Tração 4x4 e diesel torque alto'] }, { id: 'pol', brand: 'Volkswagen', model: 'Polo Highline', year: 2024, type: 'hatch', price: 'R$ 119.500', priceN: 119500, match: 77, why: ['Hatch europeu com acabamento premium', 'Bom para uso urbano', 'Revenda VW consistente'] }, { id: 'mus', brand: 'Ford', model: 'Mustang Mach 1', year: 2023, type: 'coupe', price: 'R$ 549.000', priceN: 549000, match: 72, why: ['Coupé V8 470cv para o fim-de-semana', 'Som e desempenho icônicos', 'Acima do orçamento — segunda escolha'] }, ]; // ─── Dataset for the form ───────────────────────────────────── const TYPE_OPTIONS = [ { id: 'sedan', label: 'Sedan' }, { id: 'hatch', label: 'Hatch' }, { id: 'suv', label: 'SUV' }, { id: 'pickup', label: 'Picape' }, { id: 'coupe', label: 'Coupé' }, ]; const FUEL_OPTIONS = [ { id: 'flex', label: 'Flex' }, { id: 'gas', label: 'Gasolina' }, { id: 'diesel', label: 'Diesel' }, { id: 'hybrid', label: 'Híbrido' }, { id: 'plugin', label: 'Híbrido plug-in' }, { id: 'electric', label: 'Elétrico' }, ]; const LIFESTYLE_OPTIONS = [ { id: 'family', label: 'Família' }, { id: 'urban', label: 'Cidade' }, { id: 'travel', label: 'Viagens longas' }, { id: 'work', label: 'Trabalho' }, { id: 'offroad', label: 'Estradas de terra' }, { id: 'sport', label: 'Esportivo' }, ]; const PRIORITY_OPTIONS = [ { id: 'safety', label: 'Segurança' }, { id: 'comfort', label: 'Conforto' }, { id: 'economy', label: 'Economia' }, { id: 'tech', label: 'Tecnologia' }, { id: 'design', label: 'Design' }, { id: 'resale', label: 'Revenda' }, ]; Object.assign(window, { TechnikLogo, TechnikLogoMark, Icon, CarSilhouette, MatchRing, CarPhoto, useCarImages, CARS, TYPE_OPTIONS, FUEL_OPTIONS, LIFESTYLE_OPTIONS, PRIORITY_OPTIONS });