// Telas cheias do app para a vitrine da landing. Reaproveitam os blocos e o
// DASH definidos em dashboard.jsx, e o BrowserChrome do hero.

function MonthPickerCard() {
  const months = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'];
  const activeMonth = 'Ago';
  return (
    <MiniCard>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
        <span style={{ color: 'var(--ink-4)', fontSize: 13, fontWeight: 700 }}>‹</span>
        <span style={{ fontWeight: 700, fontSize: 12 }}>2026</span>
        <span style={{ color: 'var(--ink-4)', fontSize: 13, fontWeight: 700 }}>›</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 4 }}>
        {months.map((m, i) => {
          const on = m === activeMonth;
          return (
            <div key={m} style={{
              padding: '6px 0', textAlign: 'center', borderRadius: 6,
              fontSize: 9.5, fontWeight: on ? 600 : 500,
              background: on ? 'var(--purple)' : 'transparent',
              color: on ? 'white' : (i > 7 ? 'var(--ink-5)' : 'var(--ink-2)'),
            }}>{m}</div>
          );
        })}
      </div>
    </MiniCard>
  );
}

function HistoricoScreen() {
  return (
    <ScreenShell active="Histórico">
      <Col>
        <MonthPickerCard />
        <FaturaCard />
        <GastosPorDiaCard />
        <ResumoCard title="Resumo — Agosto de 2026" />
        <SplitCard />
      </Col>
      <Col>
        <ReceitasCard />
        <GastosNoMesCard />
      </Col>
      <Col>
        <RecorrentesCard />
        <ParceladasCard />
      </Col>
    </ScreenShell>
  );
}

/* ── Tela: Economias ── */
const ECON = {
  guardado: 'R$ 2.115,00',
  investido: 'R$ 13.766,79',
  patrimonio: 'R$ 15.881,79',
  mercado: [
    { l: 'SELIC', v: '14,0%' }, { l: 'CDI', v: '13,9%' }, { l: 'IPCA', v: '4,4%' },
    { l: 'POUPANÇA', v: '8,4%' }, { l: 'ROT. CARTÃO', v: '12,2%' },
    { l: 'USD', v: 'R$ 5,20' }, { l: 'EUR', v: 'R$ 6,05' },
    { l: 'BTC', v: 'R$ 338k', up: '2,02%' }, { l: 'ETH', v: 'R$ 9.978', up: '1,05%' },
  ],
  metas: [
    { nome: 'Bicicleta Nova', glyph: 'directions_bike', alvo: 'R$ 6.900,00', guardado: 'R$ 1.725,00', pct: 25, prazo: 'abr. de 2027', sugestao: 'R$ 646,88' },
    { nome: 'Novo Celular', glyph: 'smartphone', alvo: 'R$ 3.900,00', guardado: 'R$ 390,00', pct: 10, prazo: 'ago. de 2027', sugestao: 'R$ 292,50' },
  ],
  cdi: '13,90%', ipca: '4,44%',
  investimentos: [
    { nome: 'Conta Capital Sicoob', glyph: 'account_balance', taxa: '13% a.a.', tint: 'var(--green-tint)', iconColor: 'var(--green-deep)', saldo: 'R$ 12.748,71', proj: 'R$ 14.406,04', ganho: '+R$ 1.657,33', btn: 'var(--green)' },
    { nome: 'Plano Familiar', glyph: 'target', taxa: '115% do CDI', tint: '#DBEAFE', iconColor: SPLIT_BLUE, saldo: 'R$ 512,82', proj: 'R$ 594,79', ganho: '+R$ 81,97', btn: SPLIT_BLUE },
    { nome: 'Poupança filha', glyph: 'savings', taxa: '100% do CDI', tint: '#FCE7F3', iconColor: '#EC4899', saldo: 'R$ 505,26', proj: 'R$ 575,49', ganho: '+R$ 70,23', btn: '#EC4899' },
  ],
  calc: { capital: '10.000', aporte: '500', periodo: '60', taxa: '10', invest: 'R$ 40.000,00', rend: 'R$ 14.386,00', total: 'R$ 54.386,00' },
};

function CircleIcon({ glyph, tint, color, size = 26 }) {
  return (
    <span style={{ width: size, height: size, borderRadius: '50%', background: tint, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
      <MatGlyph name={glyph} size={Math.round(size * 0.5)} color={color} />
    </span>
  );
}

function StatBig({ label, value, color }) {
  return (
    <MiniCard>
      <div style={{ textAlign: 'center' }}>
        <div style={{ fontSize: 8.5, color: 'var(--ink-4)', textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 700 }}>{label}</div>
        <div className="mono" style={{ fontSize: 15, fontWeight: 700, color, marginTop: 4 }}>{value}</div>
      </div>
    </MiniCard>
  );
}

function CalcInput({ label, value, hint }) {
  return (
    <div style={{ flex: 1, minWidth: 0 }}>
      <div style={{ fontSize: 8, color: 'var(--ink-4)', marginBottom: 2 }}>{label}</div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', background: 'white', border: '1px solid var(--line)', borderRadius: 5, padding: '5px 8px', fontSize: 10, fontWeight: 600 }}>
        <span>{value}</span>
        {hint && <span style={{ fontSize: 8, color: 'var(--purple)', fontWeight: 600 }}>{hint}</span>}
      </div>
    </div>
  );
}

function EconomiasScreen() {
  return (
    <div style={{ background: 'var(--bg)', padding: 16, display: 'grid', gridTemplateColumns: '168px 1fr', gap: 12, minHeight: 480, fontSize: 11 }}>
      <DashSidebar active="Economias" />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {/* Cards de topo */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
          <StatBig label="Guardado" value={ECON.guardado} color="var(--purple)" />
          <StatBig label="Investido" value={ECON.investido} color="var(--green)" />
          <StatBig label="Patrimônio" value={ECON.patrimonio} color="var(--green)" />
        </div>

        {/* Faixa de mercado */}
        <MiniCard>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6 }}>
            <MatGlyph name="bar_chart" size={12} color="var(--purple)" />
            <span style={{ fontSize: 8.5, fontWeight: 700, color: 'var(--ink-4)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Mercado</span>
            <span style={{ marginLeft: 'auto', fontSize: 8, color: 'var(--ink-4)' }}>Atualizado às 12:21</span>
          </div>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            {ECON.mercado.map(m => (
              <div key={m.l} style={{ background: 'var(--bg-soft)', borderRadius: 6, padding: '5px 8px', minWidth: 50 }}>
                <div style={{ fontSize: 7.5, color: 'var(--ink-4)', fontWeight: 600 }}>{m.l}</div>
                <div style={{ fontSize: 10, fontWeight: 700 }}>{m.v}{m.up && <span style={{ color: 'var(--green-deep)', fontSize: 7.5, marginLeft: 2 }}>▲{m.up}</span>}</div>
              </div>
            ))}
          </div>
        </MiniCard>

        {/* 3 colunas */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, alignItems: 'start' }}>
          {/* Metas */}
          <MiniCard>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}><MatGlyph name="flag" size={12} color="var(--purple)" /><CardLabel>Metas de Economia</CardLabel></div>
              <span style={{ fontSize: 9, color: 'var(--purple)', fontWeight: 600 }}>+ Nova</span>
            </div>
            {ECON.metas.map((m, idx) => (
              <div key={idx} style={{ border: '1px solid var(--line)', borderRadius: 8, padding: 8, marginBottom: idx < ECON.metas.length - 1 ? 8 : 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
                  <CircleIcon glyph={m.glyph} tint="var(--purple-tint)" color="var(--purple)" />
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 11, fontWeight: 700 }}>{m.nome}</div>
                    <div style={{ fontSize: 8, color: 'var(--ink-4)' }}>{m.guardado} de {m.alvo} · até {m.prazo}</div>
                  </div>
                </div>
                <div style={{ height: 4, borderRadius: 2, background: 'var(--bg-soft)', margin: '6px 0', overflow: 'hidden' }}>
                  <div style={{ height: '100%', width: `${m.pct}%`, background: 'var(--purple)' }} />
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 8, color: 'var(--ink-4)', marginBottom: 6 }}>
                  <span>{m.pct}% alcançado</span><span>Sugestão: {m.sugestao}/mês</span>
                </div>
                <div style={{ display: 'flex', gap: 6 }}>
                  <div style={{ flex: 1, background: 'var(--green)', color: 'white', borderRadius: 5, padding: '5px 0', textAlign: 'center', fontSize: 9.5, fontWeight: 600 }}>+ Aporte</div>
                  <div style={{ background: 'var(--bg-soft)', borderRadius: 5, padding: '5px 8px', fontSize: 9.5, color: 'var(--ink-3)' }}>▾ 0</div>
                </div>
              </div>
            ))}
          </MiniCard>

          {/* Investimentos */}
          <MiniCard>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}><MatGlyph name="trending_up" size={12} color="var(--purple)" /><CardLabel>Investimentos</CardLabel></div>
              <span style={{ fontSize: 9, color: 'var(--purple)', fontWeight: 600 }}>+ Novo</span>
            </div>
            <div style={{ display: 'flex', gap: 12, marginBottom: 8 }}>
              <span style={{ fontSize: 9 }}><span style={{ color: 'var(--ink-4)' }}>CDI </span><strong style={{ color: 'var(--purple)' }}>{ECON.cdi} a.a.</strong></span>
              <span style={{ fontSize: 9 }}><span style={{ color: 'var(--ink-4)' }}>IPCA </span><strong style={{ color: 'var(--orange)' }}>{ECON.ipca} a.a.</strong></span>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {ECON.investimentos.map((inv, idx) => (
                <div key={idx} style={{ border: '1px solid var(--line)', borderRadius: 8, padding: 8 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
                    <CircleIcon glyph={inv.glyph} tint={inv.tint} color={inv.iconColor} />
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 10.5, fontWeight: 700, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{inv.nome}</div>
                      <div style={{ fontSize: 8, color: 'var(--ink-4)' }}>{inv.taxa}</div>
                    </div>
                  </div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
                    <div>
                      <div style={{ fontSize: 8, color: 'var(--ink-4)' }}>Saldo atual</div>
                      <div className="mono" style={{ fontSize: 11, fontWeight: 700 }}>{inv.saldo}</div>
                    </div>
                    <div style={{ textAlign: 'right' }}>
                      <div style={{ fontSize: 8, color: 'var(--ink-4)' }}>Projeção 12 meses</div>
                      <div className="mono" style={{ fontSize: 11, fontWeight: 700, color: 'var(--green)' }}>{inv.proj}</div>
                      <div className="mono" style={{ fontSize: 8, color: 'var(--green)' }}>{inv.ganho}</div>
                    </div>
                  </div>
                  <div style={{ background: inv.btn, color: 'white', borderRadius: 5, padding: '5px 0', textAlign: 'center', fontSize: 9.5, fontWeight: 600 }}>Atualizar saldo</div>
                </div>
              ))}
            </div>
          </MiniCard>

          {/* Calculadora */}
          <MiniCard>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}><MatGlyph name="calculate" size={12} color="var(--purple)" /><CardLabel>Calculadora de Juros Compostos</CardLabel></div>
            <div style={{ display: 'flex', gap: 6, marginBottom: 6 }}>
              <CalcInput label="Capital inicial (R$)" value={ECON.calc.capital} />
              <CalcInput label="Aporte mensal (R$)" value={ECON.calc.aporte} />
            </div>
            <div style={{ marginBottom: 6 }}><CalcInput label="Período (meses)" value={ECON.calc.periodo} /></div>
            <div style={{ marginBottom: 4 }}><CalcInput label="Taxa de rendimento" value={ECON.calc.taxa + '  % a.a.'} hint="Usar CDI" /></div>
            <div style={{ fontSize: 8, color: 'var(--ink-4)', marginBottom: 8 }}>Efetiva: 10,00% a.a. · 0,7974% a.m.</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6, marginBottom: 8 }}>
              {[
                { l: 'Investido', v: ECON.calc.invest, c: 'var(--ink)' },
                { l: 'Rendimento', v: ECON.calc.rend, c: 'var(--green)' },
                { l: 'Total final', v: ECON.calc.total, c: 'var(--purple)' },
              ].map(s => (
                <div key={s.l} style={{ background: 'var(--bg-soft)', borderRadius: 6, padding: '6px 4px', textAlign: 'center' }}>
                  <div style={{ fontSize: 7.5, color: 'var(--ink-4)', textTransform: 'uppercase', fontWeight: 600 }}>{s.l}</div>
                  <div className="mono" style={{ fontSize: 9.5, fontWeight: 700, color: s.c }}>{s.v}</div>
                </div>
              ))}
            </div>
            <div style={{ fontSize: 8, color: 'var(--ink-4)', textTransform: 'uppercase', fontWeight: 700, marginBottom: 4 }}>Evolução do patrimônio</div>
            <svg viewBox="0 0 200 64" style={{ width: '100%', height: 56, display: 'block' }}>
              <defs>
                <linearGradient id="econGrad" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="var(--purple)" stopOpacity="0.22" />
                  <stop offset="100%" stopColor="var(--purple)" stopOpacity="0" />
                </linearGradient>
              </defs>
              <path d="M0,54 C40,50 80,42 120,28 C150,18 180,10 200,6 L200,64 L0,64 Z" fill="url(#econGrad)" />
              <path d="M0,54 C40,50 80,42 120,28 C150,18 180,10 200,6" fill="none" stroke="var(--purple)" strokeWidth="1.6" />
              <path d="M0,56 L200,40" fill="none" stroke={SPLIT_BLUE} strokeWidth="1.2" strokeDasharray="3 3" />
            </svg>
          </MiniCard>
        </div>
      </div>
    </div>
  );
}

/* ── Tela: Importar Dados (conferência) ── */
const IMPORTS = [
  { l: 'Supermercado Extra', d: '08/02/2026', cat: 'Supermercado', ci: 'Cart', v: 'R$ 238,45' },
  { l: 'Farmácia Drogasil', d: '08/05/2026', cat: 'Saúde', ci: 'Heart', v: 'R$ 63,20' },
  { l: 'Amazon', d: '08/10/2026', cat: 'Compras variadas', ci: 'Receipt', v: 'R$ 129,90' },
  { l: 'Restaurante Madero', d: '08/12/2026', cat: 'Alimentação', ci: 'Coffee', v: 'R$ 187,60' },
  { l: 'Spotify', d: '14/08/2026', cat: 'Assinaturas', ci: 'Card', v: 'R$ 21,90' },
];

function ImportarScreen() {
  return (
    <div style={{ background: 'var(--bg)', padding: 16, display: 'grid', gridTemplateColumns: '168px 1fr', gap: 12, minHeight: 480, fontSize: 11 }}>
      <DashSidebar active="Importar Dados" />
      <div style={{ maxWidth: 640, margin: '0 auto', width: '100%' }}>
        <h3 style={{ fontSize: 20, fontWeight: 800, color: 'var(--ink)', lineHeight: 1.2, marginBottom: 6 }}>Transforme seus arquivos em registros organizados.</h3>
        <p style={{ fontSize: 10.5, color: 'var(--ink-3)', lineHeight: 1.5, marginBottom: 12 }}>
          Importe faturas, extratos ou planilhas — a IA lê o documento e o Econome confere cada lançamento com o que você já tem, sem duplicar.
        </p>

        <div style={{ background: 'var(--purple-tint)', borderRadius: 8, padding: '8px 10px', display: 'flex', alignItems: 'center', gap: 7, marginBottom: 10 }}>
          <MatGlyph name="auto_awesome" size={13} color="var(--purple)" />
          <div>
            <div style={{ fontSize: 8, color: 'var(--ink-4)' }}>Formato detectado</div>
            <div style={{ fontSize: 10, fontWeight: 700, color: 'var(--purple)' }}>Lista de transações (CSV com Data, Descrição, Valor)</div>
          </div>
        </div>

        <MiniCard>
          <div style={{ fontSize: 8.5, color: 'var(--ink-4)', marginBottom: 6 }}>Tipo de documento</div>
          <div style={{ display: 'flex', gap: 6 }}>
            <div style={{ flex: 1, textAlign: 'center', padding: '6px 0', borderRadius: 6, fontSize: 10, fontWeight: 600, background: 'var(--bg-soft)', color: 'var(--ink-3)' }}>Fatura de cartão</div>
            <div style={{ flex: 1, textAlign: 'center', padding: '6px 0', borderRadius: 6, fontSize: 10, fontWeight: 600, background: 'var(--purple)', color: 'white' }}>Extrato / planilha</div>
          </div>
        </MiniCard>

        <div style={{ height: 10 }} />
        <MiniCard>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <span style={{ fontSize: 11, fontWeight: 700 }}>15 lançamentos lidos</span>
            <span className="mono" style={{ fontSize: 12, fontWeight: 700, color: 'var(--red)' }}>R$ 1.127,60</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 8.5, color: 'var(--ink-4)', marginTop: 2 }}>
            <span>Revise os itens — cada um pode ser incluído/excluído e ter a categoria ajustada.</span>
            <span>9 selecionados</span>
          </div>
        </MiniCard>

        <div style={{ height: 10 }} />
        <MiniCard>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
            <IconChip name="Receipt" />
            <span style={{ fontSize: 10.5, fontWeight: 700 }}>Novos lançamentos</span>
            <span style={{ marginLeft: 'auto', fontSize: 8.5, color: 'var(--ink-4)' }}>9 de 9 selecionados · R$ 1.127,60</span>
          </div>
          {IMPORTS.map((it, idx) => (
            <div key={idx} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 0', borderTop: idx ? '1px solid var(--line-soft)' : 'none' }}>
              <span style={{ width: 15, height: 15, borderRadius: 4, background: 'var(--purple)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <MatGlyph name="check" size={11} color="white" />
              </span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 10.5, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{it.l}</div>
                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 5, marginTop: 3, background: 'var(--bg-soft)', borderRadius: 5, padding: '2px 7px' }}>
                  <IconChip name={it.ci} />
                  <span style={{ fontSize: 9, color: 'var(--ink-2)', fontWeight: 500 }}>{it.cat}</span>
                  <MatGlyph name="expand_more" size={12} color="var(--ink-4)" />
                </div>
              </div>
              <span className="mono" style={{ fontSize: 10.5, fontWeight: 700, color: 'var(--red)' }}>{it.v}</span>
            </div>
          ))}
        </MiniCard>

        <div style={{ height: 10 }} />
        <div style={{ display: 'flex', alignItems: 'center', gap: 7, background: 'var(--bg-elevated)', border: '1px solid var(--line)', borderRadius: 10, padding: 10 }}>
          <MatGlyph name="check" size={13} color="var(--ink-4)" />
          <span style={{ fontSize: 10, fontWeight: 600, color: 'var(--ink-3)' }}>Já registrados</span>
          <span style={{ fontSize: 8.5, color: 'var(--ink-4)' }}>0 de 6 selecionados</span>
          <MatGlyph name="expand_more" size={13} color="var(--ink-4)" />
        </div>

        <div style={{ height: 10 }} />
        <div style={{ display: 'flex', gap: 8 }}>
          <div style={{ flex: 1, textAlign: 'center', padding: '9px 0', borderRadius: 8, background: 'var(--bg-soft)', color: 'var(--ink-3)', fontSize: 11, fontWeight: 600 }}>Cancelar</div>
          <div style={{ flex: 2, textAlign: 'center', padding: '9px 0', borderRadius: 8, background: '#50D080', color: 'white', fontSize: 11, fontWeight: 700 }}>Confirmar 9 lançamentos</div>
        </div>
      </div>
    </div>
  );
}

/* ── Tela: Conta / Família ── */
const CONTA = {
  receitas: 'R$ 217.076,77',
  despesas: 'R$ 148.216,96',
  acoes: [
    { g: 'person', l: 'Editar perfil' },
    { g: 'lock', l: 'Segurança — criar PIN' },
    { g: 'cleaning_services', l: 'Limpar lançamentos duplicados' },
    { g: 'explore', l: 'Rever tour de introdução' },
  ],
  membros: [
    { ini: 'DG', nome: 'Daniel Gomes de Souza (você)', badge: 'Admin', badgeBg: 'var(--purple-tint)', badgeColor: 'var(--purple)', sub: null },
    { ini: 'ÁV', nome: 'Áurea Vitória Silva de Souza', badge: 'Membro', badgeBg: 'var(--bg-soft)', badgeColor: 'var(--ink-3)', sub: 'somente mês atual' },
  ],
};

function ContaRow({ glyph, label }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'var(--bg-elevated)', border: '1px solid var(--line)', borderRadius: 10, padding: '10px 12px' }}>
      <CircleIcon glyph={glyph} tint="var(--purple-tint)" color="var(--purple)" size={24} />
      <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--ink)', flex: 1 }}>{label}</span>
      <MatGlyph name="chevron_right" size={14} color="var(--ink-4)" />
    </div>
  );
}

function ContaScreen() {
  return (
    <div style={{ background: 'var(--bg)', padding: 16, display: 'grid', gridTemplateColumns: '168px 1fr', gap: 12, minHeight: 480, fontSize: 11 }}>
      <DashSidebar active="Minha conta" />
      <div style={{ maxWidth: 720, margin: '0 auto', width: '100%', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {/* Totais */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          <div style={{ background: 'var(--green-tint)', borderRadius: 10, padding: '12px 14px', textAlign: 'center' }}>
            <div style={{ fontSize: 9, color: 'var(--ink-4)', fontWeight: 600 }}>Total receitas</div>
            <div className="mono" style={{ fontSize: 15, fontWeight: 700, color: 'var(--green-deep)', marginTop: 2 }}>{CONTA.receitas}</div>
          </div>
          <div style={{ background: '#FDECEC', borderRadius: 10, padding: '12px 14px', textAlign: 'center' }}>
            <div style={{ fontSize: 9, color: 'var(--ink-4)', fontWeight: 600 }}>Total despesas</div>
            <div className="mono" style={{ fontSize: 15, fontWeight: 700, color: 'var(--red)', marginTop: 2 }}>{CONTA.despesas}</div>
          </div>
        </div>

        {/* Instalar */}
        <MiniCard>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
            <CircleIcon glyph="install_mobile" tint="var(--purple-tint)" color="var(--purple)" size={26} />
            <div>
              <div style={{ fontSize: 11.5, fontWeight: 700 }}>Instalar o Econome</div>
              <div style={{ fontSize: 8.5, color: 'var(--ink-4)' }}>Tenha o app na tela inicial — abre rápido, em tela cheia e sem a barra do navegador.</div>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
            {['Abra o menu do navegador (canto superior).', 'Toque em "Instalar Econome" ou "Adicionar à tela inicial".'].map((s, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 7, fontSize: 9.5, color: 'var(--ink-2)' }}>
                <span style={{ width: 15, height: 15, borderRadius: '50%', background: 'var(--purple-tint)', color: 'var(--purple)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 8, fontWeight: 700, flexShrink: 0 }}>{i + 1}</span>
                {s}
              </div>
            ))}
          </div>
        </MiniCard>

        {/* Ações */}
        {CONTA.acoes.map(a => <ContaRow key={a.l} glyph={a.g} label={a.l} />)}

        {/* Família */}
        <MiniCard>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
            <div>
              <div style={{ fontSize: 11.5, fontWeight: 700 }}>Família</div>
              <div style={{ fontSize: 8.5, color: 'var(--ink-4)' }}>2 de 4 membros</div>
            </div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 5, background: 'var(--purple)', color: 'white', borderRadius: 6, padding: '5px 10px', fontSize: 9.5, fontWeight: 600 }}>
              <MatGlyph name="person_add" size={12} color="white" /> Convidar
            </div>
          </div>
          {CONTA.membros.map((m, idx) => (
            <div key={idx} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '7px 0', borderTop: idx ? '1px solid var(--line-soft)' : 'none' }}>
              <span style={{ width: 24, height: 24, borderRadius: '50%', background: 'var(--purple-soft)', color: 'var(--purple)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 9, fontWeight: 700, flexShrink: 0 }}>{m.ini}</span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 10.5, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.nome}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 2 }}>
                  <span style={{ fontSize: 8, fontWeight: 700, background: m.badgeBg, color: m.badgeColor, borderRadius: 4, padding: '1px 6px' }}>{m.badge}</span>
                  {m.sub && <span style={{ fontSize: 8, color: 'var(--ink-4)' }}>{m.sub}</span>}
                </div>
              </div>
            </div>
          ))}
        </MiniCard>

        {/* Plano */}
        <MiniCard>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
            <CircleIcon glyph="check_circle" tint="var(--green-tint)" color="var(--green-deep)" size={26} />
            <div>
              <div style={{ fontSize: 11.5, fontWeight: 700, color: 'var(--green-deep)' }}>Plano Anual ativo</div>
              <div style={{ fontSize: 8.5, color: 'var(--ink-4)' }}>Acesso completo ativo</div>
            </div>
          </div>
          <div style={{ textAlign: 'center', border: '1px solid var(--line)', borderRadius: 8, padding: '8px 0', fontSize: 10.5, fontWeight: 600, color: 'var(--ink-2)' }}>Gerenciar assinatura</div>
          <div style={{ textAlign: 'center', fontSize: 9.5, color: 'var(--ink-4)', marginTop: 8 }}>Ver detalhes do plano</div>
        </MiniCard>

        <div style={{ textAlign: 'center', background: 'var(--bg-soft)', borderRadius: 10, padding: '10px 0', fontSize: 11, fontWeight: 600, color: 'var(--ink-3)' }}>Sair da conta</div>
      </div>
    </div>
  );
}

/* ── Tela: Análises (curada) ── */
const ANALISE = {
  composicao: [
    { l: 'Recorrentes', v: 'R$ 15.377,57', pct: 56, color: 'var(--purple)' },
    { l: 'Gastos do Mês', v: 'R$ 8.956,35', pct: 33, color: SPLIT_BLUE },
    { l: 'Parceladas', v: 'R$ 2.942,67', pct: 11, color: SPLIT_CYAN },
  ],
  formaPagamento: [
    { l: 'Crédito', pct: 56, v: 'R$ 15.167,13', color: 'var(--purple)' },
    { l: 'PIX', pct: 42, v: 'R$ 11.436,07', color: SPLIT_CYAN },
    { l: 'Débito', pct: 2, v: 'R$ 673,39', color: SPLIT_BLUE },
  ],
  evolucao: [
    { m: 'Mar', rec: 11, parc: 2, gas: 9, receita: 31 },
    { m: 'Abr', rec: 12, parc: 3, gas: 8, receita: 28 },
    { m: 'Mai', rec: 13, parc: 2, gas: 9, receita: 33 },
    { m: 'Jun', rec: 14, parc: 3, gas: 10, receita: 37 },
    { m: 'Jul', rec: 12, parc: 2, gas: 9, receita: 31 },
    { m: 'Ago', rec: 15, parc: 3, gas: 9, receita: 29 },
  ],
  sobrou: [
    { m: 'Mar', v: -3 }, { m: 'Abr', v: 22 }, { m: 'Mai', v: 6 },
    { m: 'Jun', v: -4 }, { m: 'Jul', v: -2 }, { m: 'Ago', v: 27 },
  ],
  credito: { gasto: 'R$ 4.158,20', receitas: 'R$ 37.207,86', pct: 11 },
  categorias: [
    { l: 'Supermercado', v: 'R$ 4.499,26', delta: '▼ R$ 616,07 (-12%)', kind: 'down', pct: 100 },
    { l: 'Alimentação', v: 'R$ 1.056,56', delta: '▼ R$ 906,29 (-46%)', kind: 'down', pct: 24 },
    { l: 'Saúde', v: 'R$ 688,18', delta: '▼ R$ 366,65 (-35%)', kind: 'down', pct: 16 },
    { l: 'Despesas Domésticas', v: 'R$ 680,00', delta: '▲ R$ 669,00 (+6082%)', kind: 'up', pct: 15 },
    { l: 'Despesas de Trabalho', v: 'R$ 401,33', delta: '▼ R$ 1.011,67 (-72%)', kind: 'down', pct: 9 },
    { l: 'Vestuário', v: 'R$ 385,61', delta: 'novo', kind: 'new', pct: 9 },
  ],
  tags: [
    { l: 'Carone', n: 3, v: 'R$ 2.598,08', pct: 100 },
    { l: 'iFood', n: 6, v: 'R$ 899,37', pct: 35 },
    { l: 'Cibien', n: 12, v: 'R$ 599,20', pct: 23 },
    { l: 'Tutti Frutti Supermercado', n: 8, v: 'R$ 582,30', pct: 22 },
    { l: 'GoDaddy', n: 3, v: 'R$ 401,33', pct: 15 },
    { l: 'Whey Protein e afins', n: 1, v: 'R$ 275,00', pct: 11 },
  ],
  saldoAcum: [-5, 13, 14, 13, 11, 12, 9, 8, 6, 5, 6, 4, 3, 2, 3, 2, 4],
  evolCategoria: [18, 6.5, 5, 5.2, 6, 4.8],
  gastosCredito: [25, 9, 10, 20, 15, 9],
};

function Donut({ segs, size = 74 }) {
  let acc = 0;
  return (
    <svg viewBox="0 0 42 42" style={{ width: size, height: size, flexShrink: 0 }}>
      <circle cx="21" cy="21" r="15.915" fill="none" stroke="var(--bg-soft)" strokeWidth="5" />
      {segs.map((s, i) => {
        const off = 25 - acc; acc += s.pct;
        return <circle key={i} cx="21" cy="21" r="15.915" fill="none" stroke={s.color} strokeWidth="5" strokeDasharray={`${s.pct} ${100 - s.pct}`} strokeDashoffset={off} strokeLinecap="round" />;
      })}
    </svg>
  );
}

function ChartCard({ title, badge, children }) {
  return (
    <MiniCard>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
        <CardLabel>{title}</CardLabel>
        {badge && <span style={{ fontSize: 8, fontWeight: 600, color: 'var(--purple)', background: 'var(--purple-tint)', borderRadius: 999, padding: '2px 7px' }}>{badge}</span>}
      </div>
      {children}
    </MiniCard>
  );
}

function AnaliseScreen() {
  const kEvo = 1.4, baseEvo = 64;
  const deltaBg = { down: 'var(--green-tint)', up: '#FDECEC', new: 'var(--bg-soft)' };
  const deltaFg = { down: 'var(--green-deep)', up: 'var(--red)', new: 'var(--ink-4)' };
  const meses = ['Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago'];
  return (
    <div style={{ background: 'var(--bg)', padding: 16, display: 'grid', gridTemplateColumns: '168px 1fr', gap: 12, minHeight: 480, fontSize: 11 }}>
      <DashSidebar active="Análises" />
      <div style={{ width: '100%' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
          <div>
            <div style={{ fontSize: 16, fontWeight: 800, color: 'var(--ink)' }}>Análises</div>
            <div style={{ fontSize: 9, color: 'var(--ink-4)' }}>Insights financeiros do período selecionado</div>
          </div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, border: '1px solid var(--line)', borderRadius: 8, padding: '5px 10px', fontSize: 10, fontWeight: 600 }}>
            <MatGlyph name="calendar_month" size={12} color="var(--purple)" /> Ago 2026
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, alignItems: 'start' }}>

          {/* Crédito vs receitas */}
          <ChartCard title="Crédito vs receitas" badge="Ago 2026">
            <div style={{ fontSize: 8.5, color: 'var(--ink-3)', marginBottom: 8, lineHeight: 1.4 }}>Quanto da sua renda já foi comprometida com o cartão de crédito.</div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
              <div><div style={{ fontSize: 8, color: 'var(--ink-4)' }}>Gasto no crédito</div><div className="mono" style={{ fontSize: 12, fontWeight: 700, color: 'var(--red)' }}>{ANALISE.credito.gasto}</div></div>
              <div style={{ textAlign: 'right' }}><div style={{ fontSize: 8, color: 'var(--ink-4)' }}>Receitas</div><div className="mono" style={{ fontSize: 12, fontWeight: 700, color: 'var(--green)' }}>{ANALISE.credito.receitas}</div></div>
            </div>
            <div style={{ height: 5, borderRadius: 3, background: 'var(--bg-soft)', overflow: 'hidden', marginBottom: 6 }}>
              <div style={{ height: '100%', width: `${ANALISE.credito.pct}%`, background: 'var(--green)', borderRadius: 3 }} />
            </div>
            <div style={{ textAlign: 'center', fontSize: 8.5, color: 'var(--ink-3)', marginBottom: 8 }}><strong>{ANALISE.credito.pct}%</strong> da receita comprometida com crédito</div>
            <div style={{ background: 'var(--green-tint)', borderRadius: 6, padding: '6px 8px', fontSize: 8.5, color: 'var(--ink-2)' }}>✓ Crédito sob controle — boa folga na renda.</div>
          </ChartCard>

          {/* Quanto sobrou por mês */}
          <ChartCard title="Quanto sobrou por mês" badge="6 meses">
            <svg viewBox="0 0 200 76" style={{ width: '100%', height: 84, display: 'block' }}>
              <line x1="0" y1="44" x2="200" y2="44" stroke="var(--line)" strokeWidth="0.5" strokeDasharray="2 2" />
              {ANALISE.sobrou.map((d, i) => {
                const x = 16 + i * 31, w = 15, k = 1.2;
                const h = Math.abs(d.v) * k;
                const y = d.v >= 0 ? 44 - h : 44;
                return (
                  <g key={i}>
                    <rect x={x} y={y} width={w} height={h} fill={d.v >= 0 ? 'var(--green)' : 'var(--red)'} rx="1" />
                    <text x={x + w / 2} y="73" fontSize="5" fill="var(--ink-4)" textAnchor="middle">{d.m}</text>
                  </g>
                );
              })}
            </svg>
            <div style={{ marginTop: 4, background: 'var(--green-tint)', borderRadius: 6, padding: '6px 8px', fontSize: 8.5, color: 'var(--ink-2)' }}>✓ Acima do seu normal: guardou 27% (média 8%).</div>
          </ChartCard>

          {/* Composição das despesas */}
          <ChartCard title="Composição das despesas" badge="Ago 2026">
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <Donut segs={ANALISE.composicao} />
              <div style={{ flex: 1 }}>
                {ANALISE.composicao.map(s => (
                  <div key={s.l} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '2px 0' }}>
                    <span style={{ width: 8, height: 8, borderRadius: 2, background: s.color, flexShrink: 0 }} />
                    <span style={{ fontSize: 9, color: 'var(--ink-2)', flex: 1 }}>{s.l}</span>
                    <span className="mono" style={{ fontSize: 9, fontWeight: 600 }}>{s.v}</span>
                  </div>
                ))}
              </div>
            </div>
            <div style={{ marginTop: 8, fontSize: 8.5, color: 'var(--ink-3)' }}>💡 Maior fatia: Recorrentes (56%).</div>
          </ChartCard>

          {/* Evolução — receitas vs despesas (2 col) */}
          <div style={{ gridColumn: 'span 2' }}>
            <ChartCard title="Evolução — receitas vs despesas" badge="6 meses">
              <svg viewBox="0 0 200 74" style={{ width: '100%', height: 108, display: 'block' }}>
                {ANALISE.evolucao.map((d, i) => {
                  const x = 16 + i * 31, w = 15;
                  const hg = d.gas * kEvo, hp = d.parc * kEvo, hr = d.rec * kEvo;
                  const yGas = baseEvo - hg, yParc = yGas - hp, yRec = yParc - hr;
                  return (
                    <g key={i}>
                      <rect x={x} y={yGas} width={w} height={hg} fill={SPLIT_BLUE} rx="1" />
                      <rect x={x} y={yParc} width={w} height={hp} fill={SPLIT_CYAN} rx="1" />
                      <rect x={x} y={yRec} width={w} height={hr} fill="var(--purple)" rx="1" />
                      <text x={x + w / 2} y="71" fontSize="5" fill="var(--ink-4)" textAnchor="middle">{d.m}</text>
                    </g>
                  );
                })}
                <polyline points={ANALISE.evolucao.map((d, i) => `${16 + i * 31 + 7.5},${baseEvo - d.receita * kEvo}`).join(' ')} fill="none" stroke="var(--green)" strokeWidth="1.5" />
                {ANALISE.evolucao.map((d, i) => (<circle key={i} cx={16 + i * 31 + 7.5} cy={baseEvo - d.receita * kEvo} r="1.6" fill="var(--green)" />))}
              </svg>
              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 4 }}>
                {[['Recorrentes', 'var(--purple)'], ['Parceladas', SPLIT_CYAN], ['Gastos do Mês', SPLIT_BLUE], ['Receitas', 'var(--green)']].map(([l, c]) => (
                  <span key={l} style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 8, color: 'var(--ink-3)' }}>
                    <span style={{ width: 7, height: 7, borderRadius: 2, background: c }} />{l}
                  </span>
                ))}
              </div>
              <div style={{ marginTop: 6, background: 'var(--green-tint)', borderRadius: 6, padding: '6px 8px', fontSize: 8.5, color: 'var(--ink-2)' }}>✓ Sua melhor folga foi em Ago (+R$ 9.931,27).</div>
            </ChartCard>
          </div>

          {/* Gastos por forma de pagamento */}
          <ChartCard title="Gastos por forma de pagamento" badge="Ago 2026">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 2 }}>
              {ANALISE.formaPagamento.map(f => (
                <div key={f.l}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 9.5, marginBottom: 3 }}>
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}><span style={{ width: 7, height: 7, borderRadius: '50%', background: f.color }} />{f.l}</span>
                    <span><strong>{f.pct}%</strong> <span className="mono" style={{ color: 'var(--ink-3)' }}>{f.v}</span></span>
                  </div>
                  <div style={{ height: 5, borderRadius: 3, background: 'var(--bg-soft)', overflow: 'hidden' }}>
                    <div style={{ height: '100%', width: `${f.pct}%`, background: f.color, borderRadius: 3 }} />
                  </div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 10, background: 'var(--orange-soft)', borderRadius: 6, padding: '6px 8px', fontSize: 8.5, color: 'var(--ink-2)' }}>⚠ Crédito é sua forma principal (56%) — atenção à fatura.</div>
          </ChartCard>

          {/* Análise por categoria (2 col) */}
          <div style={{ gridColumn: 'span 2' }}>
            <ChartCard title="Análise por categoria" badge="Ago 2026 vs Jul">
              <div style={{ fontSize: 8.5, color: 'var(--ink-3)', marginBottom: 8 }}>Onde você mais gasta e o que mudou vs Jul. É aqui que dá para cortar mudando hábitos.</div>
              <div style={{ display: 'flex', background: 'var(--bg-soft)', borderRadius: 7, padding: 2, marginBottom: 8 }}>
                {['Gastos do Mês', 'Parceladas', 'Recorrentes'].map((t, i) => (
                  <div key={t} style={{ flex: 1, textAlign: 'center', padding: '4px 0', borderRadius: 5, fontSize: 9, fontWeight: 600, background: i === 0 ? 'white' : 'transparent', color: i === 0 ? 'var(--ink)' : 'var(--ink-4)', boxShadow: i === 0 ? 'var(--shadow-sm)' : 'none' }}>{t}</div>
                ))}
              </div>
              {ANALISE.categorias.map((c, i) => (
                <div key={i} style={{ marginBottom: 7 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 3, gap: 8 }}>
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, minWidth: 0 }}>
                      <span style={{ fontSize: 10, fontWeight: 600, whiteSpace: 'nowrap' }}>{c.l}</span>
                      <span style={{ fontSize: 7.5, fontWeight: 700, color: deltaFg[c.kind], background: deltaBg[c.kind], borderRadius: 4, padding: '1px 5px', whiteSpace: 'nowrap' }}>{c.delta}</span>
                    </span>
                    <span className="mono" style={{ fontSize: 10, fontWeight: 700, whiteSpace: 'nowrap' }}>{c.v}</span>
                  </div>
                  <div style={{ height: 4, borderRadius: 2, background: 'var(--bg-soft)', overflow: 'hidden' }}>
                    <div style={{ height: '100%', width: `${c.pct}%`, background: SPLIT_BLUE, borderRadius: 2 }} />
                  </div>
                </div>
              ))}
              <div style={{ marginTop: 6, background: 'var(--orange-soft)', borderRadius: 6, padding: '6px 8px', fontSize: 8.5, color: 'var(--ink-2)' }}>⚠ Maior alta: Despesas Domésticas +R$ 669,00 (+6082%) vs Jul.</div>
            </ChartCard>
          </div>

          {/* Gastos por tag */}
          <ChartCard title="Gastos por tag" badge="Ago 2026">
            <div style={{ fontSize: 8.5, color: 'var(--ink-3)', marginBottom: 8 }}>Suas tags agrupadas — quanto foi para cada lugar ou tema.</div>
            {ANALISE.tags.map((t, i) => (
              <div key={i} style={{ marginBottom: 6 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 2, gap: 8 }}>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 9.5, minWidth: 0 }}>
                    <MatGlyph name="sell" size={10} color="var(--purple)" />
                    <span style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{t.l}</span>
                    <span style={{ color: 'var(--ink-4)', fontSize: 8, flexShrink: 0 }}>·{t.n}</span>
                  </span>
                  <span className="mono" style={{ fontSize: 9.5, fontWeight: 700, whiteSpace: 'nowrap' }}>{t.v}</span>
                </div>
                <div style={{ height: 3.5, borderRadius: 2, background: 'var(--bg-soft)', overflow: 'hidden' }}>
                  <div style={{ height: '100%', width: `${t.pct}%`, background: 'var(--purple)', borderRadius: 2 }} />
                </div>
              </div>
            ))}
          </ChartCard>

          {/* Saldo acumulado */}
          <ChartCard title="Saldo acumulado" badge="Ago 2026">
            <div style={{ fontSize: 8.5, color: 'var(--ink-3)', marginBottom: 6 }}>Como seu saldo evoluiu dia a dia. Abaixo da linha = no vermelho.</div>
            <svg viewBox="0 0 200 66" style={{ width: '100%', height: 74, display: 'block' }}>
              {(() => {
                const d = ANALISE.saldoAcum, n = d.length, max = 14, min = -5, range = max - min;
                const X = i => (i / (n - 1)) * 196 + 2;
                const Y = v => 6 + ((max - v) / range) * 52;
                const pts = d.map((v, i) => `${X(i).toFixed(1)},${Y(v).toFixed(1)}`).join(' ');
                return (
                  <React.Fragment>
                    <path d={`M2,60 L${d.map((v, i) => `${X(i).toFixed(1)},${Y(v).toFixed(1)}`).join(' L')} L198,60 Z`} fill="var(--purple-tint)" />
                    <line x1="2" y1={Y(0).toFixed(1)} x2="198" y2={Y(0).toFixed(1)} stroke="var(--line)" strokeWidth="0.5" strokeDasharray="2 2" />
                    <polyline points={pts} fill="none" stroke="var(--purple)" strokeWidth="1.4" />
                  </React.Fragment>
                );
              })()}
            </svg>
            <div style={{ marginTop: 4, background: 'var(--orange-soft)', borderRadius: 6, padding: '6px 8px', fontSize: 8.5, color: 'var(--ink-2)' }}>⚠ Você passou 2 dias no vermelho neste mês.</div>
          </ChartCard>

          {/* Evolução de uma categoria */}
          <ChartCard title="Evolução de uma categoria" badge="6 meses">
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 8, marginBottom: 6 }}>
              <span style={{ fontSize: 8.5, color: 'var(--ink-3)', flex: 1 }}>Acompanhe uma categoria ao longo do tempo.</span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, border: '1px solid var(--line)', borderRadius: 6, padding: '3px 7px', fontSize: 8.5, fontWeight: 600 }}>Compras variadas <MatGlyph name="expand_more" size={11} color="var(--ink-4)" /></span>
            </div>
            <svg viewBox="0 0 200 60" style={{ width: '100%', height: 68, display: 'block' }}>
              {(() => {
                const d = ANALISE.evolCategoria, n = d.length, max = 18;
                const X = i => (i / (n - 1)) * 184 + 8;
                const Y = v => 8 + ((max - v) / max) * 40;
                const pts = d.map((v, i) => `${X(i).toFixed(1)},${Y(v).toFixed(1)}`).join(' ');
                return (
                  <React.Fragment>
                    <polyline points={pts} fill="none" stroke="var(--purple)" strokeWidth="1.6" />
                    {d.map((v, i) => (<circle key={i} cx={X(i)} cy={Y(v)} r="1.5" fill="var(--purple)" />))}
                    {meses.map((m, i) => (<text key={m} x={X(i)} y="58" fontSize="5" fill="var(--ink-4)" textAnchor="middle">{m}</text>))}
                  </React.Fragment>
                );
              })()}
            </svg>
            <div style={{ marginTop: 4, background: 'var(--green-tint)', borderRadius: 6, padding: '6px 8px', fontSize: 8.5, color: 'var(--ink-2)' }}>✓ Compras variadas em queda: -73% vs a média dos meses anteriores.</div>
          </ChartCard>

          {/* Gastos no crédito */}
          <ChartCard title="Gastos no crédito" badge="6 meses">
            <div style={{ fontSize: 8.5, color: 'var(--ink-3)', marginBottom: 6 }}>Total gasto no cartão em cada mês — útil para prever o tamanho das faturas.</div>
            <svg viewBox="0 0 200 74" style={{ width: '100%', height: 84, display: 'block' }}>
              {ANALISE.gastosCredito.map((h, i) => {
                const x = 16 + i * 31, w = 15, k = 1.9, hh = h * k;
                return (
                  <g key={i}>
                    <rect x={x} y={62 - hh} width={w} height={hh} fill="var(--purple)" rx="1" />
                    <text x={x + w / 2} y="71" fontSize="5" fill="var(--ink-4)" textAnchor="middle">{meses[i]}</text>
                  </g>
                );
              })}
            </svg>
            <div style={{ marginTop: 4, fontSize: 8.5, color: 'var(--ink-3)' }}>💡 Maior fatura: Mar (R$ 25.076,68).</div>
          </ChartCard>

        </div>
      </div>
    </div>
  );
}

// Vitrine: abas trocando telas cheias num frame de navegador escalado
function AppScreensSection() {
  const [tab, setTab] = React.useState('mes');
  const screens = [
    { id: 'mes', label: 'Mês Atual', node: <DesktopDashboard />, h: 'Seu mês em um só lugar', p: 'Registre gastos e receitas em segundos, veja o saldo, quanto pode gastar hoje e para onde o dinheiro está indo — tudo atualizado na hora.' },
    { id: 'import', label: 'Importar Dados', node: <ImportarScreen />, h: 'Importe e deixe a IA organizar', p: 'Envie faturas, extratos ou planilhas: a IA lê o documento e transforma em lançamentos categorizados — separando gastos, parcelas e recorrentes, e avisando o que já existe, sem duplicar.' },
    { id: 'hist', label: 'Histórico', node: <HistoricoScreen />, h: 'Volte a qualquer mês', p: 'Reveja exatamente o que aconteceu em qualquer mês, com o mesmo detalhamento do mês atual — ideal para conferir e entender sua evolução.' },
    { id: 'analise', label: 'Análises', node: <AnaliseScreen />, h: 'Entenda para onde vai o dinheiro', p: 'Gráficos que mostram a composição das despesas, a evolução mês a mês, por qual forma você mais gasta e quanto sobrou — para decidir com clareza.' },
    { id: 'econ', label: 'Economias', node: <EconomiasScreen />, h: 'Guarde com propósito', p: 'Acompanhe metas, investimentos com projeção e simule o futuro do seu dinheiro na calculadora de juros compostos, com as taxas de mercado sempre à mão.' },
    { id: 'fam', label: 'Família', node: <ContaScreen />, h: 'Finanças em família, no seu controle', p: 'Convide quem quiser para o grupo — cada um com seu papel (admin ou membro) — e cuide de perfil, segurança, plano e instalação, tudo na sua conta.' },
  ];
  const active = screens.find(s => s.id === tab) || screens[0];

  return (
    <section id="telas" style={{ background: 'var(--purple)' }}>
      <div className="container">
        <div className="section-header">
          <div className="eyebrow"><span className="dot" />Recursos</div>
          <h2>Tudo que você precisa para acompanhar sua vida financeira com clareza.</h2>
          <p>Do dia a dia ao histórico do mês, tudo organizado no mesmo lugar.</p>
        </div>

        <div style={{ display: 'flex', gap: 8, justifyContent: 'center', marginBottom: 20, flexWrap: 'wrap' }}>
          {screens.map(s => (
            <button
              key={s.id}
              onClick={() => setTab(s.id)}
              className={'telas-tab' + (tab === s.id ? ' active' : '')}
            >{s.label}</button>
          ))}
        </div>

        <div style={{
          maxWidth: 1000, margin: '0 auto',
          borderRadius: 14, overflow: 'hidden',
          boxShadow: '0 32px 64px -20px rgba(0,0,0,0.4)', background: 'white',
        }}>
          <BrowserChrome />
          <div className="telas-frame" style={{ position: 'relative', overflow: 'hidden', background: 'var(--bg)' }}>
            <div className="telas-scaled" style={{ position: 'absolute', top: 0, left: 0, width: 1100, transformOrigin: 'top left' }}>
              {active.node}
            </div>
            <div className="telas-blurb" key={tab}>
              <div className="telas-blurb-tag"><span className="tb-dot" />{active.label}</div>
              <h3>{active.h}</h3>
              <p>{active.p}</p>
            </div>
          </div>
        </div>

        <p className="mono" style={{ fontSize: 11, color: 'rgba(255,255,255,0.6)', textAlign: 'center', marginTop: 16, letterSpacing: '0.04em' }}>
          VISUALIZAÇÃO COMPACTA · O APP ABRE EM TELA CHEIA NO COMPUTADOR
        </p>
      </div>

      <style>{`
        #telas .section-header .eyebrow .dot { background: var(--green); }
        #telas .section-header h2 { color: #fff; }
        #telas .section-header p { color: rgba(255,255,255,0.82); }
        .telas-tab {
          font-family: inherit; font-size: 13.5px; font-weight: 600;
          padding: 8px 16px; border-radius: 999px; cursor: pointer;
          background: transparent; color: #fff;
          border: 1px solid rgba(255,255,255,0.4);
          transition: background .15s, color .15s, border-color .15s;
        }
        .telas-tab:hover { background: rgba(255,255,255,0.14); }
        .telas-tab.active { background: #fff; color: var(--purple); border-color: #fff; }

        .telas-blurb {
          position: absolute;
          left: 22px; bottom: 22px;
          width: min(340px, calc(100% - 44px));
          background: rgba(255,255,255,0.96);
          -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
          border: 1px solid var(--line);
          border-radius: 14px;
          padding: 15px 17px;
          box-shadow: 0 18px 40px -12px rgba(26,22,20,0.28);
          z-index: 4;
          animation: blurbIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
        }
        .telas-blurb::before {
          content: "";
          position: absolute;
          inset: -26px -30px -30px -30px;
          background: radial-gradient(60% 70% at 32% 62%, rgba(112,16,176,0.14), rgba(112,16,176,0) 72%);
          z-index: -1;
          pointer-events: none;
        }
        .telas-blurb-tag {
          display: inline-flex; align-items: center; gap: 6px;
          font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
          color: var(--purple); margin-bottom: 7px;
        }
        .telas-blurb-tag .tb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
        .telas-blurb h3 { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 4px; line-height: 1.25; }
        .telas-blurb p { font-size: 13px; color: var(--ink-3); line-height: 1.5; }
        @keyframes blurbIn {
          0% { opacity: 0; transform: translateY(18px) scale(0.97); }
          60% { opacity: 1; }
          100% { opacity: 1; transform: translateY(0) scale(1); }
        }
        @media (max-width: 640px) {
          .telas-blurb { left: 10px; right: 10px; bottom: 10px; width: auto; padding: 11px 13px; border-radius: 12px; }
          .telas-blurb h3 { font-size: 13px; }
          .telas-blurb p { font-size: 11px; }
        }

        .telas-frame { height: 300px; }
        .telas-scaled { --s: 0.31; transform: scale(var(--s)); }
        @media (min-width: 640px) {
          .telas-frame { height: 440px; }
          .telas-scaled { --s: 0.56; }
        }
        @media (min-width: 1000px) {
          .telas-frame { height: 560px; }
          .telas-scaled { --s: 0.89; }
        }
      `}</style>
    </section>
  );
}

window.AppScreensSection = AppScreensSection;
window.HistoricoScreen = HistoricoScreen;