// Nova seção "Planeja melhor" (home-v3) — 3 blocos sobre a área de Economias
// do app. Os cards de UI abaixo são os MESMOS 3 mini-componentes já usados em
// components/savings.jsx (SavingsMockup, que não está em uso em lugar nenhum)
// — Metas de economia / Investimentos / Calculadora de juros compostos —
// só que aqui cada um vira seu próprio card em destaque, 1 por coluna, em
// vez dos 3 lado a lado minúsculos dentro do mockup de dashboard. Reaproveita
// MiniResult/MiniEvolutionChart (globais, definidos em savings.jsx, que já
// carrega antes deste arquivo em home-v3.html).
// window.PlanejaMelhorSection.

function PlanUiCard({ icon, label, children }) {
  const I = Icon[icon];
  return (
    <div className="plan-ui-card">
      <div className="plan-ui-label"><I size={13} color="var(--ink-3)" />{label}</div>
      {children}
    </div>
  );
}

function PlanMetaCard() {
  const goals = [
    { emoji: '🚢', bg: '#DCEEFB', title: 'Cruzeiro de fim de ano', atual: 'R$ 3.800,00', meta: 'R$ 7.000,00', pct: 54 },
    { emoji: '📺', bg: '#F3E8FF', title: 'TV nova', atual: 'R$ 750,00', meta: 'R$ 3.990,00', pct: 19 },
  ];
  return (
    <PlanUiCard icon="Flag" label="Metas de economia">
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {goals.map((g) => (
          <div key={g.title} style={{ background: 'var(--bg)', 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: 34, height: 34, borderRadius: 9, background: g.bg, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, fontSize: 16 }}>{g.emoji}</span>
              <div style={{ minWidth: 0, flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--ink)' }}>{g.title}</div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--ink-4)' }}>{g.atual} de {g.meta}</div>
              </div>
              <div className="mono" style={{ fontSize: 12, fontWeight: 700, color: 'var(--orange)', flexShrink: 0 }}>{g.pct}%</div>
            </div>
            <div style={{ height: 6, borderRadius: 3, background: 'var(--bg-soft)', overflow: 'hidden' }}>
              <div style={{ height: '100%', width: `${g.pct}%`, background: 'var(--orange)' }} />
            </div>
          </div>
        ))}
      </div>
    </PlanUiCard>
  );
}

function PlanInvestCard() {
  const items = [
    { 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)' },
  ];
  return (
    <PlanUiCard icon="Trending" label="Investimentos">
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map((inv) => (
          <div key={inv.l} style={{ background: 'var(--bg)', border: '1px solid var(--line)', borderRadius: 12, padding: 14 }}>
            <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--ink)', marginBottom: 1 }}>{inv.l}</div>
            <div style={{ fontSize: 11, color: 'var(--ink-4)', marginBottom: 10 }}>{inv.tag}</div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
              <div>
                <div style={{ fontSize: 10, color: 'var(--ink-4)' }}>Saldo</div>
                <div className="mono" style={{ fontSize: 13, fontWeight: 700 }}>{inv.saldo}</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontSize: 10, color: 'var(--ink-4)' }}>Projeção 12m</div>
                <div className="mono" style={{ fontSize: 13, fontWeight: 700, color: 'var(--green-deep)' }}>{inv.proj}</div>
              </div>
            </div>
            <div style={{ background: inv.btn, color: 'white', borderRadius: 7, padding: '7px 0', textAlign: 'center', fontSize: 11.5, fontWeight: 700 }}>
              Atualizar saldo
            </div>
          </div>
        ))}
      </div>
    </PlanUiCard>
  );
}

function PlanJurosCard() {
  const fields = [
    { 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%' },
  ];
  return (
    <PlanUiCard icon="Calculator" label="Juros compostos">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginBottom: 12 }}>
        {fields.map((f) => (
          <div key={f.l} style={{ background: 'var(--bg)', border: '1px solid var(--line)', borderRadius: 9, padding: '7px 10px' }}>
            <div style={{ fontSize: 9.5, color: 'var(--ink-4)' }}>{f.l}</div>
            <div className="mono" style={{ fontSize: 12, fontWeight: 600 }}>{f.v}</div>
          </div>
        ))}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, marginBottom: 12 }}>
        <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 />
    </PlanUiCard>
  );
}

const PLANEJA_MELHOR_COLS = [
  {
    Card: PlanMetaCard,
    title: 'Metas de economia',
    text: 'Defina um objetivo, acompanhe o quanto já guardou e veja a sugestão de aporte mensal para chegar lá.',
  },
  {
    Card: PlanInvestCard,
    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.',
  },
  {
    Card: PlanJurosCard,
    title: 'Simulações com juros compostos',
    text: 'Simule cenários com aportes mensais e taxas diferentes para entender possibilidades, sem promessas.',
  },
];

function PlanejaMelhorSection() {
  return (
    <section id="planeja-melhor">
      <div className="container">
        <div className="section-header">
          <div className="eyebrow"><span className="dot" />Planeja melhor</div>
          <h2>O que você quer <span style={{ color: 'var(--purple)' }}>tornar possível</span>?</h2>
          <p>
            Registre investimentos, acompanhe metas de economia e simule cenários com
            juros compostos para planejar com mais clareza.
          </p>
        </div>

        <div className="planeja-melhor-grid">
          {PLANEJA_MELHOR_COLS.map((c) => (
            <div key={c.title} className="planeja-melhor-col">
              <c.Card />
              <h3>{c.title}</h3>
              <p>{c.text}</p>
            </div>
          ))}
        </div>

        <style>{`
          .planeja-melhor-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
            align-items: start;
          }
          .planeja-melhor-col h3 { font-size: 21px; margin: 20px 0 10px; line-height: 1.25; }
          .planeja-melhor-col p { font-size: 15.5px; color: var(--ink-3); line-height: 1.6; }

          .plan-ui-card {
            background: var(--bg-elevated);
            border: 1px solid var(--line);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-md);
            padding: 20px;
          }
          .plan-ui-label {
            display: flex; align-items: center; gap: 6px;
            font-size: 11px; font-weight: 700; color: var(--ink-3);
            letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 16px;
          }

          @media (max-width: 880px) {
            .planeja-melhor-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
            .plan-ui-card { max-width: 360px; margin: 0 auto; text-align: left; }
          }
        `}</style>
      </div>
    </section>
  );
}

window.PlanejaMelhorSection = PlanejaMelhorSection;