function HowSection() {
  const steps = [
    {
      num: '01',
      title: 'Registre',
      text: 'Anote cada gasto ou recebimento assim que ele acontece.',
      icon: 'Bolt',
    },
    {
      num: '02',
      title: 'Acompanhe',
      text: 'Veja o impacto no orçamento do mês, nas categorias e nas despesas recorrentes.',
      icon: 'Eye',
    },
    {
      num: '03',
      title: 'Aprenda',
      text: 'Use análises e histórico para entender seus hábitos e tomar decisões melhores.',
      icon: 'Lightbulb',
    },
  ];

  return (
    <section id="como-funciona">
      <div className="container">
        <div className="section-header">
          <div className="eyebrow"><span className="dot" />Como funciona</div>
          <h2>Controle financeiro em 3 passos simples.</h2>
        </div>

        <div className="how-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 16,
          position: 'relative',
        }}>
          {steps.map((s, i) => {
            const I = Icon[s.icon];
            return (
              <div key={s.num} style={{
                background: 'var(--bg-elevated)',
                border: '1px solid var(--line)',
                borderRadius: 'var(--radius-xl)',
                padding: 32,
                position: 'relative',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 28 }}>
                  <span className="mono" style={{
                    fontSize: 13,
                    fontWeight: 600,
                    color: 'var(--purple)',
                  }}>{s.num}</span>
                  <I size={20} color="var(--ink-3)" />
                </div>
                <h3 style={{ fontSize: 24, marginBottom: 10 }}>{s.title}</h3>
                <p style={{ color: 'var(--ink-3)', fontSize: 15, lineHeight: 1.55 }}>{s.text}</p>
              </div>
            );
          })}
        </div>

        <style>{`
          @media (max-width: 720px) {
            .how-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>

        {/* Interactive demo */}
        <InteractiveDemo />
      </div>
    </section>
  );
}

function InteractiveDemo() {
  const [registros, setRegistros] = React.useState([
    { tipo: 'gastei', valor: 47.80, label: 'Supermercado', tempo: '14:32' },
    { tipo: 'gastei', valor: 12.50, label: 'Café', tempo: '09:15' },
    { tipo: 'recebi', valor: 350.00, label: 'Freelance', tempo: 'Ontem' },
  ]);

  const totalGastei = registros.filter(r => r.tipo === 'gastei').reduce((a, b) => a + b.valor, 0);
  const totalRecebi = registros.filter(r => r.tipo === 'recebi').reduce((a, b) => a + b.valor, 0);
  const saldo = totalRecebi - totalGastei;

  const handleRegister = ({ tipo, valor, categoria, descricao }) => {
    const novo = {
      tipo,
      valor,
      label: descricao || categoria?.label || (tipo === 'gastei' ? 'Gasto' : 'Recebimento'),
      tempo: 'Agora',
    };
    setRegistros(r => [novo, ...r].slice(0, 6));
  };

  return (
    <div className="demo-grid" style={{
      marginTop: 80,
      background: 'var(--bg-elevated)',
      border: '1px solid var(--line)',
      borderRadius: 'var(--radius-2xl)',
      padding: 40,
      display: 'grid',
      gridTemplateColumns: '1fr 1fr',
      gap: 48,
      alignItems: 'center',
    }}>
      <div>
        <div className="eyebrow" style={{ marginBottom: 16 }}>
          <span className="dot" style={{ background: 'var(--green)', animation: 'pulseSoft 2s ease-in-out infinite' }} />
          Tente agora
        </div>
        <h3 style={{ fontSize: 32, marginBottom: 16, lineHeight: 1.1 }}>
          Experimente registrar um gasto.
        </h3>
        <p style={{ color: 'var(--ink-3)', fontSize: 16, marginBottom: 24, lineHeight: 1.6 }}>
          É assim que funciona no app real. Digite um valor, escolha um cartão e categoria,
          e clique em registrar. Veja como aparece no resumo ao lado.
        </p>

        <div style={{
          background: 'var(--bg-warm)',
          borderRadius: 14,
          padding: 20,
          marginBottom: 16,
        }}>
          <div style={{ fontSize: 11, color: 'var(--ink-4)', textTransform: 'uppercase', letterSpacing: '0.04em', fontWeight: 600, marginBottom: 12 }}>
            Resumo do mês
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
            <Stat label="Receitas" value={totalRecebi} color="var(--green)" />
            <Stat label="Despesas" value={totalGastei} color="var(--red)" />
            <Stat label="Saldo" value={saldo} color={saldo >= 0 ? 'var(--ink)' : 'var(--red)'} />
          </div>
        </div>

        <div style={{
          background: 'var(--bg-warm)',
          borderRadius: 14,
          padding: 20,
        }}>
          <div style={{ fontSize: 11, color: 'var(--ink-4)', textTransform: 'uppercase', letterSpacing: '0.04em', fontWeight: 600, marginBottom: 12 }}>
            Últimos registros
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {registros.length === 0 && (
              <div style={{ color: 'var(--ink-4)', fontSize: 14, textAlign: 'center', padding: 12 }}>
                Nenhum registro ainda
              </div>
            )}
            {registros.slice(0, 4).map((r, i) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                padding: '8px 0',
                borderBottom: i < Math.min(registros.length, 4) - 1 ? '1px solid var(--line-soft)' : 'none',
                animation: i === 0 && r.tempo === 'Agora' ? 'fadeUp 0.4s ease-out' : 'none',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <div style={{
                    width: 28, height: 28, borderRadius: 8,
                    background: r.tipo === 'gastei' ? '#FEE2E2' : 'var(--green-soft)',
                    color: r.tipo === 'gastei' ? 'var(--red)' : 'var(--green)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 12, fontWeight: 700,
                  }}>
                    {r.tipo === 'gastei' ? '−' : '+'}
                  </div>
                  <div>
                    <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--ink)' }}>{r.label}</div>
                    <div style={{ fontSize: 11, color: 'var(--ink-4)' }}>{r.tempo}</div>
                  </div>
                </div>
                <span className="mono" style={{
                  fontSize: 13, fontWeight: 600,
                  color: r.tipo === 'gastei' ? 'var(--red)' : 'var(--green)',
                }}>
                  {r.tipo === 'gastei' ? '−' : '+'} R$ {formatBRL(r.valor)}
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div style={{ maxWidth: 360, margin: '0 auto', width: '100%' }}>
        <WidgetGasteiRecebi onRegister={handleRegister} />
      </div>

      <style>{`
        @media (max-width: 880px) {
          .demo-grid { grid-template-columns: 1fr !important; gap: 32px !important; padding: 28px !important; }
        }
      `}</style>
    </div>
  );
}

function Stat({ label, value, color }) {
  return (
    <div>
      <div style={{ fontSize: 11, color: 'var(--ink-4)', marginBottom: 2 }}>{label}</div>
      <div className="mono" style={{ fontSize: 14, fontWeight: 700, color }}>R$ {formatBRL(value)}</div>
    </div>
  );
}

window.HowSection = HowSection;