// Brisas do Lago — Área do cliente logado
// Dashboard pessoal: contrato, boletos, obra

const { useState, useEffect } = React;

function ClientApp({onLogout}) {
  const [tab, setTab] = useState('home');
  const cliente = window.BL.CLIENTES.find(c => c.id === window.BL.CLIENTE_LOGADO_ID);
  const lote = window.BL.LOTE_BY_NUM[cliente.lote];

  return (
    <div style={{padding:'24px 28px 80px', maxWidth: 1400, margin:'0 auto'}}>
      {/* Header pessoal */}
      <div style={{
        background:'linear-gradient(110deg, var(--green-deep) 0%, var(--green) 100%)',
        borderRadius:24, padding:'36px 40px', color:'var(--bg-card)',
        marginBottom:30, position:'relative', overflow:'hidden',
        backgroundImage:'radial-gradient(at 90% 30%, rgba(201, 123, 74, 0.2), transparent 50%)'
      }}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start', flexWrap:'wrap', gap:24}}>
          <div>
            <div className="eyebrow" style={{color:'#D9C7A8', marginBottom:10}}>◇ Bem-vinda de volta</div>
            <h1 className="display" style={{fontSize:'clamp(36px, 5vw, 56px)', fontWeight:500, color:'var(--bg-card)', lineHeight:1, marginBottom:14}}>
              {cliente.nome}
            </h1>
            <div style={{display:'flex', gap:14, fontSize:13, color:'#D9C7A8'}}>
              <span>◐ Cliente desde 2024</span>
              <span>·</span>
              <span>Lote {cliente.lote} · Quadra {lote.quadra}</span>
            </div>
          </div>
          <div style={{textAlign:'right'}}>
            <div style={{fontSize:11, color:'#D9C7A8', letterSpacing:1.5, textTransform:'uppercase', marginBottom:6}}>Contrato</div>
            <div className="display" style={{fontSize:36, color:'var(--bg-card)', fontWeight:500, lineHeight:1}}>
              {fmtBRL(cliente.valorContrato)}
            </div>
            <div style={{fontSize:12, color:'#D9C7A8', marginTop:6}}>
              {cliente.parcelasPagas} de {cliente.parcelasTotal} parcelas pagas
            </div>
            <div style={{marginTop:14, width:200, height:6, background:'rgba(243,237,224,0.15)', borderRadius:100, overflow:'hidden'}}>
              <div style={{width: (cliente.parcelasPagas / cliente.parcelasTotal * 100) + '%', height:'100%', background:'var(--terra)', borderRadius:100}}/>
            </div>
          </div>
        </div>
      </div>

      {/* Tabs */}
      <div style={{display:'flex', gap:0, borderBottom:'1px solid var(--line)', marginBottom:30}}>
        {[
          ['home', 'Visão geral', 'home'],
          ['boletos', 'Boletos & pagamentos', 'invoice'],
          ['contrato', 'Contrato', 'file'],
          ['obra', 'Andamento da obra', 'construction'],
          ['mapa', 'Meu lote', 'pin'],
        ].map(([k, lbl, icon]) => (
          <button key={k} onClick={()=>setTab(k)}
            style={{
              padding:'14px 18px', fontSize:13.5, fontWeight:600,
              color: tab === k ? 'var(--green-deep)' : 'var(--ink-soft)',
              borderBottom: tab === k ? '2px solid var(--green)' : '2px solid transparent',
              marginBottom: '-1px',
              display:'inline-flex', alignItems:'center', gap:6,
            }}>
            <Icon name={icon} size={14}/> {lbl}
          </button>
        ))}
      </div>

      {tab === 'home' && <ClientHome cliente={cliente} lote={lote} onTab={setTab}/>}
      {tab === 'boletos' && <ClientBoletos cliente={cliente}/>}
      {tab === 'contrato' && <ClientContrato cliente={cliente} lote={lote}/>}
      {tab === 'obra' && <ClientObra/>}
      {tab === 'mapa' && <ClientMeuLote cliente={cliente} lote={lote}/>}
    </div>
  );
}

function ClientHome({cliente, lote, onTab}) {
  const proximaParcela = cliente.valorContrato * 0.8 / 48;
  return (
    <div className="fade-in" style={{display:'grid', gridTemplateColumns:'minmax(0, 2fr) minmax(0, 1fr)', gap:24}}>
      <div style={{display:'flex', flexDirection:'column', gap:18}}>
        {/* Próximo boleto */}
        <div className="card" style={{padding:28, borderColor:'var(--terra)', borderWidth:1, background:'linear-gradient(180deg, var(--bg-card) 0%, var(--terra-soft) 100%)'}}>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start', gap:18}}>
            <div>
              <div className="eyebrow" style={{color:'var(--terra-deep)', marginBottom:8}}>◐ Próximo vencimento</div>
              <div className="display" style={{fontSize:42, color:'var(--green-deep)', fontWeight:500, lineHeight:1}}>
                {fmtBRL(proximaParcela)}
              </div>
              <div style={{fontSize:14, color:'var(--ink-soft)', marginTop:8}}>
                Parcela {cliente.parcelasPagas + 1}/48 · vence em <strong>{cliente.proxBoleto}/2026</strong>
              </div>
            </div>
            <div style={{display:'flex', flexDirection:'column', gap:8}}>
              <button className="btn btn-primary"><Icon name="qr" size={14}/> Pagar com PIX</button>
              <button className="btn btn-secondary btn-sm"><Icon name="download" size={13}/> Baixar boleto</button>
            </div>
          </div>
        </div>

        {/* Próximas parcelas */}
        <div className="card" style={{padding:0, overflow:'hidden'}}>
          <div style={{padding:'18px 22px', borderBottom:'1px solid var(--line-soft)', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
            <div className="eyebrow">◇ Próximos boletos</div>
            <button onClick={()=>onTab('boletos')} className="btn btn-sm btn-ghost">Ver todos <Icon name="chevR" size={12}/></button>
          </div>
          <div>
            {[0,1,2,3].map(i => {
              const num = cliente.parcelasPagas + 1 + i;
              const month = ['Jun','Jul','Ago','Set','Out','Nov','Dez'][i];
              return (
                <div key={i} style={{
                  display:'flex', alignItems:'center', gap:16, padding:'14px 22px',
                  borderBottom: i < 3 ? '1px solid var(--line-soft)' : 'none'
                }}>
                  <div style={{
                    width:42, height:42, borderRadius:10,
                    background: 'var(--bg-elev)', border:'1px solid var(--line-soft)',
                    display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center'
                  }}>
                    <div style={{fontSize:9, color:'var(--ink-soft)', fontWeight:600, letterSpacing:0.5, textTransform:'uppercase'}}>{month}</div>
                    <div style={{fontSize:14, fontWeight:700, color:'var(--green-deep)', lineHeight:1}}>{cliente.dia}</div>
                  </div>
                  <div style={{flex:1}}>
                    <div style={{fontSize:13.5, fontWeight:600}}>Parcela {num}/48</div>
                    <div style={{fontSize:11.5, color:'var(--ink-soft)', marginTop:2}}>vencimento {cliente.dia}/{['06','07','08','09'][i]}/2026</div>
                  </div>
                  <div className="mono" style={{fontWeight:600}}>{fmtBRL(proximaParcela)}</div>
                  <button className="btn btn-sm btn-secondary">PIX</button>
                </div>
              );
            })}
          </div>
        </div>

        {/* Obra resumo */}
        <div className="card" style={{padding:24}}>
          <div style={{display:'flex', justifyContent:'space-between', marginBottom:16}}>
            <div className="eyebrow">◇ Andamento do empreendimento</div>
            <button onClick={()=>onTab('obra')} className="btn btn-sm btn-ghost">Detalhes <Icon name="chevR" size={12}/></button>
          </div>
          <div style={{display:'flex', alignItems:'baseline', gap:10, marginBottom:18}}>
            <div className="display" style={{fontSize:36, fontWeight:500, color:'var(--green-deep)'}}>52%</div>
            <div style={{fontSize:13, color:'var(--ink-soft)'}}>concluído · entrega prevista <strong style={{color:'var(--ink)'}}>Set/2026</strong></div>
          </div>
          <div style={{height:8, background:'var(--bg-elev)', borderRadius:100, overflow:'hidden', display:'flex'}}>
            <div style={{flex:'0 0 22%', background:'var(--green)'}}/>
            <div style={{flex:'0 0 30%', background:'var(--terra)'}}/>
            <div style={{flex:1, background:'transparent'}}/>
          </div>
          <div style={{display:'flex', gap:18, marginTop:14, fontSize:11.5, color:'var(--ink-soft)'}}>
            <span><span style={{width:8, height:8, borderRadius:50, background:'var(--green)', display:'inline-block', marginRight:5}}/>Concluído</span>
            <span><span style={{width:8, height:8, borderRadius:50, background:'var(--terra)', display:'inline-block', marginRight:5}}/>Em andamento</span>
            <span><span style={{width:8, height:8, borderRadius:50, background:'var(--bg-elev)', border:'1px solid var(--line)', display:'inline-block', marginRight:5}}/>Pendente</span>
          </div>
        </div>
      </div>

      <div style={{display:'flex', flexDirection:'column', gap:18}}>
        {/* Lote em destaque */}
        <div className="card" style={{padding:0, overflow:'hidden'}}>
          <PhotoPlaceholder type={lote.vistaLago ? 'lago' : 'aerea'} height={180} label={`Lote ${lote.numero}`}/>
          <div style={{padding:'18px 20px'}}>
            <div className="eyebrow" style={{marginBottom:6}}>◇ Seu lote</div>
            <div className="display" style={{fontSize:28, color:'var(--green-deep)', fontWeight:500, lineHeight:1}}>
              Quadra {lote.quadra} · Lote {lote.numero}
            </div>
            <div style={{fontSize:13, color:'var(--ink-soft)', marginTop:8, marginBottom:16}}>
              {lote.area.toFixed(0)} m² · {lote.frente.toFixed(1)}m de frente {lote.vistaLago && '· vista para o lago'}
            </div>
            <button onClick={()=>onTab('mapa')} className="btn btn-secondary btn-sm" style={{width:'100%'}}>
              <Icon name="map" size={13}/> Ver no mapa
            </button>
          </div>
        </div>

        {/* Documentos */}
        <div className="card" style={{padding:24}}>
          <div className="eyebrow" style={{marginBottom:14}}>◇ Documentos</div>
          <div style={{display:'flex', flexDirection:'column', gap:8}}>
            {[
              ['Contrato assinado', '2.1 MB'],
              ['Convenção do condomínio', '480 KB'],
              ['Memorial descritivo', '1.3 MB'],
              ['Planta do lote', '210 KB'],
            ].map(([d, s]) => (
              <button key={d} className="btn btn-ghost" style={{justifyContent:'space-between', padding:'10px 0', borderBottom:'1px solid var(--line-soft)', borderRadius:0, width:'100%'}}>
                <span style={{display:'inline-flex', alignItems:'center', gap:10, fontSize:13}}>
                  <Icon name="file" size={14}/> {d}
                </span>
                <span style={{fontSize:11, color:'var(--ink-soft)'}}>{s}</span>
              </button>
            ))}
          </div>
        </div>

        {/* Atendimento */}
        <div className="card" style={{padding:24, background:'var(--green-deep)', color:'var(--bg-card)', borderColor:'transparent'}}>
          <div className="eyebrow" style={{color:'#D9C7A8', marginBottom:10}}>◇ Atendimento</div>
          <div style={{fontSize:14, marginBottom:16, lineHeight:1.5}}>
            Tem dúvidas sobre seu contrato, obra ou pagamentos? Nossa equipe responde em até 2h em horário comercial.
          </div>
          <button className="btn btn-terra" style={{width:'100%'}}>
            <Icon name="phone" size={13}/> Falar via WhatsApp
          </button>
        </div>
      </div>
    </div>
  );
}

function ClientBoletos({cliente}) {
  const proximaParcela = cliente.valorContrato * 0.8 / 48;
  const meses = ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'];
  // Construir lista de 48 parcelas
  const parcelas = [];
  for (let i = 1; i <= 48; i++) {
    const status = i <= cliente.parcelasPagas ? 'pago' :
                   i === cliente.parcelasPagas + 1 ? 'aberto' : 'futuro';
    const mes = meses[(i + 1) % 12];
    const ano = 2024 + Math.floor((i + 1) / 12);
    parcelas.push({num:i, mes, ano, valor: proximaParcela, status, dia: cliente.dia});
  }

  return (
    <div className="fade-in">
      <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:14, marginBottom:24}}>
        <KpiCard label="Total do contrato" value={fmtBRL(cliente.valorContrato)} sub="48 parcelas + entrada" icon="briefcase"/>
        <KpiCard label="Já pago" value={fmtBRL(proximaParcela * cliente.parcelasPagas + cliente.valorContrato * 0.1)} sub={`${cliente.parcelasPagas} parcelas`} icon="check" color="var(--success)"/>
        <KpiCard label="Saldo restante" value={fmtBRL(proximaParcela * (48 - cliente.parcelasPagas))} sub={`${48 - cliente.parcelasPagas} parcelas`} icon="coin"/>
        <KpiCard label="Próximo boleto" value={fmtBRL(proximaParcela)} sub={`Vence ${cliente.proxBoleto}`} icon="invoice" color="var(--terra)"/>
      </div>

      <div className="card" style={{padding:0, overflow:'hidden'}}>
        <div style={{padding:'18px 22px', borderBottom:'1px solid var(--line-soft)', display:'flex', justifyContent:'space-between'}}>
          <div className="eyebrow">◇ Histórico completo · {parcelas.length} parcelas</div>
          <div style={{display:'flex', gap:8}}>
            <button className="btn btn-sm btn-secondary"><Icon name="filter" size={13}/> Filtrar</button>
            <button className="btn btn-sm btn-secondary"><Icon name="download" size={13}/> Exportar CSV</button>
          </div>
        </div>
        <div style={{maxHeight: 520, overflowY:'auto'}}>
          {parcelas.map(p => (
            <div key={p.num} style={{
              display:'grid', gridTemplateColumns:'40px 1fr 140px 100px 130px 80px',
              alignItems:'center', gap:12, padding:'12px 22px',
              borderBottom:'1px solid var(--line-soft)',
              background: p.status === 'aberto' ? 'var(--terra-soft)' : 'transparent',
              opacity: p.status === 'futuro' ? 0.65 : 1,
            }}>
              <div className="mono" style={{fontWeight:600, color:'var(--ink-soft)', fontSize:12}}>#{String(p.num).padStart(2,'0')}</div>
              <div>
                <div style={{fontSize:13, fontWeight:600}}>Parcela {p.num}/48</div>
                <div style={{fontSize:11.5, color:'var(--ink-soft)'}}>{p.dia}/{p.mes}/{p.ano}</div>
              </div>
              <div className="mono" style={{fontWeight:600}}>{fmtBRL(p.valor)}</div>
              <div>
                {p.status === 'pago' && <StatusBadge type="success">Pago</StatusBadge>}
                {p.status === 'aberto' && <StatusBadge type="warn">Em aberto</StatusBadge>}
                {p.status === 'futuro' && <StatusBadge type="muted">Futuro</StatusBadge>}
              </div>
              <div style={{fontSize:11.5, color:'var(--ink-soft)'}}>
                {p.status === 'pago' ? `pago em ${p.dia - 2}/${p.mes}` : p.status === 'aberto' ? 'PIX disponível' : '—'}
              </div>
              <div>
                {p.status === 'aberto' && <button className="btn btn-sm btn-primary" style={{padding:'4px 12px'}}>Pagar</button>}
                {p.status === 'pago' && <button className="btn btn-sm btn-ghost"><Icon name="download" size={12}/></button>}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function StatusBadge({type, children}) {
  const colors = {
    success: {bg:'var(--green-soft)', fg:'var(--green-deep)'},
    warn: {bg:'var(--terra-soft)', fg:'var(--terra-deep)'},
    danger: {bg:'#F4CFC9', fg:'#8B2A1F'},
    muted: {bg:'var(--bg-elev)', fg:'var(--ink-faint)'},
  };
  const c = colors[type] || colors.muted;
  return (
    <span style={{
      display:'inline-block', padding:'3px 9px', borderRadius:100,
      fontSize:11, fontWeight:600, background:c.bg, color:c.fg
    }}>{children}</span>
  );
}

function ClientContrato({cliente, lote}) {
  return (
    <div className="fade-in" style={{display:'grid', gridTemplateColumns:'minmax(0, 2fr) minmax(280px, 1fr)', gap:32}}>
      <div className="card" style={{padding:0, overflow:'hidden'}}>
        <div style={{padding:'18px 22px', borderBottom:'1px solid var(--line-soft)', display:'flex', justifyContent:'space-between', alignItems:'center', background:'var(--bg-elev)'}}>
          <div style={{display:'flex', alignItems:'center', gap:10}}>
            <Icon name="file" size={16}/>
            <div>
              <div style={{fontWeight:700, fontSize:13.5}}>Contrato Brisas do Lago · Lote {lote.numero}</div>
              <div style={{fontSize:11, color:'var(--ink-soft)'}}>assinado em 14/03/2024 · 11 páginas</div>
            </div>
          </div>
          <div style={{display:'flex', gap:6}}>
            <button className="btn btn-sm btn-secondary"><Icon name="download" size={13}/> PDF</button>
            <button className="btn btn-sm btn-secondary"><Icon name="share" size={13}/> Compartilhar</button>
          </div>
        </div>
        <div style={{padding:'40px 56px', maxHeight:680, overflowY:'auto',
          fontFamily:'Georgia, serif', fontSize:13.5, lineHeight:1.7
        }}>
          <div style={{textAlign:'center', fontWeight:700, marginBottom:24, fontSize:15}}>
            CONTRATO PARTICULAR DE COMPROMISSO DE COMPRA E VENDA<br/>
            LOTEAMENTO BRISAS DO LAGO – Primeira Cruz/MA
          </div>
          <p>Por este instrumento particular, entre as partes abaixo qualificadas, fica certa e convencionada a celebração deste contrato.</p>

          <h4 style={{marginTop:20}}>I – DAS PARTES</h4>
          <p><strong>VENDEDORA</strong> – LOTEAMENTO BRISAS DO LAGO CASSÓ SPE LTDA, CNPJ 53.205.736/0001-62, com sede à Avenida Fátima Costa, S/Nº, Lagoa do Cassó, Primeira Cruz/MA.</p>
          <p><strong>COMPRADOR(A)</strong> – {cliente.nome}, brasileira, residente em São Luís/MA.</p>

          <h4 style={{marginTop:20}}>II – DO IMÓVEL</h4>
          <p>Condomínio Brisas do Lago, situado no Povoado Cassó, Primeira Cruz/MA, matrícula nº 518, livro 2D.</p>

          <h4 style={{marginTop:20}}>III – DO COMPROMISSO</h4>
          <p>Lote nº <strong>{lote.numero}</strong>, Quadra <strong>{lote.quadra}</strong>, área total de <strong>{lote.area.toFixed(2)} m²</strong>.</p>

          <h4 style={{marginTop:20}}>IV – DO PREÇO E CONDIÇÕES</h4>
          <p>Preço total: <strong>{fmtBRL(cliente.valorContrato)}</strong>, pago em 10% no ato, 10% na entrega da chave e 48 parcelas de {fmtBRL(cliente.valorContrato * 0.8 / 48)}.</p>

          <h4 style={{marginTop:20}}>V – DA INFRAESTRUTURA</h4>
          <p>A VENDEDORA se obriga a executar, às suas exclusivas expensas, sem ônus para o COMPRADOR: terraplanagem, drenagem, pavimentação, rede de água com poço artesiano, rede elétrica individual, portaria 24h, píer privativo, quadra poliesportiva, urbanização das ruas e paisagismo, conforme cronograma anexo.</p>
        </div>
        <div style={{padding:'18px 22px', borderTop:'1px solid var(--line-soft)', background:'var(--bg-elev)', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
          <div style={{display:'flex', alignItems:'center', gap:8, fontSize:12, color:'var(--success)'}}>
            <Icon name="check" size={14}/> Documento assinado digitalmente (D4Sign · ID 3f8e2a)
          </div>
          <div style={{fontSize:11, color:'var(--ink-soft)'}}>Página 1 de 11 · use as setas para navegar</div>
        </div>
      </div>

      <div style={{display:'flex', flexDirection:'column', gap:14}}>
        <div className="card" style={{padding:24}}>
          <div className="eyebrow" style={{marginBottom:14}}>◇ Resumo do contrato</div>
          <Row k="Cliente" v={cliente.nome.split(' ')[0] + ' ' + cliente.nome.split(' ').pop()}/>
          <Row k="Lote" v={`${lote.numero} · Q.${lote.quadra}`}/>
          <Row k="Área" v={`${lote.area.toFixed(0)} m²`}/>
          <div style={{height:1, background:'var(--line-soft)', margin:'10px 0'}}/>
          <Row k="Valor total" v={fmtBRL(cliente.valorContrato)} bold/>
          <Row k="Parcela mensal" v={fmtBRL(cliente.valorContrato * 0.8 / 48)}/>
          <Row k="Parcelas pagas" v={`${cliente.parcelasPagas} de 48`}/>
          <div style={{height:1, background:'var(--line-soft)', margin:'10px 0'}}/>
          <Row k="Assinado em" v="14/03/2024"/>
          <Row k="Vigência" v="48 meses"/>
          <Row k="Próximo reajuste" v="IGPM · Mar/2026"/>
        </div>
        <div className="card" style={{padding:24}}>
          <div className="eyebrow" style={{marginBottom:12}}>◇ Anexos</div>
          {['Convenção condomínio', 'Memorial descritivo', 'Planta do lote', 'Cronograma de obra'].map(d => (
            <button key={d} className="btn btn-ghost" style={{justifyContent:'space-between', padding:'8px 0', borderRadius:0, width:'100%', fontSize:13}}>
              <span style={{display:'inline-flex', alignItems:'center', gap:8}}><Icon name="file" size={13}/> {d}</span>
              <Icon name="download" size={12}/>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

function Row({k, v, bold}) {
  return (
    <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', padding:'4px 0'}}>
      <span style={{color:'var(--ink-soft)', fontSize:12}}>{k}</span>
      <span style={{fontWeight: bold ? 700 : 600, fontSize: bold ? 16 : 13, color: bold ? 'var(--green-deep)' : 'var(--ink)', fontFamily: bold ? 'var(--display)' : 'inherit'}}>{v}</span>
    </div>
  );
}

function ClientObra() {
  const fases = window.BL.OBRA;
  const total = fases.reduce((s, f) => s + f.pct, 0) / fases.length;
  return (
    <div className="fade-in">
      <div style={{display:'grid', gridTemplateColumns:'minmax(0, 1.6fr) minmax(0, 1fr)', gap:30, marginBottom:30}}>
        <div className="card" style={{padding:0, overflow:'hidden'}}>
          <PhotoPlaceholder type="aerea" height={300} label="Visão aérea · Mai/2026"/>
        </div>
        <div className="card" style={{padding:28, display:'flex', flexDirection:'column', justifyContent:'center'}}>
          <div className="eyebrow" style={{marginBottom:10}}>◇ Progresso geral</div>
          <div className="display" style={{fontSize:64, fontWeight:500, color:'var(--green-deep)', lineHeight:1}}>
            {total.toFixed(0)}%
          </div>
          <div style={{fontSize:13.5, color:'var(--ink-soft)', marginTop:10, marginBottom:18}}>
            Conclusão prevista: <strong style={{color:'var(--ink)'}}>Setembro de 2026</strong>
          </div>
          <div style={{height:10, background:'var(--bg-elev)', borderRadius:100, overflow:'hidden'}}>
            <div style={{width: total + '%', height:'100%', background:'linear-gradient(90deg, var(--green), var(--terra))', borderRadius:100}}/>
          </div>
        </div>
      </div>

      <div className="card" style={{padding:28}}>
        <div className="eyebrow" style={{marginBottom:20}}>◇ Fases da obra</div>
        <div style={{display:'flex', flexDirection:'column', gap:18}}>
          {fases.map((f, i) => (
            <div key={i} style={{display:'flex', alignItems:'center', gap:18}}>
              <div style={{
                width:46, height:46, borderRadius:'50%',
                background: f.status === 'concluido' ? 'var(--green)' : f.status === 'andamento' ? 'var(--terra)' : 'var(--bg-elev)',
                color: f.status === 'pendente' ? 'var(--ink-soft)' : 'var(--bg-card)',
                border: f.status === 'pendente' ? '1px solid var(--line)' : 'none',
                display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0
              }}>
                {f.status === 'concluido' ? <Icon name="check" size={20}/> : <span className="mono" style={{fontSize:14, fontWeight:700}}>{i+1}</span>}
              </div>
              <div style={{flex:1}}>
                <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:6}}>
                  <div style={{fontSize:14, fontWeight:600}}>{f.fase}</div>
                  <div style={{display:'flex', gap:14, alignItems:'baseline'}}>
                    <span className="mono" style={{fontSize:13, fontWeight:600, color: f.pct > 0 ? 'var(--green-deep)' : 'var(--ink-faint)'}}>{f.pct}%</span>
                    <span style={{fontSize:11.5, color:'var(--ink-soft)'}}>{f.prev}</span>
                  </div>
                </div>
                <div style={{height:6, background:'var(--bg-elev)', borderRadius:100, overflow:'hidden'}}>
                  <div style={{
                    width: f.pct + '%', height:'100%',
                    background: f.status === 'concluido' ? 'var(--green)' : f.status === 'andamento' ? 'var(--terra)' : 'var(--line)'
                  }}/>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function ClientMeuLote({cliente, lote}) {
  const [hover, setHover] = useState(null);
  return (
    <div className="fade-in" style={{display:'grid', gridTemplateColumns:'minmax(0, 2.2fr) minmax(280px, 1fr)', gap:30}}>
      <div className="card" style={{padding:6, background:'var(--bg-card)'}}>
        <MapaLoteamento estilo="tecnico" selecionado={lote.numero} hover={hover} onHover={setHover} onSelect={()=>{}}/>
      </div>
      <div>
        <div className="card" style={{padding:0, overflow:'hidden', marginBottom:18}}>
          <PhotoPlaceholder type={lote.vistaLago ? 'lago' : 'aerea'} height={200} label={`Lote ${lote.numero} · Q.${lote.quadra}`}/>
        </div>
        <div className="card" style={{padding:24}}>
          <div className="eyebrow" style={{marginBottom:14}}>◇ Especificações</div>
          <Row k="Quadra" v={lote.quadra}/>
          <Row k="Lote" v={`${lote.numero}`}/>
          <Row k="Área total" v={`${lote.area.toFixed(2)} m²`} bold/>
          <Row k="Frente" v={`${lote.frente.toFixed(2)} m`}/>
          <Row k="Fundo" v={`${lote.fundo.toFixed(2)} m`}/>
          <Row k="Lateral esquerda" v={`${lote.esq.toFixed(2)} m`}/>
          <Row k="Lateral direita" v={`${lote.dir.toFixed(2)} m`}/>
          <div style={{height:1, background:'var(--line-soft)', margin:'10px 0'}}/>
          <Row k="Vista" v={lote.vistaLago ? 'Lagoa do Cassó' : 'Interior'}/>
          <Row k="Rua" v={lote.vistaLago ? 'Rua do Lago' : 'Rua das Trilhas'}/>
        </div>
      </div>
    </div>
  );
}

window.ClientApp = ClientApp;