// Brisas do Lago — fluxo de checkout (cadastro → contrato → pagamento)
// e área do cliente logado (boletos, contrato, obra)

const { useState, useEffect, useRef } = React;

// ─── Stepper visual ───────────────────────────────────────────
function Stepper({steps, current}) {
  return (
    <div style={{display:'flex', gap:0, marginBottom:32, alignItems:'center', flexWrap:'wrap'}}>
      {steps.map((s, i) => (
        <React.Fragment key={i}>
          <div style={{display:'flex', alignItems:'center', gap:10}}>
            <div style={{
              width:28, height:28, borderRadius:'50%',
              background: i < current ? 'var(--green)' : i === current ? 'var(--terra)' : 'var(--bg-card)',
              color: i <= current ? 'var(--bg-card)' : 'var(--ink-soft)',
              border: '1px solid ' + (i <= current ? 'transparent' : 'var(--line)'),
              display:'flex', alignItems:'center', justifyContent:'center',
              fontSize:12, fontWeight:700, fontFamily:'var(--mono)'
            }}>{i < current ? <Icon name="check" size={14}/> : i + 1}</div>
            <span style={{fontSize:12.5, fontWeight: i === current ? 700 : 500, color: i <= current ? 'var(--ink)' : 'var(--ink-soft)'}}>
              {s}
            </span>
          </div>
          {i < steps.length - 1 && <div style={{flex:1, height:1, background: i < current ? 'var(--green)' : 'var(--line)', margin:'0 14px', minWidth:20}}/>}
        </React.Fragment>
      ))}
    </div>
  );
}

// ─── Reserva (lock 24h) ─────────────────────────────────────
function BuyerReservar({lote, onBack, onContinue}) {
  return (
    <div style={{padding:'24px 28px 80px', maxWidth: 720, margin:'0 auto'}}>
      <button className="btn btn-ghost btn-sm" onClick={onBack} style={{marginBottom:14}}><Icon name="chevL" size={14}/> Voltar</button>

      <Stepper steps={['Reserva', 'Cadastro', 'Contrato', 'Pagamento']} current={0}/>

      <div className="card" style={{padding:36, textAlign:'center'}}>
        <div style={{
          width:64, height:64, borderRadius:'50%',
          background:'var(--terra-soft)', color:'var(--terra-deep)',
          display:'inline-flex', alignItems:'center', justifyContent:'center',
          margin:'0 auto 18px'
        }}>
          <Icon name="clock" size={28}/>
        </div>
        <h2 className="display" style={{fontSize:34, color:'var(--green-deep)', fontWeight:500, marginBottom:10}}>
          Trave seu lote por 24h
        </h2>
        <p style={{color:'var(--ink-soft)', fontSize:14, maxWidth:480, margin:'0 auto 28px', lineHeight:1.5}}>
          Vamos reservar o <strong>Lote {lote.numero} · Quadra {lote.quadra}</strong> em seu nome.
          Nas próximas 24h ninguém mais conseguirá adquiri-lo enquanto você finaliza cadastro, contrato e entrada.
        </p>

        <div style={{
          background:'var(--green-soft)', borderRadius:14, padding:'20px 24px',
          maxWidth: 380, margin:'0 auto 28px', display:'flex', alignItems:'center', gap:18
        }}>
          <div style={{
            width:50, height:50, borderRadius:10,
            background: 'var(--bg-card)',
            color:'var(--green-deep)',
            display:'flex', alignItems:'center', justifyContent:'center',
            fontFamily:'var(--display)', fontSize:22, fontWeight:600
          }}>{lote.numero}</div>
          <div style={{textAlign:'left'}}>
            <div style={{fontSize:11, color:'var(--ink-soft)', textTransform:'uppercase', letterSpacing:1}}>Quadra {lote.quadra}</div>
            <div className="display" style={{fontSize:22, color:'var(--green-deep)', fontWeight:600, lineHeight:1}}>
              {fmtBRL(lote.valorTotal)}
            </div>
            <div style={{fontSize:11, color:'var(--ink-soft)'}}>{lote.area.toFixed(0)} m²</div>
          </div>
        </div>

        <button onClick={onContinue} className="btn btn-primary btn-lg" style={{width:'100%', maxWidth:380}}>
          Reservar por 24 horas <Icon name="arrowR" size={14}/>
        </button>
        <div style={{fontSize:11.5, color:'var(--ink-faint)', marginTop:14}}>Sem custo · sem compromisso · cancele a qualquer momento</div>
      </div>
    </div>
  );
}

// ─── Cadastro ───────────────────────────────────────────────
function BuyerCadastro({lote, onBack, onContinue}) {
  const [form, setForm] = useState({
    nome:'Ana Carolina Rocha', cpf:'012.345.678-90', rg:'05.184.965-2014-6',
    email:'ana.rocha@email.com', telefone:'(98) 99876-5432',
    nascimento:'1987-04-12', estadoCivil:'Casada', profissao:'Engenheira civil',
    endereco:'Av. Litorânea, 4500', complemento:'Apto 1203 · Bloco A',
    bairro:'Calhau', cidade:'São Luís', uf:'MA', cep:'65071-380'
  });
  const set = (k,v) => setForm({...form, [k]:v});

  return (
    <div style={{padding:'24px 28px 80px', maxWidth: 960, margin:'0 auto'}}>
      <button className="btn btn-ghost btn-sm" onClick={onBack} style={{marginBottom:14}}><Icon name="chevL" size={14}/> Voltar</button>
      <Stepper steps={['Reserva', 'Cadastro', 'Contrato', 'Pagamento']} current={1}/>

      <SectionHeader eyebrow="◇ Identificação" title="Seus dados" sub="Esses dados vão para o contrato e ficam protegidos. Levamos cerca de 3 minutos."/>

      <div style={{display:'grid', gridTemplateColumns:'minmax(0, 2fr) minmax(280px, 1fr)', gap:32, alignItems:'flex-start'}}>
        <div className="card" style={{padding:28}}>
          <div className="eyebrow" style={{marginBottom:14}}>◇ Pessoais</div>
          <Field label="Nome completo" value={form.nome} onChange={v=>set('nome', v)}/>
          <Grid2>
            <Field label="CPF" value={form.cpf} onChange={v=>set('cpf',v)}/>
            <Field label="RG / Órgão emissor" value={form.rg} onChange={v=>set('rg',v)}/>
          </Grid2>
          <Grid2>
            <Field label="E-mail" value={form.email} type="email" onChange={v=>set('email',v)}/>
            <Field label="Telefone / WhatsApp" value={form.telefone} onChange={v=>set('telefone',v)}/>
          </Grid2>
          <Grid2>
            <Field label="Data de nascimento" value={form.nascimento} type="date" onChange={v=>set('nascimento',v)}/>
            <Field label="Estado civil" value={form.estadoCivil} as="select" options={['Solteiro(a)','Casado(a)','Casada','Divorciado(a)','Viúvo(a)','União estável']} onChange={v=>set('estadoCivil',v)}/>
          </Grid2>
          <Field label="Profissão" value={form.profissao} onChange={v=>set('profissao',v)}/>

          <div className="eyebrow" style={{marginTop:28, marginBottom:14}}>◇ Endereço</div>
          <Grid2 cols="2fr 1fr">
            <Field label="Endereço" value={form.endereco} onChange={v=>set('endereco',v)}/>
            <Field label="CEP" value={form.cep} onChange={v=>set('cep',v)}/>
          </Grid2>
          <Field label="Complemento" value={form.complemento} onChange={v=>set('complemento',v)}/>
          <Grid2 cols="2fr 2fr 1fr">
            <Field label="Bairro" value={form.bairro} onChange={v=>set('bairro',v)}/>
            <Field label="Cidade" value={form.cidade} onChange={v=>set('cidade',v)}/>
            <Field label="UF" value={form.uf} onChange={v=>set('uf',v)}/>
          </Grid2>

          <div className="eyebrow" style={{marginTop:28, marginBottom:14}}>◇ Documentos</div>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:12}}>
            <UploadDoc label="RG (frente e verso)" doneText="Anexado · 2 arquivos" done/>
            <UploadDoc label="Comprovante de residência"/>
          </div>

          <div style={{marginTop:28, display:'flex', justifyContent:'flex-end', gap:10}}>
            <button onClick={onContinue} className="btn btn-primary btn-lg">
              Avançar para contrato <Icon name="arrowR" size={14}/>
            </button>
          </div>
        </div>

        <div style={{position:'sticky', top:96, display:'flex', flexDirection:'column', gap:12}}>
          <ReservaTimerCard lote={lote}/>
          <div style={{
            background:'var(--bg-card)', borderRadius:14, padding:'14px 16px',
            border:'1px solid var(--line-soft)', fontSize:12, color:'var(--ink-soft)',
            display:'flex', gap:10
          }}>
            <Icon name="info" size={16}/>
            <span>Seus dados são criptografados e usados apenas para o contrato de compra. Não compartilhamos com terceiros.</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function Field({label, value, onChange, type='text', as, options}) {
  return (
    <label style={{display:'block', marginBottom:14}}>
      <div style={{fontSize:11, fontWeight:600, color:'var(--ink-soft)', textTransform:'uppercase', letterSpacing:0.8, marginBottom:6}}>{label}</div>
      {as === 'select' ? (
        <select value={value} onChange={e=>onChange(e.target.value)} style={inputStyle}>
          {options.map(o => <option key={o} value={o}>{o}</option>)}
        </select>
      ) : (
        <input type={type} value={value} onChange={e=>onChange(e.target.value)} style={inputStyle}/>
      )}
    </label>
  );
}
const inputStyle = {
  width:'100%', padding:'11px 14px', borderRadius:8,
  border:'1px solid var(--line)', background:'var(--bg-elev)',
  fontSize:13.5, color:'var(--ink)', outline:'none'
};
const Grid2 = ({children, cols='1fr 1fr'}) => (
  <div style={{display:'grid', gridTemplateColumns: cols, gap:12}}>{children}</div>
);

function UploadDoc({label, done, doneText}) {
  return (
    <div style={{
      border: done ? '1px solid var(--green)' : '1px dashed var(--line)',
      borderRadius:10, padding:'14px 16px',
      background: done ? 'var(--green-soft)' : 'var(--bg-elev)',
      display:'flex', alignItems:'center', gap:12, cursor:'pointer'
    }}>
      <div style={{
        width:36, height:36, borderRadius:8,
        background: done ? 'var(--green)' : 'var(--bg-card)',
        color: done ? 'var(--bg-card)' : 'var(--ink-soft)',
        display:'flex', alignItems:'center', justifyContent:'center'
      }}>
        <Icon name={done ? 'check' : 'upload'} size={16}/>
      </div>
      <div style={{flex:1}}>
        <div style={{fontSize:13, fontWeight:600}}>{label}</div>
        <div style={{fontSize:11.5, color:'var(--ink-soft)', marginTop:2}}>
          {done ? doneText : 'JPG, PNG ou PDF até 10MB'}
        </div>
      </div>
    </div>
  );
}

function ReservaTimerCard({lote}) {
  const [time, setTime] = useState({h:23, m:47, s:32});
  useEffect(() => {
    const t = setInterval(() => {
      setTime(prev => {
        let s = prev.s - 1, m = prev.m, h = prev.h;
        if (s < 0) { s = 59; m -= 1; }
        if (m < 0) { m = 59; h -= 1; }
        if (h < 0) h = 0;
        return {h, m, s};
      });
    }, 1000);
    return () => clearInterval(t);
  }, []);
  const pad = n => String(n).padStart(2,'0');
  return (
    <div style={{
      background:'var(--green-deep)', color:'var(--bg-card)',
      borderRadius:14, padding:'18px 20px'
    }}>
      <div style={{fontSize:10.5, letterSpacing:1.4, textTransform:'uppercase', color:'#D9C7A8', marginBottom:6}}>
        ◐ Reserva ativa
      </div>
      <div style={{display:'flex', alignItems:'baseline', gap:14, marginBottom:8}}>
        <div className="display" style={{fontSize:36, fontWeight:500, color:'var(--bg-card)', lineHeight:1}}>
          Lote {lote.numero}
        </div>
        <div style={{fontSize:12, color:'#D9C7A8'}}>Quadra {lote.quadra}</div>
      </div>
      <div style={{fontSize:11.5, color:'#D9C7A8', marginBottom:10}}>Restam para completar a compra:</div>
      <div className="mono" style={{
        fontSize:26, fontWeight:600, color:'var(--terra)', letterSpacing:1.5,
        display:'flex', alignItems:'baseline', gap:4
      }}>
        {pad(time.h)}<span style={{opacity:0.5, fontSize:18}}>:</span>{pad(time.m)}<span style={{opacity:0.5, fontSize:18}}>:</span>{pad(time.s)}
      </div>
    </div>
  );
}

// ─── Contrato (assinatura eletrônica) ───────────────────────
function BuyerContrato({lote, onBack, onContinue}) {
  const [aceito, setAceito] = useState(false);
  const [aceitoCondominio, setAceitoCondominio] = useState(false);
  return (
    <div style={{padding:'24px 28px 80px', maxWidth: 960, margin:'0 auto'}}>
      <button className="btn btn-ghost btn-sm" onClick={onBack} style={{marginBottom:14}}><Icon name="chevL" size={14}/> Voltar</button>
      <Stepper steps={['Reserva', 'Cadastro', 'Contrato', 'Pagamento']} current={2}/>
      <SectionHeader eyebrow="◇ Contrato" title="Compromisso de compra e venda" sub="Leia, confira os dados e assine eletronicamente. A assinatura é via D4Sign e tem validade jurídica."/>

      <div style={{display:'grid', gridTemplateColumns:'minmax(0, 2fr) minmax(280px, 1fr)', gap:32, alignItems:'flex-start'}}>
        <div>
          <div className="card" style={{padding:0, overflow:'hidden'}}>
            <div style={{
              padding:'16px 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-compra-venda-{lote.numero}.pdf</div>
                  <div style={{fontSize:11, color:'var(--ink-soft)'}}>11 páginas · pré-preenchido com seus dados</div>
                </div>
              </div>
              <button className="btn btn-sm btn-ghost"><Icon name="download" size={13}/> Baixar</button>
            </div>
            <div style={{
              padding:'32px 36px', maxHeight:480, overflowY:'auto',
              fontFamily:'Georgia, serif', fontSize:13, lineHeight:1.7, color:'var(--ink)'
            }}>
              <div style={{textAlign:'center', fontWeight:700, marginBottom:24}}>
                CONTRATO PARTICULAR DE COMPROMISSO DE COMPRA E VENDA<br/>
                LOTEAMENTO BRISAS DO LAGO – Primeira Cruz/MA
              </div>
              <p>Por este instrumento particular de compromisso de compra e venda, entre partes justas e contratadas, abaixo qualificadas, simplesmente denominadas <strong>VENDEDORA</strong> e <strong>COMPRADOR</strong>, fica certa e convencionada a celebração deste contrato.</p>
              <h4 style={{marginTop:18}}>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, CEP 65190-000.</p>
              <p><strong>COMPRADOR(A)</strong> – <span style={{background:'var(--terra-soft)', padding:'1px 4px', borderRadius:3}}>Ana Carolina Rocha</span>, brasileira, casada, engenheira civil, portadora do CPF nº <span style={{background:'var(--terra-soft)', padding:'1px 4px', borderRadius:3}}>012.345.678-90</span>, residente em <span style={{background:'var(--terra-soft)', padding:'1px 4px', borderRadius:3}}>São Luís/MA</span>.</p>
              <h4 style={{marginTop:18}}>II – DO IMÓVEL</h4>
              <p>A VENDEDORA, justo título, é senhora proprietária e possuidora do imóvel urbano denominado Condomínio Brisas do Lago, situado no Povoado Cassó, Município de Primeira Cruz/MA, matrícula nº 518, livro 2D do Cartório Registro Imóvel de Primeira Cruz.</p>
              <h4 style={{marginTop:18}}>III – DO COMPROMISSO</h4>
              <p>A VENDEDORA compromete-se a vender ao COMPRADOR o <strong>Lote nº {lote.numero}</strong>, na Quadra {lote.quadra}, com área total de <strong>{lote.area.toFixed(2)} m²</strong>.</p>
              <h4 style={{marginTop:18}}>IV – DO PREÇO E CONDIÇÕES</h4>
              <p>O preço total, certo e ajustado, é de <strong>{fmtBRL(lote.valorTotal)}</strong>, a ser pago: 10% no ato da compra ({fmtBRL(lote.valorTotal * 0.1)}); 10% na entrega da chave; saldo em 48 parcelas mensais de {fmtBRL(lote.valorTotal * 0.8 / 48)} via boleto bancário ou PIX.</p>
              <p style={{color:'var(--ink-soft)', fontSize:12, fontStyle:'italic'}}>[...continua nas demais cláusulas...]</p>
            </div>
          </div>

          <div style={{marginTop:18, display:'flex', flexDirection:'column', gap:12}}>
            <CheckRow checked={aceito} onChange={setAceito}
              label="Li e concordo com os termos do contrato de compromisso de compra e venda"/>
            <CheckRow checked={aceitoCondominio} onChange={setAceitoCondominio}
              label="Concordo com a convenção e regimento interno do condomínio Brisas do Lago"/>
          </div>

          <div style={{marginTop:24, padding:'22px 24px', background:'var(--green-deep)', borderRadius:14, color:'var(--bg-card)'}}>
            <div className="eyebrow" style={{color:'#D9C7A8', marginBottom:10}}>◇ Assinatura eletrônica</div>
            <div style={{display:'flex', alignItems:'center', gap:14}}>
              <div style={{
                width:80, height:80, borderRadius:10, background:'rgba(243,237,224,0.1)',
                border:'2px dashed rgba(243,237,224,0.3)', display:'flex', alignItems:'center', justifyContent:'center'
              }}>
                <Icon name="edit" size={28}/>
              </div>
              <div style={{flex:1}}>
                <div style={{fontWeight:600, marginBottom:4}}>Receba o link no e-mail / WhatsApp</div>
                <div style={{fontSize:12, color:'#D9C7A8'}}>Você assina pelo celular usando token + biometria. Sem precisar imprimir.</div>
              </div>
              <button onClick={onContinue} disabled={!aceito || !aceitoCondominio}
                className="btn btn-terra btn-lg"
                style={{opacity: aceito && aceitoCondominio ? 1 : 0.4, cursor: aceito && aceitoCondominio ? 'pointer' : 'not-allowed'}}>
                Assinar e avançar <Icon name="arrowR" size={14}/>
              </button>
            </div>
          </div>
        </div>

        <div style={{position:'sticky', top:96, display:'flex', flexDirection:'column', gap:12}}>
          <ReservaTimerCard lote={lote}/>
          <div className="card" style={{padding:'18px 20px'}}>
            <div className="eyebrow" style={{marginBottom:10}}>◇ Resumo do contrato</div>
            <div style={{display:'flex', flexDirection:'column', gap:8, fontSize:13}}>
              <Row k="Lote" v={`${lote.numero} · Q.${lote.quadra}`}/>
              <Row k="Área" v={`${lote.area.toFixed(0)} m²`}/>
              <Row k="Valor" v={fmtBRL(lote.valorTotal)} bold/>
              <Row k="Entrada" v={fmtBRL(lote.valorTotal * 0.1)}/>
              <Row k="Parcelas" v={`48× ${fmtBRL(lote.valorTotal * 0.8 / 48)}`}/>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

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

function CheckRow({checked, onChange, label}) {
  return (
    <label style={{
      display:'flex', alignItems:'flex-start', gap:12, padding:'14px 18px',
      background:'var(--bg-card)', border:'1px solid ' + (checked ? 'var(--green)' : 'var(--line)'),
      borderRadius:10, cursor:'pointer'
    }}>
      <div style={{
        width:22, height:22, borderRadius:6, flexShrink:0,
        background: checked ? 'var(--green)' : 'var(--bg-elev)',
        border: '1px solid ' + (checked ? 'var(--green)' : 'var(--line)'),
        display:'flex', alignItems:'center', justifyContent:'center',
        color:'var(--bg-card)'
      }}>
        {checked && <Icon name="check" size={14} stroke={3}/>}
      </div>
      <span style={{fontSize:13, lineHeight:1.5, color: checked ? 'var(--ink)' : 'var(--ink-soft)'}}>{label}</span>
      <input type="checkbox" checked={checked} onChange={e => onChange(e.target.checked)} style={{display:'none'}}/>
    </label>
  );
}

// ─── Pagamento (PIX) ────────────────────────────────────────
function BuyerPagamento({lote, onBack, onFinish}) {
  const [metodo, setMetodo] = useState('pix');
  const [pago, setPago] = useState(false);
  const entrada = lote.valorTotal * 0.1;

  // Simular pagamento automaticamente após 5s
  useEffect(() => {
    if (metodo === 'pix' && !pago) {
      const t = setTimeout(() => setPago(true), 8000);
      return () => clearTimeout(t);
    }
  }, [metodo, pago]);

  if (pago) {
    return (
      <div style={{padding:'48px 28px 80px', maxWidth: 720, margin:'0 auto', textAlign:'center'}}>
        <div style={{
          width:80, height:80, borderRadius:'50%',
          background:'var(--green-soft)', color:'var(--green)',
          display:'inline-flex', alignItems:'center', justifyContent:'center',
          margin:'0 auto 24px'
        }}>
          <Icon name="check" size={42} stroke={2.5}/>
        </div>
        <h1 className="display" style={{fontSize:48, fontWeight:500, color:'var(--green-deep)', marginBottom:14, letterSpacing:'-0.02em'}}>
          O lote é seu.
        </h1>
        <p style={{fontSize:16, color:'var(--ink-soft)', maxWidth:540, margin:'0 auto 36px', lineHeight:1.5}}>
          Pagamento confirmado. O contrato assinado já está no seu e-mail e na sua área do cliente.
          Em breve nossa equipe entrará em contato para os próximos passos.
        </p>
        <div className="card" style={{padding:28, maxWidth:480, margin:'0 auto 28px', textAlign:'left'}}>
          <Row k="Lote" v={`${lote.numero} · Quadra ${lote.quadra}`}/>
          <div style={{height:1, background:'var(--line-soft)', margin:'10px 0'}}/>
          <Row k="Valor pago hoje" v={fmtBRL(entrada)} bold/>
          <Row k="Saldo restante" v={fmtBRL(lote.valorTotal * 0.9)}/>
          <Row k="Primeira parcela" v={'10/07/2026'}/>
        </div>
        <button onClick={onFinish} className="btn btn-primary btn-lg">
          Ir para minha área <Icon name="arrowR" size={14}/>
        </button>
      </div>
    );
  }

  return (
    <div style={{padding:'24px 28px 80px', maxWidth: 960, margin:'0 auto'}}>
      <button className="btn btn-ghost btn-sm" onClick={onBack} style={{marginBottom:14}}><Icon name="chevL" size={14}/> Voltar</button>
      <Stepper steps={['Reserva', 'Cadastro', 'Contrato', 'Pagamento']} current={3}/>
      <SectionHeader eyebrow="◇ Pagamento da entrada" title={`Pague ${fmtBRL(entrada)} para confirmar`} sub="Após o pagamento da entrada, sua compra é confirmada e o contrato torna-se efetivo."/>

      <div style={{display:'grid', gridTemplateColumns:'minmax(0, 1.5fr) minmax(280px, 1fr)', gap:32}}>
        <div className="card" style={{padding:28}}>
          {/* Tabs */}
          <div style={{display:'flex', gap:8, marginBottom:24, background:'var(--bg-elev)', padding:4, borderRadius:100, width:'fit-content'}}>
            {[['pix','PIX','qr'],['cartao','Cartão de crédito','creditCard'],['boleto','Boleto','file']].map(([k, lbl, icon]) => (
              <button key={k} onClick={()=>setMetodo(k)} style={{
                padding:'8px 18px', borderRadius:100, fontSize:13, fontWeight:600,
                background: metodo===k ? 'var(--green)' : 'transparent',
                color: metodo===k ? 'var(--bg-card)' : 'var(--ink-soft)',
                display:'inline-flex', alignItems:'center', gap:6
              }}>
                <Icon name={icon} size={13}/> {lbl}
              </button>
            ))}
          </div>

          {metodo === 'pix' && (
            <div style={{textAlign:'center'}}>
              <div style={{
                width:240, height:240, margin:'0 auto 18px',
                background:'var(--bg-elev)', padding:18, borderRadius:14,
                border:'1px solid var(--line)'
              }}>
                <QRCode/>
              </div>
              <div className="eyebrow" style={{marginBottom:8}}>Aponte a câmera do seu app bancário</div>
              <div style={{fontSize:13, color:'var(--ink-soft)', marginBottom:18}}>
                ou copie o código abaixo
              </div>
              <div style={{
                display:'flex', alignItems:'center', gap:8, padding:'10px 12px',
                background:'var(--bg-elev)', border:'1px solid var(--line)', borderRadius:10,
                maxWidth:480, margin:'0 auto'
              }}>
                <code style={{flex:1, fontSize:11.5, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap', textAlign:'left'}}>
                  00020126360014BR.GOV.BCB.PIX0114+55989988877760202BL5204000053039865406295880580...
                </code>
                <button className="btn btn-sm btn-secondary">Copiar</button>
              </div>
              <div style={{marginTop:24, padding:'14px 18px', background:'var(--green-soft)', borderRadius:10, display:'inline-flex', alignItems:'center', gap:10, fontSize:13}}>
                <div className="splash-loader" style={{width:16, height:16, borderWidth:2}}/>
                Aguardando pagamento...
              </div>
            </div>
          )}

          {metodo === 'cartao' && (
            <div>
              <Field label="Número do cartão" value="**** **** **** 4231" onChange={()=>{}}/>
              <Grid2>
                <Field label="Validade" value="12/29" onChange={()=>{}}/>
                <Field label="CVV" value="•••" onChange={()=>{}}/>
              </Grid2>
              <Field label="Nome impresso" value="Ana C. Rocha" onChange={()=>{}}/>
              <Field label="Parcelas" value="1x R$ 29.588 (sem juros)" as="select" options={['1x R$ 29.588 (sem juros)', '2x R$ 14.794', '3x R$ 9.863']} onChange={()=>{}}/>
              <button onClick={()=>setPago(true)} className="btn btn-primary btn-lg" style={{width:'100%', marginTop:16}}>
                Pagar {fmtBRL(entrada)}
              </button>
            </div>
          )}

          {metodo === 'boleto' && (
            <div style={{textAlign:'center', padding:'40px 20px'}}>
              <Icon name="file" size={48} stroke={1.5}/>
              <div className="display" style={{fontSize:22, marginTop:16, marginBottom:8, color:'var(--green-deep)', fontWeight:500}}>
                Gerar boleto da entrada
              </div>
              <div style={{fontSize:13, color:'var(--ink-soft)', marginBottom:24, maxWidth:380, margin:'0 auto 24px'}}>
                Vencimento em 3 dias úteis. Sua reserva continua válida durante esse período.
              </div>
              <button onClick={()=>setPago(true)} className="btn btn-primary">Gerar boleto · {fmtBRL(entrada)}</button>
            </div>
          )}
        </div>

        <div style={{display:'flex', flexDirection:'column', gap:12}}>
          <div className="card" style={{padding:24}}>
            <div className="eyebrow" style={{marginBottom:14}}>◇ Resumo</div>
            <Row k="Lote" v={`${lote.numero} · Q.${lote.quadra}`}/>
            <div style={{height:1, background:'var(--line-soft)', margin:'10px 0'}}/>
            <Row k="Valor do lote" v={fmtBRL(lote.valorTotal)}/>
            <Row k="Entrada (10%)" v={fmtBRL(entrada)} bold/>
            <Row k="Restante" v={fmtBRL(lote.valorTotal * 0.9)}/>
            <div style={{height:1, background:'var(--line-soft)', margin:'10px 0'}}/>
            <Row k="A pagar agora" v={fmtBRL(entrada)} bold/>
          </div>
          <div style={{
            background:'var(--bg-card)', borderRadius:14, padding:'14px 16px',
            border:'1px solid var(--line-soft)', fontSize:12, color:'var(--ink-soft)',
            display:'flex', gap:10
          }}>
            <Icon name="info" size={16}/>
            <span>Após o pagamento da entrada, o contrato torna-se efetivo. Você receberá no e-mail o contrato assinado e cronograma de parcelas.</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function QRCode() {
  // SVG QR placeholder (visualmente um QR code)
  const cells = [];
  const seed = 7;
  for (let y = 0; y < 25; y++) {
    for (let x = 0; x < 25; x++) {
      const v = (x * 31 + y * 17 + seed * x * y) % 7;
      const isDark = v < 3 || (x < 7 && y < 7) || (x > 17 && y < 7) || (x < 7 && y > 17);
      if (isDark) cells.push([x, y]);
    }
  }
  return (
    <svg viewBox="0 0 25 25" width="100%" height="100%">
      <rect width="25" height="25" fill="white"/>
      {cells.map(([x,y]) => <rect key={`${x}-${y}`} x={x} y={y} width="1" height="1" fill="#1A2E2A"/>)}
      {/* Position markers */}
      {[[0,0],[18,0],[0,18]].map(([cx,cy], i) => (
        <g key={i}>
          <rect x={cx} y={cy} width="7" height="7" fill="white"/>
          <rect x={cx} y={cy} width="7" height="7" fill="none" stroke="#1A2E2A" strokeWidth="1"/>
          <rect x={cx+2} y={cy+2} width="3" height="3" fill="#1A2E2A"/>
        </g>
      ))}
      {/* Logo center */}
      <circle cx="12.5" cy="12.5" r="2.5" fill="white"/>
      <circle cx="12.5" cy="12.5" r="2" fill="#2D4F3C"/>
    </svg>
  );
}

Object.assign(window, {
  BuyerReservar, BuyerCadastro, BuyerContrato, BuyerPagamento,
});