🧭 Prompt de Engenharia: Gerador de Simulador Interativo & Calculadora de Briefing (Cyber-Growth)

Documentação Oficial de Prompt Engineering
Finalidade: Gerar widgets interativos de simulação de projetos, estimativa de escopo e montagem automatizada de briefings com envio formatado para WhatsApp e CRM.
Padrão de Código: HTML5 Semântico, TailwindCSS / Vanilla CSS (Glassmorphism & Obsidian Dark), JavaScript Reativo e Zero Dependências Pesadas.

🎯 Objetivo do Componente

O Simulador Interativo de Briefing (Cyber-Calculator) atua como ferramenta de engajamento (lead magnet de alta conversão) que:

  1. Permite ao usuário selecionar intuitivamente o tipo de projeto, nível de complexidade e recursos adicionais.
  2. Atualiza em tempo real o resumo textual do briefing e estimativas de prazos ou faixas de investimento.
  3. Formata automaticamente uma mensagem estruturada com Markdown/Emoji e codifica via encodeURIComponent para disparo direto no WhatsApp do consultor/empresa.

📋 Prompt Mestre (Copy & Paste)

Abaixo está o prompt completo e parametrizado para gerar ou adaptar o simulador para qualquer nicho ou projeto:

Você é um desenvolvedor Frontend Sênior e Especialista em UI/UX de Alta Conversão focado em Design Systems modernos (Dark Mode, Glassmorphism, TailwindCSS e Vanilla JavaScript).

Sua tarefa é criar um componente completo de "Simulador Interativo de Briefing e Estimativa de Projeto" para ser incorporado diretamente em uma landing page de alta performance.

### 🎨 1. Diretrizes Visuais & Estética
- **Paleta de Cores**: Fundo Obsidian (#030712 / #0B1120), realces em Dourado/Âmbar (#F59E0B / #FBBF24), acentos em Esmeralda (#10B981) e Ciano (#06B6D4).
- **Estilo**: Glassmorphism refinado (`backdrop-blur-xl`, bordas translúcidas com `border-white/10` e hover dinâmico `border-gold/50`).
- **Tipografia**: Títulos em fonte moderna (ex: Outfit/Inter) e detalhes técnicos em fonte monoespaçada (JetBrains Mono / monospace).
- **Responsividade**: Layout adaptável em grid (1 coluna em mobile, multi-colunas em desktop) com controles acessíveis via toque.

### ⚙️ 2. Requisitos Funcionais & Interatividade
1. **Etapa 1 — Seleção do Tipo de Projeto (Radio Buttons estilizados)**:
   - Opções: Website Institucional, E-commerce / Loja Virtual, Dashboard / Plataforma SaaS, Observatório de Dados / OSINT.
2. **Etapa 2 — Seleção de Recursos & Módulos (Checkboxes)**:
   - SEO Técnico & Indexação Google
   - Integração com WhatsApp & CRM
   - Módulo de Inteligência Artificial / Chatbot
   - PWA Offline-First (Aplicativo Instalável)
   - Painel Administrativo / CMS Headless
3. **Etapa 3 — Resumo Reativo em Tempo Real**:
   - Uma área de visualização dinâmica que atualiza instantaneamente o texto do briefing e a estimativa de prazo conforme o usuário clica nas opções.
4. **Etapa 4 — Ação de Conversão (Disparo WhatsApp)**:
   - Um botão CTA de alto destaque ("Enviar Proposta no WhatsApp") cujo link `href` é recalculado em tempo real com `encodeURIComponent`, gerando a mensagem formatada para o número `https://wa.me/5511973741227`.

### 💻 3. Padrão Técnico de Implementação
- Entregue o código completo contendo:
  1. A estrutura HTML do formulário e container do simulador.
  2. O script Vanilla JavaScript modular sem frameworks pesados, escutando o evento `change` do formulário.
  3. Tratamento de acessibilidade com labels associados, foco visual e compatibilidade com navegadores modernos.

🧩 Arquitetura do Componente & Estrutura de Código

1. Estrutura HTML do Simulador

<section id="simulador" class="py-20 relative">
  <div class="max-w-4xl mx-auto px-6">
    <div class="glass-card p-8 md:p-10 rounded-3xl border border-white/10 shadow-3xl">
      <form id="project-estimator-form" class="space-y-8">
        <!-- Seleção de Tipo -->
        <div>
          <label class="block text-sm font-bold text-white uppercase tracking-wider mb-4 font-mono">
            1. Tipo de Projeto
          </label>
          <div class="grid sm:grid-cols-3 gap-3">
            <label class="flex items-center gap-3 p-3.5 rounded-xl border border-white/10 bg-white/5 hover:border-gold/50 cursor-pointer">
              <input type="radio" name="project_type" value="Website Institucional" checked class="text-gold">
              <span class="text-sm text-slate-200">Website Institucional</span>
            </label>
            <!-- Outras opções... -->
          </div>
        </div>

        <!-- Seleção de Recursos -->
        <div>
          <label class="block text-sm font-bold text-white uppercase tracking-wider mb-4 font-mono">
            2. Recursos Adicionais
          </label>
          <div class="grid sm:grid-cols-2 gap-3">
            <label class="flex items-center gap-3 p-3.5 rounded-xl border border-white/10 bg-white/5 hover:border-emerald-500/50 cursor-pointer">
              <input type="checkbox" name="feature" value="SEO Avançado" checked class="text-emerald-500 rounded">
              <span class="text-sm text-slate-200">SEO Técnico & Indexação Google</span>
            </label>
            <!-- Outros recursos... -->
          </div>
        </div>

        <!-- Box de Resumo e CTA -->
        <div class="p-6 rounded-2xl bg-black/60 border border-gold/30 flex flex-col md:flex-row items-center justify-between gap-6">
          <div>
            <span class="text-xs text-gold font-mono uppercase tracking-wider block mb-1">Briefing Montado:</span>
            <p id="briefing-preview" class="text-sm font-medium text-white">Carregando estimativa...</p>
          </div>
          <a id="whatsapp-briefing-btn" href="#" target="_blank" class="w-full md:w-auto px-8 py-4 bg-gold hover:bg-white text-obsidian font-extrabold rounded-xl shadow-xl flex items-center justify-center gap-2 whitespace-nowrap transition-all">
            <span>Enviar no WhatsApp</span>
          </a>
        </div>
      </form>
    </div>
  </div>
</section>

2. Motor Reativo em Vanilla JavaScript

const form = document.getElementById('project-estimator-form');
const preview = document.getElementById('briefing-preview');
const waBtn = document.getElementById('whatsapp-briefing-btn');
const whatsappNumber = '5511973741227';

function updateBriefing() {
    const projectType = form.querySelector('input[name="project_type"]:checked')?.value || 'Website';
    const selectedFeatures = Array.from(form.querySelectorAll('input[name="feature"]:checked')).map(cb => cb.value);
    
    const featuresText = selectedFeatures.length > 0 ? selectedFeatures.join(', ') : 'Requisitos essenciais';
    preview.textContent = `Projeto: ${projectType} | Recursos: ${featuresText}`;

    // Mensagem formatada para o WhatsApp
    const message = `Olá, Artes do Sul! Gostaria de consultar uma proposta para o seguinte projeto:\n\n` +
                    `📌 *Tipo:* ${projectType}\n` +
                    `⚡ *Recursos Selecionados:* ${featuresText}\n\n` +
                    `Podemos agendar uma conversa sobre o escopo e prazos?`;

    waBtn.href = `https://wa.me/${whatsappNumber}?text=${encodeURIComponent(message)}`;
}

// Escuta alterações em qualquer campo do formulário
form?.addEventListener('change', updateBriefing);
document.addEventListener('DOMContentLoaded', updateBriefing);

💡 Variações e Parâmetros Customizáveis

Parâmetro Descrição Exemplo de Aplicação
whatsappNumber Número internacional com DDI + DDD 5511973741227
project_type Categorias centrais de produto do estúdio Institucional, SaaS, E-commerce, OSINT
features Módulos e integrações adicionais IA/Chatbot, PWA, SEO, Gateways, Dark Mode
prazo_estimado Cálculo dinâmico de semanas com base nos itens selecionados 1 a 2 semanas vs 4 a 6 semanas
theme_colors Estilos de destaque para hover dos cards border-gold, border-emerald-500, border-cyan-500

Dica de Uso: Este prompt pode ser reutilizado para qualquer nova landing page temática, página de captura ou formulário de diagnóstico interativo dentro do ecossistema Artes do Sul.