onboarding-assistente-web

Running

App Files Files Community

onboarding-assistente-web / index.html

dcga

Update index.html

99ad836 verified 3 months ago

raw

history blame contribute delete

71 kB

	<!DOCTYPE html>
	<html lang="pt-BR">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Assistente de Bolso - Onboarding</title>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
	<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
	<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
	<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
	<style>
	:root {
	--bg-cream: #fefdf3;
	--green-primary: #0e3628;
	--green-light: #1a5a42;
	--green-accent: #22c55e;
	--white: #ffffff;
	--black: #111111;
	--gray-100: #f5f5f4;
	--gray-200: #e7e5e4;
	--gray-300: #d6d3d1;
	--gray-400: #a8a29e;
	--gray-500: #78716c;
	--gray-600: #57534e;
	--gray-700: #44403c;
	--error: #dc2626;
	--font-serif: 'DM Serif Display', Georgia, serif;
	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	}

	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font-family: var(--font-sans);
	background-color: var(--bg-cream);
	color: var(--black);
	min-height: 100vh;
	line-height: 1.6;
	}

	#root {
	min-height: 100vh;
	}

	::selection {
	background-color: var(--green-primary);
	color: var(--white);
	}

	::-webkit-scrollbar {
	width: 6px;
	}

	::-webkit-scrollbar-track {
	background: var(--gray-100);
	}

	::-webkit-scrollbar-thumb {
	background: var(--gray-400);
	border-radius: 3px;
	}

	::-webkit-scrollbar-thumb:hover {
	background: var(--gray-500);
	}

	input::placeholder, textarea::placeholder {
	color: var(--gray-400);
	}

	@keyframes fadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
	}

	@keyframes slideIn {
	from { opacity: 0; transform: translateX(-20px); }
	to { opacity: 1; transform: translateX(0); }
	}

	@keyframes pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.02); }
	}

	.animate-fade-in {
	animation: fadeIn 0.4s ease-out forwards;
	}

	.animate-slide-in {
	animation: slideIn 0.3s ease-out forwards;
	}
	</style>
	</head>
	<body>
	<div id="root"></div>
	<script type="text/babel">
	const { useState, useEffect } = React;

	// ===== COMPONENTS =====

	const Logo = ({ size = 'default' }) => {
	const sizes = {
	small: { width: 28, height: 28 },
	default: { width: 36, height: 36 },
	large: { width: 56, height: 56 }
	};
	const s = sizes[size];
	// Logo do Assistente de Bolso - trevo de 4 folhas (formato correto)
	return (
	<svg width={s.width} height={s.height} viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
	{/* Trevo de 4 folhas - cada pétala é uma forma arredondada */}
	<path d="M50 5 C70 5, 85 20, 85 40 C85 50, 75 55, 50 50 C25 55, 15 50, 15 40 C15 20, 30 5, 50 5Z" fill="#22c55e"/>
	<path d="M95 50 C95 70, 80 85, 60 85 C50 85, 45 75, 50 50 C45 25, 50 15, 60 15 C80 15, 95 30, 95 50Z" fill="#22c55e"/>
	<path d="M50 95 C30 95, 15 80, 15 60 C15 50, 25 45, 50 50 C75 45, 85 50, 85 60 C85 80, 70 95, 50 95Z" fill="#22c55e"/>
	<path d="M5 50 C5 30, 20 15, 40 15 C50 15, 55 25, 50 50 C55 75, 50 85, 40 85 C20 85, 5 70, 5 50Z" fill="#22c55e"/>
	</svg>
	);
	};

	const Header = ({ currentStep, totalSteps, onBack, showBack = true }) => (
	<header style={{
	position: 'sticky',
	top: 0,
	background: 'var(--bg-cream)',
	borderBottom: '1px solid var(--gray-200)',
	zIndex: 100,
	padding: '16px 24px',
	}}>
	<div style={{
	maxWidth: '600px',
	margin: '0 auto',
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'space-between',
	}}>
	<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
	{showBack && (
	<button
	onClick={onBack}
	style={{
	background: 'transparent',
	border: 'none',
	cursor: 'pointer',
	padding: '8px',
	margin: '-8px',
	display: 'flex',
	alignItems: 'center',
	color: 'var(--green-primary)',
	transition: 'opacity 0.2s',
	}}
	onMouseOver={(e) => e.currentTarget.style.opacity = '0.7'}
	onMouseOut={(e) => e.currentTarget.style.opacity = '1'}
	>
	<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
	<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
	</svg>
	</button>
	)}
	<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
	<Logo size="small" />
	<span style={{
	fontFamily: 'var(--font-serif)',
	fontSize: '18px',
	color: 'var(--green-primary)',
	fontWeight: 400,
	}}>
	Assistente de Bolso
	</span>
	</div>
	</div>
	<span style={{
	fontSize: '14px',
	color: 'var(--gray-500)',
	fontWeight: 500,
	}}>
	{currentStep}/{totalSteps}
	</span>
	</div>
	</header>
	);

	const ProgressBar = ({ current, total }) => (
	<div style={{
	maxWidth: '600px',
	margin: '0 auto',
	padding: '0 24px 24px',
	}}>
	<div style={{
	height: '4px',
	background: 'var(--gray-200)',
	borderRadius: '2px',
	overflow: 'hidden',
	}}>
	<div style={{
	height: '100%',
	width: `${(current / total) * 100}%`,
	background: 'var(--green-primary)',
	borderRadius: '2px',
	transition: 'width 0.4s ease',
	}} />
	</div>
	</div>
	);

	const Title = ({ children }) => (
	<h1 style={{
	fontFamily: 'var(--font-serif)',
	fontSize: 'clamp(24px, 5vw, 32px)',
	fontWeight: 400,
	color: 'var(--green-primary)',
	marginBottom: '12px',
	lineHeight: 1.2,
	}}>
	{children}
	</h1>
	);

	const Subtitle = ({ children, style = {} }) => (
	<p style={{
	fontSize: '16px',
	color: 'var(--gray-600)',
	marginBottom: '32px',
	lineHeight: 1.6,
	...style,
	}}>
	{children}
	</p>
	);

	const TextInput = ({ label, value, onChange, placeholder, error, hint, type = 'text', required = true }) => (
	<div style={{ marginBottom: '24px' }} className="animate-fade-in">
	<label style={{
	display: 'block',
	fontSize: '14px',
	fontWeight: 600,
	color: 'var(--black)',
	marginBottom: '8px',
	}}>
	{label} {required && <span style={{ color: 'var(--error)' }}>*</span>}
	</label>
	<input
	type={type}
	value={value}
	onChange={(e) => onChange(e.target.value)}
	placeholder={placeholder}
	style={{
	width: '100%',
	padding: '16px 20px',
	fontSize: '16px',
	border: `2px solid ${error ? 'var(--error)' : 'var(--gray-200)'}`,
	borderRadius: '12px',
	background: 'var(--white)',
	color: 'var(--black)',
	outline: 'none',
	transition: 'border-color 0.2s, box-shadow 0.2s',
	}}
	onFocus={(e) => {
	e.target.style.borderColor = 'var(--green-primary)';
	e.target.style.boxShadow = '0 0 0 4px rgba(14, 54, 40, 0.1)';
	}}
	onBlur={(e) => {
	e.target.style.borderColor = error ? 'var(--error)' : 'var(--gray-200)';
	e.target.style.boxShadow = 'none';
	}}
	/>
	{error && <p style={{ color: 'var(--error)', fontSize: '13px', marginTop: '6px' }}>{error}</p>}
	{hint && !error && <p style={{ color: 'var(--gray-500)', fontSize: '13px', marginTop: '6px' }}>{hint}</p>}
	</div>
	);

	const TextArea = ({ label, value, onChange, placeholder, error, rows = 3, required = true }) => (
	<div style={{ marginBottom: '24px' }} className="animate-fade-in">
	<label style={{
	display: 'block',
	fontSize: '14px',
	fontWeight: 600,
	color: 'var(--black)',
	marginBottom: '8px',
	}}>
	{label} {required && <span style={{ color: 'var(--error)' }}>*</span>}
	</label>
	<textarea
	value={value}
	onChange={(e) => onChange(e.target.value)}
	placeholder={placeholder}
	rows={rows}
	style={{
	width: '100%',
	padding: '16px 20px',
	fontSize: '16px',
	border: `2px solid ${error ? 'var(--error)' : 'var(--gray-200)'}`,
	borderRadius: '12px',
	background: 'var(--white)',
	color: 'var(--black)',
	outline: 'none',
	resize: 'none',
	fontFamily: 'inherit',
	transition: 'border-color 0.2s, box-shadow 0.2s',
	}}
	onFocus={(e) => {
	e.target.style.borderColor = 'var(--green-primary)';
	e.target.style.boxShadow = '0 0 0 4px rgba(14, 54, 40, 0.1)';
	}}
	onBlur={(e) => {
	e.target.style.borderColor = error ? 'var(--error)' : 'var(--gray-200)';
	e.target.style.boxShadow = 'none';
	}}
	/>
	{error && <p style={{ color: 'var(--error)', fontSize: '13px', marginTop: '6px' }}>{error}</p>}
	</div>
	);

	const RadioGroup = ({ label, options, selected, onChange, error }) => (
	<div style={{ marginBottom: '24px' }} className="animate-fade-in">
	<label style={{
	display: 'block',
	fontSize: '14px',
	fontWeight: 600,
	color: 'var(--black)',
	marginBottom: '12px',
	}}>
	{label} <span style={{ color: 'var(--error)' }}>*</span>
	</label>
	<div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
	{options.map((opt, idx) => (
	<button
	key={opt.value}
	type="button"
	onClick={() => onChange(opt.value)}
	className="animate-slide-in"
	style={{
	animationDelay: `${idx * 50}ms`,
	padding: '16px 20px',
	background: selected === opt.value ? 'var(--green-primary)' : 'var(--white)',
	border: `2px solid ${selected === opt.value ? 'var(--green-primary)' : 'var(--gray-200)'}`,
	borderRadius: '12px',
	color: selected === opt.value ? 'var(--white)' : 'var(--black)',
	fontSize: '15px',
	textAlign: 'left',
	cursor: 'pointer',
	display: 'flex',
	alignItems: 'center',
	gap: '14px',
	transition: 'all 0.2s ease',
	}}
	onMouseOver={(e) => {
	if (selected !== opt.value) {
	e.currentTarget.style.borderColor = 'var(--green-primary)';
	e.currentTarget.style.background = 'rgba(14, 54, 40, 0.03)';
	}
	}}
	onMouseOut={(e) => {
	if (selected !== opt.value) {
	e.currentTarget.style.borderColor = 'var(--gray-200)';
	e.currentTarget.style.background = 'var(--white)';
	}
	}}
	>
	<div style={{
	width: '22px',
	height: '22px',
	borderRadius: '50%',
	border: `2px solid ${selected === opt.value ? 'var(--white)' : 'var(--gray-300)'}`,
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'center',
	flexShrink: 0,
	transition: 'all 0.2s',
	}}>
	{selected === opt.value && (
	<div style={{
	width: '10px',
	height: '10px',
	borderRadius: '50%',
	background: 'var(--white)',
	}} />
	)}
	</div>
	{opt.label}
	</button>
	))}
	</div>
	{error && <p style={{ color: 'var(--error)', fontSize: '13px', marginTop: '8px' }}>{error}</p>}
	</div>
	);

	const CheckboxGroup = ({ label, options, selected, onChange, error }) => (
	<div style={{ marginBottom: '24px' }} className="animate-fade-in">
	<label style={{
	display: 'block',
	fontSize: '14px',
	fontWeight: 600,
	color: 'var(--black)',
	marginBottom: '12px',
	}}>
	{label} <span style={{ color: 'var(--error)' }}>*</span>
	</label>
	<div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
	{options.map((opt, idx) => (
	<button
	key={opt.value}
	type="button"
	onClick={() => onChange(opt.value)}
	className="animate-slide-in"
	style={{
	animationDelay: `${idx * 50}ms`,
	padding: '16px 20px',
	background: selected.includes(opt.value) ? 'var(--green-primary)' : 'var(--white)',
	border: `2px solid ${selected.includes(opt.value) ? 'var(--green-primary)' : 'var(--gray-200)'}`,
	borderRadius: '12px',
	color: selected.includes(opt.value) ? 'var(--white)' : 'var(--black)',
	fontSize: '15px',
	textAlign: 'left',
	cursor: 'pointer',
	display: 'flex',
	alignItems: 'center',
	gap: '14px',
	transition: 'all 0.2s ease',
	}}
	onMouseOver={(e) => {
	if (!selected.includes(opt.value)) {
	e.currentTarget.style.borderColor = 'var(--green-primary)';
	e.currentTarget.style.background = 'rgba(14, 54, 40, 0.03)';
	}
	}}
	onMouseOut={(e) => {
	if (!selected.includes(opt.value)) {
	e.currentTarget.style.borderColor = 'var(--gray-200)';
	e.currentTarget.style.background = 'var(--white)';
	}
	}}
	>
	<div style={{
	width: '22px',
	height: '22px',
	borderRadius: '6px',
	border: `2px solid ${selected.includes(opt.value) ? 'var(--white)' : 'var(--gray-300)'}`,
	background: selected.includes(opt.value) ? 'transparent' : 'transparent',
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'center',
	flexShrink: 0,
	transition: 'all 0.2s',
	}}>
	{selected.includes(opt.value) && (
	<svg width="14" height="12" viewBox="0 0 14 12" fill="none">
	<path d="M1 6L5 10L13 2" stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
	</svg>
	)}
	</div>
	{opt.label}
	</button>
	))}
	</div>
	{error && <p style={{ color: 'var(--error)', fontSize: '13px', marginTop: '8px' }}>{error}</p>}
	</div>
	);

	const Dropdown = ({ label, options, selected, onChange, placeholder, error, required = true, id }) => (
	<div style={{ marginBottom: '24px' }} className="animate-fade-in" id={id}>
	{label && (
	<label style={{
	display: 'block',
	fontSize: '14px',
	fontWeight: 600,
	color: 'var(--black)',
	marginBottom: '8px',
	}}>
	{label} {required && <span style={{ color: 'var(--error)' }}>*</span>}
	</label>
	)}
	<select
	value={selected}
	onChange={(e) => onChange(e.target.value)}
	style={{
	width: '100%',
	padding: '16px 20px',
	fontSize: '16px',
	border: `2px solid ${error ? 'var(--error)' : 'var(--gray-200)'}`,
	borderRadius: '12px',
	background: 'var(--white)',
	color: selected ? 'var(--black)' : 'var(--gray-400)',
	outline: 'none',
	cursor: 'pointer',
	appearance: 'none',
	backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%2378716c' d='M8 11L3 6h10z'/%3E%3C/svg%3E")`,
	backgroundRepeat: 'no-repeat',
	backgroundPosition: 'right 16px center',
	}}
	>
	<option value="" disabled>{placeholder}</option>
	{options.map((opt) => (
	<option key={opt.value} value={opt.value}>{opt.label}</option>
	))}
	</select>
	{error && <p style={{ color: 'var(--error)', fontSize: '13px', marginTop: '6px' }}>{error}</p>}
	</div>
	);

	const Checkbox = ({ checked, onChange, label, error }) => (
	<div style={{ marginBottom: '20px' }} className="animate-fade-in">
	<button
	type="button"
	onClick={() => onChange(!checked)}
	style={{
	display: 'flex',
	alignItems: 'flex-start',
	gap: '14px',
	background: 'transparent',
	border: 'none',
	cursor: 'pointer',
	textAlign: 'left',
	padding: 0,
	}}
	>
	<div style={{
	width: '24px',
	height: '24px',
	borderRadius: '6px',
	border: `2px solid ${checked ? 'var(--green-primary)' : error ? 'var(--error)' : 'var(--gray-300)'}`,
	background: checked ? 'var(--green-primary)' : 'transparent',
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'center',
	flexShrink: 0,
	marginTop: '2px',
	transition: 'all 0.2s',
	}}>
	{checked && (
	<svg width="14" height="12" viewBox="0 0 14 12" fill="none">
	<path d="M1 6L5 10L13 2" stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
	</svg>
	)}
	</div>
	<span style={{ color: 'var(--gray-600)', fontSize: '14px', lineHeight: 1.5 }}>{label}</span>
	</button>
	{error && <p style={{ color: 'var(--error)', fontSize: '13px', marginTop: '6px', marginLeft: '38px' }}>{error}</p>}
	</div>
	);

	const InfoBox = ({ children, type = 'info', icon }) => {
	const styles = {
	info: { bg: 'rgba(14, 54, 40, 0.06)', border: 'var(--green-primary)', iconDefault: 'ℹ️' },
	warning: { bg: '#FEF3C7', border: '#F59E0B', iconDefault: '⚠️' },
	success: { bg: 'rgba(34, 197, 94, 0.1)', border: 'var(--green-accent)', iconDefault: '🔒' },
	};
	const s = styles[type];
	return (
	<div style={{
	background: s.bg,
	border: `1px solid ${s.border}`,
	borderRadius: '12px',
	padding: '16px 18px',
	marginBottom: '20px',
	display: 'flex',
	gap: '12px',
	alignItems: 'flex-start',
	}} className="animate-fade-in">
	<span style={{ fontSize: '18px', flexShrink: 0 }}>{icon \|\| s.iconDefault}</span>
	<p style={{ color: 'var(--black)', fontSize: '14px', lineHeight: 1.6, margin: 0 }}>{children}</p>
	</div>
	);
	};

	const PrimaryButton = ({ text, onClick, disabled }) => (
	<button
	type="button"
	onClick={onClick}
	disabled={disabled}
	style={{
	width: '100%',
	padding: '18px 32px',
	background: disabled ? 'var(--gray-300)' : 'var(--green-primary)',
	border: 'none',
	borderRadius: '12px',
	color: disabled ? 'var(--gray-500)' : 'var(--white)',
	fontSize: '16px',
	fontWeight: 600,
	cursor: disabled ? 'not-allowed' : 'pointer',
	transition: 'all 0.2s ease',
	boxShadow: disabled ? 'none' : '0 4px 14px rgba(14, 54, 40, 0.25)',
	}}
	onMouseOver={(e) => {
	if (!disabled) {
	e.currentTarget.style.transform = 'translateY(-2px)';
	e.currentTarget.style.boxShadow = '0 6px 20px rgba(14, 54, 40, 0.3)';
	}
	}}
	onMouseOut={(e) => {
	if (!disabled) {
	e.currentTarget.style.transform = 'translateY(0)';
	e.currentTarget.style.boxShadow = '0 4px 14px rgba(14, 54, 40, 0.25)';
	}
	}}
	>
	{text}
	</button>
	);

	const FeatureCard = ({ emoji, title, examples }) => (
	<div style={{
	background: 'var(--white)',
	borderRadius: '16px',
	padding: '20px',
	marginBottom: '16px',
	border: '1px solid var(--gray-200)',
	boxShadow: '0 2px 8px rgba(0,0,0,0.04)',
	}} className="animate-fade-in">
	<div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '14px' }}>
	<span style={{ fontSize: '28px' }}>{emoji}</span>
	<span style={{ fontWeight: 600, fontSize: '16px', color: 'var(--black)' }}>{title}</span>
	</div>
	<div style={{ marginLeft: '40px', display: 'flex', flexDirection: 'column', gap: '8px' }}>
	{examples.map((ex, i) => (
	<div key={i} style={{
	background: 'var(--gray-100)',
	borderRadius: '8px',
	padding: '12px 14px',
	color: 'var(--gray-700)',
	fontSize: '14px',
	fontStyle: 'italic',
	}}>
	"{ex}"
	</div>
	))}
	</div>
	</div>
	);

	const TimelineItem = ({ time, description, isLast }) => (
	<div style={{ display: 'flex', gap: '14px', marginBottom: isLast ? 0 : '20px' }}>
	<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
	<div style={{
	width: '36px',
	height: '36px',
	borderRadius: '50%',
	background: 'var(--green-primary)',
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'center',
	color: 'var(--white)',
	fontSize: '13px',
	fontWeight: 600,
	}}>
	{time}
	</div>
	{!isLast && <div style={{ width: '2px', height: '28px', background: 'var(--gray-200)', marginTop: '6px' }} />}
	</div>
	<div style={{ flex: 1, paddingTop: '8px' }}>
	<p style={{ color: 'var(--gray-700)', fontSize: '14px', lineHeight: 1.5 }}>{description}</p>
	</div>
	</div>
	);

	const StepItem = ({ number, title, description }) => (
	<div style={{ display: 'flex', gap: '16px', marginBottom: '20px' }} className="animate-slide-in">
	<div style={{
	width: '32px',
	height: '32px',
	borderRadius: '50%',
	background: 'var(--green-primary)',
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'center',
	color: 'var(--white)',
	fontSize: '15px',
	fontWeight: 600,
	flexShrink: 0,
	}}>
	{number}
	</div>
	<div style={{ flex: 1 }}>
	<p style={{ fontWeight: 600, fontSize: '15px', color: 'var(--black)', marginBottom: '4px' }}>{title}</p>
	<p style={{ color: 'var(--gray-600)', fontSize: '14px', lineHeight: 1.5 }}>{description}</p>
	</div>
	</div>
	);

	const ContentWrapper = ({ children }) => (
	<div style={{
	maxWidth: '600px',
	margin: '0 auto',
	padding: '32px 24px',
	}}>
	{children}
	</div>
	);

	const Footer = ({ children }) => (
	<div style={{
	position: 'sticky',
	bottom: 0,
	background: 'var(--bg-cream)',
	borderTop: '1px solid var(--gray-200)',
	padding: '20px 24px',
	}}>
	<div style={{ maxWidth: '600px', margin: '0 auto' }}>
	{children}
	</div>
	</div>
	);

	// ===== MAIN APP =====

	const OnboardingApp = () => {
	const [currentScreen, setCurrentScreen] = useState(0);
	const [errors, setErrors] = useState({});
	const [isAnimating, setIsAnimating] = useState(false);
	const [showWelcome, setShowWelcome] = useState(true);
	const [formData, setFormData] = useState({
	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: '' }]
	});

	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);
	};

	const formatCurrency = (value) => {
	const n = value.replace(/\D/g, '');
	if (!n) return '';
	return 'R$ ' + parseInt(n).toLocaleString('pt-BR');
	};

	const usaRegistroAutomatico = formData.metodoRegistro === 'automatico' \|\| formData.metodoRegistro === 'ambos';
	const controlaEmpresa = formData.tipoControle.includes('empresa');
	const controlaApenasEmpresa = formData.tipoControle.length === 1 && formData.tipoControle.includes('empresa');

	const getScreenSequence = () => {
	let screens = ['dados', 'expectativas'];
	if (controlaEmpresa) screens.push('empresa');
	if (!controlaApenasEmpresa) screens.push('sobreVoce');
	else screens.push('sobreVoceEmpresa');
	screens.push('metodoRegistro', 'rendaGastos', 'cartoes', 'dividas');
	if (formData.temDividas === 'sim') screens.push('detalhesDividas');
	screens.push('metas', 'tutorialRegistro');
	if (usaRegistroAutomatico) {
	screens.push('tutorialAutomatico');
	screens.push('tutorialConexao');
	}
	screens.push('tutorialDashboard', 'tutorialLembretes', 'pronto');
	return screens;
	};

	const screenSequence = getScreenSequence();
	const currentScreenName = screenSequence[currentScreen] \|\| 'dados';
	const totalSteps = screenSequence.length;

	const validateScreen = () => {
	const newErrors = {};
	if (currentScreenName === 'dados') {
	if (!formData.nome.trim()) newErrors.nome = 'Campo obrigatório';
	if (!formData.cpf.trim()) newErrors.cpf = 'Campo obrigatório';
	else if (formData.cpf.replace(/\D/g, '').length !== 11) newErrors.cpf = 'CPF inválido';
	if (!formData.email.trim()) newErrors.email = 'Campo obrigatório';
	else if (!/\S+@\S+\.\S+/.test(formData.email)) newErrors.email = 'E-mail inválido';
	if (!formData.aceitaTermos) newErrors.aceitaTermos = 'Você precisa aceitar os termos';
	} else if (currentScreenName === 'expectativas') {
	if (!formData.expectativa.trim()) newErrors.expectativa = 'Campo obrigatório';
	if (formData.tipoControle.length === 0) newErrors.tipoControle = 'Selecione pelo menos uma opção';
	} else if (currentScreenName === 'empresa') {
	if (!formData.atividadeEmpresa.trim()) newErrors.atividadeEmpresa = 'Campo obrigatório';
	if (!formData.faturamentoEmpresa) newErrors.faturamentoEmpresa = 'Selecione uma opção';
	} else if (currentScreenName === 'sobreVoce') {
	if (!formData.profissao.trim()) newErrors.profissao = 'Campo obrigatório';
	if (!formData.experienciaApp) newErrors.experienciaApp = 'Selecione uma opção';
	if ((formData.experienciaApp === 'desisti' \|\| formData.experienciaApp === 'uso') && !formData.qualApp.trim()) newErrors.qualApp = 'Campo obrigatório';
	if (!formData.comoConheceu) newErrors.comoConheceu = 'Selecione uma opção';
	} else if (currentScreenName === 'sobreVoceEmpresa') {
	if (!formData.experienciaApp) newErrors.experienciaApp = 'Selecione uma opção';
	if ((formData.experienciaApp === 'desisti' \|\| formData.experienciaApp === 'uso') && !formData.qualApp.trim()) newErrors.qualApp = 'Campo obrigatório';
	if (!formData.comoConheceu) newErrors.comoConheceu = 'Selecione uma opção';
	} else if (currentScreenName === 'metodoRegistro') {
	if (!formData.metodoRegistro) newErrors.metodoRegistro = 'Selecione uma opção';
	} else if (currentScreenName === 'rendaGastos') {
	if (!formData.gastoMensal.trim()) newErrors.gastoMensal = 'Campo obrigatório';
	if (!formData.ganhoMensal.trim()) newErrors.ganhoMensal = 'Campo obrigatório';
	} else if (currentScreenName === 'cartoes') {
	if (formData.cartoes.length === 0) newErrors.cartoes = 'Selecione pelo menos uma opção';
	if (formData.cartoes.length > 0 && !formData.cartoes.includes('nenhum') && !formData.cartaoPrincipal) {
	newErrors.cartaoPrincipal = 'Selecione seu cartão principal';
	// Scroll automático para o campo de cartão principal
	setTimeout(() => {
	const cartaoPrincipalElement = document.getElementById('cartao-principal-dropdown');
	if (cartaoPrincipalElement) {
	cartaoPrincipalElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
	}
	}, 100);
	}
	} else if (currentScreenName === 'dividas') {
	if (!formData.temDividas) newErrors.temDividas = 'Selecione uma opção';
	} else if (currentScreenName === 'detalhesDividas') {
	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';
	});
	} else if (currentScreenName === 'metas') {
	formData.metas.forEach((m, i) => {
	if (!m.descricao.trim()) newErrors[`meta_desc_${i}`] = 'Obrigatório';
	});
	}
	setErrors(newErrors);
	return Object.keys(newErrors).length === 0;
	};

	const handleNext = () => {
	if (!validateScreen()) return;
	setIsAnimating(true);
	setTimeout(() => {
	if (currentScreen < screenSequence.length - 1) {
	setCurrentScreen(prev => prev + 1);
	} else {
	setCurrentScreen(100);
	}
	setIsAnimating(false);
	setErrors({});
	window.scrollTo(0, 0);
	}, 200);
	};

	const handleBack = () => {
	setIsAnimating(true);
	setTimeout(() => {
	if (currentScreen === 0) {
	setShowWelcome(true);
	} else {
	setCurrentScreen(prev => prev - 1);
	}
	setIsAnimating(false);
	setErrors({});
	window.scrollTo(0, 0);
	}, 200);
	};

	const handleStartOnboarding = () => {
	setShowWelcome(false);
	};

	const handleFinish = () => setCurrentScreen(100);

	const updateFormData = (field, value) => {
	setFormData(prev => ({ ...prev, [field]: value }));
	setErrors(prev => ({ ...prev, [field]: null }));
	};

	const toggleArrayField = (field, value) => {
	setFormData(prev => {
	let newArray;
	if (value === 'nenhum') {
	newArray = prev[field].includes('nenhum') ? [] : ['nenhum'];
	} else {
	newArray = prev[field].filter(v => v !== 'nenhum');
	newArray = newArray.includes(value) ? newArray.filter(v => v !== value) : [...newArray, value];
	}
	return { ...prev, [field]: newArray };
	});
	setErrors(prev => ({ ...prev, [field]: null }));
	};

	const addDivida = () => setFormData(prev => ({ ...prev, dividas: [...prev.dividas, { tipo: '', valor: '', prazo: '' }] }));
	const removeDivida = (index) => { if (formData.dividas.length > 1) setFormData(prev => ({ ...prev, dividas: prev.dividas.filter((_, i) => i !== index) })); };
	const updateDivida = (index, field, value) => setFormData(prev => ({ ...prev, dividas: prev.dividas.map((d, i) => i === index ? { ...d, [field]: value } : d) }));

	const addMeta = () => setFormData(prev => ({ ...prev, metas: [...prev.metas, { descricao: '', prazo: '' }] }));
	const removeMeta = (index) => { if (formData.metas.length > 1) setFormData(prev => ({ ...prev, metas: prev.metas.filter((_, i) => i !== index) })); };
	const updateMeta = (index, field, value) => setFormData(prev => ({ ...prev, metas: prev.metas.map((m, i) => i === index ? { ...m, [field]: value } : m) }));

	// Welcome Screen
	if (showWelcome) {
	return (
	<div style={{
	minHeight: '100vh',
	display: 'flex',
	flexDirection: 'column',
	alignItems: 'center',
	justifyContent: 'center',
	padding: '40px 24px',
	textAlign: 'center',
	}}>
	<div className="animate-fade-in" style={{ maxWidth: '480px' }}>
	<Logo size="large" />
	<h1 style={{
	fontFamily: 'var(--font-serif)',
	fontSize: 'clamp(32px, 6vw, 42px)',
	color: 'var(--green-primary)',
	marginTop: '32px',
	marginBottom: '16px',
	fontWeight: 400,
	lineHeight: 1.1,
	}}>
	Bem-vindo ao Assistente de Bolso
	</h1>
	<p style={{
	fontSize: '18px',
	color: 'var(--gray-600)',
	marginBottom: '48px',
	lineHeight: 1.6,
	}}>
	A partir de hoje, vou te ajudar a cuidar das suas finanças e compromissos. Vamos começar?
	</p>
	<PrimaryButton text="Começar cadastro" onClick={handleStartOnboarding} />
	<p style={{
	fontSize: '13px',
	color: 'var(--gray-500)',
	marginTop: '24px',
	}}>
	Leva apenas 5 minutos ⏱️
	</p>
	</div>
	</div>
	);
	}

	// Final Screen
	if (currentScreen === 100) {
	return (
	<div style={{
	minHeight: '100vh',
	display: 'flex',
	flexDirection: 'column',
	alignItems: 'center',
	justifyContent: 'center',
	padding: '40px 24px',
	textAlign: 'center',
	}}>
	<div className="animate-fade-in" style={{ maxWidth: '480px' }}>
	<div style={{
	width: '100px',
	height: '100px',
	borderRadius: '50%',
	background: 'rgba(34, 197, 94, 0.15)',
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'center',
	margin: '0 auto 32px',
	}}>
	<svg width="50" height="50" viewBox="0 0 24 24" fill="var(--green-accent)">
	<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
	</svg>
	</div>
	<h1 style={{
	fontFamily: 'var(--font-serif)',
	fontSize: 'clamp(28px, 5vw, 36px)',
	color: 'var(--green-primary)',
	marginBottom: '16px',
	fontWeight: 400,
	}}>
	Tudo pronto, {formData.nome.split(' ')[0] \|\| 'você'}! 🎉
	</h1>
	<p style={{
	fontSize: '16px',
	color: 'var(--gray-600)',
	marginBottom: '40px',
	lineHeight: 1.6,
	}}>
	Seu cadastro foi concluído com sucesso. A partir de agora, você pode me enviar mensagens pelo WhatsApp.
	</p>

	<div style={{
	background: 'var(--white)',
	borderRadius: '16px',
	padding: '24px',
	textAlign: 'left',
	border: '1px solid var(--gray-200)',
	marginBottom: '32px',
	}}>
	<p style={{
	fontSize: '12px',
	color: 'var(--gray-500)',
	textTransform: 'uppercase',
	fontWeight: 600,
	marginBottom: '12px',
	}}>
	💡 Dica rápida
	</p>
	<p style={{
	fontSize: '15px',
	color: 'var(--black)',
	marginBottom: '16px',
	lineHeight: 1.5,
	}}>
	Experimente registrar sua primeira despesa agora!
	</p>
	<div style={{
	background: 'var(--gray-100)',
	borderRadius: '8px',
	padding: '12px 16px',
	color: 'var(--gray-700)',
	fontSize: '15px',
	fontStyle: 'italic',
	}}>
	"Almoço 35 reais"
	</div>
	</div>

	<PrimaryButton
	text="Voltar para o WhatsApp"
	onClick={() => {
	// Em produção, isso redirecionaria para o WhatsApp
	// Por enquanto, reinicia a demonstração
	setCurrentScreen(0);
	setShowWelcome(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: '' }]
	});
	}}
	/>
	</div>
	</div>
	);
	}

	// Main Form Screens
	return (
	<div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
	<Header
	currentStep={currentScreen + 1}
	totalSteps={totalSteps}
	onBack={handleBack}
	showBack={true}
	/>
	<ProgressBar current={currentScreen + 1} total={totalSteps} />

	<div style={{ flex: 1, opacity: isAnimating ? 0.5 : 1, transition: 'opacity 0.2s' }}>
	<ContentWrapper>
	{/* TELA: DADOS */}
	{currentScreenName === 'dados' && (
	<>
	<Title>Preencha seus dados básicos</Title>
	<Subtitle>Precisamos dessas informações para criar seu cadastro.</Subtitle>
	<TextInput label="Nome completo" value={formData.nome} onChange={(v) => updateFormData('nome', v)} placeholder="Digite seu nome" error={errors.nome} />
	<TextInput label="CPF" value={formData.cpf} onChange={(v) => updateFormData('cpf', formatCPF(v))} placeholder="000.000.000-00" error={errors.cpf} />
	<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." />
	<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>
	<Checkbox
	checked={formData.aceitaTermos}
	onChange={(v) => updateFormData('aceitaTermos', v)}
	label={<span>Li e aceito os <a href="#" style={{ color: 'var(--green-primary)', textDecoration: 'underline' }}>Termos de Uso</a> e a <a href="#" style={{ color: 'var(--green-primary)', textDecoration: 'underline' }}>Política de Privacidade</a></span>}
	error={errors.aceitaTermos}
	/>
	</>
	)}

	{/* TELA: EXPECTATIVAS */}
	{currentScreenName === 'expectativas' && (
	<>
	<Title>O que você espera do Assistente?</Title>
	<Subtitle>Conte suas expectativas e o que você quer controlar.</Subtitle>
	<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} />
	<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} />
	</>
	)}

	{/* TELA: EMPRESA */}
	{currentScreenName === 'empresa' && (
	<>
	<Title>Conte sobre sua empresa</Title>
	<Subtitle>Essas informações me ajudam a personalizar as orientações para o seu negócio.</Subtitle>
	<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} />
	<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} />
	<InfoBox type="info">Essas informações são confidenciais e serão usadas apenas para personalizar sua experiência.</InfoBox>
	</>
	)}

	{/* TELA: SOBRE VOCÊ */}
	{currentScreenName === 'sobreVoce' && (
	<>
	<Title>Conte um pouco sobre você</Title>
	<Subtitle>Queremos te conhecer melhor para personalizar sua experiência.</Subtitle>
	<TextInput label="Profissão ou atividade principal" value={formData.profissao} onChange={(v) => updateFormData('profissao', v)} placeholder="Ex: Empresário, Desenvolvedor..." error={errors.profissao} />
	<RadioGroup 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} />
	{(formData.experienciaApp === 'desisti' \|\| formData.experienciaApp === 'uso') && (
	<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} />
	)}
	<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} />
	</>
	)}

	{/* TELA: SOBRE VOCÊ (EMPRESA) */}
	{currentScreenName === 'sobreVoceEmpresa' && (
	<>
	<Title>Conte um pouco sobre você</Title>
	<Subtitle>Queremos te conhecer melhor para personalizar sua experiência.</Subtitle>
	<RadioGroup 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} />
	{(formData.experienciaApp === 'desisti' \|\| formData.experienciaApp === 'uso') && (
	<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} />
	)}
	<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} />
	</>
	)}

	{/* TELA: MÉTODO DE REGISTRO */}
	{currentScreenName === 'metodoRegistro' && (
	<>
	<Title>Como você quer registrar suas finanças?</Title>
	<Subtitle>Escolha como prefere registrar suas despesas e receitas.</Subtitle>
	<RadioGroup 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} />
	{(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>
	)}
	<InfoBox type="info">Se mudar de ideia no futuro, é só avisar o assistente!</InfoBox>
	</>
	)}

	{/* TELA: RENDA E GASTOS */}
	{currentScreenName === 'rendaGastos' && (
	<>
	<Title>Qual sua renda e seus gastos mensais?</Title>
	<Subtitle>Informe uma estimativa para eu entender sua situação financeira.</Subtitle>
	<TextInput label="Quanto você ganha por mês?" value={formData.ganhoMensal} onChange={(v) => updateFormData('ganhoMensal', formatCurrency(v))} placeholder="R$ 0" error={errors.ganhoMensal} />
	<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." />
	</>
	)}

	{/* TELA: CARTÕES */}
	{currentScreenName === 'cartoes' && (
	<>
	<Title>Quais cartões de crédito você usa?</Title>
	<Subtitle>Com essa informação vou conseguir te ajudar a organizar seus gastos.</Subtitle>
	<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} />
	{formData.cartoes.includes('outro') && (
	<TextInput label="Qual outro cartão?" value={formData.outroCartao} onChange={(v) => updateFormData('outroCartao', v)} placeholder="Ex: Neon, PicPay..." required={false} />
	)}
	{formData.cartoes.length > 0 && !formData.cartoes.includes('nenhum') && (
	<Dropdown id="cartao-principal-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} />
	)}
	</>
	)}

	{/* TELA: DÍVIDAS */}
	{currentScreenName === 'dividas' && (
	<>
	<Title>Você possui dívidas atualmente?</Title>
	<Subtitle>Saber sobre suas dívidas me ajuda a criar um plano para você quitá-las mais rápido.</Subtitle>
	<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>
	<RadioGroup 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} />
	</>
	)}

	{/* TELA: DETALHES DAS DÍVIDAS */}
	{currentScreenName === 'detalhesDividas' && (
	<>
	<Title>Detalhe suas dívidas</Title>
	<Subtitle>Informe cada dívida para que eu possa te ajudar a criar um plano de pagamento.</Subtitle>
	{formData.dividas.map((divida, index) => (
	<div key={index} style={{
	background: 'var(--white)',
	borderRadius: '16px',
	padding: '20px',
	marginBottom: '20px',
	border: '1px solid var(--gray-200)',
	}}>
	<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
	<span style={{ fontWeight: 600, fontSize: '15px', color: 'var(--black)' }}>Dívida {index + 1}</span>
	{formData.dividas.length > 1 && (
	<button type="button" onClick={() => removeDivida(index)} style={{ background: 'transparent', border: 'none', color: 'var(--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>
	))}
	<button type="button" onClick={addDivida} style={{
	width: '100%',
	padding: '14px',
	background: 'transparent',
	border: '2px dashed var(--green-primary)',
	borderRadius: '12px',
	color: 'var(--green-primary)',
	fontSize: '14px',
	fontWeight: 600,
	cursor: 'pointer',
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'center',
	gap: '8px',
	transition: 'all 0.2s',
	}}
	onMouseOver={(e) => e.currentTarget.style.background = 'rgba(14, 54, 40, 0.05)'}
	onMouseOut={(e) => e.currentTarget.style.background = 'transparent'}
	>
	<span style={{ fontSize: '18px' }}>+</span> Adicionar outra dívida
	</button>
	</>
	)}

	{/* TELA: METAS */}
	{currentScreenName === 'metas' && (
	<>
	<Title>Defina suas metas financeiras</Title>
	<Subtitle>Ter metas claras te ajuda a manter o foco. Vou te lembrar e acompanhar seu progresso!</Subtitle>
	{formData.metas.map((meta, index) => (
	<div key={index} style={{
	background: 'var(--white)',
	borderRadius: '16px',
	padding: '20px',
	marginBottom: '20px',
	border: '1px solid var(--gray-200)',
	}}>
	<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
	<span style={{ fontWeight: 600, fontSize: '15px', color: 'var(--black)' }}>Meta {index + 1}</span>
	{formData.metas.length > 1 && (
	<button type="button" onClick={() => removeMeta(index)} style={{ background: 'transparent', border: 'none', color: 'var(--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>
	))}
	<button type="button" onClick={addMeta} style={{
	width: '100%',
	padding: '14px',
	background: 'transparent',
	border: '2px dashed var(--green-primary)',
	borderRadius: '12px',
	color: 'var(--green-primary)',
	fontSize: '14px',
	fontWeight: 600,
	cursor: 'pointer',
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'center',
	gap: '8px',
	transition: 'all 0.2s',
	}}
	onMouseOver={(e) => e.currentTarget.style.background = 'rgba(14, 54, 40, 0.05)'}
	onMouseOut={(e) => e.currentTarget.style.background = 'transparent'}
	>
	<span style={{ fontSize: '18px' }}>+</span> Adicionar outra meta
	</button>
	</>
	)}

	{/* TELA: TUTORIAL REGISTRO */}
	{currentScreenName === 'tutorialRegistro' && (
	<>
	<Title>Veja como registrar movimentações</Title>
	<Subtitle>É muito fácil! Basta me enviar uma mensagem como se estivesse falando com um amigo.</Subtitle>
	<FeatureCard emoji="💸" title="Registrar uma despesa" examples={['Almoço 35 reais', 'Uber 22,50 hoje', 'Mercado 180 no débito']} />
	<FeatureCard emoji="💰" title="Registrar uma receita" examples={['Recebi 3.500 do salário', 'Freela de 800 reais', 'PIX de 150 do João']} />
	<FeatureCard emoji="🔁" title="Registrar algo recorrente" examples={['Aluguel 1.200 todo dia 5', 'Netflix 55,90 todo mês']} />
	</>
	)}

	{/* TELA: TUTORIAL AUTOMÁTICO */}
	{currentScreenName === 'tutorialAutomatico' && (
	<>
	<Title>Como funciona o registro automático</Title>
	<Subtitle>Suas transações bancárias serão importadas e categorizadas automaticamente.</Subtitle>
	<div style={{
	background: 'rgba(34, 197, 94, 0.08)',
	border: '1px solid var(--green-accent)',
	borderRadius: '16px',
	padding: '24px',
	marginBottom: '24px',
	}}>
	<p style={{ fontWeight: 600, fontSize: '16px', color: 'var(--black)', marginBottom: '20px' }}>⏰ Horários de atualização</p>
	<div style={{ display: 'flex', gap: '14px', alignItems: 'flex-start' }}>
	<div style={{
	width: '36px',
	height: '36px',
	borderRadius: '50%',
	background: 'var(--green-primary)',
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'center',
	color: 'var(--white)',
	fontSize: '12px',
	fontWeight: 600,
	flexShrink: 0,
	}}>
	24h
	</div>
	<p style={{ color: 'var(--gray-700)', fontSize: '14px', lineHeight: 1.5, paddingTop: '8px' }}>
	A atualização com suas movimentações bancárias acontece a cada 24h, a partir do horário que você conectou suas contas.
	</p>
	</div>
	</div>
	<div style={{
	background: 'var(--white)',
	borderRadius: '16px',
	padding: '20px',
	marginBottom: '20px',
	border: '1px solid var(--gray-200)',
	}}>
	<div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '10px' }}>
	<span style={{ fontSize: '20px' }}>🏷️</span>
	<span style={{ fontWeight: 600, color: 'var(--black)' }}>Categorização inteligente</span>
	</div>
	<p style={{ color: 'var(--gray-600)', fontSize: '14px', lineHeight: 1.6 }}>Todas as entradas e saídas são categorizadas automaticamente (alimentação, transporte, lazer, etc.) e registradas no seu dashboard.</p>
	</div>
	<InfoBox type="info">Você pode combinar o registro automático com registros manuais sempre que quiser!</InfoBox>
	<InfoBox type="warning" icon="📌">Por enquanto, só é possível conectar uma conta bancária por usuário. Se você quiser conectar mais contas, é só manifestar o interesse ao Assistente de Bolso!</InfoBox>
	</>
	)}

	{/* TELA: TUTORIAL CONEXÃO */}
	{currentScreenName === 'tutorialConexao' && (
	<>
	<Title>Como conectar suas contas</Title>
	<Subtitle>A conexão é feita via Open Finance, de forma segura e regulamentada pelo Banco Central.</Subtitle>
	<div style={{
	background: 'rgba(34, 197, 94, 0.08)',
	border: '1px solid var(--green-accent)',
	borderRadius: '16px',
	padding: '24px',
	marginBottom: '24px',
	}}>
	<div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '20px' }}>
	<span style={{ fontSize: '24px' }}>🔗</span>
	<span style={{ fontWeight: 600, fontSize: '17px', color: 'var(--black)' }}>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. Ex: "Quero conectar minha conta"' />
	<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." />
	<StepItem number="4" title="Pronto!" description="Suas transações serão importadas automaticamente." />
	</div>
	<div style={{
	background: 'var(--white)',
	borderRadius: '16px',
	padding: '20px',
	marginBottom: '20px',
	border: '1px solid var(--gray-200)',
	}}>
	<div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '10px' }}>
	<span style={{ fontSize: '20px' }}>🔒</span>
	<span style={{ fontWeight: 600, color: 'var(--black)' }}>Segurança garantida</span>
	</div>
	<p style={{ color: 'var(--gray-600)', fontSize: '14px', lineHeight: 1.6, marginBottom: '8px' }}>A conexão é feita através da <strong>Pluggy</strong>, parceiro certificado pelo Banco Central para Open Finance.</p>
	<p style={{ color: 'var(--gray-600)', fontSize: '14px', lineHeight: 1.6 }}>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>
	</>
	)}

	{/* TELA: TUTORIAL DASHBOARD */}
	{currentScreenName === 'tutorialDashboard' && (
	<>
	<Title>Acompanhe suas finanças no dashboard</Title>
	<Subtitle>Todas as suas movimentações ficam organizadas em um dashboard que você pode acessar a qualquer momento.</Subtitle>
	<div style={{
	background: 'var(--white)',
	borderRadius: '16px',
	padding: '24px',
	marginBottom: '20px',
	border: '1px solid var(--gray-200)',
	}}>
	<div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '18px' }}>
	<span style={{ fontSize: '24px' }}>📊</span>
	<span style={{ fontWeight: 600, fontSize: '17px', color: 'var(--black)' }}>Seu dashboard financeiro</span>
	</div>
	<p style={{ color: 'var(--gray-600)', fontSize: '14px', lineHeight: 1.6, marginBottom: '16px' }}>No dashboard você encontra:</p>
	{['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) => (
	<div key={i} style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '10px' }}>
	<span style={{ color: 'var(--green-accent)', fontSize: '18px' }}>✓</span>
	<span style={{ color: 'var(--black)', fontSize: '14px' }}>{item}</span>
	</div>
	))}
	</div>
	<div style={{
	background: 'var(--gray-100)',
	borderRadius: '12px',
	padding: '16px',
	marginBottom: '20px',
	}}>
	<p style={{ fontSize: '12px', color: 'var(--gray-500)', textTransform: 'uppercase', fontWeight: 600, marginBottom: '8px' }}>🔗 Como acessar</p>
	<p style={{ color: 'var(--black)', fontSize: '14px', lineHeight: 1.5 }}>Você receberá um link exclusivo para acessar seu dashboard quando quiser.</p>
	</div>
	<FeatureCard emoji="💬" title="Ou pergunte direto pra mim" examples={['Quanto gastei hoje?', 'Quanto gastei no mês?', 'Meus gastos com alimentação']} />
	</>
	)}

	{/* TELA: TUTORIAL LEMBRETES */}
	{currentScreenName === 'tutorialLembretes' && (
	<>
	<Title>Crie lembretes e nunca esqueça nada</Title>
	<Subtitle>Posso te lembrar de pagamentos, compromissos e criar eventos na sua agenda.</Subtitle>
	<FeatureCard emoji="💳" title="Lembrete de pagamento" examples={['Me lembra de pagar o cartão dia 15', 'Avisa sobre o aluguel todo dia 5']} />
	<FeatureCard emoji="📅" title="Lembrete de compromisso" examples={['Me lembra da reunião amanhã às 14h', 'Dentista dia 20 às 9h']} />
	<FeatureCard emoji="📆" title="Evento na agenda Google" examples={['Cria evento: viagem SP dia 10 a 12', 'Agenda reunião quinta às 15h']} />
	<InfoBox type="warning">Os lembretes podem levar até 3h para serem registrados. Você será avisado quando estiver tudo certo! ✅</InfoBox>
	</>
	)}

	{/* TELA: PRONTO */}
	{currentScreenName === 'pronto' && (
	<>
	<Title>Você está pronto para começar!</Title>
	<Subtitle>Agora é só me enviar mensagens por texto, áudio ou foto. Estou aqui para te ajudar!</Subtitle>
	<div style={{
	background: 'rgba(34, 197, 94, 0.08)',
	border: '1px solid var(--green-accent)',
	borderRadius: '16px',
	padding: '24px',
	marginBottom: '24px',
	}}>
	<p style={{ fontWeight: 600, fontSize: '16px', color: 'var(--black)', marginBottom: '16px' }}>✨ O que você pode fazer:</p>
	{[
	{ 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: '12px', marginBottom: idx < 4 ? '10px' : 0 }}>
	<span style={{ fontSize: '18px' }}>{item.i}</span>
	<span style={{ color: 'var(--black)', fontSize: '15px' }}>{item.t}</span>
	</div>
	))}
	</div>
	<div style={{
	background: 'var(--white)',
	borderRadius: '12px',
	padding: '16px',
	border: '1px solid var(--gray-200)',
	}}>
	<p style={{ fontSize: '12px', color: 'var(--gray-500)', textTransform: 'uppercase', fontWeight: 600, marginBottom: '8px' }}>💡 Dica</p>
	<p style={{ color: 'var(--black)', fontSize: '14px', lineHeight: 1.6 }}>Se não tiver certeza se eu faço alguma coisa, é só perguntar! Estou aqui pra ajudar 😉</p>
	</div>
	</>
	)}
	</ContentWrapper>
	</div>

	<Footer>
	<PrimaryButton
	text={currentScreenName === 'pronto' ? 'Concluir cadastro' : 'Continuar'}
	onClick={currentScreenName === 'pronto' ? handleFinish : handleNext}
	disabled={currentScreenName === 'dados' && !formData.aceitaTermos}
	/>
	</Footer>
	</div>
	);
	};

	ReactDOM.createRoot(document.getElementById('root')).render(<OnboardingApp />);
	</script>
	</body>
	</html>