// Dashboard — dark mode v2, translucent cards, purple/blue accents
const Dashboard = ({ onNavigate }) => {
  return (
    <AppShell current="dashboard" onNavigate={onNavigate} page="dashboard">
      <div data-screen-label="04 Dashboard" style={{ padding: '24px 28px', display: 'flex', flexDirection: 'column', gap: 22, maxWidth: 1600, margin: '0 auto' }}>
        <style>{`
          @media (max-width: 640px) {
            [data-screen-label="04 Dashboard"] { padding: 16px !important; }
          }

          .dash-greet h1 {
            font-size: 28px; font-weight: 700; color: var(--text-0);
            margin: 0 0 4px; letter-spacing: -0.02em;
          }
          .dash-greet-sub { font-size: 13px; color: var(--text-3); }

          .dash-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
          @media (max-width: 1200px) { .dash-kpi-row { grid-template-columns: repeat(2, 1fr); } }
          @media (max-width: 520px) { .dash-kpi-row { grid-template-columns: 1fr; } }

          .dash-kpi {
            background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
            border: 1px solid var(--line-1); border-radius: 14px;
            padding: 18px; display: flex; gap: 14px; align-items: center;
            transition: all .15s; position: relative; overflow: hidden;
          }
          .dash-kpi:hover { border-color: var(--line-3); transform: translateY(-1px); }
          .dash-kpi-icon {
            width: 46px; height: 46px; border-radius: 11px;
            display: grid; place-items: center; flex-shrink: 0;
          }
          .dash-kpi-body { min-width: 0; flex: 1; }
          .dash-kpi-value {
            font-size: 28px; font-weight: 700; letter-spacing: -0.02em;
            color: var(--text-0); line-height: 1.05; margin-bottom: 4px;
          }
          .dash-kpi-label {
            font-size: 12px; color: var(--text-3); font-weight: 500;
          }
          .dash-kpi.alert {
            background: linear-gradient(180deg, rgba(239,68,68,.08) 0%, rgba(239,68,68,.02) 100%);
            border-color: rgba(239,68,68,.25);
          }

          .dash-grid {
            display: grid; gap: 20px;
            grid-template-columns: 2fr 1fr;
          }
          @media (max-width: 1200px) { .dash-grid { grid-template-columns: 1fr; } }

          .widget {
            background: var(--bg-2); border: 1px solid var(--line-1); border-radius: 16px;
            padding: 20px; display: flex; flex-direction: column; gap: 14px;
          }
          .widget-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
          .widget-title { font-size: 15px; font-weight: 600; color: var(--text-0); letter-spacing: -0.01em; }
          .widget-sub { font-size: 12px; color: var(--text-3); }
          .widget-link { font-size: 12px; color: #a78bfa; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
          .widget-link:hover { color: #c4b5fd; }

          .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
          @media (max-width: 800px) { .row-2 { grid-template-columns: 1fr; } }

          .pill-row { display: flex; gap: 10px; flex-wrap: wrap; }
          .pill-stat {
            flex: 1; min-width: 80px;
            padding: 12px 14px; border-radius: 10px;
            background: var(--bg-3); border: 1px solid var(--line-1);
          }
          .pill-stat .lbl { font-size: 11px; color: var(--text-3); }
          .pill-stat .val { font-size: 20px; font-weight: 700; margin-top: 2px; color: var(--text-0); }

          .quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
          @media (max-width: 420px) { .quick-grid { grid-template-columns: repeat(3, 1fr); } }
          .quick-btn {
            padding: 14px 8px; border-radius: 12px; text-align: center;
            background: var(--bg-3); border: 1px solid var(--line-1);
            display: flex; flex-direction: column; align-items: center; gap: 8px;
            font-size: 11px; font-weight: 500; color: var(--text-1);
            transition: all .12s; cursor: pointer;
          }
          .quick-btn:hover { background: var(--bg-4); border-color: var(--line-3); transform: translateY(-1px); }
          .quick-btn .icon-square {
            width: 32px; height: 32px; border-radius: 9px;
            display: grid; place-items: center;
          }

          .activity-item {
            display: flex; gap: 12px; padding: 12px 0;
            border-bottom: 1px solid var(--line-1);
          }
          .activity-item:last-child { border-bottom: none; padding-bottom: 0; }
          .activity-dot {
            width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0;
          }
          .activity-body { flex: 1; min-width: 0; }
          .activity-text { font-size: 13px; color: var(--text-1); line-height: 1.5; }
          .activity-text b { font-weight: 600; color: var(--text-0); }
          .activity-time { font-size: 11px; color: var(--text-4); margin-top: 2px; }

          .team-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
          .team-row:not(:last-child) { border-bottom: 1px solid var(--line-1); }
          .team-name { font-size: 13px; font-weight: 500; color: var(--text-0); }
          .team-role { font-size: 11px; color: var(--text-3); }
        `}</style>

        {/* Greeting */}
        <div className="dash-greet">
          <h1>Boa noite, Rafael 👋</h1>
          <div className="dash-greet-sub">Sábado, 18 de abril de 2026 · 21:14 · Padaria São João</div>
        </div>

        {/* KPIs */}
        <div className="dash-kpi-row">
          <KpiCard icon="clock" color="#8b5cf6" value="01:22" label="Tempo online hoje"/>
          <KpiCard icon="check" color="#22c55e" value="0" label="Tarefas pendentes"/>
          <KpiCard icon="calendar" color="#06b6d4" value="3" label="Eventos do dia"/>
          <KpiCard icon="circleAlert" color="#ef4444" alert value="2" label={<>Faturas vencidas <b style={{ color: '#fca5a5' }}>{BRL(5850)}</b></>}/>
          <KpiCard icon="wallet" color="#f59e0b" value={BRL(2009.70)} label="Despesas do mês"/>
          <KpiCard icon="receipt" color="#ec4899" value="0" label="Estimativas pendentes"/>
          <KpiCard icon="doc" color="#a78bfa" value="0" label="Propostas pendentes"/>
          <KpiCard icon="bell" color="#60a5fa" value="0" label="Lembretes ativos"/>
        </div>

        {/* Quick access */}
        <div className="widget">
          <div className="widget-head">
            <div>
              <div className="widget-title" style={{ fontSize: 13, textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--text-3)' }}>Acesso Rápido</div>
            </div>
          </div>
          <div className="quick-grid" style={{ gridTemplateColumns: 'repeat(6, 1fr)' }}>
            {[
              { icon: 'users', color: '#60a5fa', label: 'CRM', onClick: () => onNavigate('crm') },
              { icon: 'wallet', color: '#22c55e', label: 'Faturamento' },
              { icon: 'receipt', color: '#f59e0b', label: 'Despesas' },
              { icon: 'briefcase', color: '#ec4899', label: 'RH' },
              { icon: 'megaphone', color: '#06b6d4', label: 'Marketing' },
              { icon: 'folder', color: '#a78bfa', label: 'Projetos' },
              { icon: 'file', color: '#f472b6', label: 'Documentos' },
              { icon: 'book', color: '#34d399', label: 'Knowledge' },
              { icon: 'calc', color: '#fb7185', label: 'Estimativas' },
              { icon: 'doc', color: '#818cf8', label: 'Propostas' },
              { icon: 'message', color: '#fb923c', label: 'Comunicados' },
              { icon: 'whatsapp', color: '#25d366', label: 'WhatsApp' },
            ].map(a => (
              <button key={a.label} className="quick-btn" onClick={a.onClick}>
                <div className="icon-square" style={{ background: a.color + '22', color: a.color, border: `1px solid ${a.color}33` }}>
                  <Icon name={a.icon} size={16}/>
                </div>
                {a.label}
              </button>
            ))}
          </div>
        </div>

        {/* Main grid */}
        <div className="dash-grid">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20, minWidth: 0 }}>
            {/* Revenue chart */}
            <div className="widget">
              <div className="widget-head">
                <div>
                  <div className="widget-title">Rendimento vs Despesas</div>
                  <div className="widget-sub">Últimos 6 meses · out/25 – abr/26</div>
                </div>
                <div style={{ display: 'flex', gap: 14, fontSize: 12, color: 'var(--text-2)', flexWrap: 'wrap' }}>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                    <span style={{ width: 10, height: 10, background: 'var(--brand-gradient)', borderRadius: 3 }}/>Receita
                  </span>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                    <span style={{ width: 10, height: 10, background: 'var(--line-3)', borderRadius: 3 }}/>Despesa
                  </span>
                </div>
              </div>
              <RevenueChart/>
            </div>

            {/* Invoices & Projects */}
            <div className="row-2">
              <div className="widget">
                <div className="widget-head">
                  <div>
                    <div className="widget-title">Faturas</div>
                    <div className="widget-sub">Status geral</div>
                  </div>
                  <a className="widget-link">Ver todas <Icon name="chevron" size={12}/></a>
                </div>
                <div className="pill-row">
                  <div className="pill-stat"><div className="lbl">Pagas</div><div className="val" style={{color: '#4ade80'}}>19</div></div>
                  <div className="pill-stat"><div className="lbl">Pendentes</div><div className="val" style={{color: '#fbbf24'}}>16</div></div>
                  <div className="pill-stat"><div className="lbl">Vencidas</div><div className="val" style={{color: '#f87171'}}>2</div></div>
                </div>
                <div style={{ fontSize: 12, color: 'var(--text-3)' }}>
                  Total faturado em abril: <b style={{ color: 'var(--text-0)', fontWeight: 600 }}>{BRL(84290.50)}</b>
                </div>
              </div>

              <div className="widget">
                <div className="widget-head">
                  <div>
                    <div className="widget-title">Projetos</div>
                    <div className="widget-sub">6 ativos</div>
                  </div>
                  <a className="widget-link">Abrir <Icon name="chevron" size={12}/></a>
                </div>
                <div className="pill-row">
                  <div className="pill-stat"><div className="lbl">Completos</div><div className="val">1</div></div>
                  <div className="pill-stat"><div className="lbl">Em progresso</div><div className="val" style={{color: '#a78bfa'}}>3</div></div>
                  <div className="pill-stat"><div className="lbl">Abertos</div><div className="val">2</div></div>
                </div>
                <div style={{ display: 'flex', gap: 8, alignItems: 'center', fontSize: 12, color: 'var(--text-3)' }}>
                  <div style={{ flex: 1, height: 6, background: 'var(--bg-3)', borderRadius: 999, overflow: 'hidden' }}>
                    <div style={{ width: '52%', height: '100%', background: 'var(--brand-gradient)' }}/>
                  </div>
                  <span>52% concluído</span>
                </div>
              </div>
            </div>

            {/* Tickets and RH */}
            <div className="row-2">
              <div className="widget">
                <div className="widget-head">
                  <div>
                    <div className="widget-title">Chamados</div>
                    <div className="widget-sub">Suporte · SLA 96%</div>
                  </div>
                  <span className="chip chip-brand">Hoje</span>
                </div>
                <div className="pill-row">
                  <div className="pill-stat"><div className="lbl">Abertos</div><div className="val">8</div></div>
                  <div className="pill-stat"><div className="lbl">Em andamento</div><div className="val" style={{color: '#60a5fa'}}>4</div></div>
                  <div className="pill-stat"><div className="lbl">Resolvidos</div><div className="val" style={{color: '#4ade80'}}>1</div></div>
                </div>
              </div>
              <div className="widget">
                <div className="widget-head">
                  <div>
                    <div className="widget-title">RH & Folha</div>
                    <div className="widget-sub">Abril/2026</div>
                  </div>
                  <a className="widget-link">Folha <Icon name="chevron" size={12}/></a>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {[
                    ['Funcionários ativos', '17', 'var(--text-0)'],
                    ['Folgas pendentes', '4', '#fbbf24'],
                    ['Comissões do mês', BRL(7500), 'var(--text-0)'],
                  ].map(([l, v, c]) => (
                    <div key={l} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13 }}>
                      <span style={{ color: 'var(--text-2)' }}>{l}</span>
                      <b style={{ color: c, fontWeight: 600 }}>{v}</b>
                    </div>
                  ))}
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, paddingTop: 10, borderTop: '1px solid var(--line-1)' }}>
                    <span style={{ color: 'var(--text-2)' }}>Próxima folha</span>
                    <b style={{ color: '#a78bfa', fontWeight: 600 }}>30/abr</b>
                  </div>
                </div>
              </div>
            </div>

            {/* Expenses & Campaigns */}
            <div className="row-2">
              <div className="widget">
                <div className="widget-head">
                  <div>
                    <div className="widget-title">Despesas recentes</div>
                    <div className="widget-sub">Últimas 4</div>
                  </div>
                  <a className="widget-link">Ver todas</a>
                </div>
                <div>
                  {[
                    { name: 'Energia elétrica — CPFL', cat: 'Operacional', val: 842.30, date: '14/04' },
                    { name: 'Google Workspace', cat: 'Software', val: 186.00, date: '12/04' },
                    { name: 'Combustível — frota', cat: 'Veículos', val: 612.40, date: '10/04' },
                    { name: 'Material de limpeza', cat: 'Insumos', val: 369.00, date: '08/04' },
                  ].map((e, i) => (
                    <div key={i} style={{
                      display: 'flex', alignItems: 'center', gap: 12,
                      padding: '10px 0', borderBottom: i < 3 ? '1px solid var(--line-1)' : 'none'
                    }}>
                      <div style={{ width: 32, height: 32, borderRadius: 8, background: 'var(--bg-3)', display: 'grid', placeItems: 'center', border: '1px solid var(--line-1)' }}>
                        <Icon name="receipt" size={14} color="var(--text-2)"/>
                      </div>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--text-0)' }}>{e.name}</div>
                        <div style={{ fontSize: 11, color: 'var(--text-3)' }}>{e.cat} · {e.date}</div>
                      </div>
                      <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-0)' }}>{BRL(e.val)}</div>
                    </div>
                  ))}
                </div>
              </div>
              <div className="widget">
                <div className="widget-head">
                  <div>
                    <div className="widget-title">Campanhas marketing</div>
                    <div className="widget-sub">3 ativas</div>
                  </div>
                  <a className="widget-link">Ver todas</a>
                </div>
                <div>
                  {[
                    { name: 'Promo Páscoa WhatsApp', ch: 'WhatsApp', reach: '2.841', conv: '12,4%', color: '#25D366' },
                    { name: 'Reengajamento 60d', ch: 'E-mail', reach: '1.204', conv: '8,1%', color: '#60a5fa' },
                    { name: 'SMS — Dia das Mães', ch: 'SMS', reach: '640', conv: '4,9%', color: '#a78bfa' },
                  ].map((c, i) => (
                    <div key={i} style={{ padding: '10px 0', borderBottom: i < 2 ? '1px solid var(--line-1)' : 'none' }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6, gap: 8 }}>
                        <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--text-0)' }}>{c.name}</div>
                        <span className="chip" style={{ background: 'var(--bg-3)' }}>
                          <span style={{ width: 6, height: 6, borderRadius: '50%', background: c.color }}/>{c.ch}
                        </span>
                      </div>
                      <div style={{ display: 'flex', gap: 16, fontSize: 11, color: 'var(--text-3)' }}>
                        <span>Alcance: <b style={{ color: 'var(--text-1)' }}>{c.reach}</b></span>
                        <span>Conversão: <b style={{ color: '#4ade80' }}>{c.conv}</b></span>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>

          {/* Right column */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20, minWidth: 0 }}>
            {/* AI insight — signature widget */}
            <div className="widget" style={{
              background: 'linear-gradient(135deg, #1a1036 0%, #0d1f3d 100%)',
              borderColor: 'rgba(139,92,246,.3)', position: 'relative', overflow: 'hidden',
            }}>
              <div style={{ position: 'absolute', top: -40, right: -40, width: 180, height: 180, background: 'radial-gradient(circle, rgba(139,92,246,.35), transparent 60%)', filter: 'blur(20px)' }}/>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, position: 'relative', zIndex: 1 }}>
                <div style={{ width: 32, height: 32, borderRadius: 8, background: 'var(--brand-gradient)', display: 'grid', placeItems: 'center', boxShadow: '0 4px 12px -2px rgba(99,102,241,.5)' }}>
                  <Icon name="sparkle" size={16} color="white"/>
                </div>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-0)' }}>Insight da IA Claude</div>
                  <div style={{ fontSize: 11, color: 'var(--text-3)' }}>Detectado há 2 min</div>
                </div>
              </div>
              <div style={{ fontSize: 13, color: 'var(--text-1)', lineHeight: 1.6, position: 'relative', zIndex: 1 }}>
                Sua conversão caiu <b style={{ color: '#fca5a5' }}>18%</b> na etapa
                <b> "Proposta → Negociação"</b> nos últimos 14 dias. Três leads acima de {BRL(10000)} estão parados há mais de 7 dias com score de churn alto.
              </div>
              <button className="btn btn-primary" style={{ padding: '9px 14px', fontSize: 13, alignSelf: 'flex-start', position: 'relative', zIndex: 1 }} onClick={() => onNavigate('crm')}>
                Revisar leads <Icon name="arrowRight" size={13}/>
              </button>
            </div>

            {/* Terminal system status widget */}
            <TerminalWidget style={{ fontSize: 12 }} lines={[
              { type: 'cmd', text: 'automatiza ~status' },
              { type: 'ok', label: 'crm', text: '28 leads ativos' },
              { type: 'ok', label: 'financeiro', text: 'fluxo +12,4%' },
              { type: 'ok', label: 'rh', text: '17 CLT ativos' },
              { type: 'warn', label: 'faturas', text: '2 vencidas · R$ 5.850' },
              { type: 'ok', label: 'ia', text: 'claude online' },
              { type: 'prompt', text: '' },
            ]}/>

            {/* Next events */}
            <div className="widget">
              <div className="widget-head">
                <div>
                  <div className="widget-title">Próximos eventos</div>
                  <div className="widget-sub">Hoje e amanhã</div>
                </div>
                <a className="widget-link">Agenda</a>
              </div>
              <div>
                {[
                  { time: '14h00', name: 'Reunião — Padaria São João', type: 'Cliente', color: '#a78bfa' },
                  { time: '16h30', name: 'Assinatura contrato Vila Nova', type: 'Jurídico', color: '#60a5fa' },
                  { time: '19h00', name: 'Fechamento de caixa', type: 'Financeiro', color: '#4ade80' },
                  { time: 'Dom 10h', name: 'Folha de abril — prévia', type: 'RH', color: '#f472b6' },
                ].map((e, i) => (
                  <div key={i} style={{ display: 'flex', gap: 12, padding: '10px 0', borderBottom: i < 3 ? '1px solid var(--line-1)' : 'none' }}>
                    <div style={{ width: 4, borderRadius: 2, background: e.color, flexShrink: 0 }}/>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--text-0)' }}>{e.name}</div>
                      <div style={{ fontSize: 11, color: 'var(--text-3)' }}>{e.type}</div>
                    </div>
                    <div style={{ fontSize: 12, color: 'var(--text-2)', fontWeight: 500 }}>{e.time}</div>
                  </div>
                ))}
              </div>
            </div>

            {/* Team */}
            <div className="widget">
              <div className="widget-head">
                <div>
                  <div className="widget-title">Equipe online</div>
                  <div className="widget-sub">5 de 17 ativos agora</div>
                </div>
              </div>
              <div>
                {[
                  { name: 'Camila Rocha', role: 'Vendas', status: 'online' },
                  { name: 'Bruno Tavares', role: 'Financeiro', status: 'online' },
                  { name: 'Lívia Mendes', role: 'Suporte', status: 'busy' },
                  { name: 'João Pedro', role: 'Marketing', status: 'away' },
                  { name: 'Thaís Lima', role: 'RH', status: 'online' },
                ].map((t, i) => (
                  <div key={i} className="team-row">
                    <div style={{ position: 'relative' }}>
                      <Avatar name={t.name} size={32}/>
                      <span style={{
                        position: 'absolute', bottom: 0, right: 0,
                        width: 10, height: 10, borderRadius: '50%',
                        background: t.status === 'online' ? '#22c55e' : t.status === 'busy' ? '#ef4444' : '#f59e0b',
                        border: '2px solid var(--bg-2)',
                      }}/>
                    </div>
                    <div style={{ flex: 1 }}>
                      <div className="team-name">{t.name}</div>
                      <div className="team-role">{t.role}</div>
                    </div>
                    <button className="shell-top-btn" style={{ width: 30, height: 30 }} title="WhatsApp">
                      <Icon name="whatsapp" size={13} color="#25D366"/>
                    </button>
                  </div>
                ))}
              </div>
            </div>

            {/* Activity timeline */}
            <div className="widget">
              <div className="widget-head">
                <div>
                  <div className="widget-title">Atividades</div>
                  <div className="widget-sub">Timeline</div>
                </div>
              </div>
              <div>
                {[
                  { dot: '#22c55e', text: <><b>Camila</b> fechou lead <b>Hamburgueria 22</b> por {BRL(12400)}</>, time: 'há 12 min' },
                  { dot: '#a78bfa', text: <><b>NF-e 0124</b> emitida para Restaurante do Zé</>, time: 'há 38 min' },
                  { dot: '#60a5fa', text: <><b>PIX</b> recebido de Vila Nova Comércio</>, time: 'há 1h' },
                  { dot: '#f472b6', text: <><b>Campanha</b> Reengajamento 60d iniciada</>, time: 'há 2h' },
                  { dot: '#fbbf24', text: <><b>IA</b> detectou anomalia em despesas operacionais</>, time: 'há 3h' },
                ].map((a, i) => (
                  <div key={i} className="activity-item">
                    <div className="activity-dot" style={{ background: a.dot, boxShadow: `0 0 10px ${a.dot}66` }}/>
                    <div className="activity-body">
                      <div className="activity-text">{a.text}</div>
                      <div className="activity-time">{a.time}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        <div style={{ fontSize: 11, color: 'var(--text-4)', textAlign: 'center', padding: '8px 0 24px' }}>
          Automatiza v4.2.1 · Uptime 99,97% · Sincronizado às 21:14
        </div>
      </div>
    </AppShell>
  );
};

// KPI component with colored icon square (matches screenshot exactly)
const KpiCard = ({ icon, color, value, label, alert }) => (
  <div className={`dash-kpi ${alert ? 'alert' : ''}`}>
    <div className="dash-kpi-icon" style={{
      background: `linear-gradient(135deg, ${color}30, ${color}15)`,
      color: color,
      border: `1px solid ${color}30`,
    }}>
      <Icon name={icon} size={20}/>
    </div>
    <div className="dash-kpi-body">
      <div className="dash-kpi-value">{value}</div>
      <div className="dash-kpi-label">{label}</div>
    </div>
  </div>
);

const RevenueChart = () => {
  const data = [
    { m: 'Out', r: 42000, d: 28000 },
    { m: 'Nov', r: 58000, d: 34000 },
    { m: 'Dez', r: 71000, d: 42000 },
    { m: 'Jan', r: 65000, d: 38000 },
    { m: 'Fev', r: 78000, d: 45000 },
    { m: 'Mar', r: 84290, d: 52000 },
  ];
  const max = 90000;
  return (
    <div style={{ position: 'relative', paddingBottom: 24 }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 18, height: 200, padding: '0 8px' }}>
        {data.map((d, i) => (
          <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
            <div style={{ width: '100%', display: 'flex', justifyContent: 'center', gap: 3, height: '100%', alignItems: 'flex-end' }}>
              <div style={{
                width: '34%', height: `${(d.r/max)*100}%`,
                background: 'var(--brand-gradient)',
                borderRadius: '4px 4px 0 0',
                position: 'relative',
                boxShadow: '0 0 12px rgba(139,92,246,.3)',
              }}>
                {i === 5 && (
                  <div style={{
                    position: 'absolute', top: -24, left: '50%', transform: 'translateX(-50%)',
                    fontSize: 10, fontWeight: 600, color: '#c4b5fd', whiteSpace: 'nowrap',
                  }}>{BRLShort(d.r)}</div>
                )}
              </div>
              <div style={{
                width: '34%', height: `${(d.d/max)*100}%`,
                background: 'var(--bg-4)', borderRadius: '4px 4px 0 0',
              }}/>
            </div>
          </div>
        ))}
      </div>
      <div style={{ display: 'flex', gap: 18, padding: '8px 8px 0', borderTop: '1px solid var(--line-1)' }}>
        {data.map((d, i) => (
          <div key={i} style={{ flex: 1, textAlign: 'center', fontSize: 11, color: 'var(--text-3)' }}>{d.m}</div>
        ))}
      </div>
    </div>
  );
};

Object.assign(window, { Dashboard });