🏋️ Teste do Componente FitnessCalculator

Componente de calculadora de resultados personalizada para personal trainers

Sobre o Componente

✅ Calcula BMR (Taxa Metabólica Basal) usando fórmula de Mifflin-St Jeor
✅ Calcula TDEE (Gasto Energético Total Diário)
✅ Estima calorias baseado no objetivo (emagrecer, ganhar massa, condicionamento)
✅ Gera plano visual de 4 semanas com dicas personalizadas
✅ Integração com WhatsApp para envio de plano completo
✅ Captura de leads opcional (email)
✅ Validações robustas e UX intuitiva

Exemplo 1: Com Integração WhatsApp

Componente com número do WhatsApp configurado. O botão "Receba seu Plano Completo no WhatsApp" aparecerá nos resultados e abrirá o WhatsApp com mensagem pré-formatada.

Calcule seu Plano Personalizado

Preencha os dados abaixo para receber sua estimativa personalizada

Gênero *

Idade (anos) *

Peso (kg) *

Altura (cm) *

Objetivo *

Frequência de Treino *

Exemplo 2: Sem Integração WhatsApp

Componente sem número do WhatsApp. O botão do WhatsApp não aparecerá, mas a calculadora funciona normalmente.

Calcule seu Plano Personalizado

Preencha os dados abaixo para receber sua estimativa personalizada

Gênero *

Idade (anos) *

Peso (kg) *

Altura (cm) *

Objetivo *

Frequência de Treino *

Exemplo 3: Sem Captura de Leads

Componente sem callback de captura de leads. A calculadora funciona normalmente, mas não salvará os dados dos usuários.

Calcule seu Plano Personalizado

Preencha os dados abaixo para receber sua estimativa personalizada

Gênero *

Idade (anos) *

Peso (kg) *

Altura (cm) *

Objetivo *

Frequência de Treino *

📋 Documentação do Componente

Props Disponíveis:

whatsappNumber?: string

Número do WhatsApp do personal trainer (formato: 5511999999999 ou 11999999999). Se fornecido, exibe botões para receber o plano completo via WhatsApp.

onLeadCapture?: (data: LeadData) => void

Callback opcional chamado quando o usuário fornece email. Recebe um objeto LeadData com email, formData, results e timestamp.

className?: string

Classes CSS adicionais para o container principal.

Fórmulas Utilizadas:

BMR (Mifflin-St Jeor):

Homens: BMR = 10 × peso(kg) + 6.25 × altura(cm) - 5 × idade(anos) + 5
Mulheres: BMR = 10 × peso(kg) + 6.25 × altura(cm) - 5 × idade(anos) - 161

TDEE:

TDEE = BMR × Fator de Atividade
(Sedentário: 1.2, Leve: 1.375, Moderado: 1.55, Intenso: 1.725, Muito Intenso: 1.9)

Calorias para Objetivo:

Emagrecer: TDEE - 500kcal (déficit de ~0.5kg/semana)
Ganhar massa: TDEE + 300-500kcal (superávit moderado)
Condicionamento: TDEE ± 0-200kcal (manutenção)

Funcionalidades:

✅ Validação de formulário em tempo real
✅ Cálculos client-side (sem API calls)
✅ Plano visual de 4 semanas com dicas personalizadas
✅ Integração com WhatsApp (mensagem pré-formatada)
✅ Captura de leads opcional (email)
✅ Salva último cálculo no localStorage
✅ Design responsivo mobile-first
✅ Animações e transições suaves
✅ Acessibilidade (labels, ARIA, navegação por teclado)

Exemplo de Uso:

import FitnessCalculator from '@/app/components/FitnessCalculator';
import { LeadData } from '@/app/components/FitnessCalculator/types';

export default function MyPage() {
  const handleLeadCapture = async (lead: LeadData) => {
    // Salvar no Supabase
    await supabase.from('fitness_leads').insert({
      email: lead.email,
      form_data: lead.formData,
      results: lead.results,
      created_at: lead.timestamp
    });
  };

  return (
    <FitnessCalculator
      whatsappNumber="5511999999999"
      onLeadCapture={handleLeadCapture}
    />
  );
}