// ── Telas de celular fiéis ao app (para o showcase mobile) ──
// Recriadas a partir de G:\Meu Drive\__econome\animacoes (versão estática, sem
// animações/cursor/toast). Todo o CSS é escopado sob `.aps` para não colidir
// com o site (o app usa Inter e a paleta própria #6A0DAD etc.).

// Moldura de celular reutilizável. `active` = item do menu inferior em destaque.
function PhoneShell({ children, active = 'home', width = 320, scope = '', card = false }) {
  const nav = [
    { id: 'history', glyph: 'history', label: 'Histórico' },
    { id: 'analises', glyph: 'bar_chart', label: 'Análises' },
    { id: 'home', glyph: 'home', label: 'Mês Atual' },
    { id: 'importar', glyph: 'upload_file', label: 'Importar' },
    { id: 'economias', glyph: 'savings', label: 'Economias' },
  ];
  // card = sem moldura de celular (UI como card limpo). natW/natH mudam pois
  // não há bezel do aparelho nem status bar do sistema.
  const natW = card ? 430 : 458;
  const natH = card ? 560 : 960;
  const sc = width / natW;
  return (
    <div className={'aps aps-frame ' + scope + (card ? ' aps-card' : '')} style={{ '--w': width + 'px', '--sc': sc, height: Math.round(natH * sc) + 'px' }}>
      <div className="aps-stage">
        <div className="device">
          <span className="side mute" /><span className="side vup" /><span className="side vdn" /><span className="side pwr" />
          <div className="screen">
            <div className="island" />
            <div className="scroll no-scrollbar">
              {children}
            </div>
            <nav className="nav">
              {nav.map((n) => (
                <a key={n.id} href="#" onClick={(e) => e.preventDefault()} className={active === n.id ? 'active' : ''}>
                  <span className="ms">{n.glyph}</span>
                  <span>{n.label}</span>
                </a>
              ))}
            </nav>
          </div>
        </div>
      </div>
    </div>
  );
}

// Barra de status + logo + saudação (comum a todas as telas)
function PhoneStatusHeader({ greet = 'Boa noite, Maria!', avatar = 'MG', purpleHeader = true, children }) {
  return (
    <div className="hdr" style={purpleHeader ? undefined : { background: 'transparent', paddingBottom: 16 }}>
      <div className="statusbar" style={purpleHeader ? undefined : { color: 'var(--ink)' }}>
        <div>9:41</div>
        <div className="icons">
          <svg width="18" height="12" viewBox="0 0 18 12" fill={purpleHeader ? '#fff' : '#1A1A2E'}><rect x="0" y="8" width="3" height="4" rx="1" /><rect x="5" y="5.5" width="3" height="6.5" rx="1" /><rect x="10" y="3" width="3" height="9" rx="1" /><rect x="15" y=".5" width="3" height="11.5" rx="1" /></svg>
          <svg width="17" height="12" viewBox="0 0 17 12" fill={purpleHeader ? '#fff' : '#1A1A2E'}><path d="M8.5 2.2c2.6 0 5 1 6.8 2.7l1.5-1.6C14.6 1.1 11.7 0 8.5 0S2.4 1.1 .2 3.3l1.5 1.6C3.5 3.2 5.9 2.2 8.5 2.2z" /><path d="M8.5 5.6c1.6 0 3.1.6 4.2 1.7l1.5-1.6C12.7 4.3 10.7 3.5 8.5 3.5 6.3 3.5 4.3 4.3 2.8 5.7l1.5 1.6C5.4 6.2 6.9 5.6 8.5 5.6z" /><path d="M8.5 9c.8 0 1.6.3 2.1.9l-2.1 2.1L6.4 9.9C6.9 9.3 7.7 9 8.5 9z" /></svg>
          <svg width="26" height="13" viewBox="0 0 26 13" fill="none"><rect x=".5" y=".5" width="22" height="12" rx="3.5" stroke={purpleHeader ? '#fff' : '#1A1A2E'} strokeOpacity=".5" /><rect x="2" y="2" width="18" height="9" rx="2" fill={purpleHeader ? '#fff' : '#1A1A2E'} /><rect x="24" y="4" width="1.6" height="5" rx=".8" fill={purpleHeader ? '#fff' : '#1A1A2E'} fillOpacity=".5" /></svg>
        </div>
      </div>
      <div className="appbar">
        <div className="logo"><PhoneLogo dark={purpleHeader} /></div>
        <div className="right">
          <div className="greet" style={purpleHeader ? undefined : { color: 'var(--ink)' }}>{greet}</div>
          <div className="avatar">{avatar}</div>
        </div>
      </div>
      {children}
    </div>
  );
}

function PhoneLogo({ dark = true }) {
  const c = dark ? '#fff' : '#6A0DAD';
  const g = '#50c878';
  return (
    <svg height="24" viewBox="0 0 867.87 164" xmlns="http://www.w3.org/2000/svg" aria-label="èconome">
      <path fill={c} d="M83.66,32.7c-5.65-3.67-12.59-5.92-20.78-6.77V4.1c0-2.26-1.84-4.1-4.1-4.1h-10.25c-2.26,0-4.1,1.84-4.1,4.1v22.24c-7.03,1.09-13.34,3.29-18.89,6.64-8.23,4.98-14.54,11.77-18.94,20.38C2.2,61.97,0,71.83,0,82.92c0,17.99,5.26,32.19,15.78,42.62,7.7,7.63,17.26,12.46,28.65,14.5v19.85c0,2.26,1.84,4.1,4.1,4.1h10.25c2.26,0,4.1-1.84,4.1-4.1v-18.86c9.19-.47,16.57-2.24,22.07-5.31,6.5-3.63,11.14-7.94,13.92-12.92,2.77-4.97,4.16-9.37,4.16-13.2,0-2.87-1.15-4.31-3.44-4.31-.96,0-2.58.48-4.88,1.44-5.55,2.49-10.72,4.26-15.5,5.31-4.79,1.05-10.43,1.58-16.93,1.58-16.65,0-26.12-6.22-28.41-18.66h65.44c3.44,0,5.26-1.43,5.45-4.31.19-1.72.33-3.82.43-6.31.09-2.48.14-5.55.14-9.18,0-8.42-1.77-16.4-5.31-23.97-3.54-7.56-9-13.73-16.36-18.51ZM72.61,72.02h-38.46c.38-5.55,2.34-10,5.88-13.35,3.54-3.35,8.56-5.02,15.07-5.02,4.97,0,8.75,1.05,11.34,3.16,2.58,2.11,4.35,4.59,5.31,7.46.95,2.87,1.24,5.45.86,7.75Z" />
      <path fill={c} d="M202.62,103.87c-.96,0-2.3.57-4.02,1.72-2.11,1.34-5.17,2.92-9.18,4.74-4.02,1.82-8.8,2.73-14.35,2.73-9.57,0-16.65-2.63-21.24-7.89-4.59-5.26-6.89-12.29-6.89-21.09,0-9.57,2.44-16.55,7.32-20.95,4.88-4.4,10.57-6.6,17.08-6.6,4.4,0,8.22.48,11.48,1.43,3.25.96,7.08,2.49,11.48,4.59,1.15.57,2.2.86,3.16.86,1.15,0,2.01-.95,2.58-2.87l1.72-7.17c1.53-6.7,1.48-11.96-.14-15.79-1.63-3.82-5.31-6.69-11.05-8.61-6.51-2.3-13.59-3.44-21.24-3.44-16.84,0-30.42,5.07-40.75,15.21-10.33,10.14-15.5,24.3-15.5,42.48s4.83,32.39,14.49,42.62c9.66,10.24,22.34,15.35,38.03,15.35,10.71,0,18.99-1.91,24.83-5.74,5.83-3.83,9.85-8.32,12.05-13.49,2.2-5.17,3.3-9.66,3.3-13.49,0-3.06-1.05-4.59-3.16-4.59Z" />
      <path fill={c} d="M265.47,25.52c-17.41,0-31.24,5.27-41.47,15.79-10.24,10.52-15.35,24.49-15.35,41.9s5.21,31.43,15.64,42.05c10.43,10.62,24.35,15.93,41.76,15.93s31.47-5.31,41.61-15.93c10.14-10.62,15.21-24.63,15.21-42.05s-5.17-31.38-15.5-41.9c-10.33-10.52-24.3-15.79-41.9-15.79ZM281.54,104.59c-4.78,3.73-10.14,5.6-16.07,5.6s-11.24-1.86-15.93-5.6c-4.69-3.73-7.03-10.66-7.03-20.81s2.39-16.93,7.18-20.95c4.78-4.02,10.14-6.03,16.07-6.03s11.24,2.01,15.93,6.03c4.69,4.02,7.03,11,7.03,20.95s-2.4,17.08-7.18,20.81Z" />
      <path fill={c} d="M396.34,26.1c-5.93,0-11.67,1.39-17.22,4.16-5.55,2.78-10.24,6.74-14.06,11.91-1.91-4.97-4.93-8.47-9.04-10.48-4.12-2.01-9.52-3.01-16.22-3.01h-1.43c-2.49,0-3.73,1.25-3.73,3.73v102.17c0,2.49,1.24,3.73,3.73,3.73h25.26c2.48,0,3.73-1.24,3.73-3.73v-55.39c0-8.61,2.01-14.54,6.03-17.79,4.02-3.25,8.61-4.88,13.78-4.88s9.8,1.63,13.92,4.88c4.11,3.26,6.17,9.28,6.17,18.08v55.1c0,2.49,1.24,3.73,3.73,3.73h25.54c2.48,0,3.73-1.24,3.73-3.73v-58.55c0-17.03-3.92-29.61-11.77-37.74-7.85-8.13-18.56-12.2-32.14-12.2Z" />
      <path fill={c} d="M508.27,25.52c-17.41,0-31.24,5.27-41.47,15.79-10.24,10.52-15.35,24.49-15.35,41.9s5.21,31.43,15.64,42.05c10.43,10.62,24.35,15.93,41.76,15.93s31.47-5.31,41.61-15.93c10.14-10.62,15.21-24.63,15.21-42.05s-5.17-31.38-15.5-41.9c-10.33-10.52-24.3-15.79-41.9-15.79ZM524.34,104.59c-4.78,3.73-10.14,5.6-16.07,5.6s-11.24-1.86-15.93-5.6c-4.69-3.73-7.03-10.66-7.03-20.81s2.39-16.93,7.17-20.95c4.78-4.02,10.14-6.03,16.07-6.03s11.24,2.01,15.93,6.03c4.69,4.02,7.03,11,7.03,20.95s-2.4,17.08-7.17,20.81Z" />
      <path fill={g} d="M707.73,26.1c-7.27,0-13.82,1.82-19.66,5.45-5.84,3.64-10.67,8.04-14.49,13.2-7.27-12.44-19.33-18.66-36.16-18.66-6.13,0-11.67,1.39-16.65,4.16-4.98,2.78-9.38,6.46-13.2,11.05-1.91-4.59-4.98-7.84-9.18-9.76-4.21-1.91-9.47-2.87-15.79-2.87h-1.43c-2.49,0-3.73,1.25-3.73,3.73v102.17c0,2.49,1.24,3.73,3.73,3.73h25.26c2.48,0,3.73-1.24,3.73-3.73v-55.97c0-8.42,2.05-14.3,6.17-17.65,4.11-3.35,8.56-5.02,13.35-5.02s9.23,1.68,12.77,5.02c3.54,3.35,5.31,9.33,5.31,17.94v55.68c0,2.49,1.24,3.73,3.73,3.73h25.54c2.48,0,3.73-1.24,3.73-3.73v-55.97c0-8.42,2.05-14.3,6.17-17.65,4.11-3.35,8.47-5.02,13.06-5.02,4.97,0,9.28,1.68,12.92,5.02,3.63,3.35,5.45,9.33,5.45,17.94v55.68c0,2.49,1.24,3.73,3.73,3.73h25.26c2.48,0,3.73-1.24,3.73-3.73v-58.55c0-17.03-3.83-29.61-11.48-37.74-7.66-8.13-18.27-12.2-31.86-12.2Z" />
      <path fill={g} d="M862.56,51.21c-3.54-7.56-8.99-13.73-16.36-18.51-7.37-4.78-16.89-7.18-28.56-7.18s-21.34,2.49-29.56,7.46c-8.23,4.98-14.54,11.77-18.94,20.38-4.4,8.61-6.6,18.47-6.6,29.56,0,17.99,5.26,32.19,15.79,42.62,10.52,10.43,24.49,15.64,41.9,15.64,11.67,0,20.76-1.82,27.26-5.45,6.5-3.63,11.14-7.94,13.92-12.92,2.77-4.97,4.16-9.37,4.16-13.2,0-2.87-1.15-4.31-3.45-4.31-.96,0-2.58.48-4.88,1.44-5.55,2.49-10.72,4.26-15.5,5.31-4.78,1.05-10.43,1.58-16.93,1.58-16.65,0-26.12-6.22-28.41-18.66h65.44c3.44,0,5.26-1.43,5.45-4.31.19-1.72.33-3.82.43-6.31.09-2.48.14-5.55.14-9.18,0-8.42-1.77-16.4-5.31-23.97ZM835.16,72.02h-38.46c.38-5.55,2.34-10,5.88-13.35,3.54-3.35,8.56-5.02,15.07-5.02,4.97,0,8.75,1.05,11.34,3.16,2.58,2.11,4.35,4.59,5.31,7.46.96,2.87,1.24,5.45.86,7.75Z" />
    </svg>
  );
}

// ─────────────────────────── MÊS ATUAL ───────────────────────────
function PhoneMesAtual({ width = 320, card = false }) {
  const brl = (n) => 'R$ ' + n.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
  const comprasHoje = [
    ['Supermercado', '45,00'], ['Café', '12,00'],
  ];
  const gasto = [
    ['shopping_cart', 'Supermercado', 8, '640,00'], ['restaurant', 'Restaurante', 5, '360,00'],
    ['commute', 'Transporte', 6, '210,00'], ['medical_services', 'Saúde', 2, '180,00'],
    ['sports_esports', 'Lazer e Entretenimento', 3, '110,00'],
  ];
  const parceladas = [
    ['devices', 'Notebook', '300,00', 3, 10, 'jun. de 2027', 'R$ 2.100,00'],
    ['smartphone', 'Celular', '200,00', 2, 12, 'jul. de 2027', 'R$ 2.000,00'],
    ['headphones', 'Fone de ouvido', '100,00', 1, 5, 'dez. de 2026', 'R$ 400,00'],
  ];
  const recorrentes = [
    ['home', 'Moradia', 1, '1.800,00', 0], ['bolt', 'Energia Elétrica', 1, '250,00', 0],
    ['fitness_center', 'Academia', 1, '200,00', 0], ['subscriptions', 'Assinaturas', 4, '120,00', 0],
    ['wifi', 'Internet', 1, '150,00', 0], ['smartphone', 'Telefonia', 1, '80,00', 0],
  ];
  const dias = [30, 12, 20, 24, 18, 28, 34, 16, 40, 22, 14, 26, 20, 12, 30, 24, 18, 22, 36, 28, 20, 32, 26, 44, 30, 22];
  const mx = Math.max(...dias);

  return (
    <PhoneShell scope="aps-mes" active="home" width={width} card={card}>
      <PhoneStatusHeader>
        <div className="stats">
          <div className="stat"><div className="k">Receitas</div><div className="v">{brl(7000)}</div></div>
          <div className="stat"><div className="k">Despesas</div><div className="v">{brl(4700)}</div></div>
          <div className="stat"><div className="k">Saldo</div><div className="v g">{brl(2300)}</div></div>
        </div>
      </PhoneStatusHeader>

      <div className="qef">
        <div className="tabs">
          <button className="on">Gastei</button><button>Recebi</button><button>Paguei fatura</button>
        </div>
        <div className="col">
          <div className="field-row">
            <div className="field ph" style={{ flex: 1 }}>Valor Gasto...</div>
            <div className="hoje"><span className="ms">calendar_today</span>Hoje</div>
          </div>
          <div className="field-row">
            <div className="field" style={{ flex: 1 }}>
              <PixIcon />
              <span style={{ flex: 1 }}>Pago com Pix Nubank</span><span className="ms chev">expand_more</span>
            </div>
            <div className="tune"><span className="ms">tune</span></div>
          </div>
          <div className="field-row">
            <div className="field" style={{ flex: 1 }}><span className="ms cat-ic">shopping_cart</span><span style={{ flex: 1 }}>Supermercado</span><span className="ms chev">expand_more</span></div>
            <div className="tune"><span className="ms">tune</span></div>
          </div>
          <div>
            <div className="field ph">Descrição (ex: Almoço, McDonald's...)</div>
            <p className="helper" style={{ marginTop: 4 }}>Digite para lembrar o gasto. Aperte <strong style={{ color: 'rgba(255,255,255,.8)' }}>Enter</strong> para salvar como <strong style={{ color: 'rgba(255,255,255,.8)' }}>tag</strong> e agrupar no gráfico.</p>
          </div>
          <div className="toggle-row"><span className="switch" /><span>Salvar como Despesa Recorrente</span></div>
          <div className="toggle-row"><span className="switch" /><span>Salvar como compra parcelada</span></div>
          <div className="cta">Registrar Gasto</div>
        </div>
      </div>

      <div className="cards">
        <div className="card">
          <div className="label sec" style={{ marginBottom: 12 }}>Resumo do Mês</div>
          <div className="kv"><span className="lbl"><span className="dot" style={{ background: 'var(--success)' }} />Receitas</span><span className="val" style={{ color: 'var(--success)' }}>R$ 7.000,00</span></div>
          <div className="divider" />
          <div className="kv"><span className="lbl"><span className="dot" style={{ background: 'var(--blue)' }} />Gastos do Mês</span><span className="val" style={{ color: 'var(--blue)' }}>R$ 1.500,00</span></div>
          <div className="kv"><span className="lbl"><span className="dot" style={{ background: 'var(--cyan)' }} />Compras Parceladas</span><span className="val" style={{ color: 'var(--cyan)' }}>R$ 600,00</span></div>
          <div className="kv"><span className="lbl"><span className="dot" style={{ background: 'var(--purple)' }} />Despesas Recorrentes</span><span className="val" style={{ color: 'var(--purple)' }}>R$ 2.600,00</span></div>
          <div className="divider" />
          <div className="kv total"><span className="lbl">Saldo</span><span className="val" style={{ color: 'var(--success)' }}>R$ 2.300,00</span></div>
        </div>

        <div className="card">
          <div className="label" style={{ color: 'var(--success)' }}>Receitas no Mês</div>
          <div className="big" style={{ color: 'var(--success)', margin: '4px 0 8px' }}>{brl(7000)}</div>
          <p className="sec-hdr">Recorrentes</p>
          <div className="row">
            <span className="chip income"><span className="ms">autorenew</span></span>
            <div style={{ flex: 1, minWidth: 0 }}><div className="nm">Salário</div><div className="date">Todo dia 5</div></div>
            <span className="val" style={{ color: 'var(--success)' }}>+R$ 6.500,00</span>
            <span className="ms pencil" style={{ color: 'var(--purple)' }}>edit</span>
          </div>
          <p className="sec-hdr" style={{ marginTop: 16 }}>Pontuais</p>
          <div className="row">
            <span className="chip income"><span className="ms">payments</span></span>
            <div style={{ flex: 1, minWidth: 0 }}><div className="nm">Venda do celular velho</div><div className="date">20/08/2026</div></div>
            <span className="val" style={{ color: 'var(--success)' }}>+R$ 500,00</span>
            <span className="ms pencil" style={{ color: 'var(--purple)' }}>edit</span>
          </div>
        </div>

        <div className="card">
          <div className="label sec" style={{ marginBottom: 12 }}>Orçamento diário</div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
            <div>
              <div style={{ fontSize: 12, color: 'var(--ink-2)', marginBottom: 2 }}>Pode gastar hoje</div>
              <div className="big" style={{ color: 'var(--danger)' }}>{brl(200)}</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontSize: 12, color: 'var(--ink-2)', marginBottom: 2 }}>Disponível no mês</div>
              <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink-2)' }}>R$ 2.300,00</div>
            </div>
          </div>
          <div className="bar" style={{ margin: '12px 0 6px' }}><div className="bar-fill" style={{ '--to': '100%', background: 'var(--bud-orange)' }} /></div>
          <div style={{ fontSize: 12, color: 'var(--ink-2)', textAlign: 'right' }}>7 dias restantes</div>
          <div className="redbox" style={{ marginTop: 12 }}>
            <div style={{ fontSize: 12, color: 'var(--ink-2)', marginBottom: 2 }}>Gasto hoje</div>
            <div className="big" style={{ color: 'var(--danger)' }}>{brl(57)}</div>
          </div>
          <div className="label sec" style={{ margin: '14px 0 2px', fontSize: 10 }}>Compras de hoje</div>
          {comprasHoje.map(([n, v], i) => (
            <div key={i} className="today-row">
              <span style={{ color: 'var(--ink)', flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', marginRight: 8 }}>{n}</span>
              <span style={{ color: 'var(--danger)', fontWeight: 600 }}>−R$ {v}</span>
            </div>
          ))}
        </div>

        <div className="card">
          <div className="card-head"><div className="label" style={{ color: 'var(--blue)' }}>Gastos no Mês</div><span className="ms gear">settings</span></div>
          <div className="big" style={{ color: 'var(--blue)' }}>{brl(1500)}</div>
          <div className="bar thin" style={{ margin: '12px 0 6px' }}><div className="bar-fill" style={{ '--to': '38%', background: 'var(--blue-400)' }} /></div>
          <div style={{ fontSize: 12, color: 'var(--ink-2)', marginBottom: 8 }}><strong style={{ color: 'var(--blue)' }}>38%</strong> da meta de R$ 4.000,00 gastos</div>
          {gasto.map(([ic, n, c, v], i) => (
            <div key={i} className="row">
              <span className="chip blue"><span className="ms">{ic}</span></span>
              <span className="nm blue">{n} <span className="c">({c})</span></span>
              <span className="val dark">R$ {v}</span>
              <span className="ms arrow">chevron_right</span>
            </div>
          ))}
        </div>

        <div className="card">
          <div className="label" style={{ color: 'var(--cyan)' }}>Compras Parceladas</div>
          <div className="big" style={{ color: 'var(--cyan)', margin: '4px 0 8px' }}>{brl(600)}<span style={{ fontSize: 12, color: 'var(--ink-2)', fontWeight: 400 }}>/mês</span></div>
          {parceladas.map(([ic, n, v, paid, total, ate, rest], i) => {
            const w = Math.min(100, Math.round((paid / total) * 100));
            return (
              <div key={i} className="prow">
                <span className="chip cyan"><span className="ms">{ic}</span></span>
                <div className="body">
                  <div className="ptop"><span className="pnm">{n}</span><span className="pval">R$ {v}<span className="u">/mês</span></span></div>
                  <div className="bar thin"><div className="bar-fill" style={{ '--to': w + '%', background: 'var(--cyan-500)' }} /></div>
                  <div className="pmeta"><span className="l">{paid}/{total} pagas · até {ate}</span><span className="r">{rest} restante</span></div>
                </div>
                <span className="ms pencil" style={{ color: 'var(--cyan)', alignSelf: 'flex-start', marginTop: 2 }}>edit</span>
              </div>
            );
          })}
        </div>

        <div className="card">
          <div className="card-head"><div className="label" style={{ color: 'var(--purple)' }}>Despesas Recorrentes</div><span className="ms gear">settings</span></div>
          <div className="big" style={{ color: 'var(--purple)' }}>{brl(2600)}</div>
          <div className="bar thin" style={{ margin: '12px 0 6px' }}><div className="bar-fill" style={{ '--to': '100%', background: 'var(--purple)' }} /></div>
          <div style={{ fontSize: 12, color: 'var(--ink-2)', marginBottom: 12 }}><strong style={{ color: 'var(--purple)' }}>100%</strong> da meta de R$ 2.600,00 gastos</div>
          <div className="cta" style={{ padding: 12, fontSize: 14, margin: '0 0 12px' }}>Adicionar Despesa Recorrente</div>
          {recorrentes.map(([ic, n, c, v, badge], i) => (
            <div key={i} className="row">
              <span className="chip purple"><span className="ms">{ic}</span>{badge ? <span className="badge">{badge}</span> : null}</span>
              <span className="nm purple">{n} <span className="c">({c})</span></span>
              <span className="val dark">R$ {v}</span>
              <span className="ms arrow">chevron_right</span>
            </div>
          ))}
          <div style={{ textAlign: 'right', fontSize: 12, color: 'var(--ink-2)', marginTop: 12 }}>Pago: <span style={{ color: 'var(--success)', fontWeight: 600 }}>R$ 2.000,00</span> / R$ 2.600,00</div>
        </div>

        <div className="card" style={{ border: '1px solid var(--surface-2)' }}>
          <div className="split-top">
            <div className="col"><span className="sl" style={{ color: 'var(--blue)' }}>Gastos do Mês</span><span className="sp" style={{ color: 'var(--blue)' }}>32%</span></div>
            <div className="col c"><span className="sl" style={{ color: 'var(--cyan)' }}>Parceladas</span><span className="sp" style={{ color: 'var(--cyan)' }}>13%</span></div>
            <div className="col r"><span className="sl" style={{ color: 'var(--purple)' }}>Recorrentes</span><span className="sp" style={{ color: 'var(--purple)' }}>55%</span></div>
          </div>
          <div className="split-bar">
            <div style={{ '--to': '32%', background: 'var(--blue-400)' }} />
            <div style={{ '--to': '13%', background: 'var(--cyan-500)' }} />
            <div style={{ '--to': '55%', background: 'var(--purple)' }} />
          </div>
          <div className="split-vals">
            <span style={{ color: 'var(--blue)' }}>R$ 1.500,00</span>
            <span style={{ color: 'var(--cyan)' }}>R$ 600,00</span>
            <span style={{ color: 'var(--purple)' }}>R$ 2.600,00</span>
          </div>
        </div>

        <div className="card">
          <div className="card-head"><div className="label sec">Gastos por dia</div><span style={{ fontSize: 12, color: 'var(--ink-2)' }}>junho</span></div>
          <div className="days">
            {dias.map((v, i) => (
              <div key={i} style={{ '--to': (v / mx * 100) + '%', background: i === dias.length - 1 ? 'var(--purple)' : 'rgba(106,13,173,.2)' }} />
            ))}
          </div>
          <div className="days-x"><span>1</span><span>6</span><span>11</span><span>16</span><span>21</span><span>26</span></div>
        </div>
      </div>
    </PhoneShell>
  );
}

function PhoneImportar({ width = 320, card = false }) {
  const items = [
    ['Supermercado', '05/08/2026', '🛒', 'Supermercado', '180,00'],
    ['Farmácia', '08/08/2026', '❤️', 'Saúde', '60,00'],
    ['Restaurante', '12/08/2026', '🍴', 'Restaurante', '90,00'],
    ['Uber', '15/08/2026', '🚌', 'Transporte', '30,00'],
    ['Spotify', '18/08/2026', '🔖', 'Assinaturas', '20,00'],
    ['Cinema', '22/08/2026', '🎮', 'Lazer', '40,00'],
  ];
  return (
    <PhoneShell scope="aps-import" active="importar" width={width} card={card}>
      <PhoneStatusHeader greet="Boa tarde, Maria!" />
      <div className="imp-body">
        <div className="imp-eye"><span className="ms">upload_file</span> Importar dados</div>
        <div className="imp-h1">Transforme seus arquivos em registros organizados.</div>
        <p className="imp-desc">Importe faturas, extratos ou planilhas para começar mais rápido, atualizar lançamentos pendentes ou completar meses anteriores. A IA lê o documento e o Econome confere cada lançamento com o que você já tem: separa <b>gastos do mês</b>, <b>parcelas</b> e <b>despesas recorrentes</b>, e avisa o que já está registrado — sem duplicar.</p>

        <div className="flow">
          <div className="banner">
            <span className="ms">auto_awesome</span>
            <div><div className="k">Formato detectado</div><div className="v">Lista de transações com data (CSV com colunas Data, Descrição, Valor)</div></div>
          </div>

          <div className="card tipo">
            <div className="lbl">Tipo de documento <span>(ajuste se a detecção estiver errada)</span></div>
            <div className="segs">
              <div className="seg off"><span className="ms">credit_card</span> Fatura de cartão</div>
              <div className="seg on"><span className="ms">account_balance</span> Extrato / planilha</div>
            </div>
            <div className="hint">Os novos lançamentos entram como importados do extrato/planilha.</div>
          </div>

          <div className="card summary">
            <div className="top">
              <div className="lidos">8 lançamentos lidos</div>
              <div><div className="total">R$ 420,00</div><div className="sel">6 selecionados</div></div>
            </div>
            <div className="rev">Revise os boxes abaixo. Cada item pode ser incluído/excluído e ter a categoria ajustada.</div>
          </div>

          <div className="box">
            <div className="box-head">
              <div className="box-chip" style={{ background: 'rgba(106,13,173,.1)' }}><span className="ms" style={{ color: 'var(--purple)' }}>shopping_bag</span></div>
              <div style={{ flex: 1 }}><div className="box-title">Novos lançamentos</div><div className="box-sub">6 de 6 selecionados · R$ 420,00</div></div>
              <span className="ms" style={{ color: 'var(--ink-2)' }}>expand_less</span>
            </div>
            <div className="box-body">
              <div className="box-hint">Lançamentos novos — entram no mês da data informada.</div>
              {items.map(([nm, dt, emoji, cat, val], i) => (
                <div key={i} className="irow">
                  <span className="cbox"><span className="ms">check</span></span>
                  <div className="mid">
                    <div className="nm">{nm}</div>
                    <div className="dt">{dt}</div>
                    <div className="selpill"><span>{emoji}</span><span className="cat">{cat}</span><span className="ms">expand_more</span></div>
                  </div>
                  <span className="val">R$ {val}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="box">
            <div className="box-head collapsed">
              <div className="box-chip" style={{ background: 'rgba(156,163,175,.15)' }}><span className="ms" style={{ color: 'var(--gray)' }}>done_all</span></div>
              <div style={{ flex: 1 }}><div className="box-title">Já registrados</div><div className="box-sub">0 de 2 selecionados</div></div>
              <span className="ms" style={{ color: 'var(--ink-2)' }}>expand_more</span>
            </div>
          </div>

          <div className="actions">
            <div className="btn-cancel">Cancelar</div>
            <div className="btn-confirm">Confirmar 6 lançamentos</div>
          </div>
        </div>
      </div>
    </PhoneShell>
  );
}

// ─────────────────────────── ANÁLISES ───────────────────────────
function PhoneAnalises({ width = 320, card = false }) {
  const PURPLE = '#6A0DAD', BLUE = '#3B82F6', CYAN = '#06B6D4', GREEN = '#4CAF50', RED = '#EF4444';
  const MESES = ['Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago'];
  const A = {
    composicao: [
      { l: 'Recorrentes', v: 'R$ 1.400,00', pct: 56, color: PURPLE },
      { l: 'Gastos do Mês', v: 'R$ 800,00', pct: 32, color: BLUE },
      { l: 'Parceladas', v: 'R$ 300,00', pct: 12, color: CYAN },
    ],
    formaPagamento: [
      { l: 'Crédito', pct: 56, v: 'R$ 1.400,00', color: PURPLE },
      { l: 'PIX', pct: 40, v: 'R$ 1.000,00', color: CYAN },
      { l: 'Débito', pct: 4, v: 'R$ 100,00', color: 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$ 900,00', receitas: 'R$ 5.000,00', pct: 18 },
    categorias: [
      { l: 'Supermercado', v: 'R$ 640,00', delta: '▼ R$ 60,00 (-9%)', kind: 'down', pct: 100 },
      { l: 'Restaurante', v: 'R$ 360,00', delta: '▲ R$ 40,00 (+13%)', kind: 'up', pct: 56 },
      { l: 'Transporte', v: 'R$ 210,00', delta: '▼ R$ 30,00 (-12%)', kind: 'down', pct: 33 },
      { l: 'Saúde', v: 'R$ 180,00', delta: 'novo', kind: 'new', pct: 28 },
    ],
    tags: [
      { l: 'iFood', n: 4, v: 'R$ 240,00', pct: 100 },
      { l: 'Uber', n: 6, v: 'R$ 180,00', pct: 75 },
      { l: 'Farmácia', n: 2, v: 'R$ 120,00', pct: 50 },
      { l: 'Padaria', n: 8, v: 'R$ 90,00', pct: 38 },
    ],
    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],
  };
  const dK = { down: 'down', up: 'up', new: 'new' };
  const cardHTML = (title, badge, subtitle, content, tip) =>
    `<div class="card"><div class="chead"><div class="ctitle">${title}</div>${badge ? `<span class="cbadge">${badge}</span>` : ''}</div>` +
    (subtitle ? `<div class="csub">${subtitle}</div>` : '') + content +
    (tip ? `<div class="tip ${tip.k}">${tip.t}</div>` : '') + `</div>`;

  const parts = [];
  parts.push(`<div class="anl-head"><div class="anl-title"><span class="ms anl-ic">bar_chart</span><div><div class="t">Análises</div><div class="s">Insights financeiros do período selecionado</div></div></div><div class="period"><span class="ms">chevron_left</span>Ago 2026<span class="ms">chevron_right</span></div></div>`);

  const cr = A.credito;
  parts.push(cardHTML('Crédito vs receitas', 'Ago 2026', 'Quanto da sua renda já foi comprometida com o cartão de crédito.',
    `<div style="display:flex;justify-content:space-between;margin:10px 0 8px"><div><div class="lbl2">Gasto no crédito</div><div class="big2 mono" style="color:${RED}">${cr.gasto}</div></div><div style="text-align:right"><div class="lbl2">Receitas</div><div class="big2 mono" style="color:${GREEN}">${cr.receitas}</div></div></div><div class="track" style="margin-bottom:8px"><div class="pbar-fill" style="--to:${cr.pct}%;background:${GREEN}"></div></div><div style="text-align:center;font-size:12.5px;color:var(--ink-2)"><strong>${cr.pct}%</strong> da receita comprometida com crédito</div>`,
    { k: 'green', t: '✓ Crédito sob controle — boa folga na renda.' }));

  parts.push(cardHTML('Quanto sobrou por mês', '6 meses', '% da renda que sobrou depois de todas as despesas.',
    `<svg viewBox="0 0 200 78" style="width:100%;height:92px;display:block;margin-top:8px"><line x1="0" y1="44" x2="200" y2="44" stroke="var(--border)" stroke-width="0.5" stroke-dasharray="2 2"/>${A.sobrou.map((d, i) => { const x = 16 + i * 31, w = 15, k = 1.2, h = Math.abs(d.v) * k; const y = d.v >= 0 ? 44 - h : 44; return `<rect class="gbar${d.v < 0 ? ' neg' : ''}" x="${x}" y="${y}" width="${w}" height="${h}" fill="${d.v >= 0 ? GREEN : RED}" rx="1"/><text x="${x + w / 2}" y="74" font-size="6" fill="var(--ink-4)" text-anchor="middle">${d.m}</text>`; }).join('')}</svg>`,
    { k: 'green', t: '✓ Mês positivo: você guardou 30%.' }));

  let acc = 0;
  const donut = `<svg viewBox="0 0 42 42" style="width:88px;height:88px;flex-shrink:0"><circle cx="21" cy="21" r="15.915" fill="none" stroke="var(--surface-2)" stroke-width="5"/>${A.composicao.map(s => { const off = 25 - acc; acc += s.pct; return `<circle cx="21" cy="21" r="15.915" fill="none" stroke="${s.color}" stroke-width="5" stroke-dasharray="${s.pct} ${100 - s.pct}" stroke-dashoffset="${off}" stroke-linecap="round"/>`; }).join('')}</svg>`;
  parts.push(cardHTML('Composição das despesas', 'Ago 2026', null,
    `<div style="display:flex;align-items:center;gap:16px;margin-top:10px">${donut}<div style="flex:1">${A.composicao.map(s => `<div style="display:flex;align-items:center;gap:8px;padding:3px 0"><span style="width:9px;height:9px;border-radius:50%;background:${s.color};flex-shrink:0"></span><span style="font-size:13px;color:var(--ink-2);flex:1">${s.l}</span><span class="mono" style="font-size:13px;font-weight:700">${s.v}</span></div>`).join('')}</div></div>`,
    { k: 'plain', t: '💡 Maior fatia: Recorrentes (56%).' }));

  (() => {
    const d = A.saldoAcum, n = d.length, max = 14, min = -5, range = max - min;
    const X = i => (i / (n - 1)) * 196 + 2, Y = v => 6 + ((max - v) / range) * 52;
    const pts = d.map((v, i) => `${X(i).toFixed(1)},${Y(v).toFixed(1)}`).join(' ');
    parts.push(cardHTML('Saldo acumulado', 'Ago 2026', 'Como seu saldo evoluiu dia a dia. Abaixo da linha = no vermelho.',
      `<svg viewBox="0 0 200 66" style="width:100%;height:82px;display:block;margin-top:8px"><path class="area-fill" 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(--border)" stroke-width="0.5" stroke-dasharray="2 2"/><polyline points="${pts}" fill="none" stroke="${PURPLE}" stroke-width="1.4"/></svg>`,
      { k: 'orange', t: '⚠ Você passou 2 dias no vermelho neste mês.' }));
  })();

  (() => {
    const kEvo = 1.4, base = 64;
    const bars = A.evolucao.map((d, i) => {
      const x = 16 + i * 31, w = 15, hg = d.gas * kEvo, hp = d.parc * kEvo, hr = d.rec * kEvo;
      const yGas = base - hg, yParc = yGas - hp, yRec = yParc - hr;
      return `<g class="gbar"><rect x="${x}" y="${yGas}" width="${w}" height="${hg}" fill="${BLUE}" rx="1"/><rect x="${x}" y="${yParc}" width="${w}" height="${hp}" fill="${CYAN}" rx="1"/><rect x="${x}" y="${yRec}" width="${w}" height="${hr}" fill="${PURPLE}" rx="1"/></g><text x="${x + w / 2}" y="72" font-size="6" fill="var(--ink-4)" text-anchor="middle">${d.m}</text>`;
    }).join('');
    const line = A.evolucao.map((d, i) => `${16 + i * 31 + 7.5},${(base - d.receita * kEvo).toFixed(1)}`).join(' ');
    const dots = A.evolucao.map((d, i) => `<circle cx="${16 + i * 31 + 7.5}" cy="${(base - d.receita * kEvo).toFixed(1)}" r="1.8" fill="${GREEN}"/>`).join('');
    const legend = `<div class="legend">${[['Recorrentes', PURPLE], ['Parceladas', CYAN], ['Gastos do Mês', BLUE], ['Receitas', GREEN]].map(([l, c]) => `<span><span class="sw" style="background:${c}"></span>${l}</span>`).join('')}</div>`;
    parts.push(cardHTML('Evolução — receitas vs despesas', '6 meses', 'Receitas (linha) contra despesas por tipo (barras), mês a mês.',
      `<svg viewBox="0 0 200 76" style="width:100%;height:120px;display:block;margin-top:8px">${bars}<polyline points="${line}" fill="none" stroke="${GREEN}" stroke-width="1.6"/>${dots}</svg>${legend}`,
      { k: 'green', t: '✓ Sua melhor folga foi em Agosto.' }));
  })();

  (() => {
    let a2 = 0;
    const dn = `<svg viewBox="0 0 42 42" style="width:88px;height:88px;flex-shrink:0"><circle cx="21" cy="21" r="15.915" fill="none" stroke="var(--surface-2)" stroke-width="5"/>${A.formaPagamento.map(s => { const off = 25 - a2; a2 += s.pct; return `<circle cx="21" cy="21" r="15.915" fill="none" stroke="${s.color}" stroke-width="5" stroke-dasharray="${s.pct} ${100 - s.pct}" stroke-dashoffset="${off}" stroke-linecap="round"/>`; }).join('')}</svg>`;
    parts.push(cardHTML('Gastos por forma de pagamento', 'Ago 2026', 'Por onde seu dinheiro saiu neste mês.',
      `<div style="display:flex;align-items:center;gap:16px;margin-top:10px">${dn}<div style="flex:1">${A.formaPagamento.map(f => `<div style="display:flex;align-items:center;gap:8px;padding:3px 0"><span style="width:9px;height:9px;border-radius:50%;background:${f.color};flex-shrink:0"></span><span style="font-size:13px;color:var(--ink-2);flex:1">${f.l}</span><b style="font-size:12.5px">${f.pct}%</b> <span class="mono" style="font-size:12.5px;color:var(--ink-2)">${f.v}</span></div>`).join('')}</div></div>`,
      { k: 'orange', t: '⚠ Crédito é sua forma principal (56%) — atenção à fatura.' }));
  })();

  parts.push(cardHTML('Análise por categoria', 'Ago 2026 vs Jul', 'Onde você mais gasta e o que mudou vs Jul.',
    `<div class="tabs3"><div class="on">Gastos do Mês</div><div>Parceladas</div><div>Recorrentes</div></div>${A.categorias.map(c => `<div class="catrow"><div class="top"><span style="display:inline-flex;align-items:center;min-width:0"><span class="nm">${c.l}</span><span class="delta ${dK[c.kind]}">${c.delta}</span></span><span class="v mono">${c.v}</span></div><div class="track" style="height:5px"><div class="pbar-fill" style="--to:${c.pct}%;background:${BLUE}"></div></div></div>`).join('')}`,
    { k: 'orange', t: '⚠ Maior alta: Restaurante +13% vs Julho.' }));

  parts.push(cardHTML('Gastos por tag', 'Ago 2026', 'Suas tags agrupadas — quanto foi para cada lugar ou tema.',
    `<div style="margin-top:8px">${A.tags.map(t => `<div class="tagrow"><div class="top"><span class="l"><span class="ms">sell</span><span class="nm">${t.l}</span><span class="n">·${t.n}</span></span><span class="v mono">${t.v}</span></div><div class="track" style="height:4px"><div class="pbar-fill" style="--to:${t.pct}%;background:${PURPLE}"></div></div></div>`).join('')}</div>`,
    null));

  (() => {
    const d = A.evolCategoria, n = d.length, max = 18;
    const X = i => (i / (n - 1)) * 184 + 8, Y = v => 8 + ((max - v) / max) * 40;
    const pts = d.map((v, i) => `${X(i).toFixed(1)},${Y(v).toFixed(1)}`).join(' ');
    const dots = d.map((v, i) => `<circle cx="${X(i).toFixed(1)}" cy="${Y(v).toFixed(1)}" r="1.7" fill="${PURPLE}"/>`).join('');
    const labels = MESES.map((m, i) => `<text x="${X(i).toFixed(1)}" y="58" font-size="6" fill="var(--ink-4)" text-anchor="middle">${m}</text>`).join('');
    parts.push(cardHTML('Evolução de uma categoria', '6 meses',
      `<div style="display:flex;justify-content:space-between;align-items:center;gap:8px"><span style="flex:1">Acompanhe uma categoria ao longo do tempo.</span><span class="catsel">Compras variadas <span class="ms">expand_more</span></span></div>`,
      `<svg viewBox="0 0 200 60" style="width:100%;height:76px;display:block;margin-top:6px"><polyline points="${pts}" fill="none" stroke="${PURPLE}" stroke-width="1.6"/>${dots}${labels}</svg>`,
      { k: 'green', t: '✓ Compras variadas em queda: -73% vs a média dos meses anteriores.' }));
  })();

  parts.push(cardHTML('Gastos no crédito', '6 meses', 'Total gasto no cartão em cada mês — útil para prever o tamanho das faturas.',
    `<svg viewBox="0 0 200 76" style="width:100%;height:92px;display:block;margin-top:8px">${A.gastosCredito.map((h, i) => { const x = 16 + i * 31, w = 15, k = 1.9, hh = h * k; return `<rect class="gbar" x="${x}" y="${(62 - hh).toFixed(1)}" width="${w}" height="${hh.toFixed(1)}" fill="${PURPLE}" rx="1"/><text x="${x + w / 2}" y="72" font-size="6" fill="var(--ink-4)" text-anchor="middle">${MESES[i]}</text>`; }).join('')}</svg>`,
    { k: 'plain', t: '💡 Maior fatura no período: Março.' }));

  return (
    <PhoneShell scope="aps-analise" active="analises" width={width} card={card}>
      <PhoneStatusHeader greet="Boa tarde, Maria!" />
      <div className="anl-body" dangerouslySetInnerHTML={{ __html: parts.join('') }} />
    </PhoneShell>
  );
}

// ─────────────────────────── FAMÍLIA / CONTA ───────────────────────────
function PhoneConta({ width = 320, card = false }) {
  const 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' },
  ];
  const membros = [
    { ini: 'MG', nome: 'Maria Gomes (você)', badge: 'Admin', badgeBg: 'var(--purple-tint)', badgeColor: 'var(--purple)', sub: null },
    { ini: 'AR', nome: 'Aline Ribeiro', badge: 'Membro', badgeBg: 'var(--surface-2)', badgeColor: 'var(--ink-2)', sub: 'somente mês atual' },
  ];
  const passos = ['Abra o menu do navegador (canto superior).', 'Toque em "Instalar Econome" ou "Adicionar à tela inicial".'];
  return (
    <PhoneShell scope="aps-conta" active="conta" width={width} card={card}>
      <PhoneStatusHeader greet="Boa noite, Maria!">
        <div className="htitle"><span className="ms">manage_accounts</span><div><div className="t">Minha conta</div><div className="s">Perfil, família, plano e segurança</div></div></div>
      </PhoneStatusHeader>
      <div className="c-body">
        <div className="totals">
          <div className="tot green"><div className="k">Total receitas</div><div className="v mono" style={{ color: 'var(--green-deep)' }}>R$ 60.000,00</div></div>
          <div className="tot red"><div className="k">Total despesas</div><div className="v mono" style={{ color: 'var(--danger)' }}>R$ 42.000,00</div></div>
        </div>

        <div className="mc">
          <div className="mc-head">
            <span className="cico" style={{ background: 'var(--purple-tint)' }}><span className="ms" style={{ color: 'var(--purple)' }}>install_mobile</span></span>
            <div><div className="mc-t">Instalar o Econome</div><div className="mc-s">Tenha o app na tela inicial — abre rápido, em tela cheia e sem a barra do navegador.</div></div>
          </div>
          {passos.map((p, i) => (
            <div key={i} className="step"><span className="stepn">{i + 1}</span>{p}</div>
          ))}
        </div>

        {acoes.map((a) => (
          <div key={a.l} className="arow">
            <span className="cico"><span className="ms">{a.g}</span></span>
            <span className="al">{a.l}</span>
            <span className="ms ch">chevron_right</span>
          </div>
        ))}

        <div className="mc">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
            <div><div className="mc-t">Família</div><div className="mc-s">2 de 4 membros</div></div>
            <span className="invite"><span className="ms">person_add</span>Convidar</span>
          </div>
          {membros.map((m, i) => (
            <div key={i} className={'mem' + (i === 0 ? ' first' : '')}>
              <span className="mem-av">{m.ini}</span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="mem-nm">{m.nome}</div>
                <div className="mem-badges">
                  <span className="mem-badge" style={{ background: m.badgeBg, color: m.badgeColor }}>{m.badge}</span>
                  {m.sub && <span className="mem-sub">{m.sub}</span>}
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="mc">
          <div className="mc-head">
            <span className="cico" style={{ background: 'var(--green-tint)' }}><span className="ms" style={{ color: 'var(--green-deep)' }}>check_circle</span></span>
            <div><div className="mc-t" style={{ color: 'var(--green-deep)' }}>Plano Anual ativo</div><div className="mc-s">Acesso completo ativo</div></div>
          </div>
          <div className="btn-out">Gerenciar assinatura</div>
          <div className="link-c">Ver detalhes do plano</div>
        </div>

        <div className="signout">Sair da conta</div>
      </div>
    </PhoneShell>
  );
}

// ─────────────────────────── HISTÓRICO ───────────────────────────
// Mês passado (somente leitura): navegador de mês + cards, sem entrada rápida.
function PhoneHistorico({ width = 320, card = false }) {
  const brl = (n) => 'R$ ' + n.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
  const gasto = [
    ['shopping_cart', 'Supermercado', 7, '560,00'], ['restaurant', 'Restaurante', 4, '300,00'],
    ['medical_services', 'Saúde', 3, '220,00'], ['commute', 'Transporte', 5, '200,00'],
    ['sports_esports', 'Lazer e Entretenimento', 2, '120,00'],
  ];
  const recorrentes = [
    ['home', 'Moradia', 1, '1.800,00', 0], ['bolt', 'Energia Elétrica', 1, '230,00', 0],
    ['fitness_center', 'Academia', 1, '200,00', 0], ['subscriptions', 'Assinaturas', 4, '120,00', 0],
    ['wifi', 'Internet', 1, '150,00', 0],
  ];
  const parceladas = [
    ['devices', 'Notebook', '300,00', 2, 10, 'jun. de 2027', 'R$ 2.400,00'],
    ['smartphone', 'Celular', '200,00', 1, 12, 'jul. de 2027', 'R$ 2.200,00'],
    ['headphones', 'Fone de ouvido', '100,00', 1, 5, 'dez. de 2026', 'R$ 400,00'],
  ];
  const dias = [24, 12, 20, 30, 16, 26, 34, 14, 40, 20, 12, 22, 18, 10, 28, 22, 16, 24, 34, 30, 18, 28, 24, 40, 26, 20, 30, 14, 22, 34, 24];
  const mx = Math.max(...dias);
  return (
    <PhoneShell scope="aps-mes" active="history" width={width} card={card}>
      <PhoneStatusHeader greet="Boa noite, Maria!">
        <div className="stats">
          <div className="stat"><div className="k">Receitas</div><div className="v">{brl(6800)}</div></div>
          <div className="stat"><div className="k">Despesas</div><div className="v">{brl(4500)}</div></div>
          <div className="stat"><div className="k">Saldo</div><div className="v g">{brl(2300)}</div></div>
        </div>
      </PhoneStatusHeader>
      <div className="cards">
        <div className="mnav"><span className="ms">chevron_left</span>Julho de 2026<span className="ms">chevron_right</span></div>

        <div className="card">
          <div className="label sec" style={{ marginBottom: 12 }}>Resumo — Julho de 2026</div>
          <div className="kv"><span className="lbl"><span className="dot" style={{ background: 'var(--success)' }} />Receitas</span><span className="val" style={{ color: 'var(--success)' }}>R$ 6.800,00</span></div>
          <div className="divider" />
          <div className="kv"><span className="lbl"><span className="dot" style={{ background: 'var(--blue)' }} />Gastos do Mês</span><span className="val" style={{ color: 'var(--blue)' }}>R$ 1.400,00</span></div>
          <div className="kv"><span className="lbl"><span className="dot" style={{ background: 'var(--cyan)' }} />Compras Parceladas</span><span className="val" style={{ color: 'var(--cyan)' }}>R$ 600,00</span></div>
          <div className="kv"><span className="lbl"><span className="dot" style={{ background: 'var(--purple)' }} />Despesas Recorrentes</span><span className="val" style={{ color: 'var(--purple)' }}>R$ 2.500,00</span></div>
          <div className="divider" />
          <div className="kv total"><span className="lbl">Saldo</span><span className="val" style={{ color: 'var(--success)' }}>R$ 2.300,00</span></div>
        </div>

        <div className="card">
          <div className="card-head"><div className="label" style={{ color: 'var(--blue)' }}>Gastos no Mês</div><span className="ms gear">settings</span></div>
          <div className="big" style={{ color: 'var(--blue)' }}>{brl(1400)}</div>
          <div className="bar thin" style={{ margin: '12px 0 6px' }}><div className="bar-fill" style={{ '--to': '35%', background: 'var(--blue-400)' }} /></div>
          <div style={{ fontSize: 12, color: 'var(--ink-2)', marginBottom: 8 }}><strong style={{ color: 'var(--blue)' }}>35%</strong> da meta de R$ 4.000,00 gastos</div>
          {gasto.map(([ic, n, c, v], i) => (
            <div key={i} className="row">
              <span className="chip blue"><span className="ms">{ic}</span></span>
              <span className="nm blue">{n} <span className="c">({c})</span></span>
              <span className="val dark">R$ {v}</span>
              <span className="ms arrow">chevron_right</span>
            </div>
          ))}
        </div>

        <div className="card">
          <div className="label" style={{ color: 'var(--cyan)' }}>Compras Parceladas</div>
          <div className="big" style={{ color: 'var(--cyan)', margin: '4px 0 8px' }}>{brl(600)}<span style={{ fontSize: 12, color: 'var(--ink-2)', fontWeight: 400 }}>/mês</span></div>
          {parceladas.map(([ic, n, v, paid, total, ate, rest], i) => {
            const w = Math.min(100, Math.round((paid / total) * 100));
            return (
              <div key={i} className="prow">
                <span className="chip cyan"><span className="ms">{ic}</span></span>
                <div className="body">
                  <div className="ptop"><span className="pnm">{n}</span><span className="pval">R$ {v}<span className="u">/mês</span></span></div>
                  <div className="bar thin"><div className="bar-fill" style={{ '--to': w + '%', background: 'var(--cyan-500)' }} /></div>
                  <div className="pmeta"><span className="l">{paid}/{total} pagas · até {ate}</span><span className="r">{rest} restante</span></div>
                </div>
                <span className="ms pencil" style={{ color: 'var(--cyan)', alignSelf: 'flex-start', marginTop: 2 }}>edit</span>
              </div>
            );
          })}
        </div>

        <div className="card">
          <div className="card-head"><div className="label" style={{ color: 'var(--purple)' }}>Despesas Recorrentes</div><span className="ms gear">settings</span></div>
          <div className="big" style={{ color: 'var(--purple)' }}>{brl(2500)}</div>
          <div className="bar thin" style={{ margin: '12px 0 12px' }}><div className="bar-fill" style={{ '--to': '100%', background: 'var(--purple)' }} /></div>
          {recorrentes.map(([ic, n, c, v, badge], i) => (
            <div key={i} className="row">
              <span className="chip purple"><span className="ms">{ic}</span>{badge ? <span className="badge">{badge}</span> : null}</span>
              <span className="nm purple">{n} <span className="c">({c})</span></span>
              <span className="val dark">R$ {v}</span>
              <span className="ms arrow">chevron_right</span>
            </div>
          ))}
        </div>

        <div className="card" style={{ border: '1px solid var(--surface-2)' }}>
          <div className="split-top">
            <div className="col"><span className="sl" style={{ color: 'var(--blue)' }}>Gastos do Mês</span><span className="sp" style={{ color: 'var(--blue)' }}>31%</span></div>
            <div className="col c"><span className="sl" style={{ color: 'var(--cyan)' }}>Parceladas</span><span className="sp" style={{ color: 'var(--cyan)' }}>13%</span></div>
            <div className="col r"><span className="sl" style={{ color: 'var(--purple)' }}>Recorrentes</span><span className="sp" style={{ color: 'var(--purple)' }}>56%</span></div>
          </div>
          <div className="split-bar">
            <div style={{ '--to': '31%', background: 'var(--blue-400)' }} />
            <div style={{ '--to': '13%', background: 'var(--cyan-500)' }} />
            <div style={{ '--to': '56%', background: 'var(--purple)' }} />
          </div>
          <div className="split-vals">
            <span style={{ color: 'var(--blue)' }}>R$ 1.400,00</span>
            <span style={{ color: 'var(--cyan)' }}>R$ 600,00</span>
            <span style={{ color: 'var(--purple)' }}>R$ 2.500,00</span>
          </div>
        </div>

        <div className="card">
          <div className="card-head"><div className="label sec">Gastos por dia</div><span style={{ fontSize: 12, color: 'var(--ink-2)' }}>julho</span></div>
          <div className="days">
            {dias.map((v, i) => (
              <div key={i} style={{ '--to': (v / mx * 100) + '%', background: 'rgba(106,13,173,.2)' }} />
            ))}
          </div>
          <div className="days-x"><span>1</span><span>6</span><span>11</span><span>16</span><span>21</span><span>26</span><span>31</span></div>
        </div>
      </div>
    </PhoneShell>
  );
}

// ─────────────────────────── ECONOMIAS ───────────────────────────
function PhoneEconomias({ width = 320, card = false }) {
  const RATES = [['SELIC', '14,0%'], ['CDI', '13,9%'], ['IPCA', '4,4%'], ['POUPANÇA', '8,4%'], ['ROT. CARTÃO', '12,2%'], ['USD', 'R$ 5,20'], ['EUR', 'R$ 6,05'], ['BTC', 'R$ 338k', '2,02%'], ['ETH', 'R$ 9.978', '1,05%']];
  const METAS = [
    ['directions_bike', 'Bicicleta Nova', 'R$ 1.500,00', 'R$ 6.000,00', 'abr. de 2027', 25, 'R$ 500,00'],
    ['smartphone', 'Novo Celular', 'R$ 400,00', 'R$ 4.000,00', 'ago. de 2027', 10, 'R$ 300,00'],
  ];
  const ratesHTML = RATES.map(([k, v, up]) => `<div class="rate"><div class="rk">${k}</div><div class="rv">${v}${up ? `<span style="color:var(--green-deep);font-size:8px;margin-left:2px">▲${up}</span>` : ''}</div></div>`).join('');
  const metasHTML = `<div class="card"><div class="chead"><div class="clabel"><span class="ms">flag</span>Metas de Economia</div><div class="cadd">+ Nova</div></div></div>` +
    METAS.map(g => `<div class="card goal"><div class="g-top"><div class="g-ic"><span class="ms">${g[0]}</span></div><div style="flex:1"><div class="g-nm">${g[1]}</div><div class="g-sub">${g[2]} de ${g[3]} · até ${g[4]}</div></div><span class="ms pencil">edit</span></div><div class="g-bar"><div style="width:${g[5]}%"></div></div><div class="g-meta"><span>${g[5]}% alcançado</span><span>Sugestão: <b style="color:var(--ink)">${g[6]}/mês</b></span></div><div class="g-actions"><div class="g-aporte">+ Aporte</div><div class="g-cnt"><span class="ms">expand_more</span>0</div></div></div>`).join('');
  const bodyHTML =
    `<div class="summary"><div class="scard"><div class="k">Guardado</div><div class="v" style="color:var(--purple)">R$ 1.900,00</div></div><div class="scard"><div class="k">Investido</div><div class="v" style="color:var(--green-deep)">R$ 12.000,00</div></div><div class="scard"><div class="k">Patrimônio</div><div class="v" style="color:var(--green-deep)">R$ 13.900,00</div></div></div>` +
    `<div class="card mercado"><div class="top"><div class="clabel"><span class="ms">bar_chart</span>Mercado</div><div class="upd">Atualizado às 12:21</div></div><div class="rates">${ratesHTML}</div></div>` +
    metasHTML;

  return (
    <PhoneShell scope="aps-econ" active="economias" width={width} card={card}>
      <PhoneStatusHeader greet="Boa noite, Maria!">
        <div className="htitle"><span className="ms">savings</span><div><div className="t">Economias</div><div className="s">Metas, investimentos e simulações</div></div></div>
        <div className="tabs">
          <div className="tab on"><span className="ms" style={{ color: 'var(--coral)' }}>track_changes</span>Metas</div>
          <div className="tab"><span className="ms" style={{ color: 'var(--blue)' }}>trending_up</span>Investidos</div>
          <div className="tab"><span className="ms" style={{ color: 'var(--orange)' }}>calculate</span>Simular</div>
        </div>
      </PhoneStatusHeader>
      <div className="e-body" dangerouslySetInnerHTML={{ __html: bodyHTML }} />
    </PhoneShell>
  );
}

function PixIcon() {
  return (
    <svg className="pix" viewBox="0 0 21 21" fill="none">
      <path d="M16.377 16.065c-.823 0-1.599-.32-2.181-.903l-3.15-3.149a.457.457 0 0 0-.633 0l-3.162 3.162a3.083 3.083 0 0 1-2.18.903h-.622l3.99 3.989a3.187 3.187 0 0 0 4.51 0l4-4h-.38z" fill="#32BCAD" />
      <path d="M4.875 4.923c.824 0 1.6.321 2.182.903l3.162 3.162c.227.227.599.227.827 0l3.15-3.15a3.083 3.083 0 0 1 2.181-.903h.38l-4.001-4a3.187 3.187 0 0 0-4.51 0l-3.99 3.988h.62z" fill="#32BCAD" />
      <path d="M20.066 8.244l-2.417-2.417a.68.68 0 0 1-.172.035h-1.099c-.568 0-1.125.23-1.526.632l-3.15 3.15a1.49 1.49 0 0 1-2.107 0L6.403 6.483a2.17 2.17 0 0 0-1.526-.632H3.526a.674.674 0 0 1-.162-.034L.937 8.245a1.935 1.935 0 0 0 0 2.512l2.427 2.427a.68.68 0 0 1 .162-.033h1.351c.568 0 1.125-.23 1.526-.632l3.162-3.162a1.49 1.49 0 0 1 2.107 0l3.15 3.15c.401.401.958.631 1.526.631h1.099c.06 0 .119.014.172.035l2.417-2.417a1.935 1.935 0 0 0 0-2.512z" fill="#32BCAD" />
    </svg>
  );
}

window.PhoneShell = PhoneShell;
window.PhoneStatusHeader = PhoneStatusHeader;
window.PhoneLogo = PhoneLogo;
window.PhoneMesAtual = PhoneMesAtual;
window.PhoneImportar = PhoneImportar;
window.PhoneAnalises = PhoneAnalises;
window.PhoneEconomias = PhoneEconomias;
window.PhoneHistorico = PhoneHistorico;
window.PhoneConta = PhoneConta;