"use client"; import { useState, useMemo } from "react"; import { useRouter } from "next/navigation"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardFooter } from "@/components/ui/card"; import { OnboardingNavigation } from "@/components/workflow/onboard/OnboardingNavigation"; import type { LucideIcon } from "lucide-react"; import { HomeIcon, Building2, Factory, Sprout, Building, Stethoscope, GraduationCap, Hotel, ShoppingCart, Landmark, Cpu, Car, BatteryCharging, ShieldAlert, Leaf, PlugZap, Wallet, Sun, ClipboardCheckIcon, Check, } from "lucide-react"; type CustomerClass = | "residential" | "small_business" | "mid_business" | "large_industry" | "condominium" | "rural" | "healthcare" | "education" | "hospitality" | "cold_retail" | "public_sector" | "tech_office"; type EnergyProfile = | "economy_roi" | "backup" | "independence" | "sustainability" | "mobility_ev" | "storage" | "ppa_eaas" | "financing"; type ClassCard = { id: CustomerClass; label: string; description: string; icon: LucideIcon; route: string; benefits: string[]; }; type ProfileCard = { id: EnergyProfile; label: string; description: string; icon: LucideIcon; route: string; benefits: string[]; }; const customerClasses: ClassCard[] = [ { id: "residential", label: "Residencial", description: "Casa, apartamento ou propriedade residencial.", icon: HomeIcon, route: "/cadastro/kyc", benefits: [ "Economia de até 95% na conta de luz", "Valorização do imóvel", "Monitoramento via app em tempo real", "Opção de backup com baterias", "Parcelas muitas vezes menores que a conta atual", ], }, { id: "small_business", label: "Pequenos Negócios (PME)", description: "Academias, salões de beleza, lojas de rua, restaurantes.", icon: Building2, route: "/cadastro/kyb", benefits: [ "Redução de OPEX e proteção contra bandeiras", "Payback típico entre 24–48 meses", "Diferencial ESG para atrair clientes", "Linhas PJ e parcelamentos flexíveis", "Compatível com telhados comerciais leves", ], }, { id: "mid_business", label: "Médias Empresas", description: "Redes regionais, clínicas, mercados, galpões.", icon: Building, route: "/cadastro/kyb", benefits: [ "ROI competitivo com impacto direto no P&L", "Mitigação de demanda ponta e reajustes tarifários", "Opção de PPA/EaaS sem CAPEX", "Gestão multiloja e relatório consolidado", "Estrutura de garantias e manutenção pró-ativa", ], }, { id: "large_industry", label: "Indústria (AT/MT)", description: "Consumidores especiais/livres, alta/média tensão.", icon: Factory, route: "/cadastro/alta-tensao", benefits: [ "Integração com MT/AT e subestações", "Estratégias para demanda/horossazonalidade", "Portfólio para ACL e autoprodução", "Projetos em solo e carports de grande porte", "Contratos com SLAs e compliance industrial", ], }, { id: "condominium", label: "Condomínios", description: "Áreas comuns e rateio inteligente entre unidades.", icon: Landmark, route: "/cadastro/condominio", benefits: [ "Redução expressiva nas áreas comuns", "Rateio e governança transparente", "Adequação a normas e homologação simplificada", "Possibilidade de expansão modular", "Valorização do empreendimento", ], }, { id: "rural", label: "Rural/Agronegócio", description: "Bombeamento, irrigação e operações rurais.", icon: Sprout, route: "/cadastro/rural", benefits: [ "Aplicações de bombeamento/irrigação solar", "Tarifas e incentivos do segmento rural", "Soluções off-grid e híbridas para áreas remotas", "Robustez contra variações da rede", "Redução de custos com diesel/geradores", ], }, { id: "healthcare", label: "Saúde", description: "Clínicas, hospitais e laboratórios.", icon: Stethoscope, route: "/cadastro/kyb", benefits: [ "Estabilidade e continuidade de operação", "Integração com sistemas de backup/ESS", "Redução de custos sem comprometer conforto", "Relatórios ESG e compliance sanitário", "SLA de resposta para serviços críticos", ], }, { id: "education", label: "Educação", description: "Escolas, universidades e institutos.", icon: GraduationCap, route: "/cadastro/kyb", benefits: [ "Alívio do orçamento recorrente", "Educação ambiental com dados reais do sistema", "Visibilidade para captação e ESG", "Instalação planejada por calendário acadêmico", "Expansão modular por bloco/campus", ], }, { id: "hospitality", label: "Hotelaria/Gastronomia", description: "Hotéis, pousadas, bares e restaurantes.", icon: Hotel, route: "/cadastro/kyb", benefits: [ "Redução de custos em operação contínua", "Conforto garantido com backup onde necessário", "Atrativo sustentável para hóspedes", "Integração com aquecimento e cargas críticas", "Payback acelerado em alta ocupação", ], }, { id: "cold_retail", label: "Varejo Frio", description: "Supermercados, açougues e conveniências.", icon: ShoppingCart, route: "/cadastro/kyb", benefits: [ "Alto impacto em refrigeração (maior parcela da conta)", "Mitigação de perdas por quedas de energia", "Projetos com monitoramento ativo de performance", "Possibilidade de PPA sem CAPEX", "Gestão multiloja com dashboards", ], }, { id: "public_sector", label: "Poder Público", description: "Prefeituras, órgãos e iluminação pública.", icon: Landmark, route: "/cadastro/poder-publico", benefits: [ "Economia orçamentária e previsibilidade", "Modelos com PPP/locação/adesão", "Impacto ESG e metas climáticas", "Compliance e homologação por concessionária", "Projetos em telhado, solo e carports", ], }, { id: "tech_office", label: "Escritórios/Tech", description: "TI, data rooms e coworkings.", icon: Cpu, route: "/cadastro/kyb", benefits: [ "Estabilidade para TI e salas técnicas", "Estratégias para picos e fator de potência", "Integração com nobreaks/ESS", "Selo verde para atração de talentos", "Medição setorizada e gestão por centro de custo", ], }, ]; const energyProfiles: ProfileCard[] = [ { id: "economy_roi", label: "Economia & ROI", description: "Redução máxima da conta e retorno acelerado.", icon: Sun, route: "/wizard/sizing", benefits: [ "Redução de 50–95% na fatura", "Payback e TIR otimizados", "Dimensionamento por consumo real", "Relatórios claros pré/pós-instalação", "Cenários com reajustes tarifários", ], }, { id: "backup", label: "Backup & Estabilidade", description: "Operação estável contra quedas e picos.", icon: ShieldAlert, route: "/wizard/backup", benefits: [ "Continuidade com ESS e chave de transferência", "Priorização de cargas críticas", "Arquiteturas híbridas sem dor de cabeça", "Menos perdas operacionais", "Alertas proativos e monitoramento", ], }, { id: "independence", label: "Independência (Off-grid/Híbrido)", description: "Autonomia total ou parcial da rede.", icon: PlugZap, route: "/wizard/offgrid", benefits: [ "Operação em locais remotos ou instáveis", "Híbrido com gerador apenas como apoio", "Gestão inteligente de baterias", "Microgrid e automação local", "Maior resiliência energética", ], }, { id: "sustainability", label: "Sustentabilidade & ESG", description: "CO₂ evitado, selos e posicionamento de marca.", icon: Leaf, route: "/wizard/sustentabilidade", benefits: [ "Relatórios de CO₂ e equivalências", "Apoio a certificações e metas ESG", "Engajamento interno/externo com dados reais", "Reputação e valor de marca", "Integração a programas de crédito de carbono", ], }, { id: "mobility_ev", label: "Mobilidade Elétrica", description: "Wallbox, frota elétrica e tarifação.", icon: Car, route: "/wizard/ev", benefits: [ "Infra de recarga dimensionada ao perfil", "Gestão de demanda e horários", "Tarifação por usuário/placa", "Integração com geração local", "Pronta expansão de pontos de recarga", ], }, { id: "storage", label: "Armazenamento (Baterias)", description: "Arbitragem, pico e continuidade.", icon: BatteryCharging, route: "/wizard/storage", benefits: [ "Arbitragem tarifária e pico", "Estabilidade para cargas sensíveis", "Menor dependência de geradores", "Integração com solar e rede", "Dimensionamento por perfil de uso", ], }, { id: "ppa_eaas", label: "PPA / Energia como Serviço", description: "Sem CAPEX, SLA e previsibilidade.", icon: Wallet, route: "/wizard/eaas", benefits: [ "Zero CAPEX com contrato de longo prazo", "SLA de performance e disponibilidade", "Preços previsíveis e proteção inflacionária", "Operação, O&M e seguros embutidos", "Opção de compra futura (call) do ativo", ], }, { id: "financing", label: "Financiamento/Crédito", description: "Condições sob medida para o seu caixa.", icon: ClipboardCheckIcon, route: "/wizard/financiamento", benefits: [ "Pré-análise ágil e parcelas acessíveis", "Parcelas muitas vezes < conta de luz", "Opções PF/PJ e garantias flexíveis", "Integração com bancos e fintechs", "Documentação guiada e digital", ], }, ]; export default function OnboardingWelcomePage() { const router = useRouter(); const [selectedClass, setSelectedClass] = useState<CustomerClass | null>(null); const [selectedProfile, setSelectedProfile] = useState<EnergyProfile | null>(null); const selectedClassObj = useMemo( () => customerClasses.find((c) => c.id === selectedClass) || null, [selectedClass] ); const selectedProfileObj = useMemo( () => energyProfiles.find((p) => p.id === selectedProfile) || null, [selectedProfile] ); const mergedBenefits = useMemo(() => { const all = new Set<string>([ ...(selectedClassObj?.benefits ?? []), ...(selectedProfileObj?.benefits ?? []), ]); return Array.from(all); }, [selectedClassObj, selectedProfileObj]); const handleStart = () => { if (!selectedClassObj || !selectedProfileObj) return; const params = new URLSearchParams({ persona: selectedClassObj.id, profile: selectedProfileObj.id, nextProfile: selectedProfileObj.route, }).toString(); const next = `${selectedClassObj.route}?${params}`; router.push(next); }; return ( <div className="container max-w-5xl mx-auto py-8"> <h1 className="text-2xl font-semibold mb-2">Bem-vindo ao Yello Solar Hub</h1> <p className="text-muted-foreground mb-6"> Vamos personalizar sua jornada. Escolha seu tipo de cliente e seu perfil energético. </p> <Card> <CardContent className="p-6 space-y-8"> {/* Passo 1 — Classe / Persona */} <section> <h2 className="text-lg font-medium mb-4">Quem é você?</h2> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"> {customerClasses.map((c) => { const Icon = c.icon; const active = selectedClass === c.id; return ( <button key={c.id} type="button" onClick={() => setSelectedClass(c.id)} aria-pressed={active} className={[ "border rounded-xl p-4 text-left transition-all focus:outline-none", active ? "border-blue-500 bg-blue-50 ring-2 ring-blue-200" : "hover:border-gray-300", ].join(" ")} > <div className="flex items-center gap-3 mb-2"> <div className="bg-blue-100 p-2 rounded-full"> <Icon className="h-5 w-5 text-blue-700" /> </div> <h3 className="font-medium">{c.label}</h3> </div> <p className="text-sm text-muted-foreground">{c.description}</p> </button> ); })} </div> </section> {/* Passo 2 — Perfil Energético */} <section> <h2 className="text-lg font-medium mb-4">Qual é a sua prioridade energética?</h2> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"> {energyProfiles.map((p) => { const Icon = p.icon; const active = selectedProfile === p.id; return ( <button key={p.id} type="button" onClick={() => setSelectedProfile(p.id)} aria-pressed={active} className={[ "border rounded-xl p-4 text-left transition-all focus:outline-none", active ? "border-emerald-500 bg-emerald-50 ring-2 ring-emerald-200" : "hover:border-gray-300", ].join(" ")} > <div className="flex items-center gap-3 mb-2"> <div className="bg-emerald-100 p-2 rounded-full"> <Icon className="h-5 w-5 text-emerald-700" /> </div> <h3 className="font-medium">{p.label}</h3> </div> <p className="text-sm text-muted-foreground">{p.description}</p> </button> ); })} </div> </section> {/* Benefícios combinados */} {(selectedClass || selectedProfile) && ( <div className="mt-2 bg-blue-50 p-4 rounded-lg border border-blue-100 animate-in fade-in duration-300"> <div className="flex items-center mb-3"> <Sun className="h-5 w-5 text-yellow-500 mr-2" /> <h3 className="font-medium"> Benefícios para{" "} <span className="underline"> {selectedClassObj?.label ?? "—"} </span>{" "} com foco em{" "} <span className="underline"> {selectedProfileObj?.label ?? "—"} </span> </h3> </div> <ul className="grid sm:grid-cols-2 gap-2"> {mergedBenefits.map((benefit, i) => ( <li key={i} className="flex items-start"> <Check className="h-4 w-4 text-green-600 mr-2 mt-0.5 flex-shrink-0" /> <span className="text-sm">{benefit}</span> </li> ))} </ul> {selectedClassObj && selectedProfileObj && ( <div className="mt-4 text-sm text-muted-foreground"> Rota recomendada:{" "} <span className="font-medium"> {selectedClassObj.route} </span>{" "} (wizard adicional:{" "} <span className="font-medium"> {selectedProfileObj.route} </span> ) </div> )} </div> )} </CardContent> <CardFooter className="px-6 py-4 bg-gray-50 border-t"> <OnboardingNavigation hideBack nextButtonText="Começar" onNext={() => { if (!selectedClass || !selectedProfile) { alert("Selecione a classe e o perfil energético para continuar"); return false; } handleStart(); return true; }} /> </CardFooter> </Card> </div> ); } - Initial Deployment
cefea16
verified