Hugging Face's logo

Spaces:
dcga
/
onboarding-assistente-html
Running

App Files Community
dcga commited on
Commit
24e1e48
·
verified ·
1 Parent(s): 65c81df

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +523 -19
index.html CHANGED
@@ -1,19 +1,523 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6
+ <title>Assistente de Bolso - Onboarding WhatsApp Flow</title>
7
+ <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
8
+ <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
9
+ <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
10
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
11
+ <style>
12
+ * { margin: 0; padding: 0; box-sizing: border-box; }
13
+ body { background: linear-gradient(135deg, #075E54 0%, #128C7E 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
14
+ #root { width: 100%; display: flex; justify-content: center; }
15
+ ::-webkit-scrollbar { width: 3px; }
16
+ ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 2px; }
17
+ input::placeholder, textarea::placeholder { color: #8696A0; }
18
+ </style>
19
+ </head>
20
+ <body>
21
+ <div id="root"></div>
22
+ <script type="text/babel">
23
+ const { useState } = React;
24
+ const COLORS = { teal: '#075E54', tealDark: '#054D44', lightGreen: '#25D366', whatsappGreen: '#00A884', chatBg: '#ECE5DD', white: '#FFFFFF', textPrimary: '#111B21', textSecondary: '#667781', inputBorder: '#D1D7DB', inputBg: '#FFFFFF', error: '#EA0038', headerBg: '#008069', bubbleOut: '#D9FDD3', bubbleIn: '#FFFFFF' };
25
+
26
+ const FlowHeader = ({ title, onBack, showBack = true }) => (
27
+ <div style={{ background: COLORS.headerBg, padding: '12px 16px', display: 'flex', alignItems: 'center', gap: '16px', minHeight: '56px' }}>
28
+ {showBack && <button onClick={onBack} style={{ background: 'transparent', border: 'none', padding: '8px', margin: '-8px', cursor: 'pointer', display: 'flex', alignItems: 'center' }}><svg width="24" height="24" viewBox="0 0 24 24" fill="white"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg></button>}
29
+ <span style={{ color: '#fff', fontSize: '18px', fontWeight: '500' }}>{title}</span>
30
+ </div>
31
+ );
32
+
33
+ const TextSubheading = ({ children }) => (
34
+ <h2 style={{ color: COLORS.textPrimary, fontSize: '18px', fontWeight: '600', marginBottom: '8px', lineHeight: '1.3' }}>{children}</h2>
35
+ );
36
+
37
+ const BodyText = ({ children, style = {} }) => (
38
+ <p style={{ color: COLORS.textSecondary, fontSize: '14px', lineHeight: '1.5', marginBottom: '20px', ...style }}>{children}</p>
39
+ );
40
+
41
+ const TextInput = ({ label, value, onChange, placeholder, error, hint, type = 'text', required = true }) => (
42
+ <div style={{ marginBottom: '20px' }}>
43
+ <label style={{ color: COLORS.textPrimary, fontSize: '14px', fontWeight: '500', display: 'block', marginBottom: '8px' }}>{label} {required && <span style={{ color: COLORS.error }}>*</span>}</label>
44
+ <input type={type} value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder} style={{ width: '100%', padding: '14px 16px', background: COLORS.inputBg, border: `1px solid ${error ? COLORS.error : COLORS.inputBorder}`, borderRadius: '8px', color: COLORS.textPrimary, fontSize: '16px', outline: 'none' }} />
45
+ {error && <p style={{ color: COLORS.error, fontSize: '12px', marginTop: '4px' }}>{error}</p>}
46
+ {hint && !error && <p style={{ color: COLORS.textSecondary, fontSize: '12px', marginTop: '4px' }}>{hint}</p>}
47
+ </div>
48
+ );
49
+
50
+ const TextArea = ({ label, value, onChange, placeholder, error, rows = 3, required = true }) => (
51
+ <div style={{ marginBottom: '20px' }}>
52
+ <label style={{ color: COLORS.textPrimary, fontSize: '14px', fontWeight: '500', display: 'block', marginBottom: '8px' }}>{label} {required && <span style={{ color: COLORS.error }}>*</span>}</label>
53
+ <textarea value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder} rows={rows} style={{ width: '100%', padding: '14px 16px', background: COLORS.inputBg, border: `1px solid ${error ? COLORS.error : COLORS.inputBorder}`, borderRadius: '8px', color: COLORS.textPrimary, fontSize: '16px', outline: 'none', resize: 'none', fontFamily: 'inherit' }} />
54
+ {error && <p style={{ color: COLORS.error, fontSize: '12px', marginTop: '4px' }}>{error}</p>}
55
+ </div>
56
+ );
57
+
58
+ const RadioButtonsGroup = ({ label, options, selected, onChange, error }) => (
59
+ <div style={{ marginBottom: '20px' }}>
60
+ <label style={{ color: COLORS.textPrimary, fontSize: '14px', fontWeight: '500', display: 'block', marginBottom: '12px' }}>{label} <span style={{ color: COLORS.error }}>*</span></label>
61
+ <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
62
+ {options.map((opt) => (
63
+ <button key={opt.value} type="button" onClick={() => onChange(opt.value)} style={{ padding: '14px 16px', background: COLORS.white, border: `1.5px solid ${selected === opt.value ? COLORS.whatsappGreen : COLORS.inputBorder}`, borderRadius: '8px', color: COLORS.textPrimary, fontSize: '15px', textAlign: 'left', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '12px' }}>
64
+ <div style={{ width: '20px', height: '20px', borderRadius: '50%', border: `2px solid ${selected === opt.value ? COLORS.whatsappGreen : COLORS.inputBorder}`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>{selected === opt.value && <div style={{ width: '10px', height: '10px', borderRadius: '50%', background: COLORS.whatsappGreen }} />}</div>
65
+ {opt.label}
66
+ </button>
67
+ ))}
68
+ </div>
69
+ {error && <p style={{ color: COLORS.error, fontSize: '12px', marginTop: '4px' }}>{error}</p>}
70
+ </div>
71
+ );
72
+
73
+ const CheckboxGroup = ({ label, options, selected, onChange, error }) => (
74
+ <div style={{ marginBottom: '20px' }}>
75
+ <label style={{ color: COLORS.textPrimary, fontSize: '14px', fontWeight: '500', display: 'block', marginBottom: '12px' }}>{label} <span style={{ color: COLORS.error }}>*</span></label>
76
+ <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
77
+ {options.map((opt) => (
78
+ <button key={opt.value} type="button" onClick={() => onChange(opt.value)} style={{ padding: '14px 16px', background: COLORS.white, border: `1.5px solid ${selected.includes(opt.value) ? COLORS.whatsappGreen : COLORS.inputBorder}`, borderRadius: '8px', color: COLORS.textPrimary, fontSize: '15px', textAlign: 'left', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '12px' }}>
79
+ <div style={{ width: '20px', height: '20px', borderRadius: '4px', border: `2px solid ${selected.includes(opt.value) ? COLORS.whatsappGreen : COLORS.inputBorder}`, background: selected.includes(opt.value) ? COLORS.whatsappGreen : 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>{selected.includes(opt.value) && <svg width="12" height="10" viewBox="0 0 12 10" fill="none"><path d="M1 5L4.5 8.5L11 1" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>}</div>
80
+ {opt.label}
81
+ </button>
82
+ ))}
83
+ </div>
84
+ {error && <p style={{ color: COLORS.error, fontSize: '12px', marginTop: '4px' }}>{error}</p>}
85
+ </div>
86
+ );
87
+
88
+ const Dropdown = ({ label, options, selected, onChange, placeholder, error, required = true }) => (
89
+ <div style={{ marginBottom: '16px' }}>
90
+ {label && <label style={{ color: COLORS.textPrimary, fontSize: '14px', fontWeight: '500', display: 'block', marginBottom: '8px' }}>{label} {required && <span style={{ color: COLORS.error }}>*</span>}</label>}
91
+ <select value={selected} onChange={(e) => onChange(e.target.value)} style={{ width: '100%', padding: '14px 16px', background: COLORS.inputBg, border: `1px solid ${error ? COLORS.error : COLORS.inputBorder}`, borderRadius: '8px', color: selected ? COLORS.textPrimary : COLORS.textSecondary, fontSize: '15px', outline: 'none', cursor: 'pointer', appearance: 'none', backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23667781' d='M6 8L1 3h10z'/%3E%3C/svg%3E")`, backgroundRepeat: 'no-repeat', backgroundPosition: 'right 16px center' }}>
92
+ <option value="" disabled>{placeholder}</option>
93
+ {options.map((opt) => <option key={opt.value} value={opt.value}>{opt.label}</option>)}
94
+ </select>
95
+ {error && <p style={{ color: COLORS.error, fontSize: '12px', marginTop: '4px' }}>{error}</p>}
96
+ </div>
97
+ );
98
+
99
+ const InfoBox = ({ children, type = 'info', icon }) => (
100
+ <div style={{ background: type === 'warning' ? '#FFF3CD' : type === 'success' ? '#E8F5E9' : '#E7F3FF', border: `1px solid ${type === 'warning' ? '#FFCC00' : type === 'success' ? '#81C784' : '#B3D7FF'}`, borderRadius: '8px', padding: '12px 14px', marginBottom: '16px', display: 'flex', gap: '10px', alignItems: 'flex-start' }}>
101
+ <span style={{ fontSize: '16px' }}>{icon || (type === 'warning' ? '⚠️' : type === 'success' ? '🔒' : 'ℹ️')}</span>
102
+ <p style={{ color: COLORS.textPrimary, fontSize: '13px', lineHeight: '1.5', margin: 0 }}>{children}</p>
103
+ </div>
104
+ );
105
+
106
+ const FooterButton = ({ text, onClick, disabled }) => (
107
+ <div style={{ padding: '16px', background: COLORS.white, borderTop: `1px solid ${COLORS.inputBorder}` }}>
108
+ <button type="button" onClick={onClick} disabled={disabled} style={{ width: '100%', padding: '16px', background: disabled ? '#ccc' : COLORS.whatsappGreen, border: 'none', borderRadius: '24px', color: '#fff', fontSize: '16px', fontWeight: '600', cursor: disabled ? 'not-allowed' : 'pointer' }}>{text}</button>
109
+ </div>
110
+ );
111
+
112
+ const Checkbox = ({ checked, onChange, label, error }) => (
113
+ <div style={{ marginBottom: '16px' }}>
114
+ <button type="button" onClick={() => onChange(!checked)} style={{ display: 'flex', alignItems: 'flex-start', gap: '12px', background: 'transparent', border: 'none', cursor: 'pointer', textAlign: 'left', padding: 0 }}>
115
+ <div style={{ width: '22px', height: '22px', borderRadius: '4px', border: `2px solid ${checked ? COLORS.whatsappGreen : error ? COLORS.error : COLORS.inputBorder}`, background: checked ? COLORS.whatsappGreen : 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: '2px' }}>{checked && <svg width="12" height="10" viewBox="0 0 12 10" fill="none"><path d="M1 5L4.5 8.5L11 1" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>}</div>
116
+ <span style={{ color: COLORS.textPrimary, fontSize: '14px', lineHeight: '1.5' }}>{label}</span>
117
+ </button>
118
+ {error && <p style={{ color: COLORS.error, fontSize: '12px', marginTop: '4px', marginLeft: '34px' }}>{error}</p>}
119
+ </div>
120
+ );
121
+
122
+ const FeatureCard = ({ emoji, title, examples }) => (
123
+ <div style={{ background: '#F8F9FA', borderRadius: '12px', padding: '16px', marginBottom: '12px' }}>
124
+ <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '10px' }}>
125
+ <span style={{ fontSize: '24px' }}>{emoji}</span>
126
+ <span style={{ color: COLORS.textPrimary, fontWeight: '600', fontSize: '15px' }}>{title}</span>
127
+ </div>
128
+ <div style={{ marginLeft: '34px' }}>
129
+ {examples.map((ex, i) => (
130
+ <div key={i} style={{ background: COLORS.bubbleOut, borderRadius: '8px', padding: '10px 12px', marginBottom: i < examples.length - 1 ? '8px' : 0, color: COLORS.textPrimary, fontSize: '13px' }}>
131
+ "{ex}"
132
+ </div>
133
+ ))}
134
+ </div>
135
+ </div>
136
+ );
137
+
138
+ const TimelineItem = ({ time, description, isLast }) => (
139
+ <div style={{ display: 'flex', gap: '12px', marginBottom: isLast ? 0 : '16px' }}>
140
+ <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
141
+ <div style={{ width: '32px', height: '32px', borderRadius: '50%', background: COLORS.whatsappGreen, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: '12px', fontWeight: '600' }}>{time}</div>
142
+ {!isLast && <div style={{ width: '2px', height: '24px', background: '#E0E0E0', marginTop: '4px' }} />}
143
+ </div>
144
+ <div style={{ flex: 1, paddingTop: '6px' }}>
145
+ <p style={{ color: COLORS.textPrimary, fontSize: '14px', lineHeight: '1.4' }}>{description}</p>
146
+ </div>
147
+ </div>
148
+ );
149
+
150
+ const OnboardingSimulation = () => {
151
+ const [currentScreen, setCurrentScreen] = useState(0);
152
+ const [errors, setErrors] = useState({});
153
+ const [formData, setFormData] = useState({
154
+ nome: '', cpf: '', email: '', aceitaTermos: false,
155
+ expectativa: '', tipoControle: [],
156
+ atividadeEmpresa: '', faturamentoEmpresa: '',
157
+ profissao: '', experienciaApp: '', qualApp: '', comoConheceu: '',
158
+ metodoRegistro: '',
159
+ gastoMensal: '', ganhoMensal: '',
160
+ cartoes: [], cartaoPrincipal: '', outroCartao: '',
161
+ temDividas: '', dividas: [{ tipo: '', valor: '', prazo: '' }],
162
+ metas: [{ descricao: '', prazo: '' }]
163
+ });
164
+ const [isAnimating, setIsAnimating] = useState(false);
165
+ const [showChat, setShowChat] = useState(true);
166
+ const [chatMessages, setChatMessages] = useState([{ type: 'bot', text: 'Olá, Daniel!\n\nAqui é o Assistente de Bolso, seja bem-vindo! A partir de hoje, vou te ajudar a cuidar das suas finanças e compromissos.\n\nPara te atender da melhor forma possível, preciso que você responda a algumas perguntas com sinceridade. Vamos começar?' }]);
167
+ const [showStartButton, setShowStartButton] = useState(true);
168
+
169
+ const formatCPF = (value) => { const n = value.replace(/\D/g, ''); return n.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3-$4').slice(0, 14); };
170
+ const formatCurrency = (value) => { const n = value.replace(/\D/g, ''); if (!n) return ''; return 'R$ ' + parseInt(n).toLocaleString('pt-BR'); };
171
+
172
+ const usaRegistroAutomatico = formData.metodoRegistro === 'automatico' || formData.metodoRegistro === 'ambos';
173
+ const controlaEmpresa = formData.tipoControle.includes('empresa');
174
+ const controlaApenasEmpresa = formData.tipoControle.length === 1 && formData.tipoControle.includes('empresa');
175
+
176
+ // Calcula telas dinâmicas
177
+ const getScreenSequence = () => {
178
+ let screens = ['dados', 'expectativas'];
179
+ if (controlaEmpresa) screens.push('empresa');
180
+ if (!controlaApenasEmpresa) screens.push('sobreVoce');
181
+ else screens.push('sobreVoceEmpresa'); // versão sem profissão
182
+ screens.push('metodoRegistro', 'rendaGastos', 'cartoes', 'dividas');
183
+ if (formData.temDividas === 'sim') screens.push('detalhesDividas');
184
+ screens.push('metas', 'tutorialRegistro');
185
+ if (usaRegistroAutomatico) screens.push('tutorialAutomatico');
186
+ screens.push('tutorialDashboard', 'tutorialLembretes', 'pronto');
187
+ return screens;
188
+ };
189
+
190
+ const screenSequence = getScreenSequence();
191
+ const currentScreenName = screenSequence[currentScreen] || 'dados';
192
+
193
+ const validateScreen = () => {
194
+ const newErrors = {};
195
+ if (currentScreenName === 'dados') {
196
+ if (!formData.nome.trim()) newErrors.nome = 'Campo obrigatório';
197
+ if (!formData.cpf.trim()) newErrors.cpf = 'Campo obrigatório';
198
+ else if (formData.cpf.replace(/\D/g, '').length !== 11) newErrors.cpf = 'CPF inválido';
199
+ if (!formData.email.trim()) newErrors.email = 'Campo obrigatório';
200
+ else if (!/\S+@\S+\.\S+/.test(formData.email)) newErrors.email = 'E-mail inválido';
201
+ if (!formData.aceitaTermos) newErrors.aceitaTermos = 'Você precisa aceitar os termos';
202
+ } else if (currentScreenName === 'expectativas') {
203
+ if (!formData.expectativa.trim()) newErrors.expectativa = 'Campo obrigatório';
204
+ if (formData.tipoControle.length === 0) newErrors.tipoControle = 'Selecione pelo menos uma opção';
205
+ } else if (currentScreenName === 'empresa') {
206
+ if (!formData.atividadeEmpresa.trim()) newErrors.atividadeEmpresa = 'Campo obrigatório';
207
+ if (!formData.faturamentoEmpresa) newErrors.faturamentoEmpresa = 'Selecione uma opção';
208
+ } else if (currentScreenName === 'sobreVoce') {
209
+ if (!formData.profissao.trim()) newErrors.profissao = 'Campo obrigatório';
210
+ if (!formData.experienciaApp) newErrors.experienciaApp = 'Selecione uma opção';
211
+ if ((formData.experienciaApp === 'desisti' || formData.experienciaApp === 'uso') && !formData.qualApp.trim()) newErrors.qualApp = 'Campo obrigatório';
212
+ if (!formData.comoConheceu) newErrors.comoConheceu = 'Selecione uma opção';
213
+ } else if (currentScreenName === 'sobreVoceEmpresa') {
214
+ if (!formData.experienciaApp) newErrors.experienciaApp = 'Selecione uma opção';
215
+ if ((formData.experienciaApp === 'desisti' || formData.experienciaApp === 'uso') && !formData.qualApp.trim()) newErrors.qualApp = 'Campo obrigatório';
216
+ if (!formData.comoConheceu) newErrors.comoConheceu = 'Selecione uma opção';
217
+ } else if (currentScreenName === 'metodoRegistro') {
218
+ if (!formData.metodoRegistro) newErrors.metodoRegistro = 'Selecione uma opção';
219
+ } else if (currentScreenName === 'rendaGastos') {
220
+ if (!formData.gastoMensal.trim()) newErrors.gastoMensal = 'Campo obrigatório';
221
+ if (!formData.ganhoMensal.trim()) newErrors.ganhoMensal = 'Campo obrigatório';
222
+ } else if (currentScreenName === 'cartoes') {
223
+ if (formData.cartoes.length === 0) newErrors.cartoes = 'Selecione pelo menos uma opção';
224
+ if (formData.cartoes.length > 0 && !formData.cartoes.includes('nenhum') && !formData.cartaoPrincipal) newErrors.cartaoPrincipal = 'Selecione seu cartão principal';
225
+ } else if (currentScreenName === 'dividas') {
226
+ if (!formData.temDividas) newErrors.temDividas = 'Selecione uma opção';
227
+ } else if (currentScreenName === 'detalhesDividas') {
228
+ formData.dividas.forEach((d, i) => { if (!d.tipo) newErrors[`divida_tipo_${i}`] = 'Obrigatório'; if (!d.valor) newErrors[`divida_valor_${i}`] = 'Obrigatório'; if (!d.prazo) newErrors[`divida_prazo_${i}`] = 'Obrigatório'; });
229
+ } else if (currentScreenName === 'metas') {
230
+ formData.metas.forEach((m, i) => { if (!m.descricao.trim()) newErrors[`meta_desc_${i}`] = 'Obrigatório'; });
231
+ }
232
+ setErrors(newErrors);
233
+ return Object.keys(newErrors).length === 0;
234
+ };
235
+
236
+ const handleNext = () => {
237
+ if (!validateScreen()) return;
238
+ setIsAnimating(true);
239
+ setTimeout(() => {
240
+ if (currentScreen < screenSequence.length - 1) {
241
+ setCurrentScreen(prev => prev + 1);
242
+ } else {
243
+ setCurrentScreen(100); // Final
244
+ }
245
+ setIsAnimating(false);
246
+ setErrors({});
247
+ }, 200);
248
+ };
249
+
250
+ const handleBack = () => {
251
+ setIsAnimating(true);
252
+ setTimeout(() => {
253
+ if (currentScreen === 0) {
254
+ setShowChat(true);
255
+ setShowStartButton(true);
256
+ } else {
257
+ setCurrentScreen(prev => prev - 1);
258
+ }
259
+ setIsAnimating(false);
260
+ setErrors({});
261
+ }, 200);
262
+ };
263
+
264
+ const handleStartOnboarding = () => { setShowStartButton(false); setChatMessages(prev => [...prev, { type: 'user', text: 'Sim, vamos começar!' }]); setTimeout(() => setShowChat(false), 600); };
265
+ const handleFinish = () => setCurrentScreen(100);
266
+ const updateFormData = (field, value) => { setFormData(prev => ({ ...prev, [field]: value })); setErrors(prev => ({ ...prev, [field]: null })); };
267
+ const toggleArrayField = (field, value) => {
268
+ setFormData(prev => {
269
+ let newArray;
270
+ if (value === 'nenhum') {
271
+ newArray = prev[field].includes('nenhum') ? [] : ['nenhum'];
272
+ } else {
273
+ newArray = prev[field].filter(v => v !== 'nenhum');
274
+ newArray = newArray.includes(value) ? newArray.filter(v => v !== value) : [...newArray, value];
275
+ }
276
+ return { ...prev, [field]: newArray };
277
+ });
278
+ setErrors(prev => ({ ...prev, [field]: null }));
279
+ };
280
+ const addDivida = () => setFormData(prev => ({ ...prev, dividas: [...prev.dividas, { tipo: '', valor: '', prazo: '' }] }));
281
+ const removeDivida = (index) => { if (formData.dividas.length > 1) setFormData(prev => ({ ...prev, dividas: prev.dividas.filter((_, i) => i !== index) })); };
282
+ const updateDivida = (index, field, value) => setFormData(prev => ({ ...prev, dividas: prev.dividas.map((d, i) => i === index ? { ...d, [field]: value } : d) }));
283
+ const addMeta = () => setFormData(prev => ({ ...prev, metas: [...prev.metas, { descricao: '', prazo: '' }] }));
284
+ const removeMeta = (index) => { if (formData.metas.length > 1) setFormData(prev => ({ ...prev, metas: prev.metas.filter((_, i) => i !== index) })); };
285
+ const updateMeta = (index, field, value) => setFormData(prev => ({ ...prev, metas: prev.metas.map((m, i) => i === index ? { ...m, [field]: value } : m) }));
286
+
287
+ if (showChat) {
288
+ return (
289
+ <div style={{ width: '100%', maxWidth: '390px', height: '844px', margin: '0 auto', background: COLORS.white, borderRadius: '24px', overflow: 'hidden', position: 'relative', boxShadow: '0 25px 50px -12px rgba(0,0,0,0.25)' }}>
290
+ <div style={{ padding: '12px 24px', background: COLORS.tealDark, display: 'flex', justifyContent: 'space-between', alignItems: 'center', color: '#fff', fontSize: '14px', fontWeight: '500' }}><span>9:41</span><div style={{ display: 'flex', gap: '6px' }}><svg width="18" height="12" viewBox="0 0 18 12" fill="white"><path d="M1 4.5h2v7H1zM5 3h2v8.5H5zM9 1.5h2V12H9zM13 0h2v12h-2z" opacity="0.3"/><path d="M1 4.5h2v7H1zM5 3h2v8.5H5zM9 1.5h2V12H9z"/></svg><svg width="16" height="12" viewBox="0 0 16 12" fill="white"><path d="M8 2.4c2.4 0 4.5 1 6 2.6l-1.4 1.4c-1.2-1.2-2.8-2-4.6-2s-3.4.8-4.6 2L2 5c1.5-1.6 3.6-2.6 6-2.6zM8 5.6c1.4 0 2.7.6 3.6 1.6L10.2 8.6c-.6-.6-1.4-1-2.2-1s-1.6.4-2.2 1L4.4 7.2c.9-1 2.2-1.6 3.6-1.6zM8 8.8c.6 0 1.2.3 1.6.8L8 11.2l-1.6-1.6c.4-.5 1-.8 1.6-.8z"/></svg><svg width="27" height="12" viewBox="0 0 27 12" fill="white"><rect x="0.5" y="0.5" width="23" height="11" rx="2.5" stroke="white" strokeOpacity="0.35" fill="none"/><rect x="2" y="2" width="19" height="8" rx="1.5" fill="white"/></svg></div></div>
291
+ <div style={{ padding: '10px 16px', background: COLORS.headerBg, display: 'flex', alignItems: 'center', gap: '12px' }}><svg width="24" height="24" viewBox="0 0 24 24" fill="white"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg><div style={{ width: '40px', height: '40px', borderRadius: '50%', background: '#DFE5E7', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '20px' }}>🤖</div><div style={{ flex: 1 }}><div style={{ color: '#fff', fontWeight: '500', fontSize: '16px' }}>Assistente de Bolso</div><div style={{ color: 'rgba(255,255,255,0.8)', fontSize: '13px' }}>online</div></div></div>
292
+ <div style={{ padding: '16px', background: COLORS.chatBg, height: 'calc(100% - 150px)', overflowY: 'auto' }}>
293
+ {chatMessages.map((msg, idx) => <div key={idx} style={{ display: 'flex', justifyContent: msg.type === 'user' ? 'flex-end' : 'flex-start', marginBottom: '8px' }}><div style={{ maxWidth: '85%', padding: '8px 12px', borderRadius: msg.type === 'user' ? '8px 8px 0 8px' : '8px 8px 8px 0', background: msg.type === 'user' ? COLORS.bubbleOut : COLORS.bubbleIn, color: COLORS.textPrimary, fontSize: '14.5px', lineHeight: '1.45', boxShadow: '0 1px 0.5px rgba(11,20,26,0.13)', whiteSpace: 'pre-line' }}>{msg.text}<div style={{ fontSize: '11px', color: COLORS.textSecondary, textAlign: 'right', marginTop: '4px' }}>09:41 {msg.type === 'user' && '✓✓'}</div></div></div>)}
294
+ </div>
295
+ {showStartButton && <div style={{ position: 'absolute', bottom: '80px', left: '16px', right: '16px' }}><button type="button" onClick={handleStartOnboarding} style={{ width: '100%', padding: '14px', background: COLORS.whatsappGreen, border: 'none', borderRadius: '24px', color: '#fff', fontSize: '15px', fontWeight: '600', cursor: 'pointer', boxShadow: '0 4px 12px rgba(0,168,132,0.3)' }}>Começar cadastro</button></div>}
296
+ <div style={{ position: 'absolute', bottom: '0', left: '0', right: '0', padding: '8px 8px 24px 8px', background: '#F0F2F5', display: 'flex', gap: '8px', alignItems: 'center' }}><div style={{ flex: 1, background: COLORS.white, borderRadius: '24px', padding: '10px 16px', color: COLORS.textSecondary, fontSize: '15px' }}>Mensagem</div><div style={{ width: '48px', height: '48px', borderRadius: '50%', background: COLORS.whatsappGreen, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><svg width="24" height="24" viewBox="0 0 24 24" fill="white"><path d="M12 15c1.66 0 2.99-1.34 2.99-3L15 6c0-1.66-1.34-3-3-3S9 4.34 9 6v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 15 6.7 12H5c0 3.42 2.72 6.23 6 6.72V22h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z"/></svg></div></div>
297
+ </div>
298
+ );
299
+ }
300
+
301
+ // Tela final
302
+ if (currentScreen === 100) {
303
+ const needsPluggy = usaRegistroAutomatico;
304
+ return (
305
+ <div style={{ width: '100%', maxWidth: '390px', height: '844px', margin: '0 auto', background: COLORS.white, borderRadius: '24px', overflow: 'hidden', boxShadow: '0 25px 50px -12px rgba(0,0,0,0.25)', display: 'flex', flexDirection: 'column' }}>
306
+ <FlowHeader title="Cadastro concluído" showBack={false} />
307
+ <div style={{ flex: 1, padding: '32px 24px', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', overflowY: 'auto' }}>
308
+ <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>
309
+ <h2 style={{ color: COLORS.textPrimary, fontSize: '22px', fontWeight: '600', marginBottom: '12px' }}>Tudo pronto, {formData.nome.split(' ')[0] || 'Daniel'}! 🎉</h2>
310
+ <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>
311
+ {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>}
312
+ <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>
313
+ </div>
314
+ <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: '' }] }); }} />
315
+ </div>
316
+ );
317
+ }
318
+
319
+ const screenTitles = {
320
+ dados: 'Dados básicos',
321
+ expectativas: 'Suas expectativas',
322
+ empresa: 'Sobre sua empresa',
323
+ sobreVoce: 'Sobre você',
324
+ sobreVoceEmpresa: 'Sobre você',
325
+ metodoRegistro: 'Método de registro',
326
+ rendaGastos: 'Renda e gastos',
327
+ cartoes: 'Seus cartões',
328
+ dividas: 'Dívidas',
329
+ detalhesDividas: 'Detalhes das dívidas',
330
+ metas: 'Metas financeiras',
331
+ tutorialRegistro: 'Registrar movimentações',
332
+ tutorialAutomatico: 'Registro automático',
333
+ tutorialDashboard: 'Seu dashboard',
334
+ tutorialLembretes: 'Lembretes',
335
+ pronto: 'Pronto para começar!'
336
+ };
337
+
338
+ const totalSteps = screenSequence.length;
339
+
340
+ return (
341
+ <div style={{ width: '100%', maxWidth: '390px', height: '844px', margin: '0 auto', background: COLORS.white, borderRadius: '24px', overflow: 'hidden', boxShadow: '0 25px 50px -12px rgba(0,0,0,0.25)', display: 'flex', flexDirection: 'column' }}>
342
+ <div style={{ padding: '12px 24px', background: COLORS.tealDark, display: 'flex', justifyContent: 'space-between', alignItems: 'center', color: '#fff', fontSize: '14px', fontWeight: '500' }}><span>9:41</span><div style={{ display: 'flex', gap: '6px' }}><svg width="18" height="12" viewBox="0 0 18 12" fill="white"><path d="M1 4.5h2v7H1zM5 3h2v8.5H5zM9 1.5h2V12H9zM13 0h2v12h-2z" opacity="0.3"/><path d="M1 4.5h2v7H1zM5 3h2v8.5H5zM9 1.5h2V12H9z"/></svg><svg width="16" height="12" viewBox="0 0 16 12" fill="white"><path d="M8 2.4c2.4 0 4.5 1 6 2.6l-1.4 1.4c-1.2-1.2-2.8-2-4.6-2s-3.4.8-4.6 2L2 5c1.5-1.6 3.6-2.6 6-2.6zM8 5.6c1.4 0 2.7.6 3.6 1.6L10.2 8.6c-.6-.6-1.4-1-2.2-1s-1.6.4-2.2 1L4.4 7.2c.9-1 2.2-1.6 3.6-1.6zM8 8.8c.6 0 1.2.3 1.6.8L8 11.2l-1.6-1.6c.4-.5 1-.8 1.6-.8z"/></svg><svg width="27" height="12" viewBox="0 0 27 12" fill="white"><rect x="0.5" y="0.5" width="23" height="11" rx="2.5" stroke="white" strokeOpacity="0.35" fill="none"/><rect x="2" y="2" width="19" height="8" rx="1.5" fill="white"/></svg></div></div>
343
+ <FlowHeader title={screenTitles[currentScreenName]} onBack={handleBack} />
344
+ <div style={{ padding: '12px 16px', background: '#F8F9FA', display: 'flex', alignItems: 'center', gap: '8px' }}><div style={{ flex: 1, height: '4px', background: '#E0E0E0', borderRadius: '2px', overflow: 'hidden' }}><div style={{ height: '100%', width: `${((currentScreen + 1) / totalSteps) * 100}%`, background: COLORS.whatsappGreen, borderRadius: '2px', transition: 'width 0.3s ease' }} /></div><span style={{ color: COLORS.textSecondary, fontSize: '12px', fontWeight: '500' }}>{currentScreen + 1}/{totalSteps}</span></div>
345
+ <div style={{ flex: 1, padding: '20px 16px', overflowY: 'auto', opacity: isAnimating ? 0.5 : 1, transition: 'opacity 0.2s ease' }}>
346
+
347
+ {currentScreenName === 'dados' && <>
348
+ <TextSubheading>Preencha seus dados básicos</TextSubheading>
349
+ <BodyText>Precisamos dessas informações para criar seu cadastro.</BodyText>
350
+ <TextInput label="Nome completo" value={formData.nome} onChange={(v) => updateFormData('nome', v)} placeholder="Digite seu nome" error={errors.nome} />
351
+ <TextInput label="CPF" value={formData.cpf} onChange={(v) => updateFormData('cpf', formatCPF(v))} placeholder="000.000.000-00" error={errors.cpf} />
352
+ <TextInput label="E-mail" type="email" value={formData.email} onChange={(v) => updateFormData('email', v)} placeholder="seu@email.com" error={errors.email} hint="Usado para conectar sua agenda Google." />
353
+ <InfoBox type="success">Todas as suas informações são protegidas com <strong>criptografia de ponta a ponta</strong>. Seus dados estão seguros.</InfoBox>
354
+ <Checkbox checked={formData.aceitaTermos} onChange={(v) => updateFormData('aceitaTermos', v)} label={<span>Li e aceito os <a href="#" style={{ color: COLORS.whatsappGreen, textDecoration: 'underline' }}>Termos de Uso</a> e a <a href="#" style={{ color: COLORS.whatsappGreen, textDecoration: 'underline' }}>Política de Privacidade</a></span>} error={errors.aceitaTermos} />
355
+ </>}
356
+
357
+ {currentScreenName === 'expectativas' && <>
358
+ <TextSubheading>O que você espera do Assistente?</TextSubheading>
359
+ <BodyText>Conte suas expectativas e o que você quer controlar.</BodyText>
360
+ <TextArea label="Em poucas palavras, o que você espera do Assistente de Bolso?" value={formData.expectativa} onChange={(v) => updateFormData('expectativa', v)} placeholder="Ex: parar de estourar o cartão todo mês, organizar minhas contas..." error={errors.expectativa} />
361
+ <CheckboxGroup label="O que você quer controlar?" options={[{ value: 'pessoal', label: 'Finanças pessoais' }, { value: 'empresa', label: 'Finanças da empresa' }, { value: 'familia', label: 'Finanças da família' }, { value: 'outro', label: 'Outro' }]} selected={formData.tipoControle} onChange={(v) => toggleArrayField('tipoControle', v)} error={errors.tipoControle} />
362
+ </>}
363
+
364
+ {currentScreenName === 'empresa' && <>
365
+ <TextSubheading>Conte sobre sua empresa</TextSubheading>
366
+ <BodyText>Essas informações me ajudam a personalizar as orientações para o seu negócio.</BodyText>
367
+ <TextArea label="O que sua empresa faz?" value={formData.atividadeEmpresa} onChange={(v) => updateFormData('atividadeEmpresa', v)} placeholder="Ex: Vendo roupas online, tenho uma consultoria de marketing, sou dono de um restaurante..." rows={3} error={errors.atividadeEmpresa} />
368
+ <Dropdown label="Qual o faturamento mensal médio?" options={[{ value: 'ate5k', label: 'Até R$ 5.000' }, { value: '5k-15k', label: 'R$ 5.000 a R$ 15.000' }, { value: '15k-50k', label: 'R$ 15.000 a R$ 50.000' }, { value: '50k-100k', label: 'R$ 50.000 a R$ 100.000' }, { value: '100k-500k', label: 'R$ 100.000 a R$ 500.000' }, { value: '500k+', label: 'Acima de R$ 500.000' }, { value: 'naosei', label: 'Prefiro não informar' }]} selected={formData.faturamentoEmpresa} onChange={(v) => updateFormData('faturamentoEmpresa', v)} placeholder="Selecione o faturamento" error={errors.faturamentoEmpresa} />
369
+ <InfoBox type="info">Essas informações são confidenciais e serão usadas apenas para personalizar sua experiência.</InfoBox>
370
+ </>}
371
+
372
+ {currentScreenName === 'sobreVoce' && <>
373
+ <TextSubheading>Conte um pouco sobre você</TextSubheading>
374
+ <BodyText>Queremos te conhecer melhor para personalizar sua experiência.</BodyText>
375
+ <TextInput label="Profissão ou atividade principal" value={formData.profissao} onChange={(v) => updateFormData('profissao', v)} placeholder="Ex: Empresário, Desenvolvedor..." error={errors.profissao} />
376
+ <RadioButtonsGroup label="Você já usou algum app de controle financeiro antes?" options={[{ value: 'nunca', label: 'Nunca usei' }, { value: 'desisti', label: 'Já usei, mas não continuei' }, { value: 'uso', label: 'Uso outro atualmente' }]} selected={formData.experienciaApp} onChange={(v) => updateFormData('experienciaApp', v)} error={errors.experienciaApp} />
377
+ {(formData.experienciaApp === 'desisti' || formData.experienciaApp === 'uso') && (
378
+ <TextInput label="Qual app você usou/usa? O que achou?" value={formData.qualApp} onChange={(v) => updateFormData('qualApp', v)} placeholder="Ex: Mobills, achei complicado..." error={errors.qualApp} />
379
+ )}
380
+ <Dropdown label="Como você conheceu o Assistente de Bolso?" options={[{ value: 'amigo', label: 'Indicação de amigo' }, { value: 'instagram', label: 'Instagram' }, { value: 'google', label: 'Google' }, { value: 'tiktok', label: 'TikTok' }, { value: 'outro', label: 'Outro' }]} selected={formData.comoConheceu} onChange={(v) => updateFormData('comoConheceu', v)} placeholder="Selecione uma opção" error={errors.comoConheceu} />
381
+ </>}
382
+
383
+ {currentScreenName === 'sobreVoceEmpresa' && <>
384
+ <TextSubheading>Conte um pouco sobre você</TextSubheading>
385
+ <BodyText>Queremos te conhecer melhor para personalizar sua experiência.</BodyText>
386
+ <RadioButtonsGroup label="Você já usou algum app de controle financeiro antes?" options={[{ value: 'nunca', label: 'Nunca usei' }, { value: 'desisti', label: 'Já usei, mas não continuei' }, { value: 'uso', label: 'Uso outro atualmente' }]} selected={formData.experienciaApp} onChange={(v) => updateFormData('experienciaApp', v)} error={errors.experienciaApp} />
387
+ {(formData.experienciaApp === 'desisti' || formData.experienciaApp === 'uso') && (
388
+ <TextInput label="Qual app você usou/usa? O que achou?" value={formData.qualApp} onChange={(v) => updateFormData('qualApp', v)} placeholder="Ex: Mobills, achei complicado..." error={errors.qualApp} />
389
+ )}
390
+ <Dropdown label="Como você conheceu o Assistente de Bolso?" options={[{ value: 'amigo', label: 'Indicação de amigo' }, { value: 'instagram', label: 'Instagram' }, { value: 'google', label: 'Google' }, { value: 'tiktok', label: 'TikTok' }, { value: 'outro', label: 'Outro' }]} selected={formData.comoConheceu} onChange={(v) => updateFormData('comoConheceu', v)} placeholder="Selecione uma opção" error={errors.comoConheceu} />
391
+ </>}
392
+
393
+ {currentScreenName === 'metodoRegistro' && <>
394
+ <TextSubheading>Como você quer registrar suas finanças?</TextSubheading>
395
+ <BodyText>Escolha como prefere registrar suas despesas e receitas.</BodyText>
396
+ <RadioButtonsGroup label="Escolha uma opção" options={[{ value: 'automatico', label: 'Conexão automática com contas bancárias' }, { value: 'manual', label: 'Registro manual por texto, foto ou áudio' }, { value: 'ambos', label: 'Quero usar as duas formas acima' }]} selected={formData.metodoRegistro} onChange={(v) => updateFormData('metodoRegistro', v)} error={errors.metodoRegistro} />
397
+ {(formData.metodoRegistro === 'automatico' || formData.metodoRegistro === 'ambos') && <InfoBox>Para conexão automática, usamos um parceiro seguro chamado <strong>Pluggy</strong>. Você receberá um link para conectar suas contas ao final do cadastro.</InfoBox>}
398
+ <InfoBox type="info">Se mudar de ideia no futuro, é só avisar o assistente!</InfoBox>
399
+ </>}
400
+
401
+ {currentScreenName === 'rendaGastos' && <>
402
+ <TextSubheading>Qual sua renda e seus gastos mensais?</TextSubheading>
403
+ <BodyText>Informe uma estimativa para eu entender sua situação financeira.</BodyText>
404
+ <TextInput label="Quanto você ganha por mês?" value={formData.ganhoMensal} onChange={(v) => updateFormData('ganhoMensal', formatCurrency(v))} placeholder="R$ 0" error={errors.ganhoMensal} />
405
+ <TextInput label="Quanto você gasta por mês?" value={formData.gastoMensal} onChange={(v) => updateFormData('gastoMensal', formatCurrency(v))} placeholder="R$ 0" error={errors.gastoMensal} hint="Depois eu te mostro se está batendo com a realidade." />
406
+ </>}
407
+
408
+ {currentScreenName === 'cartoes' && <>
409
+ <TextSubheading>Quais cartões de crédito você usa?</TextSubheading>
410
+ <BodyText>Com essa informação vou conseguir te ajudar a organizar seus gastos, e inclusive a entender se os cartões que você usa são os melhores para o seu perfil.</BodyText>
411
+ <CheckboxGroup label="Selecione seus cartões" options={[{ value: 'nubank', label: 'Nubank' }, { value: 'inter', label: 'Inter' }, { value: 'c6', label: 'C6 Bank' }, { value: 'itau', label: 'Itaú' }, { value: 'bradesco', label: 'Bradesco' }, { value: 'santander', label: 'Santander' }, { value: 'bb', label: 'Banco do Brasil' }, { value: 'caixa', label: 'Caixa' }, { value: 'xp', label: 'XP' }, { value: 'outro', label: 'Outro' }, { value: 'nenhum', label: 'Não uso cartão de crédito' }]} selected={formData.cartoes} onChange={(v) => toggleArrayField('cartoes', v)} error={errors.cartoes} />
412
+ {formData.cartoes.includes('outro') && <TextInput label="Qual outro cartão?" value={formData.outroCartao} onChange={(v) => updateFormData('outroCartao', v)} placeholder="Ex: Neon, PicPay..." required={false} />}
413
+ {formData.cartoes.length > 0 && !formData.cartoes.includes('nenhum') && (
414
+ <Dropdown label="Qual é seu cartão principal?" options={formData.cartoes.filter(c => c !== 'outro' && c !== 'nenhum').map(c => ({ value: c, label: { nubank: 'Nubank', inter: 'Inter', c6: 'C6 Bank', itau: 'Itaú', bradesco: 'Bradesco', santander: 'Santander', bb: 'Banco do Brasil', caixa: 'Caixa', xp: 'XP' }[c] || c })).concat(formData.cartoes.includes('outro') && formData.outroCartao ? [{ value: 'outro', label: formData.outroCartao }] : [])} selected={formData.cartaoPrincipal} onChange={(v) => updateFormData('cartaoPrincipal', v)} placeholder="Selecione o cartão principal" error={errors.cartaoPrincipal} />
415
+ )}
416
+ </>}
417
+
418
+ {currentScreenName === 'dividas' && <>
419
+ <TextSubheading>Você possui dívidas atualmente?</TextSubheading>
420
+ <BodyText>Saber sobre suas dívidas me ajuda a criar um plano para você quitá-las mais rápido.</BodyText>
421
+ <InfoBox type="info" icon="💡">Perguntamos sobre dívidas para te ajudar a se organizar e criar estratégias de pagamento. Essas informações são 100% confidenciais.</InfoBox>
422
+ <RadioButtonsGroup label="Você tem dívidas hoje?" options={[{ value: 'nao', label: 'Não tenho dívidas' }, { value: 'sim', label: 'Sim, tenho dívidas em andamento' }]} selected={formData.temDividas} onChange={(v) => updateFormData('temDividas', v)} error={errors.temDividas} />
423
+ </>}
424
+
425
+ {currentScreenName === 'detalhesDividas' && <>
426
+ <TextSubheading>Detalhe suas dívidas</TextSubheading>
427
+ <BodyText>Informe cada dívida para que eu possa te ajudar a criar um plano de pagamento.</BodyText>
428
+ {formData.dividas.map((divida, index) => <div key={index} style={{ background: '#F8F9FA', borderRadius: '12px', padding: '16px', marginBottom: '16px' }}><div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}><span style={{ color: COLORS.textPrimary, fontWeight: '600', fontSize: '14px' }}>Dívida {index + 1}</span>{formData.dividas.length > 1 && <button type="button" onClick={() => removeDivida(index)} style={{ background: 'transparent', border: 'none', color: COLORS.error, fontSize: '13px', cursor: 'pointer', padding: '4px 8px' }}>Remover</button>}</div><Dropdown label="Tipo de dívida" options={[{ value: 'cartao', label: 'Cartão de crédito' }, { value: 'financiamento', label: 'Financiamento' }, { value: 'consignado', label: 'Empréstimo consignado' }, { value: 'pessoal', label: 'Empréstimo pessoal' }, { value: 'cheque', label: 'Cheque especial' }, { value: 'outro', label: 'Outro' }]} selected={divida.tipo} onChange={(v) => updateDivida(index, 'tipo', v)} placeholder="Selecione o tipo" error={errors[`divida_tipo_${index}`]} /><TextInput label="Valor total aproximado" value={divida.valor} onChange={(v) => updateDivida(index, 'valor', formatCurrency(v))} placeholder="R$ 0" error={errors[`divida_valor_${index}`]} /><Dropdown label="Prazo restante" options={[{ value: '6m', label: 'Menos de 6 meses' }, { value: '6-12m', label: 'Entre 6 e 12 meses' }, { value: '1-3a', label: 'Entre 1 e 3 anos' }, { value: '3a+', label: 'Mais de 3 anos' }, { value: 'naosei', label: 'Não sei' }]} selected={divida.prazo} onChange={(v) => updateDivida(index, 'prazo', v)} placeholder="Selecione o prazo" error={errors[`divida_prazo_${index}`]} /></div>)}
429
+ <button type="button" onClick={addDivida} style={{ width: '100%', padding: '12px', background: 'transparent', border: `1.5px dashed ${COLORS.whatsappGreen}`, borderRadius: '8px', color: COLORS.whatsappGreen, fontSize: '14px', fontWeight: '600', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px' }}><span style={{ fontSize: '18px' }}>+</span> Adicionar outra dívida</button>
430
+ </>}
431
+
432
+ {currentScreenName === 'metas' && <>
433
+ <TextSubheading>Defina suas metas financeiras</TextSubheading>
434
+ <BodyText>Ter metas claras te ajuda a manter o foco. Vou te lembrar e acompanhar seu progresso!</BodyText>
435
+ {formData.metas.map((meta, index) => <div key={index} style={{ background: '#F8F9FA', borderRadius: '12px', padding: '16px', marginBottom: '16px' }}><div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}><span style={{ color: COLORS.textPrimary, fontWeight: '600', fontSize: '14px' }}>Meta {index + 1}</span>{formData.metas.length > 1 && <button type="button" onClick={() => removeMeta(index)} style={{ background: 'transparent', border: 'none', color: COLORS.error, fontSize: '13px', cursor: 'pointer', padding: '4px 8px' }}>Remover</button>}</div><TextArea label="Descreva sua meta" value={meta.descricao} onChange={(v) => updateMeta(index, 'descricao', v)} placeholder="Ex: Juntar R$ 5.000 para emergências..." rows={2} error={errors[`meta_desc_${index}`]} /><TextInput label="Prazo desejado" value={meta.prazo} onChange={(v) => updateMeta(index, 'prazo', v)} placeholder="Ex: 6 meses, até dezembro..." required={false} /></div>)}
436
+ <button type="button" onClick={addMeta} style={{ width: '100%', padding: '12px', background: 'transparent', border: `1.5px dashed ${COLORS.whatsappGreen}`, borderRadius: '8px', color: COLORS.whatsappGreen, fontSize: '14px', fontWeight: '600', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px' }}><span style={{ fontSize: '18px' }}>+</span> Adicionar outra meta</button>
437
+ </>}
438
+
439
+ {currentScreenName === 'tutorialRegistro' && <>
440
+ <TextSubheading>Veja como registrar movimentações financeiras</TextSubheading>
441
+ <BodyText>É muito fácil! Basta me enviar uma mensagem como se estivesse falando com um amigo.</BodyText>
442
+ <FeatureCard emoji="💸" title="Registrar uma despesa" examples={['Almoço 35 reais', 'Uber 22,50 hoje', 'Mercado 180 no débito']} />
443
+ <FeatureCard emoji="💰" title="Registrar uma receita" examples={['Recebi 3.500 do salário', 'Freela de 800 reais', 'PIX de 150 do João']} />
444
+ <FeatureCard emoji="🔁" title="Registrar algo recorrente" examples={['Aluguel 1.200 todo dia 5', 'Netflix 55,90 todo mês']} />
445
+ </>}
446
+
447
+ {currentScreenName === 'tutorialAutomatico' && <>
448
+ <TextSubheading>Como funciona o registro automático</TextSubheading>
449
+ <BodyText>Suas transações bancárias serão importadas e categorizadas automaticamente, sem você precisar fazer nada.</BodyText>
450
+ <div style={{ background: '#F0FDF4', border: `1px solid ${COLORS.whatsappGreen}`, borderRadius: '12px', padding: '20px', marginBottom: '20px' }}>
451
+ <p style={{ color: COLORS.textPrimary, fontWeight: '600', fontSize: '15px', marginBottom: '16px' }}>⏰ Horários de atualização</p>
452
+ <TimelineItem time="7h" description="Primeira atualização do dia: importo todas as transações da noite anterior" />
453
+ <TimelineItem time="12h" description="Atualização do meio-dia: capturo as transações da manhã" />
454
+ <TimelineItem time="20h" description="Última atualização: registro todas as movimentações do dia" isLast />
455
+ </div>
456
+ <div style={{ background: '#F8F9FA', borderRadius: '12px', padding: '16px', marginBottom: '16px' }}>
457
+ <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '10px' }}>
458
+ <span style={{ fontSize: '20px' }}>🏷️</span>
459
+ <span style={{ color: COLORS.textPrimary, fontWeight: '600' }}>Categorização inteligente</span>
460
+ </div>
461
+ <p style={{ color: COLORS.textSecondary, fontSize: '14px', lineHeight: '1.5' }}>Todas as entradas e saídas são categorizadas automaticamente (alimentação, transporte, lazer, etc.) e registradas no seu dashboard.</p>
462
+ </div>
463
+ <InfoBox type="info">Você pode combinar o registro automático com registros manuais sempre que quiser!</InfoBox>
464
+ </>}
465
+
466
+ {currentScreenName === 'tutorialDashboard' && <>
467
+ <TextSubheading>Acompanhe suas finanças no dashboard</TextSubheading>
468
+ <BodyText>Todas as suas movimentações ficam organizadas em um dashboard que você pode acessar a qualquer momento.</BodyText>
469
+ <div style={{ background: '#F8F9FA', borderRadius: '12px', padding: '20px', marginBottom: '16px' }}>
470
+ <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '16px' }}>
471
+ <span style={{ fontSize: '24px' }}>📊</span>
472
+ <span style={{ color: COLORS.textPrimary, fontWeight: '600', fontSize: '16px' }}>Seu dashboard financeiro</span>
473
+ </div>
474
+ <p style={{ color: COLORS.textSecondary, fontSize: '14px', lineHeight: '1.5', marginBottom: '12px' }}>No dashboard você encontra:</p>
475
+ {['Todas as despesas e receitas (manuais e automáticas)', 'Gráficos de gastos por categoria', 'Evolução do seu saldo', 'Progresso das suas metas'].map((item, i) => (
476
+ <div key={i} style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }}>
477
+ <span style={{ color: COLORS.whatsappGreen }}>✓</span>
478
+ <span style={{ color: COLORS.textPrimary, fontSize: '14px' }}>{item}</span>
479
+ </div>
480
+ ))}
481
+ </div>
482
+ <div style={{ background: COLORS.bubbleIn, borderRadius: '12px', padding: '16px', marginBottom: '16px' }}>
483
+ <p style={{ color: COLORS.textSecondary, fontSize: '12px', marginBottom: '8px', textTransform: 'uppercase', fontWeight: '600' }}>🔗 Como acessar</p>
484
+ <p style={{ color: COLORS.textPrimary, fontSize: '14px', lineHeight: '1.5' }}>Você receberá um link exclusivo para acessar seu dashboard quando quiser.</p>
485
+ </div>
486
+ <FeatureCard emoji="💬" title="Ou pergunte direto pra mim" examples={['Quanto gastei hoje?', 'Quanto gastei no mês?', 'Meus gastos com alimentação']} />
487
+ </>}
488
+
489
+ {currentScreenName === 'tutorialLembretes' && <>
490
+ <TextSubheading>Crie lembretes e nunca esqueça nada</TextSubheading>
491
+ <BodyText>Posso te lembrar de pagamentos, compromissos e criar eventos na sua agenda.</BodyText>
492
+ <FeatureCard emoji="💳" title="Lembrete de pagamento" examples={['Me lembra de pagar o cartão dia 15', 'Avisa sobre o aluguel todo dia 5']} />
493
+ <FeatureCard emoji="📅" title="Lembrete de compromisso" examples={['Me lembra da reunião amanhã às 14h', 'Dentista dia 20 às 9h']} />
494
+ <FeatureCard emoji="📆" title="Evento na agenda Google" examples={['Cria evento: viagem SP dia 10 a 12', 'Agenda reunião quinta às 15h']} />
495
+ <InfoBox type="warning">Os lembretes podem levar até 3h para serem registrados. Você será avisado quando estiver tudo certo! ✅</InfoBox>
496
+ </>}
497
+
498
+ {currentScreenName === 'pronto' && <>
499
+ <TextSubheading>Você está pronto para começar!</TextSubheading>
500
+ <BodyText>Agora é só me enviar mensagens por texto, áudio ou foto. Estou aqui para te ajudar!</BodyText>
501
+ <div style={{ background: '#F0FDF4', border: `1px solid ${COLORS.whatsappGreen}`, borderRadius: '12px', padding: '20px', marginBottom: '20px' }}>
502
+ <p style={{ color: COLORS.textPrimary, fontWeight: '600', fontSize: '15px', marginBottom: '12px' }}>✨ O que você pode fazer:</p>
503
+ {[{ i: '💸', t: 'Registrar despesas e receitas' }, { i: '📊', t: 'Ver relatórios e análises' }, { i: '⏰', t: 'Criar lembretes' }, { i: '🎯', t: 'Acompanhar suas metas' }, { i: '💬', t: 'Tirar dúvidas sobre finanças' }].map((item, idx) => <div key={idx} style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: idx < 4 ? '8px' : 0 }}><span style={{ fontSize: '16px' }}>{item.i}</span><span style={{ color: COLORS.textPrimary, fontSize: '14px' }}>{item.t}</span></div>)}
504
+ </div>
505
+ {usaRegistroAutomatico && (
506
+ <InfoBox type="info" icon="🔗">Na próxima tela você poderá conectar suas contas bancárias automaticamente.</InfoBox>
507
+ )}
508
+ <div style={{ background: COLORS.bubbleIn, borderRadius: '12px', padding: '14px', boxShadow: '0 1px 2px rgba(0,0,0,0.1)' }}>
509
+ <p style={{ color: COLORS.textSecondary, fontSize: '11px', marginBottom: '8px', textTransform: 'uppercase', fontWeight: '600' }}>💡 Dica</p>
510
+ <p style={{ color: COLORS.textPrimary, fontSize: '14px', margin: 0, lineHeight: '1.5' }}>Se não tiver certeza se eu faço alguma coisa, é só perguntar! Estou aqui pra ajudar 😉</p>
511
+ </div>
512
+ </>}
513
+
514
+ </div>
515
+ <FooterButton text={currentScreenName === 'pronto' ? 'Concluir cadastro' : 'Continuar'} onClick={currentScreenName === 'pronto' ? handleFinish : handleNext} disabled={currentScreenName === 'dados' && !formData.aceitaTermos} />
516
+ </div>
517
+ );
518
+ };
519
+
520
+ ReactDOM.createRoot(document.getElementById('root')).render(<OnboardingSimulation />);
521
+ </script>
522
+ </body>
523
+ </html>