function SavingsSection() {
  const cards = [
    {
      icon: 'Flag',
      title: 'Metas de economia',
      text: 'Defina um objetivo, acompanhe o quanto já guardou e veja a sugestão de aporte mensal para chegar lá.',
    },
    {
      icon: 'Trending',
      title: 'Investimentos e patrimônio',
      text: 'Registre saldos de contas e investimentos e acompanhe a evolução do seu patrimônio ao longo do tempo.',
    },
    {
      icon: 'Chart',
      title: 'Indicadores de mercado',
      text: 'Consulte Selic, CDI, IPCA e outros indicadores direto no painel, sem precisar abrir outro app.',
    },
    {
      icon: 'Calculator',
      title: 'Simulações com juros compostos',
      text: 'Simule cenários com aportes mensais e taxas diferentes para entender possibilidades, sem promessas.',
    },
  ];

  return (
    <section id="economias" style={{ position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden="true" style={{
        position: 'absolute', top: -120, right: -160, width: 700, height: 700,
        background: 'radial-gradient(circle, rgba(80, 208, 128, 0.08) 0%, transparent 65%)',
        pointerEvents: 'none',
      }} />

      <div className="container" style={{ position: 'relative' }}>
        <div className="section-header">
          <div className="eyebrow"><span className="dot" style={{ background: 'var(--green)' }} />Economias</div>
          <h2>Controle o que sai. Acompanhe o que fica.</h2>
          <p>
            Registre investimentos, acompanhe metas de economia, simule cenários com juros
            compostos e visualize seu patrimônio com mais clareza.
          </p>
        </div>

        <SavingsMockup />

        <div className="savings-cards-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 16,
          marginTop: 40,
        }}>
          {cards.map(c => {
            const I = Icon[c.icon];
            return (
              <div key={c.title} className="card" style={{ padding: 24 }}>
                <div style={{
                  width: 40, height: 40, borderRadius: 10,
                  background: 'var(--green-tint)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  marginBottom: 16,
                }}>
                  <I size={18} color="var(--green-deep)" />
                </div>
                <h3 style={{ fontSize: 16.5, marginBottom: 6 }}>{c.title}</h3>
                <p style={{ fontSize: 14, color: 'var(--ink-3)', lineHeight: 1.5 }}>{c.text}</p>
              </div>
            );
          })}
        </div>

        <p style={{
          textAlign: 'center', fontSize: 13, color: 'var(--ink-4)',
          maxWidth: 560, margin: '28px auto 0', lineHeight: 1.5,
        }}>
          Os números servem para organização e acompanhamento pessoal. O Econome não é
          uma corretora e não recomenda investimentos.
        </p>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .savings-cards-grid { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 560px) {
          .savings-cards-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function SavingsMockup() {
  return (
    <div style={{
      borderRadius: 'var(--radius-2xl)',
      border: '1px solid var(--line)',
      background: 'var(--bg-elevated)',
      boxShadow: '0 32px 64px -20px rgba(76, 29, 149, 0.18), 0 12px 24px -8px rgba(26, 22, 20, 0.06)',
      padding: 'clamp(16px, 3vw, 28px)',
    }}>
      {/* Resumo */}
      <div className="savings-summary-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginBottom: 16 }}>
        <SummaryCard label="Guardado" value="R$ 0,00" color="var(--ink)" />
        <SummaryCard label="Investido" value="R$ 13.461,53" color="var(--green-deep)" />
        <SummaryCard label="Patrimônio" value="R$ 13.461,53" color="var(--purple)" />
      </div>

      {/* Mercado */}
      <div style={{
        background: 'var(--bg)', border: '1px solid var(--line)', borderRadius: 14,
        padding: '12px 16px', marginBottom: 16,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
          <Icon.Chart size={14} color="var(--ink-3)" />
          <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--ink-3)', letterSpacing: '0.04em', textTransform: 'uppercase' }}>Mercado</span>
        </div>
        <div className="market-ticker" style={{ display: 'flex', gap: 10, overflowX: 'auto' }}>
          {[
            { l: 'SELIC', v: '14.3% a.a.' },
            { l: 'CDI', v: '14.2% a.a.' },
            { l: 'IPCA', v: '4.7% a.a.' },
            { l: 'IGP-M 12M', v: '2.0% a.a.' },
            { l: 'POUPANÇA', v: '8.4% a.a.' },
          ].map(m => (
            <div key={m.l} style={{
              flexShrink: 0, background: 'var(--bg-elevated)', border: '1px solid var(--line)',
              borderRadius: 10, padding: '8px 14px', textAlign: 'center', minWidth: 86,
            }}>
              <div style={{ fontSize: 9.5, color: 'var(--ink-4)', fontWeight: 600 }}>{m.l}</div>
              <div className="mono" style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--ink)' }}>{m.v}</div>
            </div>
          ))}
        </div>
      </div>

      {/* 3 colunas */}
      <div className="savings-cols-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
        {/* Metas */}
        <div style={{ background: 'var(--bg)', border: '1px solid var(--line)', borderRadius: 14, padding: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 12 }}>
            <Icon.Flag size={13} color="var(--ink-3)" />
            <span style={{ fontSize: 10.5, fontWeight: 700, color: 'var(--ink-3)', letterSpacing: '0.04em', textTransform: 'uppercase' }}>Metas de economia</span>
          </div>
          <div style={{ background: 'var(--bg-elevated)', border: '1px solid var(--line)', borderRadius: 12, padding: 14 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
              <span aria-hidden="true" style={{ width: 30, height: 30, borderRadius: 9, background: '#FFE4D6', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>🚗</span>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--ink)' }}>Fastback</div>
                <div className="mono" style={{ fontSize: 10.5, color: 'var(--ink-4)' }}>R$ 0 de R$ 140.000</div>
              </div>
            </div>
            <div style={{ height: 5, borderRadius: 3, background: 'var(--bg-soft)', marginBottom: 8, overflow: 'hidden' }}>
              <div style={{ height: '100%', width: '2%', background: 'var(--orange)' }} />
            </div>
            <div style={{ fontSize: 10, color: 'var(--ink-4)', marginBottom: 10 }}>Sugestão: R$ 3.043,48/mês</div>
            <div style={{ background: 'var(--orange)', color: 'white', borderRadius: 8, padding: '7px 0', textAlign: 'center', fontSize: 11.5, fontWeight: 700 }}>
              + Aporte
            </div>
          </div>
        </div>

        {/* Investimentos */}
        <div style={{ background: 'var(--bg)', border: '1px solid var(--line)', borderRadius: 14, padding: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 12 }}>
            <Icon.Trending size={13} color="var(--ink-3)" />
            <span style={{ fontSize: 10.5, fontWeight: 700, color: 'var(--ink-3)', letterSpacing: '0.04em', textTransform: 'uppercase' }}>Investimentos</span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {[
              { l: 'Conta Capital Sicoob', tag: '13% a.a.', saldo: 'R$ 12.748,71', proj: 'R$ 14.406,04', btn: 'var(--green)' },
              { l: 'Plano Familiar', tag: '115% do CDI', saldo: 'R$ 512,82', proj: 'R$ 596,27', btn: 'var(--purple)' },
            ].map(inv => (
              <div key={inv.l} style={{ background: 'var(--bg-elevated)', border: '1px solid var(--line)', borderRadius: 12, padding: 12 }}>
                <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--ink)', marginBottom: 1 }}>{inv.l}</div>
                <div style={{ fontSize: 10, color: 'var(--ink-4)', marginBottom: 8 }}>{inv.tag}</div>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                  <div>
                    <div style={{ fontSize: 9, color: 'var(--ink-4)' }}>Saldo</div>
                    <div className="mono" style={{ fontSize: 11.5, fontWeight: 700 }}>{inv.saldo}</div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <div style={{ fontSize: 9, color: 'var(--ink-4)' }}>Projeção 12m</div>
                    <div className="mono" style={{ fontSize: 11.5, fontWeight: 700, color: 'var(--green-deep)' }}>{inv.proj}</div>
                  </div>
                </div>
                <div style={{ background: inv.btn, color: 'white', borderRadius: 7, padding: '6px 0', textAlign: 'center', fontSize: 10.5, fontWeight: 700 }}>
                  Atualizar saldo
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Calculadora */}
        <div style={{ background: 'var(--bg)', border: '1px solid var(--line)', borderRadius: 14, padding: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 12 }}>
            <Icon.Calculator size={13} color="var(--ink-3)" />
            <span style={{ fontSize: 10.5, fontWeight: 700, color: 'var(--ink-3)', letterSpacing: '0.04em', textTransform: 'uppercase' }}>Juros compostos</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, marginBottom: 10 }}>
            {[
              { l: 'Capital inicial', v: 'R$ 10.000' },
              { l: 'Aporte mensal', v: 'R$ 500' },
              { l: 'Período', v: '60 meses' },
              { l: 'Taxa a.a.', v: '10%' },
            ].map(f => (
              <div key={f.l} style={{ background: 'var(--bg-elevated)', border: '1px solid var(--line)', borderRadius: 8, padding: '6px 9px' }}>
                <div style={{ fontSize: 8.5, color: 'var(--ink-4)' }}>{f.l}</div>
                <div className="mono" style={{ fontSize: 11, fontWeight: 600 }}>{f.v}</div>
              </div>
            ))}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6, marginBottom: 10 }}>
            <MiniResult label="Investido" value="40k" color="var(--ink)" />
            <MiniResult label="Rendimento" value="14.4k" color="var(--green-deep)" />
            <MiniResult label="Total" value="54.4k" color="var(--purple)" />
          </div>
          <MiniEvolutionChart />
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .savings-summary-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
          .savings-cols-grid { grid-template-columns: 1fr !important; }
        }
        @media (max-width: 560px) {
          .market-ticker { gap: 8px !important; }
        }
      `}</style>
    </div>
  );
}

function SummaryCard({ label, value, color }) {
  return (
    <div style={{
      background: 'var(--bg)', border: '1px solid var(--line)', borderRadius: 14,
      padding: '14px 16px', textAlign: 'center',
    }}>
      <div style={{ fontSize: 10.5, color: 'var(--ink-4)', fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 4 }}>{label}</div>
      <div className="mono" style={{ fontSize: 18, fontWeight: 700, color }}>{value}</div>
    </div>
  );
}

function MiniResult({ label, value, color }) {
  return (
    <div style={{ background: 'var(--bg-elevated)', border: '1px solid var(--line)', borderRadius: 8, padding: '6px 4px', textAlign: 'center' }}>
      <div style={{ fontSize: 8, color: 'var(--ink-4)' }}>{label}</div>
      <div className="mono" style={{ fontSize: 11.5, fontWeight: 700, color }}>{value}</div>
    </div>
  );
}

function MiniEvolutionChart() {
  return (
    <div style={{ background: 'var(--bg-elevated)', border: '1px solid var(--line)', borderRadius: 8, padding: '10px 10px 4px' }}>
      <svg viewBox="0 0 200 56" width="100%" height="56" preserveAspectRatio="none">
        <polyline points="0,48 40,38 80,30 120,20 160,10 200,4" fill="none" stroke="var(--purple)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        <polyline points="0,48 40,44 80,40 120,35 160,30 200,26" fill="none" stroke="#93C5FD" strokeWidth="1.6" strokeDasharray="4 3" strokeLinecap="round" />
      </svg>
    </div>
  );
}

window.SavingsSection = SavingsSection;