envolvendo o input — funciona em iOS, Android e desktop
sem precisar de JS programático (que falha no iOS Safari por restrições de gesto). */
const Avatar = ({ user, size = 48, onChange, editable = false }) => {
const [busy, setBusy] = useState(false);
const initial = (user.name || 'U').slice(0, 1).toUpperCase();
const fontSize = Math.max(12, Math.round(size * 0.36));
const handleFile = async (e) => {
const file = e.target.files?.[0];
if (!file || !onChange) return;
setBusy(true);
try {
const dataUrl = await resizeImageToDataUrl(file, 360);
onChange(dataUrl);
} catch (err) {
console.error('Erro ao processar imagem:', err);
alert('Não foi possível carregar essa imagem. Tente outra.');
} finally {
setBusy(false);
e.target.value = ''; // permite reupload do mesmo arquivo
}
};
const Inner = (
{user.avatar ? (
) : (
{initial}
)}
{editable && (
)}
{editable && !user.avatar && (
/* Indicador permanente no canto pra mobile (sem hover) */
)}
{Inner}
);
};
/* Reduz a foto antes de salvar no localStorage (cap em maxSide px, JPEG 0.85). */
function resizeImageToDataUrl(file, maxSide = 360) {
return new Promise((resolve, reject) => {
const img = new Image();
const reader = new FileReader();
reader.onload = () => { img.src = reader.result; };
reader.onerror = reject;
img.onload = () => {
const ratio = Math.min(1, maxSide / Math.max(img.width, img.height));
const w = Math.round(img.width * ratio);
const h = Math.round(img.height * ratio);
const canvas = document.createElement('canvas');
canvas.width = w; canvas.height = h;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, w, h);
resolve(canvas.toDataURL('image/jpeg', 0.85));
};
img.onerror = reject;
reader.readAsDataURL(file);
});
}
/* ExerciseIcon — ilustração 3D + emoji fallback do exercício, sobre gradient pastel. */
const ExerciseIcon = ({ name, size = 56, className = '' }) => {
const info = FP.exerciseInfo(name);
const [loaded, setLoaded] = useState(false);
const [failed, setFailed] = useState(false);
return (
{(!loaded || failed) && (
{info.emoji}
)}
{info.illu && !failed && (
setLoaded(true)}
onError={() => setFailed(true)}
className={`absolute inset-0 w-full h-full object-contain p-1 transition-opacity duration-300 ${loaded ? 'opacity-100' : 'opacity-0'}`}
/>
)}
Seu IMC
{imc.toFixed(2)}
{cat.short}
{!compact && (
)}
Faixa saudável para sua altura: {range.min}–{range.max} kg
)}
);
};
/* RecipeImage — ilustração 3D centralizada sobre um gradient pastel.
Fallback elegante para emoji enquanto carrega ou se a URL falhar. */
const RecipeImage = ({ recipe, className = '', emojiSize = 'text-4xl', pad = 'p-2' }) => {
const [loaded, setLoaded] = useState(false);
const [error, setError] = useState(false);
const src = recipe.illustration || recipe.image;
return (
{(!loaded || error) && (
{recipe.emoji}
)}
{src && !error && (
setLoaded(true)}
onError={() => setError(true)}
className={`relative w-full h-full object-contain ${pad} transition-opacity duration-500 ${loaded ? 'opacity-100' : 'opacity-0'}`}
/>
)}
{/* Header com progresso */}
{!isFirst && (
)}
{steps.map((s, i) => (
))}
{/* Conteúdo */}
{current.id === 'welcome' &&
}
{current.id === 'identity' &&
}
{current.id === 'body' &&
}
{current.id === 'imc' &&
}
{current.id === 'goal' &&
}
{current.id === 'activity' &&
}
{current.id === 'frequency' &&
}
{current.id === 'diet' &&
}
{current.id === 'dislikes' &&
}
{current.id === 'finish' &&
}
{/* Footer (sem borda — visual mais clean) */}
{isFirst ? 'Começar' : isLast ? 'Criar meu plano' : 'Continuar'}
Seu Plano Alimentar e Treino, do seu Jeito.
Personalizado em minutos.
);
const MiniBadge = ({ emoji, label }) => (
);
const StepHeader = ({ title, subtitle }) => (
{title}
{subtitle &&
{subtitle}
}
);
const TextField = ({ label, value, onChange, type = 'text', placeholder, suffix, min, max }) => {
// Para inputs number, mantemos a string crua durante a edição. Assim o usuário
// pode apagar o valor todo (incluindo o "0") sem o React reescrever automaticamente.
const isNum = type === 'number';
const handleChange = (e) => {
const raw = e.target.value;
if (!isNum) return onChange(raw);
if (raw === '') return onChange('');
// Aceita "0", "0.5", "12", etc — apenas números válidos
if (/^-?\d*\.?\d*$/.test(raw)) {
onChange(raw === '.' ? raw : (raw.endsWith('.') ? raw : Number(raw)));
}
};
const handleFocus = (e) => e.target.select();
const handleBlur = (e) => {
if (!isNum) return;
if (e.target.value === '' || e.target.value === '.') onChange(0);
};
return (
{label}
{suffix} }
);
};
const IdentityStep = ({ data, update }) => (
<>
update('name', v)} placeholder="Como podemos te chamar?" />
update('age', v)} type="number" suffix="anos" />
Sexo
{FP.SEX.map(s => (
update('sex', s.id)}
className={`py-3 rounded-2xl text-sm font-semibold border transition
${data.sex === s.id
? 'bg-brand text-white border-brand'
: 'bg-surface text-ink-soft border-line hover:border-brand/40'}`}
>
{s.label}
))}
);
const BodyStep = ({ data, update }) => (
<>
update('height', v)} type="number" suffix="cm" />
update('weight', v)} type="number" suffix="kg" />
update('targetWeight', v)} type="number" suffix="kg" />
🌱
Vamos calcular suas calorias e macros automaticamente com base no seu objetivo e atividade.
);
const IMCStep = ({ data }) => {
const imc = FP.calcIMC(data.weight, data.height);
const cat = FP.imcCategory(imc);
const range = FP.healthyWeightRange(data.height);
const w = Number(data.weight) || 0;
const diffMin = +(w - range.min).toFixed(1);
const diffMax = +(w - range.max).toFixed(1);
return (
<>
Índice de Massa Corporal
{imc.toFixed(2)}
{cat.label}
{cat.desc}
{/* Faixa de peso saudável personalizada */}
⚖️
Faixa saudável para sua altura
{range.min} – {range.max} kg
{imc < 18.5 && `Faltam ~${Math.abs(diffMin).toFixed(1)} kg para você entrar na faixa saudável.`}
{imc >= 18.5 && imc < 25 && `Você está dentro da faixa saudável. Foque em manter ou ajustar composição corporal.`}
{imc >= 25 && `Para chegar na faixa saudável, perder ~${diffMax.toFixed(1)} kg seria o objetivo.`}
{/* Cálculo explícito */}
Como calculamos
IMC = {w} ÷ ({(data.height/100).toFixed(2)})²
IMC = {imc.toFixed(2)} kg/m²
IMC é uma referência geral. Composição corporal e % de gordura são complementos mais precisos.
);
};
const GoalStep = ({ data, update }) => (
<>
{FP.GOALS.map(g => {
const active = data.goal === g.id;
return (
update('goal', g.id)}
className={`w-full flex items-center gap-4 p-4 rounded-2xl border transition text-left
${active ? 'bg-brand text-white border-brand shadow-pop' : 'bg-surface border-line hover:border-brand/40'}`}
>
{g.emoji}
{active &&
);
})}
{FP.ACTIVITY.map(a => {
const active = data.activity === a.id;
return (
update('activity', a.id)}
className={`w-full p-4 rounded-2xl border transition text-left
${active ? 'bg-brand text-white border-brand shadow-pop' : 'bg-surface border-line hover:border-brand/40'}`}
>
{a.label}
{a.desc}
);
})}
{data.days}
dias de treino por semana
1 2 3 4 5 6 7
{['S','T','Q','Q','S','S','D'].map((d, i) => (
{d}
))}
{FP.DIETS.map(d => {
const active = data.diet === d.id;
return (
update('diet', d.id)}
className={`p-4 rounded-2xl border text-left transition
${active ? 'bg-brand text-white border-brand shadow-pop' : 'bg-surface border-line hover:border-brand/40'}`}
>
{d.emoji}
{d.label}
);
})}