import React, { useState, useEffect } from 'react';
import { Users, Filter, TrendingDown, DollarSign, Activity, ChevronRight, Award } from 'lucide-react';
export default function App() {
// Dados simulados (Mock) de como o Firebase entregaria as informações
const [metrics, setMetrics] = useState({
totalVisits: 1240,
startedQuiz: 850,
totalLeads: 142,
conversionRate: 16.7,
});
const [tierDistribution, setTierDistribution] = useState({
premium: 45, // Tier P (Empresários/Qualidade)
morno: 68, // Tier M (Executivos/Custo-Benefício)
frio: 29 // Tier F (Preço/Desqualificado)
});
// Funil de retenção (Drop-off) passo a passo
const [funnelData, setFunnelData] = useState([
{ step: 1, name: "Iniciou (Nome)", count: 850 },
{ step: 2, name: "Idade", count: 820 },
{ step: 3, name: "Perfil Profissional", count: 790 },
{ step: 4, name: "Padrão de Consumo", count: 760 },
{ step: 5, name: "Impacto Emocional", count: 710 },
{ step: 6, name: "Sentimento (Intimidade)", count: 650 },
{ step: 7, name: "Tempo de Preocupação", count: 600 },
{ step: 8, name: "Objetivo do Protocolo", count: 580 },
{ step: 9, name: "Resultado Transformador", count: 520 },
{ step: 10, name: "Histórico de Pesquisa", count: 480 },
{ step: 11, name: "Tela de Investimento", count: 450 }, // AddToCart acontece aqui
{ step: 12, name: "Fator de Decisão", count: 180 }, // Maior drop-off (viram o preço)
{ step: 13, name: "Finalizou (Lead)", count: 142 }
]);
// Calcula a porcentagem para a barra visual do funil baseado no passo 1
const maxCount = funnelData[0].count;
return (
{/* HEADER */}
{/* CARDS DE MÉTRICAS PRINCIPAIS */}
Visitas na Página
{metrics.totalVisits}
+12% vs. semana passada
Iniciaram Avaliação
{metrics.startedQuiz}
{Math.round((metrics.startedQuiz / metrics.totalVisits) * 100)}% de taxa de início
Leads Gerados
{metrics.totalLeads}
Custo por Lead (CPL) na média
Taxa de Conversão
{metrics.conversionRate}%
(Leads / Iniciados)
{/* GRÁFICO DE DROP-OFF (FUNIL) */}
Mapeamento de Desistência (Drop-off)
Saiba exatamente onde os leads estão abandonando o formulário.
{funnelData.map((item, index) => {
const percentage = Math.round((item.count / maxCount) * 100);
const dropFromPrev = index === 0 ? 0 : funnelData[index - 1].count - item.count;
// Destacar a tela de preço (Maior drop esperado)
const isPriceScreen = item.name === "Tela de Investimento";
return (
{item.step}. {item.name}
{item.count} ({percentage}%)
{dropFromPrev > 0 && (
-{dropFromPrev}
)}
);
})}
Insight do Algoritmo:
A maior queda ocorre entre a Tela de Investimento e o Fator de Decisão ({funnelData[10].count - funnelData[11].count} desistências). Isso indica que a ancoragem de preço (R$ 6.500) está funcionando perfeitamente como filtro de curiosos.
{/* QUALIFICAÇÃO DE LEADS (TIERS) */}
Qualificação Invisível
Distribuição dos leads convertidos.
{/* TIER P */}
Tier P (Premium)
{tierDistribution.premium}
Empresários / Buscam o Melhor
Alta propensão de fechamento à vista no ticket de R$ 12.000.
{/* TIER M */}
Tier M (Morno)
{tierDistribution.morno}
Executivos / Custo-Benefício
Leads excelentes, mas que podem solicitar parcelamento ou negociar.
{/* TIER F */}
Tier F (Frio)
{tierDistribution.frio}
Preço / Desqualificado
Filtro falhou em afastar. Equipe SDR deve realizar triagem rápida.
Exportar Dados (CSV)
);
}