// Brisas do Lago — fluxo do comprador (visitante) // Mapa → Detalhe → Simulador → Reservar → Cadastro → Assinatura → Pagamento const { useState, useEffect, useRef, useMemo } = React; // ─── Hero / Landing antes do mapa ───────────────────────────────── function BuyerHero({onExplore}) { return (
◇ Loteamento de veraneio · Lagoa do Cassó

Seu pedaço
de maranhão
à beira do lago.

95 lotes de veraneio entre as Trilhas e a Lagoa do Cassó. Píer privativo, portaria 24h e poço artesiano com distribuição individual.

{[ ['95', 'lotes'], ['12', 'quadras'], ['28.013', 'm² verde'], ['48x', 'sem juros'], ].map(([n, l]) => (
{n}
{l}
))}
◐ Diferencial
34 lotes com frente direta para a lagoa
); } // ─── Mapa + filtros + lista lateral ───────────────────────────── function BuyerMap({onSelect}) { const [estilo, setEstilo] = useState('tecnico'); const [filtroStatus, setFiltroStatus] = useState('disponivel'); const [filtroVista, setFiltroVista] = useState(null); const [filtroQuadra, setFiltroQuadra] = useState(null); const [precoMax, setPrecoMax] = useState(700); const [areaMin, setAreaMin] = useState(0); const [hover, setHover] = useState(null); const [variation, setVariation] = useState('A'); // A: mapa+lista, B: cards // React ao tweak global de estilo do mapa useEffect(() => { const onTweak = (e) => { if (e.detail?.mapStyle) setEstilo(e.detail.mapStyle); }; window.addEventListener('tweakchange', onTweak); return () => window.removeEventListener('tweakchange', onTweak); }, []); const LOTES = window.BL.LOTES; const filtered = LOTES.filter(l => { if (filtroStatus && l.status !== filtroStatus) return false; if (filtroVista === 'lago' && !l.vistaLago) return false; if (filtroVista === 'interior' && l.vistaLago) return false; if (filtroQuadra && l.quadra !== filtroQuadra) return false; if (l.precoM2 > precoMax) return false; if (l.area < areaMin) return false; return true; }); const quadras = Array.from(new Set(LOTES.map(l => l.quadra))).sort(); return (
} /> {/* Filter bar */}
Filtros
{/* Status chips */} {['disponivel','reservado','negociacao','vendido'].map(s => ( ))}
{/* Vista */}
{/* Preço */}
{filtered.length} lotes
{variation === 'A' ? (
{/* Map */}
{/* Style switcher (visual variant) */}
{[['tecnico','Técnico'],['esquematico','Esquemático'],['isometrico','Isométrico']].map(([k, lbl])=> ( ))}
{/* Legend */}
{[ ['disponivel', 'Disponível', '#FBF6EC', '#2D4F3C'], ['reservado', 'Reservado', '#F5DCC6', '#A8632F'], ['negociacao', 'Negociação', '#D7E5EC', '#3B6B7E'], ['vendido', 'Vendido', '#DDE3DD', '#6E7B72'], ].map(([k, lbl, bg, bd]) => (
{lbl}
))}
{/* Hover tooltip */} {hover && (
Lote {hover} · Quadra {window.BL.LOTE_BY_NUM[hover]?.quadra}
{fmtBRL(window.BL.LOTE_BY_NUM[hover]?.valorTotal || 0)}
{window.BL.LOTE_BY_NUM[hover]?.area.toFixed(0)} m² · {window.BL.LOTE_BY_NUM[hover]?.frente.toFixed(1)}m frente
)}
{/* Lista lateral */}
{filtered.slice(0, 30).map(l => ( ))} {filtered.length > 30 && (
+ {filtered.length - 30} lotes
)}
) : (
{filtered.map(l => ( ))}
)}
); } // ─── Detalhe do lote ──────────────────────────────────────── function BuyerLoteDetail({lote, onBack, onContinue, onSimular}) { const [variation, setVariation] = useState('A'); if (!lote) return null; return (
{variation === 'A' ? : }
); } function LoteDetailA({lote, onContinue, onSimular}) { // Variação 1: hero + side panel (mais editorial) return (
◇ Dimensões do lote
◇ O que está incluso
{window.BL.EMPREENDIMENTO.amenidades.map((a,i) => (
{a.nome}
))}
◐ Quadra {lote.quadra}

Lote {lote.numero}

{lote.vistaLago && Vista para o lago}
Valor à vista
{fmtBRL(lote.valorTotal)}
ou 48× {fmtBRL(lote.valorTotal * 0.8 / 48)}
{lote.status === 'disponivel' ? ( <> ) : (
Este lote está {window.STATUS_LABELS[lote.status].toLowerCase()}. Deixe seu interesse e avisaremos se voltar a ficar disponível.
)}
Reserva online (24h) Sem custo
Assinatura digital D4Sign
Pagamento entrada PIX ou cartão
); } function LoteDetailB({lote, onContinue, onSimular}) { // Variação 2: layout horizontal, mais "ficha técnica" minimalista return (
◇ Brisas do Lago / Quadra {lote.quadra}

Lote{' '} {String(lote.numero).padStart(2,'0')}

À vista
{fmtBRL(lote.valorTotal)}
ou 48× {fmtBRL(lote.valorTotal * 0.8 / 48)}
{[ ['Área', `${lote.area.toFixed(0)} m²`], ['Frente', `${lote.frente.toFixed(1)} m`], ['Fundo', `${lote.fundo.toFixed(1)} m`], ['R$/m²', `R$ ${lote.precoM2}`], ].map(([k, v]) => (
{k}
{v}
))}
◇ Polígono do lote
◇ Inclusões
{window.BL.EMPREENDIMENTO.amenidades.map((a,i) => (
{a.nome}
))}
); } function DimRow({label, value, highlight}) { return (
{label} {value}
); } function LotePolygon({lote}) { // Desenha um polígono representando o lote com cotas // Aproxima como trapézio: frente em baixo, fundo em cima, com laterais esq/dir const f = lote.frente, fu = lote.fundo, e = lote.esq, d = lote.dir; const maxDim = Math.max(f, fu, e, d); const scale = 180 / maxDim; const W = 260, H = 260, cx = W/2, cy = H/2; const fW = f * scale, fuW = fu * scale, eH = (e + d) / 2 * scale; // Vértices: tl, tr, br, bl const tl = [cx - fuW/2, cy - eH/2]; const tr = [cx + fuW/2, cy - eH/2]; const br = [cx + fW/2, cy + eH/2]; const bl = [cx - fW/2, cy + eH/2]; return ( p.join(',')).join(' ')} fill="rgba(45, 79, 60, 0.08)" stroke="var(--green)" strokeWidth="2"/> {lote.area.toFixed(0)}m² {/* labels */} {fu.toFixed(1)}m (fundo) {f.toFixed(1)}m (frente) {e.toFixed(1)}m {d.toFixed(1)}m ); } // ─── Simulador ────────────────────────────────────────────── function BuyerSimulador({lote, onBack, onContinue}) { const [entradaPct, setEntradaPct] = useState(10); const [parcelas, setParcelas] = useState(48); const entrada = lote.valorTotal * entradaPct / 100; const saldoRestante = lote.valorTotal - entrada; const parcela = saldoRestante / parcelas; return (
◇ Configurar entrada
setEntradaPct(+e.target.value)} style={{flex:1, accentColor:'var(--green)'}}/>
{entradaPct}%
{fmtBRL(entrada)}
◇ Número de parcelas
{[12, 24, 36, 48].map(n => ( ))}
◇ Você pagará
{fmtBRL(parcela)} × {parcelas} meses
após entrada de {fmtBRL(entrada)} · sem juros · IGPM anual
◇ Resumo
Valor do lote {fmtBRL(lote.valorTotal)}
Entrada ({entradaPct}%) {fmtBRL(entrada)}
Saldo financiado {fmtBRL(saldoRestante)}
{parcelas} parcelas de {fmtBRL(parcela)}
Total {fmtBRL(lote.valorTotal)}
); } Object.assign(window, { BuyerHero, BuyerMap, BuyerLoteDetail, BuyerSimulador, });