Update index.html

index.html

@@ -147,6 +147,16 @@
       </div>
     );
 
+    const StepItem = ({ number, title, description }) => (
+      <div style={{ display: 'flex', gap: '14px', marginBottom: '16px' }}>
+        <div style={{ width: '28px', height: '28px', borderRadius: '50%', background: COLORS.whatsappGreen, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: '14px', fontWeight: '600', flexShrink: 0 }}>{number}</div>
+        <div style={{ flex: 1 }}>
+          <p style={{ color: COLORS.textPrimary, fontWeight: '600', fontSize: '14px', marginBottom: '4px' }}>{title}</p>
+          <p style={{ color: COLORS.textSecondary, fontSize: '13px', lineHeight: '1.4' }}>{description}</p>
+        </div>
+      </div>
+    );
+
     const OnboardingSimulation = () => {
       const [currentScreen, setCurrentScreen] = useState(0);
       const [errors, setErrors] = useState({});
@@ -182,7 +192,10 @@
         screens.push('metodoRegistro', 'rendaGastos', 'cartoes', 'dividas');
         if (formData.temDividas === 'sim') screens.push('detalhesDividas');
         screens.push('metas', 'tutorialRegistro');
-        if (usaRegistroAutomatico) screens.push('tutorialAutomatico');
+        if (usaRegistroAutomatico) {
+          screens.push('tutorialAutomatico');
+          screens.push('tutorialConexao'); // Nova tela de como conectar
+        }
         screens.push('tutorialDashboard', 'tutorialLembretes', 'pronto');
         return screens;
       };
@@ -308,7 +321,7 @@
               <div style={{ width: '80px', height: '80px', borderRadius: '50%', background: '#E7F7EF', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: '24px' }}><svg width="40" height="40" viewBox="0 0 24 24" fill={COLORS.whatsappGreen}><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></div>
               <h2 style={{ color: COLORS.textPrimary, fontSize: '22px', fontWeight: '600', marginBottom: '12px' }}>Tudo pronto, {formData.nome.split(' ')[0] || 'Daniel'}! 🎉</h2>
               <p style={{ color: COLORS.textSecondary, fontSize: '15px', lineHeight: '1.5', marginBottom: '32px' }}>Seu cadastro foi concluído com sucesso. A partir de agora é só me enviar mensagens por aqui.</p>
-              {needsPluggy && <div style={{ background: '#F0FDF4', border: `1px solid ${COLORS.whatsappGreen}`, borderRadius: '12px', padding: '20px', width: '100%', marginBottom: '24px', textAlign: 'left' }}><div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '12px' }}><span style={{ fontSize: '24px' }}>🔗</span><span style={{ color: COLORS.textPrimary, fontWeight: '600', fontSize: '15px' }}>Conectar contas bancárias</span></div><p style={{ color: COLORS.textSecondary, fontSize: '13px', lineHeight: '1.5', marginBottom: '16px' }}>Para ativar a conexão automática com suas contas, você precisa autorizar o acesso através do nosso parceiro Pluggy.</p><button type="button" onClick={() => window.open('https://pluggy.ai', '_blank')} style={{ width: '100%', padding: '12px', background: COLORS.teal, border: 'none', borderRadius: '8px', color: '#fff', fontSize: '14px', fontWeight: '600', cursor: 'pointer' }}>Conectar com Pluggy</button></div>}
+              
               <div style={{ background: '#F8F9FA', borderRadius: '12px', padding: '16px', width: '100%', textAlign: 'left' }}><p style={{ color: COLORS.textSecondary, fontSize: '12px', marginBottom: '8px', textTransform: 'uppercase', fontWeight: '600' }}>Dica rápida</p><p style={{ color: COLORS.textPrimary, fontSize: '14px', lineHeight: '1.5' }}>Experimente registrar sua primeira despesa agora!</p><div style={{ background: COLORS.bubbleOut, borderRadius: '8px', padding: '10px 14px', marginTop: '10px', color: COLORS.textPrimary, fontSize: '14px' }}>"Almoço 35 reais"</div></div>
             </div>
             <FooterButton text="Voltar para o chat" onClick={() => { setCurrentScreen(0); setShowChat(true); setShowStartButton(true); setFormData({ nome: '', cpf: '', email: '', aceitaTermos: false, expectativa: '', tipoControle: [], atividadeEmpresa: '', faturamentoEmpresa: '', profissao: '', experienciaApp: '', qualApp: '', comoConheceu: '', metodoRegistro: '', gastoMensal: '', ganhoMensal: '', cartoes: [], cartaoPrincipal: '', outroCartao: '', temDividas: '', dividas: [{ tipo: '', valor: '', prazo: '' }], metas: [{ descricao: '', prazo: '' }] }); }} />
@@ -330,6 +343,7 @@
         metas: 'Metas financeiras',
         tutorialRegistro: 'Registrar movimentações',
         tutorialAutomatico: 'Registro automático',
+        tutorialConexao: 'Conectar suas contas',
         tutorialDashboard: 'Seu dashboard',
         tutorialLembretes: 'Lembretes',
         pronto: 'Pronto para começar!'
@@ -451,7 +465,8 @@
                 <p style={{ color: COLORS.textPrimary, fontWeight: '600', fontSize: '15px', marginBottom: '16px' }}>⏰ Horários de atualização</p>
                 <TimelineItem time="7h" description="Primeira atualização do dia: importo todas as transações da noite anterior" />
                 <TimelineItem time="12h" description="Atualização do meio-dia: capturo as transações da manhã" />
-                <TimelineItem time="20h" description="Última atualização: registro todas as movimentações do dia" isLast />
+                <TimelineItem time="16h" description="Atualização da tarde: registro as movimentações do início da tarde" />
+                <TimelineItem time="20h" description="Última atualização: registro todas as movimentações restantes do dia" isLast />
               </div>
               <div style={{ background: '#F8F9FA', borderRadius: '12px', padding: '16px', marginBottom: '16px' }}>
                 <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '10px' }}>
@@ -463,6 +478,37 @@
               <InfoBox type="info">Você pode combinar o registro automático com registros manuais sempre que quiser!</InfoBox>
             </>}
 
+            {currentScreenName === 'tutorialConexao' && <>
+              <TextSubheading>Como conectar suas contas bancárias</TextSubheading>
+              <BodyText>A conexão é feita via Open Finance, de forma segura e regulamentada pelo Banco Central.</BodyText>
+              
+              <div style={{ background: '#F0FDF4', border: `1px solid ${COLORS.whatsappGreen}`, borderRadius: '12px', padding: '20px', marginBottom: '20px' }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '16px' }}>
+                  <span style={{ fontSize: '24px' }}>🔗</span>
+                  <span style={{ color: COLORS.textPrimary, fontWeight: '600', fontSize: '16px' }}>Passo a passo</span>
+                </div>
+                <StepItem number="1" title="Peça o link de conexão" description="Envie uma mensagem pedindo para conectar sua conta. Pode ser algo como:" />
+                <div style={{ marginLeft: '42px', marginBottom: '16px' }}>
+                  <div style={{ background: COLORS.bubbleOut, borderRadius: '8px', padding: '10px 12px', marginBottom: '6px', color: COLORS.textPrimary, fontSize: '13px' }}>"Quero conectar minha conta"</div>
+                  <div style={{ background: COLORS.bubbleOut, borderRadius: '8px', padding: '10px 12px', color: COLORS.textPrimary, fontSize: '13px' }}>"Conectar minha conta bancária"</div>
+                </div>
+                <StepItem number="2" title="Acesse o link da Pluggy" description="Você receberá um link seguro do nosso parceiro Pluggy para fazer a autorização." />
+                <StepItem number="3" title="Autorize suas contas" description="Selecione os bancos que deseja conectar e siga o passo a passo de autorização de cada um." />
+                <StepItem number="4" title="Pronto!" description="Assim que a conexão for concluída, suas transações serão importadas automaticamente." />
+              </div>
+
+              <div style={{ background: '#F8F9FA', borderRadius: '12px', padding: '16px', marginBottom: '16px' }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '10px' }}>
+                  <span style={{ fontSize: '20px' }}>🔒</span>
+                  <span style={{ color: COLORS.textPrimary, fontWeight: '600' }}>Segurança garantida</span>
+                </div>
+                <p style={{ color: COLORS.textSecondary, fontSize: '14px', lineHeight: '1.5', marginBottom: '8px' }}>A conexão é feita através da <strong>Pluggy</strong>, parceiro certificado pelo Banco Central para Open Finance.</p>
+                <p style={{ color: COLORS.textSecondary, fontSize: '14px', lineHeight: '1.5' }}>Seus dados são criptografados e você pode revogar o acesso a qualquer momento diretamente no app do seu banco.</p>
+              </div>
+
+              <InfoBox type="info" icon="💡">Você pode conectar suas contas agora ou a qualquer momento depois. É só me pedir o link!</InfoBox>
+            </>}
+
             {currentScreenName === 'tutorialDashboard' && <>
               <TextSubheading>Acompanhe suas finanças no dashboard</TextSubheading>
               <BodyText>Todas as suas movimentações ficam organizadas em um dashboard que você pode acessar a qualquer momento.</BodyText>