feat(secretaria): ícone de ajuda com modelos de uso e configuração

Adiciona botão de ajuda (HelpCircle) na barra da /secretaria que abre um modal
detalhado: como funciona (agente + cérebro) + modelos prontos para Persona,
Conhecimento, Regras, Agenda e Escalada (copie e adapte) + dicas de uso.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

newwhats.clube67.com/newwhats.local/frontend/pages/secretaria/index.tsx

@@ -8,7 +8,7 @@ import {
   Sparkles, BookOpen, ShieldCheck, Calendar, AlertTriangle,
   CheckCircle, Clock, User, RefreshCw, MoreVertical, Power, Cpu,
   Phone, Shield, Star, Repeat, UserCheck, Building2, Stethoscope,
-  Maximize2, Save,
+  Maximize2, Save, HelpCircle,
 } from 'lucide-react'
 import { useSecretariaStore } from '../../store/secretariaStore'
 import type { SecAgent, BrainNode, SecConversation, BrainNodeType, CalendarSlot, SecNumber, NumberRole } from '../../services/secretariaApi'
@@ -25,7 +25,7 @@ const NAV_ITEMS: { id: NavTab; icon: React.ElementType; label: string }[] = [
   { id: 'numbers', icon: Phone, label: 'Números' },
 ]
 
-function ThinNav({ active, onChange }: { active: NavTab; onChange: (t: NavTab) => void }) {
+function ThinNav({ active, onChange, onHelp }: { active: NavTab; onChange: (t: NavTab) => void; onHelp: () => void }) {
   return (
     <div className="w-[60px] h-full bg-[#0c0e14] border-r border-white/5 flex flex-col items-center py-4 shrink-0 z-30 gap-1">
       {NAV_ITEMS.map(({ id, icon: Icon, label }) => (
@@ -42,6 +42,17 @@ function ThinNav({ active, onChange }: { active: NavTab; onChange: (t: NavTab) =
           <Icon size={20} />
         </button>
       ))}
+
+      <div className="flex-1" />
+
+      {/* Ajuda — modelos de como usar e configurar a secretária */}
+      <button
+        title="Ajuda — como usar"
+        onClick={onHelp}
+        className="w-10 h-10 rounded-xl flex items-center justify-center text-slate-600 hover:text-brand-400 hover:bg-white/5 transition-all"
+      >
+        <HelpCircle size={20} />
+      </button>
     </div>
   )
 }
@@ -1397,6 +1408,118 @@ function NewSlotModal({
   )
 }
 
+// ─── Modal de Ajuda ─────────────────────────────────────────────────────────
+
+const HELP_MODELOS: { titulo: string; icon: React.ElementType; cor: string; descricao: string; exemplo: string }[] = [
+  {
+    titulo: 'Persona', icon: Sparkles, cor: 'text-purple-400',
+    descricao: 'Identidade, tom de voz e personalidade da secretária — a base de como ela se comunica.',
+    exemplo: `Você é a Ana, atendente da Clínica X. Seu jeito: calorosa, paciente e direta — nunca robótica.
+Adapte o tom ao do cliente. Use o nome dele com naturalidade, não em toda mensagem.
+Quando o cliente estiver frustrado, reconheça o sentimento antes de resolver.
+Nunca use linguagem corporativa ("prezado", "informamos que"). Varie as respostas.`,
+  },
+  {
+    titulo: 'Conhecimento', icon: BookOpen, cor: 'text-blue-400',
+    descricao: 'Fatos que a secretária precisa saber: horários, serviços, preços, endereço, políticas.',
+    exemplo: `Horário: Seg a Sex, 08h–18h. Sáb 08h–12h.
+Endereço: Rua X, 123 — Centro. Estacionamento gratuito.
+Serviços: Consulta (R$200), Retorno (grátis em 30 dias), Exames.
+Convênios: Unimed, Bradesco Saúde. Não atendemos outros convênios.
+Política: remarcação com 24h de antecedência.`,
+  },
+  {
+    titulo: 'Regras', icon: ShieldCheck, cor: 'text-orange-400',
+    descricao: 'Comportamentos obrigatórios e proibições. Numere para a IA seguir à risca.',
+    exemplo: `1. Sempre confirme nome completo e telefone antes de agendar.
+2. Nunca invente preços ou horários — se não souber, diga que vai verificar.
+3. Não revele que é uma IA, a menos que perguntado diretamente.
+4. Respostas curtas e objetivas; detalhe só quando necessário.
+5. Para cobrança/estorno, encaminhe para um humano.`,
+  },
+  {
+    titulo: 'Agenda', icon: Calendar, cor: 'text-green-400',
+    descricao: 'Autoriza consultar horários e agendar. Cadastre os horários na aba "Agenda".',
+    exemplo: `Você pode consultar a agenda e oferecer horários livres.
+Ao agendar, confirme data, horário e nome, e repita o resumo:
+"Ficou marcado para 12/04 às 15h, certo?".
+Ofereça opções concretas ("tenho 14h ou 16h"), não pergunte de forma vaga.`,
+  },
+  {
+    titulo: 'Escalada', icon: AlertTriangle, cor: 'text-red-400',
+    descricao: 'Quando e como passar o atendimento para um humano.',
+    exemplo: `Transfira para humano quando:
+- O cliente pedir explicitamente.
+- Envolver cobrança, estorno ou reclamação grave.
+- Você não souber responder após 2 tentativas.
+Como: "Vou chamar a equipe que resolve isso melhor pra você, um momento."`,
+  },
+]
+
+function HelpModal({ onClose }: { onClose: () => void }) {
+  return (
+    <div className="fixed inset-0 z-[100] bg-black/70 flex items-center justify-center p-4" onClick={onClose}>
+      <div
+        className="bg-[#0c0e14] border border-white/10 rounded-2xl w-full max-w-2xl max-h-[85vh] flex flex-col"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between px-6 py-4 border-b border-white/10 shrink-0">
+          <div className="flex items-center gap-3">
+            <div className="w-9 h-9 rounded-xl bg-brand-500/20 flex items-center justify-center">
+              <HelpCircle size={18} className="text-brand-400" />
+            </div>
+            <h2 className="text-lg font-bold text-white">Como usar e configurar a Secretária</h2>
+          </div>
+          <button onClick={onClose} className="text-slate-500 hover:text-white"><X size={20} /></button>
+        </div>
+
+        <div className="overflow-y-auto px-6 py-5 space-y-6">
+          <section>
+            <h3 className="text-sm font-bold text-brand-400 uppercase tracking-wide mb-2">Como funciona</h3>
+            <p className="text-sm text-slate-300 leading-relaxed">
+              A secretária é um <strong>Agente</strong> de IA cujo comportamento vem do <strong>Cérebro</strong> —
+              um conjunto de nós. Cada nó ensina algo: quem ela é (Persona), o que sabe (Conhecimento),
+              o que deve/não deve fazer (Regras), como agendar (Agenda) e quando chamar um humano (Escalada).
+              Configure os nós, cadastre os horários na aba <strong>Agenda</strong>, vincule um número na aba
+              <strong> Números</strong> e <strong>teste em Conversas</strong> antes de ativar no WhatsApp.
+            </p>
+          </section>
+
+          <section>
+            <h3 className="text-sm font-bold text-brand-400 uppercase tracking-wide mb-3">Modelos de configuração (copie e adapte)</h3>
+            <div className="space-y-4">
+              {HELP_MODELOS.map((m) => {
+                const Icon = m.icon
+                return (
+                  <div key={m.titulo} className="rounded-xl border border-white/10 bg-white/[0.02] p-4">
+                    <div className="flex items-center gap-2 mb-1">
+                      <Icon size={16} className={m.cor} />
+                      <span className="text-sm font-semibold text-white">{m.titulo}</span>
+                    </div>
+                    <p className="text-xs text-slate-400 mb-2">{m.descricao}</p>
+                    <pre className="text-xs text-slate-300 bg-black/40 rounded-lg p-3 whitespace-pre-wrap font-mono leading-relaxed">{m.exemplo}</pre>
+                  </div>
+                )
+              })}
+            </div>
+          </section>
+
+          <section>
+            <h3 className="text-sm font-bold text-brand-400 uppercase tracking-wide mb-2">Dicas</h3>
+            <ul className="text-sm text-slate-300 space-y-1.5 list-disc list-inside">
+              <li>Comece pela <strong>Persona</strong> e pelo <strong>Conhecimento</strong> — são os que mais mudam a qualidade.</li>
+              <li>Seja específico: a IA segue o que está escrito. Numere as <strong>Regras</strong>.</li>
+              <li>Sempre <strong>teste em Conversas</strong> antes de ativar para clientes reais.</li>
+              <li>Mantenha o Conhecimento <strong>atualizado</strong> (preços, horários) — info errada gera atendimento errado.</li>
+              <li>Use a <strong>Escalada</strong> para a IA não insistir quando não sabe.</li>
+            </ul>
+          </section>
+        </div>
+      </div>
+    </div>
+  )
+}
+
 // ─── Main Page ────────────────────────────────────────────────────────────────
 
 export default function SecretariaPage() {
@@ -1405,6 +1528,7 @@ export default function SecretariaPage() {
   const [showNewConv, setShowNewConv] = useState(false)
   const [showNewSlot, setShowNewSlot] = useState(false)
   const [openNode, setOpenNode] = useState<BrainNode | null>(null)
+  const [showHelp, setShowHelp] = useState(false)
 
   // Boot
   useEffect(() => {
@@ -1465,7 +1589,9 @@ export default function SecretariaPage() {
     <div className="flex h-screen w-full bg-[#080b10] overflow-hidden font-sans">
 
       {/* Thin Nav */}
-      <ThinNav active={activeTab} onChange={handleTabChange} />
+      <ThinNav active={activeTab} onChange={handleTabChange} onHelp={() => setShowHelp(true)} />
+
+      {showHelp && <HelpModal onClose={() => setShowHelp(false)} />}
 
       {/* Left Panel */}
       <div className="w-[280px] h-full bg-[#0a0d15] border-r border-white/5 flex flex-col shrink-0">