Método Comercial
P10X

const response = await fetch("https://api.anthropic.com/v1/messages", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "x-api-key": process.env.ANTHROPIC_API_KEY,
    "anthropic-version": "2023-06-01"
  },
  body: JSON.stringify({
    model: "claude-sonnet-4-20250514",
    max_tokens: 8000,
    messages: [
      {
        role: "user",
        content: [
          // Para fases com upload de arquivo (imagem, PDF):
          { type: "image", source: { type: "base64", media_type: "image/jpeg", data: imageBase64 } },
          // Para fases com upload de arquivo (imagem, PDF):
          { type: "document", source: { type: "base64", media_type: "application/pdf", data: pdfBase64 } },
          // Sempre: o prompt da fase + os dados do briefing
          { type: "text", text: promptDaFase + "\n\n" + JSON.stringify(dadosDoInput) }
        ]
      }
    ]
  })
});

const data = await response.json();
const htmlGerado = data.content[0].text;
// Salvar htmlGerado no storage e referenciar no banco

Você receberá os dados de um briefing estratégico preenchido do projeto MKTI. Sua tarefa é ler todas as informações e gerar um único arquivo HTML completo — o Plano Estratégico Comercial — para ser enviado ao cliente logo após a reunião de onboarding.

O QUE VOCÊ DEVE FAZER:
Leia o briefing e extraia todas as informações preenchidas. Com base nelas, monte um plano estratégico comercial personalizado, estruturado nas 9 seções abaixo. Para cada seção, use os dados reais do briefing e complemente com recomendações estratégicas práticas e objetivas, escritas em linguagem consultiva (não genérica).

ESTRUTURA DO PLANO (9 seções obrigatórias):
01 - Visão Geral do Negócio — Resumo do que a empresa faz, seu diferencial, mercado de atuação e contexto atual.
02 - Objetivo Principal & Metas — Objetivo central do projeto, metas de faturamento (otimista, realista, pessimista) e o que precisa acontecer nos primeiros 60 dias.
03 - Público-Alvo & ICP — Perfil do cliente ideal, dores, dúvidas e desejos mapeados.
04 - Ofertas & Posicionamento — Produto/serviço principal detalhado, ofertas secundárias e iscas comerciais.
05 - Diagnóstico do Processo Comercial Atual — Como está o funil hoje, pontos de perda, gaps identificados e oportunidades imediatas.
06 - Fluxo Comercial Proposto — Etapas do novo processo comercial recomendado, desde a geração do lead até o pós-venda.
07 - Estratégia de CRM — Como o CRM será estruturado, etapas do funil, automações recomendadas e métricas a acompanhar.
08 - Canais & Tráfego — Canais ativos, plataformas de anúncio, verba sugerida e estratégia de conteúdo/iscas.
09 - Próximos Passos — Lista clara e priorizada das ações imediatas (primeiros 7, 30 e 60 dias).

IDENTIDADE VISUAL OBRIGATÓRIA:
Gere o HTML seguindo rigorosamente estas regras:
- Fundo principal: #10100e
- Texto e elementos neutros: #f4f4f4
- Cor de destaque (títulos, bordas, números, ícones, marcadores): #bdfe00
- Somente essas 3 cores. Sem gradientes coloridos, sem outras paletas.
- Tipografia: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif
- Títulos de seção grandes em #bdfe00, subtítulos e corpo em #f4f4f4, line-height mínimo de 1.7
- Espaçamento generoso entre seções (padding e margin amplos)
- Cards por seção com fundo #1a1a17 e borda sutil 1px solid #2a2a26
- Listas com marcadores ou números em #bdfe00
- Container principal com max-width: 900px, centralizado
- Cabeçalho: título "Plano Estratégico Comercial" + nome do negócio + data de geração
- Cada seção numerada de 01 a 09, com o número em destaque em #bdfe00 (fonte grande, tipo badge lateral)
- Layout 100% responsivo (mobile-friendly)
- Tudo em um único arquivo .html autocontido (sem dependências externas, sem frameworks)

REGRAS GERAIS:
- Use apenas as informações reais do briefing. Não invente dados.
- Onde o campo estiver em branco no briefing, omita aquele item ou sinalize como "A definir".
- As recomendações estratégicas devem ser práticas, diretas e personalizadas — nada genérico.
- O tom é consultivo e profissional, mas acessível.
- O arquivo deve estar pronto para ser aberto no navegador e enviado ao cliente sem edições adicionais.
- Sua resposta deve ser apenas o código HTML completo. Nenhum texto fora do arquivo.

Você receberá prints e anotações de um diagnóstico comercial (cliente oculto). Sua tarefa é ler todo o conteúdo e gerar um único arquivo HTML completo — o Diagnóstico Comercial — estruturado em duas seções.

O QUE VOCÊ DEVE FAZER:
Analise cada print, anotação e observação. Identifique os pontos de falha, fricção e ineficiência no processo comercial atual. Monte o relatório nas duas seções abaixo com linguagem consultiva, clara e direta.

ESTRUTURA OBRIGATÓRIA (2 seções):

Seção 1 — Gargalos Observados
Para cada gargalo identificado:
- Exiba o print correspondente (se houver imagem, extraia e exiba inline em base64)
- Título do gargalo em destaque
- Descrição objetiva do que foi observado
- Explicação clara de por que isso é um problema — impacto no processo, na conversão ou na experiência do cliente
Liste todos os gargalos encontrados, um por card. Não agrupe problemas distintos no mesmo card.

Seção 2 — Diagnóstico Final
- Conclusão consolidada do processo comercial atual
- Principais padrões de falha identificados (o que se repete, o que mais impacta)
- Como cada falha será corrigida — ações concretas e priorizadas
- Resultado esperado após as melhorias

IDENTIDADE VISUAL OBRIGATÓRIA:
- Fundo principal: #10100e
- Texto: #f4f4f4, destaque: #bdfe00
- Cards de gargalo com fundo #1a1a17, borda 1px solid #2a2a26
- Borda esquerda de destaque nos cards de gargalo: 4px solid #bdfe00
- Container max-width: 900px, centralizado
- Cabeçalho: "Diagnóstico Comercial" + nome da empresa + data de geração
- Seções numeradas (01 e 02) com número em destaque em #bdfe00
- Responsivo, arquivo único .html autocontido

REGRAS GERAIS:
- Use apenas o que está no documento. Não invente gargalos ou dados.
- Se houver prints, incorpore em base64 diretamente no HTML.
- Cada gargalo em card separado — não agrupe problemas distintos.
- Tom consultivo, direto e profissional. Sem linguagem genérica.
- Sua resposta deve conter apenas o código HTML. Nenhum texto fora do arquivo.

// O ADM preenche cada módulo no frontend
// O sistema salva no banco como JSON estruturado por módulo:

const p10xData = {
  cliente: { nome: "...", empresa: "..." },
  m1_canais: {
    inbound: { redesSociais: true, whatsapp: true, site: true, googleAds: false },
    conteudosREV: "Reels de antes e depois, bastidores do ritual...",
    requisitosWhatsApp: ["Foto de perfil com qualidade", "Capa com descrição", ...],
    outbound: { networking: true, indicacao: true, socialSelling: true, b2b: false },
    // ...
  },
  m2_conexao: {
    perfisPredominantes: ["relacional", "impulsivo"],
    encantamentoPresencial: "...",
    encantamentoDigital: "...",
    // ...
  },
  m3_fluxos: {
    scriptInboundAbertura: "Olá {nome}! Aqui é {vendedor}...",
    scriptAcolherDor: "...",
    scriptAgendamento: "...",
    scriptOutboundIndicacao: "...",
    scriptSocialSelling: { seguidor: "...", interacoes: "..." },
    mensagemPosAgendamento: "Opa {nome}!...",
    fluxoAntiNoShow: ["...msg com depoimento...", "...link da reunião..."],
    isca: "Diagnóstico gratuito de 30 minutos",
    // ...
  },
  m4_atendimento: {
    apresentacaoCPF: "...",
    assessoriaResumida: ["Me fala mais sobre o seu negócio?", ...],
    linkDiagnostico: "https://...",
    // ...
  },
  m5_crm: {
    funilLead: [
      { etapa: "Lead Novo", criterio: "Entrou em contato mas ainda não agendou" },
      { etapa: "Agendado", criterio: "Visita marcada" },
      // ...
    ],
    funilCliente: [...]
  },
  m6_followups: {
    fluxo: [
      { momento: "+5min", mensagem: "Oi {nome}! Vi que você nos contactou..." },
      { momento: "+1h", mensagem: "..." },
      // ...
    ],
    exemplosPorSituacao: {
      naoCompareceu: "Olá, {nome}...",
      sumiu: "...",
      // ...
    }
  },
  m7_objecoes: [
    { objecao: "Acha o preço caro", argumentacao: "O problema é o orçamento ou fluxo de caixa?..." },
    { objecao: "Já tem quem faça", argumentacao: "Nossa solução é diferente das agências comuns..." },
    // ...
  ]
};

// Serializar e enviar ao Claude:
const claudeInput = promptFase3 + '\n\nDADOS DO P10X:\n' + JSON.stringify(p10xData, null, 2);

Você receberá os dados completos do Método Comercial P10X de um cliente, estruturados em JSON com os 7 módulos preenchidos. Transforme em um playbook HTML interativo completo — o Comercial P10X — pronto para ser aberto no navegador e usado pela equipe de vendas no dia a dia.

ESTRUTURA DO HTML:
Layout:
- Sidebar fixa à esquerda (260px) com navegação pelos 7 módulos
- Topbar com título "Comercial P10X — [Nome da Empresa]" e barra de busca funcional
- Conteúdo principal com scroll, organizado em 7 seções numeradas
- Responsivo — funciona em mobile (sidebar vira menu hamburguer)

Identidade Visual:
- --bg: #0e0e0c (fundo principal)
- --bg1: #161614 (sidebar)
- --bg2: #1e1e1b (cards e accordeões)
- --bg3: #252522 (hover e estados ativos)
- --accent: #bdfe00 (cor de destaque)
- --text: #f0f0ec (texto principal)
- --muted: #888880 (texto secundário)
- --border: #2a2a26 (bordas sutis)
- --danger: #ff5a5a | --info: #4da6ff | --warn: #ffb84d

Fonte: 'Segoe UI', system-ui, sans-serif

Componentes obrigatórios por módulo:

M1 — CANAIS DE AQUISIÇÃO:
- Grid visual mostrando canais Inbound e Outbound ativos (tags coloridas)
- Cards separados por canal com checklist de requisitos
- Seção de conteúdos REV com exemplos

M2 — CONEXÃO:
- Cards de perfil de cliente (Analítico, Prático, Relacional, Dominante, Cético, Impulsivo)
  Cada card: nome do perfil, características, como vender para ele
- Processo de encantamento presencial e digital em steps numerados

M3 — FLUXOS COMERCIAIS:
- Funil visual com setas mostrando a jornada: Lead → Conexão → Agendamento → Atendimento
- Todos os scripts em msg-block com botão Copiar
- Sub-seções: Inbound, Outbound, Pós-agendamento, Anti-no-show
- Isca destacada em highlight box

M4 — DURANTE O ATENDIMENTO:
- Steps numerados para o processo de encantamento
- As 5 perguntas da Assessoria Resumida em cards
- Link do diagnóstico em botão de acesso rápido
- Fluxo de LTV em steps

M5 — FUNIS CRM:
- Tabela visual do Funil Lead com etapas e critérios de movimentação
- Tabela visual do Funil Cliente
- Tags coloridas por status de etapa

M6 — FOLLOW-UPS:
- Timeline visual com os momentos do fluxo (+5min, +1h, etc.)
- Cada momento com a mensagem pronta em msg-block com botão Copiar
- Seção "Exemplos por Situação" com accordeões por caso (não compareceu, sumiu, ignorando, etc.)

M7 — CONTORNO DE OBJEÇÕES:
- Cada objeção em card com borda accent
- Título da objeção + argumentação pronta em msg-block com botão Copiar
- Sub-casos quando houver (ex: fluxo de caixa vs orçamento)

Funcionalidades JavaScript obrigatórias:
- Toggle de accordeões
- Navegação suave com item ativo na sidebar
- Sidebar mobile (hamburguer + overlay)
- Copiar texto para clipboard com feedback "Copiado! ✓" por 2 segundos
- Busca em tempo real em todos os textos e scripts
- Nav ativo atualizado no scroll

REGRAS:
- Use apenas as informações do JSON recebido. Não invente dados.
- Preserve todos os scripts e mensagens exatamente como fornecidos.
- Onde o campo estiver vazio, omita aquela seção.
- Tom visual: operacional, direto, fácil de usar durante um atendimento.
- Zero dependências externas. Arquivo único .html autocontido.
- Sua resposta deve ser apenas o código HTML completo.

Você receberá os dados de uma oferta comercial. Sua tarefa é criar a copy completa para uma apresentação de vendas em 21 slides.

Para cada slide, entregue:
- TÍTULO DO SLIDE
- COPY PRINCIPAL (texto que aparece na tela)
- FALA SUGERIDA (o que o apresentador diz em voz alta — tom natural, conversacional)

ESTRUTURA OBRIGATÓRIA — 21 SLIDES:

SLIDE 1 — CAPA DO PROJETO
Objetivo: gerar valor inicial e diferenciação.
- Nome do projeto/produto em destaque
- Tagline de posicionamento (1 frase que captura a proposta de valor)

SLIDE 2 — FRASE DE IMPACTO
Objetivo: gerar autoridade e criar contexto.
- Uma frase poderosa que resume a transformação que o cliente vai ter
- Deve provocar curiosidade e identificação imediata

SLIDE 3 — PROVA SOCIAL INICIAL
Objetivo: quebrar a objeção "Será que funciona?"
- Cases reais extraídos do briefing
- Número de clientes atendidos, resultados alcançados
- Se não houver no briefing, use placeholder: [INSERIR: descrição do que falta]

SLIDE 4 — CONEXÃO (HISTÓRIA)
Objetivo: gerar identificação e confiança.
- História da empresa ou profissional
- O que fazemos e por que fazemos
- Tom humano, não institucional

SLIDE 5 — PROMESSAS CENTRAIS
- As 3 maiores dores do ICP
- Para cada dor: a solução direta que oferecemos
- Estrutura: "Se você sofre com X, nós resolvemos com Y"

SLIDE 6 — CENÁRIO ATUAL vs FUTURO
- Coluna A: onde o cliente está hoje (situação atual, com linguagem emocional)
- Coluna B: onde ele pode chegar (resultado desejado)

SLIDE 7 — QUEBRA DO MODELO TRADICIONAL
- Como o mercado resolve esse problema hoje
- Por que essa abordagem não funciona
- Como nossa abordagem é diferente

SLIDE 8 — DESCONSTRUÇÃO DE FALSAS SOLUÇÕES
- O que o cliente provavelmente já tentou
- Por que cada alternativa não resolve o problema raiz
- Tom: empático, não arrogante

SLIDE 9 — CUSTO DA INÉRCIA
- O que acontece se ele não resolver isso agora
- Perda de receita, tempo, oportunidade

SLIDE 10 — APRESENTAÇÃO DO MÉTODO
- Nome do método
- Visão geral em tópicos numerados
- Cada tópico: nome + benefício em 1 linha

SLIDE 11 — ANTECIPAÇÃO DE RESULTADO
- Descrição vívida de como será a vida/empresa após a implementação
- Tom: inspiracional e concreto ao mesmo tempo

SLIDE 12 — EXPLICAÇÃO DO MÉTODO
- Nome do método
- Frase: "Em X dias, você vai sair de [cenário atual] para [resultado desejado], através de [mecanismo único]."
- Detalhamento de cada etapa com resultado de cada fase

SLIDE 13 — DIFERENCIAIS ESTRATÉGICOS
- 4 a 6 diferenciais reais
- Para cada: nome + explicação do impacto prático para o cliente

SLIDE 14 — ENTREGÁVEIS
- Lista completa de entregáveis
- Para cada item: nome + o que significa na prática

SLIDE 15 — RESUMO FINAL
- Recap visual de tudo o que será entregue
- Apenas os pilares principais em bullets curtos

SLIDE 16 — FILTRO (PRA QUEM É / NÃO É)
- Coluna "Não é pra você se...": perfis que não atendemos
- Coluna "É pra você se...": perfil do cliente ideal

SLIDE 17 — URGÊNCIA
- Por que agir agora e não em 3 meses
- Urgência real — não fake

SLIDE 18 — PROVA DE ENTREGA
- Garantia oferecida
- Processo de entrega: como funciona, quem é responsável

SLIDE 19 — VALIDAÇÃO DE ALINHAMENTO
- Perguntas de validação para o apresentador fazer ao cliente
- "Antes de continuar, quero confirmar — isso é exatamente o que você estava buscando?"

SLIDE 20 — QUEBRA DE PREÇO vs VALOR + ANCORAGEM
- Diferença entre preço e valor com 1 analogia prática
- Ancoragem: compare com alternativas mais caras ou custo de não resolver

SLIDE 21 — OFERTA E FECHAMENTO
- Apresentação do investimento
- Condições de pagamento
- O que está incluso (resumo rápido)
- Chamada para ação clara e direta

REGRAS GERAIS:
- Use apenas dados reais do briefing. Não invente números ou cases.
- Onde houver lacunas, sinalize com [INSERIR: descrição do que falta].
- Tom: consultivo, confiante, direto. Nunca genérico, nunca ansioso.
- A copy de cada slide deve estar pronta para uso — não são orientações, são textos finais.
- A fala sugerida deve soar natural, como uma conversa.
- Entregue os 21 slides em sequência, com formatação clara separando título, copy e fala.

Você é o assistente comercial da [NOME DA EMPRESA], uma IA treinada especificamente para ajudar o time de vendas desta empresa a vender melhor.

INFORMAÇÕES DA EMPRESA:
Nome: [nome_empresa]
O que faz: [descricao_empresa]
Diferencial: [diferencial]
Mercado de atuação: [mercado]

CLIENTE IDEAL (ICP):
Perfil: [icp_descricao]
Dores principais: [dor1], [dor2], [dor3]
Dúvidas comuns: [duvida1], [duvida2], [duvida3]
Desejos: [desejo1], [desejo2], [desejo3]
Como decide comprar: [decisao_compra]

OFERTAS:
[Para cada oferta: nome, preço, o que inclui, dores que resolve, garantia]

PRINCIPAIS OBJEÇÕES E COMO CONTORNAR:
[Objeção mais comum]: [Argumentação]
[Outras objeções do briefing]

FLUXO COMERCIAL:
[Etapas do funil configuradas na Fase 3 — Módulo M5 CRM]

SEU PAPEL:
- Ajude o time de vendas durante atendimentos em tempo real
- Sugira scripts personalizados para cada situação
- Explique como contornar objeções com base nas informações reais desta empresa
- Oriente sobre o próximo passo do processo comercial
- Seja direto, prático e consultivo

RESTRIÇÕES:
- Responda apenas sobre temas relacionados ao comercial desta empresa
- Não invente informações que não estão neste contexto
- Se não souber algo, diga que não tem essa informação disponível