function Dashboard({ onOpenBoleto, onOpenNotices }) {
  return (
    <div style={{ height: '100%', overflowY: 'auto', background: '#F6F6F8', paddingBottom: 80 }}>
      {/* Header gradient */}
      <div style={{
        background: 'linear-gradient(160deg, #1B2D70 0%, #2F4FA0 60%, #4F6FB5 100%)',
        padding: '24px 24px 88px', color: '#fff'
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <div style={{ fontFamily: 'Inter', fontSize: 12, opacity: 0.8, letterSpacing: '0.06em' }}>Edifício Aurora · Apto 1204</div>
            <div style={{ fontFamily: 'Saira', fontSize: 24, fontWeight: 400, marginTop: 6 }}>Olá, Mariana.</div>
          </div>
          <div style={{ width: 38, height: 38, borderRadius: '50%', background: '#ADD5EB', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#1B2D70', fontFamily: 'Saira', fontWeight: 500 }}>M</div>
        </div>
      </div>

      {/* Floating boleto card */}
      <div style={{ margin: '-72px 20px 0', background: '#fff', borderRadius: 12, padding: 20, boxShadow: '0 12px 32px rgba(10,19,48,0.12)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <div style={{ fontFamily: 'Inter', fontSize: 11, fontWeight: 600, color: '#6C6C78', textTransform: 'uppercase', letterSpacing: '0.1em' }}>Boleto · Junho</div>
          <span style={{ background: '#EEF1FA', color: '#1B2D70', fontFamily: 'Inter', fontSize: 10, fontWeight: 600, padding: '4px 10px', borderRadius: 2, textTransform: 'uppercase', letterSpacing: '0.06em' }}>No azul</span>
        </div>
        <div style={{ fontFamily: 'Saira', fontWeight: 400, fontSize: 38, color: '#1B2D70', marginTop: 8, letterSpacing: '-0.02em' }}>R$ 482,30</div>
        <div style={{ fontFamily: 'Inter', fontSize: 13, color: '#6C6C78', marginTop: 4 }}>Vence 10 de junho · Em 12 dias</div>
        <button onClick={onOpenBoleto} style={{
          marginTop: 16, width: '100%', padding: '12px', border: 'none', borderRadius: 6,
          background: '#1B2D70', color: '#fff', fontFamily: 'Inter', fontWeight: 600, fontSize: 14, cursor: 'pointer'
        }}>Ver detalhes</button>
      </div>

      {/* Shortcuts */}
      <div style={{ padding: '28px 20px 0' }}>
        <div style={{ fontFamily: 'Inter', fontSize: 12, fontWeight: 600, textTransform: 'uppercase', color: '#6C6C78', letterSpacing: '0.1em', marginBottom: 12 }}>Atalhos</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {[
            { t: 'Comunicados', s: '3 novos', cb: onOpenNotices },
            { t: 'Reservas', s: 'Salão de festas' },
            { t: 'Documentos', s: 'Atas, balancetes' },
            { t: 'Fale com o síndico', s: 'Resposta em 4h' }
          ].map((s, i) => (
            <div key={i} onClick={s.cb} style={{ background: '#fff', borderRadius: 10, padding: 16, cursor: s.cb ? 'pointer' : 'default' }}>
              <div style={{ display: 'flex', gap: 3, marginBottom: 14 }}>
                {Array.from({ length: (i % 3) + 1 }).map((_, k) => <div key={k} style={{ width: 5, height: 18, background: '#1B2D70' }} />)}
              </div>
              <div style={{ fontFamily: 'Saira', fontWeight: 500, fontSize: 16, color: '#1B2D70' }}>{s.t}</div>
              <div style={{ fontFamily: 'Inter', fontSize: 12, color: '#6C6C78', marginTop: 2 }}>{s.s}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Métricas */}
      <div style={{ padding: '28px 20px 0' }}>
        <div style={{ fontFamily: 'Inter', fontSize: 12, fontWeight: 600, textTransform: 'uppercase', color: '#6C6C78', letterSpacing: '0.1em', marginBottom: 12 }}>Saúde do condomínio</div>
        <div style={{ background: '#fff', borderRadius: 10, padding: 16 }}>
          {[
            { k: 'Inadimplência', v: '2,8 %', tone: '#2F8C5E' },
            { k: 'Fundo de reserva', v: 'R$ 184k', tone: '#1B2D70' },
            { k: 'Próx. assembleia', v: '24/jun', tone: '#1B2D70' }
          ].map((r, i) => (
            <div key={r.k} style={{ display: 'flex', justifyContent: 'space-between', padding: '10px 0', borderTop: i ? '1px solid #ECECEF' : 'none' }}>
              <div style={{ fontFamily: 'Inter', fontSize: 14, color: '#4B4B55' }}>{r.k}</div>
              <div style={{ fontFamily: 'Saira', fontSize: 15, fontWeight: 500, color: r.tone }}>{r.v}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
window.SemogDashboard = Dashboard;