function Boleto({ onBack }) {
  return (
    <div style={{ height: '100%', overflowY: 'auto', background: '#fff' }}>
      <div style={{ padding: '20px 24px', display: 'flex', alignItems: 'center', gap: 12 }}>
        <button onClick={onBack} style={{ background: 'transparent', border: 'none', cursor: 'pointer', color: '#1B2D70', fontFamily: 'Saira', fontSize: 22 }}>←</button>
        <div style={{ fontFamily: 'Inter', fontSize: 14, fontWeight: 600, color: '#1B2D70' }}>Boleto · Junho 2026</div>
      </div>
      <div style={{ padding: '0 24px' }}>
        <div style={{ fontFamily: 'Inter', fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.1em', color: '#6C6C78' }}>Valor</div>
        <div style={{ fontFamily: 'Saira', fontWeight: 300, fontSize: 56, color: '#1B2D70', letterSpacing: '-0.02em', lineHeight: 1, marginTop: 6 }}>R$ 482,30</div>
        <div style={{ fontFamily: 'Inter', fontSize: 13, color: '#6C6C78', marginTop: 4 }}>Vence 10 de junho · Em 12x no boleto</div>

        <div style={{ marginTop: 28, border: '1px solid #ECECEF', borderRadius: 8 }}>
          {[
            ['Taxa condominial', 'R$ 420,00'],
            ['Fundo de reserva', 'R$ 32,00'],
            ['Rateio extra · Pintura', 'R$ 30,30']
          ].map(([k, v], i) => (
            <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '14px 16px', borderTop: i ? '1px solid #ECECEF' : 'none' }}>
              <div style={{ fontFamily: 'Inter', fontSize: 14, color: '#4B4B55' }}>{k}</div>
              <div style={{ fontFamily: 'Saira', fontSize: 15, fontWeight: 500, color: '#1B2D70' }}>{v}</div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 24, padding: 16, background: '#EEF1FA', borderRadius: 8, display: 'flex', gap: 12, alignItems: 'flex-start' }}>
          <div style={{ display: 'flex', gap: 2, marginTop: 3 }}>
            <div style={{ width: 4, height: 16, background: '#1B2D70' }} />
            <div style={{ width: 4, height: 16, background: '#1B2D70' }} />
            <div style={{ width: 4, height: 16, background: '#1B2D70' }} />
          </div>
          <div>
            <div style={{ fontFamily: 'Saira', fontWeight: 500, fontSize: 14, color: '#1B2D70' }}>Pagar pelo Pix</div>
            <div style={{ fontFamily: 'Inter', fontSize: 12, color: '#4B4B55', marginTop: 2 }}>Confirmação imediata. Use o QR Code abaixo.</div>
          </div>
        </div>

        <button style={{ marginTop: 20, width: '100%', padding: '14px', background: '#1B2D70', color: '#fff', border: 'none', borderRadius: 6, fontFamily: 'Inter', fontWeight: 600, fontSize: 15, cursor: 'pointer' }}>
          Copiar linha digitável
        </button>
        <button style={{ marginTop: 10, width: '100%', padding: '14px', background: 'transparent', color: '#1B2D70', border: '1px solid #1B2D70', borderRadius: 6, fontFamily: 'Inter', fontWeight: 600, fontSize: 15, cursor: 'pointer', marginBottom: 80 }}>
          Baixar PDF
        </button>
      </div>
    </div>
  );
}
window.SemogBoleto = Boleto;