/* ============================================================ Empreendimentos — RegiaoView & ImovelView (SPA inline) ============================================================ */ const EIC = { pin: (), bed: (), area: (), car: (), arrow:(), check:(), back: (), sim: (), }; /* ---- Mapa interativo com marcadores do Órulo ---- */ function MapaZona({ list, zone }) { const containerRef = useRef(null); const mapRef = useRef(null); // Chave baseada nos dados reais para detectar quando o Orulo carregou const dataKey = zone + '|' + list.filter(e => e.lat).length; useEffect(() => { let tid = null; function initMap() { const L = window.L; if (!L || !containerRef.current) return; // Destrói instância anterior if (mapRef.current) { mapRef.current.remove(); mapRef.current = null; } const comCoord = list.map((e, i) => ({ ...e, _idx: i })).filter(e => e.lat && e.lng); if (!comCoord.length) return; const avgLat = comCoord.reduce((s, e) => s + e.lat, 0) / comCoord.length; const avgLng = comCoord.reduce((s, e) => s + e.lng, 0) / comCoord.length; const map = L.map(containerRef.current, { center: [avgLat, avgLng], zoom: 13, zoomControl: true, preferCanvas: true, }); mapRef.current = map; L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', { attribution: '©OSM ©CARTO', maxZoom: 19, }).addTo(map); comCoord.forEach(e => { const marker = L.circleMarker([e.lat, e.lng], { radius: 9, fillColor: '#c9a84c', color: '#fff', weight: 2, opacity: 1, fillOpacity: 0.92, }).addTo(map); marker.bindTooltip(e.nome, { permanent: false, direction: 'top', offset: [0, -10] }); marker.bindPopup(`
${e.nome}
${e.bairro}
${e.preco}
${e.dorms} · ${e.area}
Ver detalhes →
`, { maxWidth: 240 }); }); // Recalcula tamanho após o container ter dimensões reais setTimeout(() => { if (mapRef.current) mapRef.current.invalidateSize(); }, 200); } // Aguarda 1 frame para o container ser pintado com altura real tid = setTimeout(initMap, 50); return () => { clearTimeout(tid); if (mapRef.current) { mapRef.current.remove(); mapRef.current = null; } }; }, [dataKey]); return
; } /* ---- Hook: sincroniza com window.CRUZ_EMP ao carregar do Órulo ---- */ function useCruzEmp() { const [emp, setEmp] = useState(window.CRUZ_EMP); useEffect(() => { const onReady = () => setEmp({ ...window.CRUZ_EMP }); window.addEventListener('cruzemp:ready', onReady); return () => window.removeEventListener('cruzemp:ready', onReady); }, []); return emp; } /* ---- Lista de empreendimentos por zona ---- */ function RegiaoView({ zone }) { const ZONES = window.CRUZ_ZONES; const EMP = useCruzEmp(); const z = (ZONES[zone]) ? zone : 'zona-sul'; const info = ZONES[z]; const list = EMP[z] || []; const listRef = useRef(null); useEffect(() => { window.scrollTo({ top: 0, behavior: 'instant' }); }, [z]); useEffect(() => { const box = listRef.current; if (!box) return; const cards = box.querySelectorAll('.emp'); if (!cards.length) return; const io = new IntersectionObserver((entries) => { entries.forEach(en => { if (en.isIntersecting) { en.target.classList.add('in'); io.unobserve(en.target); } }); }, { threshold: 0.08 }); cards.forEach((el, i) => { el.style.transitionDelay = (i % 3) * 0.07 + 's'; io.observe(el); }); return () => io.disconnect(); }, [z, list.length]); return (
{EIC.back} Todas as regiões

Empreendimentos na {info.label}

{info.desc}

{Object.entries(ZONES).map(([k, v]) => ( {v.label} ))}
{list.length} empreendimentos disponíveis
{list.map((e, i) => { const detail = `#imovel?z=${z}&e=${i}`; return (
{e.status} {e.mcmv && MCMV}

{e.nome}

{EIC.pin} {e.bairro} · {info.label}

{e.desc}

{EIC.bed}{e.dorms} {EIC.area}{e.area} {EIC.car}{e.vagas}
A partir de{e.preco} Ver detalhes {EIC.arrow}
); })}