// ============================================================================ // Detalhe de Playbook / Manual — abre como overlay sobre a página // ============================================================================ function DetailView({ item, onClose }) { if (!item) return null; const isManual = item.code && (item.code.startsWith('F-') || item.code.startsWith('O-')); useEffect(() => { const fn = (e) => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', fn); return () => window.removeEventListener('keydown', fn); }, [onClose]); return (
{/* Breadcrumb / voltar */}
Portal / {isManual ? 'Manuais' : 'Playbooks'} / {item.title}
esc para voltar
{isManual ? : }
); } // ============================================================================ // PLAYBOOK DETAIL // ============================================================================ function PlaybookDetail({ p, onClose }) { const d = DETAIL_PLAYBOOK; // Sempre usa o "Usinas" como exemplo cheio — independente do que abriu const pal = PRODUCT_PALETTES[p.pal || 'investimento']; const [active, setActive] = useState(d.sections[0].n); const isDark = pal.ink === '#fff'; return (
{/* Hero */}
{p.code || '01·PB'} {d.meta.version}
{p.subtitle || d.subtitle}

{p.title ? `Playbook · ${p.title}` : d.title}

{/* Conteúdo */}
{/* TOC */} {/* Body */}
{d.sections.map(s => (
{String(s.n).padStart(2,'0')}

{s.t}

{s.body}

{s.n === 4 && } {s.n === 6 && } {s.n === 8 && }
))} {/* Checklist + atenção */}
Checklist final
{d.checklist.map((c, i) => ( ))}
Pontos de atenção
    {d.attention.map((a, i) => (
  • {a}
    • ))}
{/* FAQ */}
{d.faq.map((f, i) => (
{f.q} +

{f.a}

))}
{/* Footer ações */}
Próxima etapa
Realizar role-play com par sênior e registrar feedback no ClickUp
); } function Meta({ lbl, v }) { return (
{lbl}
{v}
); } function JourneyStrip() { const steps = ['Lead', 'Pré-qual.', 'Diagnóstico', 'Agendamento', 'Apresentação', 'Proposta', 'Negociação', 'Fechamento', 'Contrato', 'Pós-venda']; return (
{steps.map((s, i) => (
{String(i+1).padStart(2,'0')} {s}
{i < steps.length - 1 && } ))}
); } function ArgumentsGrid() { const args = [ { t: 'Ativo real', d: 'O cliente compra cotas de uma usina física operada pela Ampexx.' }, { t: 'Previsibilidade', d: 'Indexação à tarifa de energia gera retorno previsível.' }, { t: 'Sem operação para o cliente', d: 'A Ampexx cuida de O&M, monitoramento e seguro.' }, { t: 'Transparência', d: 'Portal de geração mensal disponível ao investidor.' }, ]; return (
{args.map((a, i) => (
{a.t}
{a.d}
))}
); } function ObjectionsTable() { const rows = [ { obj: '“E se eu precisar do dinheiro antes do prazo?”', resp: 'Apresentar cláusula de saída, prazo de aviso e simulação de cenário.' }, { obj: '“E se a tarifa cair?”', resp: 'Mostrar histórico de 10 anos da tarifa e referência setorial.' }, { obj: '“Não vou ter problema com a distribuidora?”', resp: 'Explicar enquadramento em geração compartilhada e papel do Ampexx no relacionamento.' }, { obj: '“Por que não comprar minha própria usina?”', resp: 'Comparativo de CAPEX, gestão e diluição de risco.' }, ]; return (
Objeção
Resposta padrão
{rows.map((r, i) => (
{r.obj}
{r.resp}
))}
); } // ============================================================================ // MANUAL DETAIL — versão simplificada que mostra a estrutura do manual // ============================================================================ function ManualDetail({ m, onClose }) { const blocks = [ { n: '01', t: 'Objetivo', body: 'Padronizar a geração de propostas comerciais, garantindo que toda proposta enviada ao cliente siga o mesmo layout, dados e fluxo de aprovação.' }, { n: '02', t: 'Quando este processo deve ser usado', body: 'Sempre que um lead for qualificado e o vendedor precisar enviar uma proposta formal — em qualquer dos quatro produtos da Ampexx.' }, { n: '03', t: 'Responsável pelo processo', body: 'Comercial (Closer) com apoio do time de Operações para revisão técnica.' }, { n: '04', t: 'Ferramentas utilizadas', body: 'PipeRun (etapa do lead) · Wattio (dimensionamento) · Google Drive (modelos) · Modelos de proposta padrão.' }, { n: '05', t: 'Informações necessárias', body: 'Dados do cliente (CPF/CNPJ, endereço, conta de luz), produto escolhido, ticket alvo e condições negociadas em reunião.' }, { n: '06', t: 'Passo a passo', body: 'Sequência operacional detalhada abaixo, em 14 passos.' }, { n: '07', t: 'Padrão de nomenclatura', body: 'AAAA-MM-DD · Cliente · Produto · Versão. Ex: 2026-05-12 · João Silva · Usinas · v1.' }, { n: '08', t: 'Cuidados importantes', body: 'Conferir titularidade da conta de luz · usar modelo do mês vigente · não alterar cláusulas sem aprovação.' }, { n: '09', t: 'Em caso de erro', body: 'Solicitar revisão pela coordenação no canal #ops-propostas no WhatsApp e abrir tarefa no ClickUp.' }, { n: '10', t: 'Checklist final', body: 'Itens obrigatórios verificáveis antes do envio — listados abaixo.' }, { n: '11', t: 'Próxima etapa', body: 'Enviar proposta para o cliente, mover o lead para “Proposta enviada” no PipeRun e agendar follow-up em até 48h.' }, ]; const steps = [ 'Confirmar que o lead está na etapa “Proposta” no PipeRun', 'Abrir o Wattio e gerar dimensionamento ou simulação do produto', 'Exportar o resultado em PDF', 'Abrir o modelo de proposta vigente no Drive', 'Preencher dados do cliente, condições e anexos', 'Validar cabeçalho, rodapé e logo (versão atual)', 'Salvar com o padrão de nomenclatura', 'Mover para a pasta do cliente no Drive', 'Atualizar etapa para “Proposta enviada” no PipeRun', 'Registrar próximo passo combinado', 'Enviar proposta ao cliente (e-mail + WhatsApp confirmando)', 'Agendar follow-up em até 48h', 'Anexar proposta na oportunidade do PipeRun', 'Comunicar Ops sobre data prevista de fechamento', ]; const checklist = [ 'Dados do cliente conferidos com o cadastro', 'Modelo do mês vigente foi usado', 'Valores e condições conferem com o que foi combinado', 'Documento foi salvo na pasta correta com padrão de nomenclatura', 'Lead atualizado para a próxima etapa no PipeRun', 'Próximo passo combinado por escrito com o cliente', ]; return (
{m.code} Manual · Operacional v3.1 · ciclo mai·26

Manual · {m.title}

{blocks.map(b => (
{b.n}

{b.t}

{b.body}

{b.n === '06' && (
    {steps.map((s, i) => (
  1. {String(i+1).padStart(2,'0')} {s}
    2. ))}
)} {b.n === '10' && (
{checklist.map((c, i) => ( ))}
)}
))}
); } window.DetailView = DetailView;