function BottomTab({ active, onChange }) {
  const tabs = [
    { id: 'home', l: 'Início' },
    { id: 'boleto', l: 'Boleto' },
    { id: 'notices', l: 'Comunicados' },
    { id: 'me', l: 'Eu' }
  ];
  return (
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0, height: 68,
      background: '#fff', borderTop: '1px solid #ECECEF',
      display: 'flex', alignItems: 'center', justifyContent: 'space-around',
      paddingBottom: 8
    }}>
      {tabs.map((t) => {
        const on = active === t.id;
        return (
          <button key={t.id} onClick={() => onChange(t.id)} style={{
            background: 'transparent', border: 'none', cursor: 'pointer',
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
            color: on ? '#1B2D70' : '#8C8C99'
          }}>
            <div style={{ display: 'flex', gap: 2 }}>
              <div style={{ width: 4, height: 16, background: on ? '#1B2D70' : '#BCBCC7' }} />
              <div style={{ width: 4, height: 16, background: on ? '#1B2D70' : '#BCBCC7' }} />
              <div style={{ width: 4, height: 16, background: on ? '#1B2D70' : '#BCBCC7' }} />
            </div>
            <div style={{ fontFamily: 'Inter', fontSize: 11, fontWeight: on ? 600 : 500 }}>{t.l}</div>
          </button>
        );
      })}
    </div>
  );
}
window.SemogBottomTab = BottomTab;