https://techfx-ir2026.netlify.app/src/sections/Overview.jsx

1// Overview — animated flow of money from client abroad → PJ → Pessoa Física
2function Overview() {
3  const nodes = [
4    { tag: "Origem", icon: "globe-2", title: "Cliente no exterior", sub: "Empresa estrangeira paga por serviço prestado em moeda estrangeira (USD, EUR, GBP…)" },
5    { tag: "Câmbio", icon: "arrow-left-right", title: "Conversão FX", sub: "Contrato de câmbio fecha a operação e credita reais na sua PJ. IOF zero no ingresso de receita de exportação." },
6    { tag: "Empresa", icon: "building-2", title: "Sua PJ", sub: "Fatura, impostos recolhidos pelo regime (Simples, Presumido, Real). O que sobra é lucro distribuível." },
7    { tag: "Você", icon: "user", title: "Pessoa física", sub: "Recebe via pró-labore (tributado) e/ou distribuição de lucros (isenta no ano-base 2025)." },
8  ];
9
10  return (
11    <section className="sec" id="overview">
12      <SectionHead
13        num="01"
14        eyebrow="Visão geral"
15        title="Como o dinheiro chega até você"
16        desc="Antes de cair na sua pessoa física, todo valor recebido do exterior passa pela PJ e pela contabilidade tributária do seu regime. Entender esse trajeto é o que desbloqueia qualquer planejamento."
17      />
18
19      <Reveal className="flow">
20        {nodes.map((n, i) => (
21          <React.Fragment key={i}>
22            <div className="flow-node" style={{ animationDelay: `${i * 120}ms` }}>
23              <span className="fn-tag">{n.tag}</span>
24              <div>
25                <div className="fn-ico"><Icon name={n.icon} /></div>
26              </div>
27              <div>
28                <div className="fn-title">{n.title}</div>
29                <div className="fn-sub" style={{ marginTop: 8 }}>{n.sub}</div>
30              </div>
31            </div>
32            {i < nodes.length - 1 && (
33              <div className="flow-arr" aria-hidden>
34                <svg viewBox="0 0 48 8">
35                  <line x1="0" y1="4" x2="48" y2="4" className="flow-path" />
36                  <circle cx="4" cy="4" r="3" className="flow-dot">
37                    <animate attributeName="cx" from="0" to="48" dur="2.4s" repeatCount="indefinite" />
38                  </circle>
39                </svg>
40              </div>
41            )}
42          </React.Fragment>
43        ))}
44      </Reveal>
45
46      <Reveal delay={2} className="flow-legend">
47        <div className="ll">
48          <span className="k"><Icon name="percent" /></span>
49          <div className="v">
50            <b>Carga tributária da PJ</b> varia de <b className="mint-ink">4% a 33%</b> no Simples Nacional, dependendo do anexo, da atividade e do faturamento. Lucro Presumido e Real têm regras próprias.
51          </div>
52        </div>
53        <div className="ll">
54          <span className="k"><Icon name="banknote" /></span>
55          <div className="v">
56            Do valor líquido na PJ, os sócios recebem como <b>pró-labore</b> (tributado com IRRF progressivo + INSS 11%) e/ou <b>distribuição de lucros</b> (isenta no ano-base 2025).
57          </div>
58        </div>
59        <div className="ll">
60          <span className="k"><Icon name="file-warning" /></span>
61          <div className="v">
62            Mesmo sendo <b>isentos</b>, os lucros precisam aparecer em <b>Rendimentos Isentos e Não Tributáveis</b> na declaração. Omitir gera malha fina.
63          </div>
64        </div>
65        <div className="ll">
66          <span className="k"><Icon name="shield" /></span>
67          <div className="v">
68            A Receita cruza dados via <b>e-Financeira</b>, <b>EFD-Reinf</b>, <b>eSocial</b>, <b>DCTFWeb</b>, <b>ECD</b>, <b>ECF</b> e acordos internacionais (<b>CRS/FATCA</b>). Transparência total é a regra do jogo.
69          </div>
70        </div>
71      </Reveal>
72    </section>
73  );
74}
75
76window.Overview = Overview;