const PR2 = Object.keys(window).filter(k=>/DesignSystem_/.test(k)).map(k=>window[k]).find(o=>o&&o.Button)||{};
const { Eyebrow: PrEyebrow, GradientText: PrGrad, Icon: PrIcon, Button: PrBtn } = PR2;

/* ---------------------------------------------------------------------------
   Tour interativo da Central: um shell de app simulado. O menu lateral troca
   a view; cada view demonstra o módulo real com dados fictícios.
--------------------------------------------------------------------------- */

const PR_MODULES=[
  {id:'monitor',label:'Monitor',icon:'layers',group:'Operação',
   title:'Visão geral da central em um relance',
   desc:'Alertas do período, câmeras online, chamados abertos, operadores logados e uso de disco — com filtro de período e reinício mensal automático das contagens.',
   bullets:['Filtro por período: hoje, 7, 30 dias ou intervalo livre','Contadores reiniciam todo mês, sem planilha de apoio','Uso de disco e retenção visíveis para a coordenação']},
  {id:'eventos',label:'Eventos',icon:'camera',group:'Operação',
   title:'A fila que não deixa alerta passar',
   desc:'Cada detecção vira um card com a imagem da câmera. A fila atualiza em tempo real via WebSocket, mostra quem está tratando e unifica alertas, checklists vencidos e passagens de posto novas.',
   bullets:['Travamento por operador: dois nunca tratam o mesmo alerta','Estados: pendente, verificado, aguardando cliente, pausado','Pausa por câmera (15/30/60 min) com descarte no período','Agrupamento de duplicados da mesma câmera']},
  {id:'chamados',label:'Chamados',icon:'fileText',group:'Operação',
   title:'Do alerta real ao desfecho, rastreado',
   desc:'Alerta real abre chamado automático, com código próprio e timeline que começa na criação do evento. Atribuição, anexos de evidência e filtros que se preservam ao navegar.',
   bullets:['Timeline cronológica append-only desde o evento de origem','Coluna com o #ID do evento que originou o chamado','Anexos de evidência e resolução documentada']},
  {id:'falhas',label:'Gestão de Falhas',icon:'refresh',group:'Operação',
   title:'Desconexões com fluxo próprio',
   desc:'Painel de problemas de infraestrutura por cliente: host, severidade, duração e recuperação. Queda de conexão segue um fluxo guiado até a validação — e pode abrir chamado técnico sozinha.',
   bullets:['Fluxo: aguardando cliente, acompanhando, restabelecida, validada','Baixa local no portal com registro de quem deu','Mapeamento de host para cliente configurável']},
  {id:'checklist',label:'Checklist',icon:'fileCheck',group:'Rotina',
   title:'Rotina que cobra a si mesma',
   desc:'Tarefas recorrentes aparecem para o operador no horário agendado, com perguntas estruturadas, print obrigatório e cronômetro de SLA. Vencidas, entram na fila de eventos.',
   bullets:['Frequências: diária, dias alternados, semanal, mensal, data específica','Evidência fotográfica obrigatória em cada execução','SLA em minutos por checklist, com ranking de atrasos','Responsáveis por usuário ou por perfil']},
  {id:'passagem',label:'Passagem de Posto',icon:'userCheck',group:'Rotina',
   title:'Troca de turno sem informação perdida',
   desc:'O handover 12×36 vira registro pesquisável: cliente, descrição, anexos e palavras-chave. Fechamento exige informativo, e cada colaborador dá ciência — sem sobrescrever ninguém.',
   bullets:['Ciência por colaborador, append-only','Agendamento de pendências para o próximo turno','Busca por palavra-chave no histórico de passagens']},
  {id:'crm',label:'CRM · Clientes',icon:'userCheck',group:'Cadastros',
   title:'Cada cliente, com tudo que é dele',
   desc:'Cadastro de clientes com câmeras aninhadas e status ao vivo, configuração de WhatsApp por cliente, processos operacionais próprios e janela de silenciamento por usina.',
   bullets:['Status ao vivo das câmeras de cada cliente','Processos do cliente a um clique durante o tratamento','Silenciamento por cliente ou usina após retorno','Configuração de aviso por cliente']},
  {id:'unidades',label:'Unidades',icon:'layers',group:'Cadastros',
   title:'A base de conhecimento de cada parque',
   desc:'GPS com link direto para o mapa, contato local, responsável, ramais e layout — o operador acha em segundos o que antes vivia num documento perdido.',
   bullets:['Setores: solar, eólica, comercial e industrial','Contato local e responsável sempre à mão','Link direto para o mapa a partir do GPS cadastrado']},
  {id:'inventario',label:'Inventário',icon:'terminal',group:'Cadastros',
   title:'Os ativos de cada cliente, tipados',
   desc:'Câmeras de portão, interfones com ramal, centrais de alarme e acessos remotos — cada ativo tipado, por cliente, com documentos anexados.',
   bullets:['Tipos próprios: câmera, interfone, central de alarme, acesso remoto','Anexos de documento por ativo (PDF, planilha, Word)','Consulta rápida durante o tratamento do evento']},
  {id:'documentacao',label:'Documentação',icon:'fileText',group:'Cadastros',
   title:'Procedimento certo, na hora certa',
   desc:'Procedimentos, manual operacional e diretório de contatos com anexos servidos por rota autenticada. As ferramentas de cada cliente ficam cadastradas e visíveis.',
   bullets:['Procedimentos e manual operacional versionados','Diretório de contatos da operação','Ferramentas por cliente: VMS, alarme, acesso remoto']},
  {id:'whatsapp',label:'WhatsApp',icon:'phone',group:'Comunicação',
   title:'O cliente avisado sem sair da Central',
   desc:'Inbox de conversas e grupos dentro do portal. Mensagens de alerta padronizadas com usina, operador e link curto seguro da imagem do evento. Conexão por QR com aviso explícito de falha.',
   bullets:['Envio e recebimento no próprio portal, por cliente e grupo','Mensagem padrão de alerta e de chamado resolvido','Imagem do evento por link curto com token e limite de acesso','Pareamento por QR com teste de envio']},
  {id:'relatorios',label:'Relatórios',icon:'terminal',group:'Gestão',
   title:'O relatório mensal que se monta sozinho',
   desc:'KPIs com reinício mensal, detecções por usina e por tipo, tempo médio de resposta, desempenho por operador e SLA de checklists. Exporta CSV e PDF consolidado com gráficos.',
   bullets:['Detecções por usina, incluindo usinas com zero detecção','Tempo médio por tipo de evento e entre atendimentos','Export CSV, versão para impressão e PDF consolidado']},
  {id:'operadores',label:'Operadores',icon:'scanCheck',group:'Gestão',
   title:'Quem está no posto, agora',
   desc:'Grid em tempo real dos operadores: ativo, pausado, ocioso ou deslogado, com motivo de pausa. Ociosidade detectada sozinha e sessão encerrada quando o heartbeat some.',
   bullets:['Motivos de pausa: almoço, banheiro, intervalo, reunião, outro','Ociosidade automática, sem depender de supervisor olhando','Dashboard de atividades com drill-down e tempo ocioso']},
  {id:'checagem',label:'Checagem',icon:'check',group:'Gestão',
   title:'O formulário que fecha o turno',
   desc:'Checagem do operador por período — manhã, tarde, noite, madrugada — com pendências de câmeras offline, portões, alarme e interfones, e o status de aviso ao cliente.',
   bullets:['Pendências por categoria: câmera, portão, alarme, interfone','Vínculo direto com o cliente e a usina','Status de aviso ao cliente em cada pendência']},
  {id:'sla',label:'SLA · Notificações',icon:'shieldCheck',group:'Sistema',
   title:'A plataforma cobra antes do cliente',
   desc:'Políticas de prazo por tipo com varredura a cada minuto: sino e toast em tempo real para o operador, escalonamento automático ao supervisor quando estoura.',
   bullets:['Políticas por escopo: evento e chamado','Alertas: sem tratamento, checklist pendente, SLA estourado','Escalonamento automático ao supervisor']},
  {id:'config',label:'Configurações',icon:'lock',group:'Sistema',
   title:'Governança sem chamado de TI',
   desc:'Usuários, perfis e permissões, retenção de dados com limpeza automática, servidores de câmera com saúde ao vivo e importação de câmeras em massa por CSV.',
   bullets:['Retenção de dados: política, uso de disco e purge diário','Importação de câmeras por CSV com validação tudo-ou-nada','Auditoria dos webhooks recebidos, com reprocesso de erros']},
];

const PR_GROUPS=['Operação','Rotina','Cadastros','Comunicação','Gestão','Sistema'];

/* Paleta do shell simulado — a Central real tem tema claro e escuro
   (turno da madrugada), então o tour também tem. */
function prPalette(dark){
  return dark?{
    shell:'#101318',side:'#0b0e12',card:'#161a21',line:'rgba(255,255,255,.08)',
    ink:'#f3f5f8',sub:'rgba(243,245,248,.55)',chip:'rgba(255,255,255,.06)',
    hover:'rgba(255,255,255,.04)',
  }:{
    shell:'#fff',side:'var(--rcem-grey-25)',card:'#fff',line:'var(--border-hairline)',
    ink:'var(--rcem-ink-900)',sub:'var(--rcem-grey-500)',chip:'var(--rcem-grey-100)',
    hover:'var(--rcem-grey-50)',
  };
}

const PR_TONES={
  warn:{bg:'rgba(232,160,19,.15)',fg:'#b87709',bar:'#e8a013'},
  ok:{bg:'rgba(29,111,224,.12)',fg:'var(--rcem-green-600)',bar:'var(--rcem-green-600)'},
  bad:{bg:'rgba(229,80,57,.12)',fg:'#c43a24',bar:'#e55039'},
  info:{bg:'rgba(127,140,141,.14)',fg:'#6b7677',bar:'#9aa4a5'},
};

const PR_FEED=[
  {client:'Solar Horizonte',cam:'CAM 04 · Portão leste',type:'Pessoa',tone:'warn'},
  {client:'Eólica Vento Sul',cam:'CAM 12 · Perímetro N',type:'Veículo',tone:'warn'},
  {client:'PCH Rio Claro',cam:'CAM 02 · Casa de força',type:'Pessoa',tone:'warn'},
  {client:'UFV Boa Vista',cam:'CAM 07 · Trackers',type:'Conexão',tone:'bad'},
  {client:'Solar Horizonte',cam:'CAM 09 · Subestação',type:'Veículo',tone:'warn'},
];

function PrTag({tone,children,mono}){
  const t=PR_TONES[tone]||PR_TONES.info;
  return <span style={{display:'inline-flex',alignItems:'center',gap:5,fontSize:9.5,fontWeight:700,background:t.bg,color:t.fg,borderRadius:'var(--radius-pill)',padding:'3px 9px',fontFamily:mono?'var(--font-mono)':'var(--font-display)',whiteSpace:'nowrap'}}>{children}</span>;
}

/* --- View: Eventos (fila viva) ------------------------------------------- */
function PrViewEventos({P}){
  const isMobile=useIsMobile();
  // A fila tem SEMPRE o mesmo número de cards: o novo entra em cima e o mais
  // antigo sai. Altura estável — sem empurrar o resto da página no scroll.
  const CAP=isMobile?4:6;
  const nextId=React.useRef(1529);
  const [events,setEvents]=React.useState(()=>PR_FEED.concat(PR_FEED.slice(0,1)).map((e,i)=>({...e,id:1528-i,state:'pendente',fresh:false})));

  React.useEffect(()=>{
    const id=setInterval(()=>{
      setEvents(prev=>{
        const src=PR_FEED[nextId.current%PR_FEED.length];
        return [{...src,id:nextId.current++,state:'pendente',fresh:true},...prev].slice(0,6);
      });
    },6000);
    return ()=>clearInterval(id);
  },[]);

  const visible=events.slice(0,CAP);
  const treat=(id)=>setEvents(prev=>prev.map(e=>e.id!==id?e:{...e,state:e.state==='pendente'?'tratando':'verificado'}));

  return (
    <div className="pr-view">
      <div className="acs-scroll-x" style={{display:'flex',gap:8,marginBottom:14}}>
        {['Todos os clientes','Pendentes (fila)','Todos os tipos','Este mês'].map((f,i)=>(
          <span key={f} style={{fontSize:11,color:i===1?'var(--rcem-green-600)':P.sub,border:`1px solid ${i===1?'var(--border-accent-strong)':P.line}`,background:i===1?'var(--surface-accent-tint)':'transparent',borderRadius:'var(--radius-pill)',padding:'6px 12px',whiteSpace:'nowrap',flexShrink:0,fontWeight:i===1?700:500}}>{f}</span>
        ))}
      </div>
      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(190px,1fr))',gap:10}}>
        {visible.map(e=>{
          const st=e.state==='pendente'?{label:'Pendente',tone:'warn'}:e.state==='tratando'?{label:'Em tratamento',tone:'info'}:{label:'Verificado',tone:'ok'};
          return (
            <div key={e.id} style={{border:`1px solid ${P.line}`,borderTop:`3px solid ${PR_TONES[e.tone].bar}`,borderRadius:'var(--radius-md)',padding:12,display:'flex',flexDirection:'column',gap:8,background:P.card,animation:e.fresh?'pr-card-in .5s var(--ease-out-expo) both':'none'}}>
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',gap:6}}>
                <div style={{minWidth:0}}>
                  <div style={{fontSize:12,fontWeight:800,color:P.ink,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{e.client}</div>
                  <div style={{fontSize:9.5,color:P.sub}}>{e.cam}</div>
                </div>
                <PrTag tone={st.tone}>{st.label}</PrTag>
              </div>
              <div style={{height:52,borderRadius:'var(--radius-sm)',background:e.tone==='bad'?'rgba(229,80,57,.08)':'var(--surface-accent-tint)',display:'flex',alignItems:'center',justifyContent:'center',color:PR_TONES[e.tone].fg}}>
                <PrIcon name={e.tone==='bad'?'refresh':'camera'} size={22} strokeWidth={1.8}/>
              </div>
              <div style={{display:'flex',justifyContent:'space-between',fontSize:9.5,color:P.sub,fontFamily:'var(--font-mono)'}}><span>{e.type}</span><span>#{e.id}</span></div>
              {e.state!=='verificado'?(
                <button type="button" onClick={()=>treat(e.id)} style={{border:'none',cursor:'pointer',textAlign:'center',fontSize:11,fontWeight:700,color:'#fff',background:e.state==='pendente'?'var(--surface-dark)':'var(--gradient-brand)',borderRadius:'var(--radius-pill)',padding:'7px 0',fontFamily:'var(--font-display)'}}>
                  {e.state==='pendente'?'Tratar':'Concluir tratamento'}
                </button>
              ):(
                <span style={{textAlign:'center',fontSize:11,fontWeight:700,color:'var(--rcem-green-600)',background:'var(--surface-accent-tint)',borderRadius:'var(--radius-pill)',padding:'7px 0'}}>Tratado agora</span>
              )}
            </div>
          );
        })}
      </div>
      <div style={{marginTop:12,fontSize:10.5,color:P.sub,display:'flex',alignItems:'center',gap:6}}>
        <span style={{width:7,height:7,borderRadius:'50%',background:'var(--rcem-green-600)',animation:'acs-blink 1.6s infinite'}}></span>
        Fila simulada: um evento novo entra a cada poucos segundos, como na Central real via WebSocket. Clique em Tratar.
      </div>
    </div>
  );
}

/* --- View: Monitor -------------------------------------------------------- */
function PrViewMonitor({P}){
  const kpis=[['1.284','Alertas no período','camera'],['96%','Câmeras online','check'],['37','Chamados abertos','fileText'],['6','Operadores logados','userCheck']];
  return (
    <div className="pr-view" style={{display:'flex',flexDirection:'column',gap:12}}>
      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(140px,1fr))',gap:10}}>
        {kpis.map(([v,l,ic])=>(
          <div key={l} style={{border:`1px solid ${P.line}`,borderRadius:'var(--radius-md)',padding:'14px 14px 12px',background:P.card}}>
            <PrIcon name={ic} size={16} color="var(--rcem-green-600)"/>
            <div style={{fontSize:24,fontWeight:800,color:P.ink,marginTop:8,letterSpacing:'-.5px'}}>{v}</div>
            <div style={{fontSize:10.5,color:P.sub}}>{l}</div>
          </div>
        ))}
      </div>
      <div style={{border:`1px solid ${P.line}`,borderRadius:'var(--radius-md)',padding:14,background:P.card}}>
        <div style={{display:'flex',justifyContent:'space-between',fontSize:11,color:P.sub,marginBottom:8}}><span style={{fontWeight:700,color:P.ink}}>Uso de disco · retenção</span><span>612 GB de 1 TB</span></div>
        <div style={{height:8,borderRadius:'var(--radius-pill)',background:P.chip,overflow:'hidden'}}>
          <div style={{width:'61%',height:'100%',borderRadius:'var(--radius-pill)',background:'var(--gradient-brand)'}}></div>
        </div>
        <div style={{fontSize:10,color:P.sub,marginTop:8}}>Purge automático diário às 03:30 conforme a política de retenção.</div>
      </div>
    </div>
  );
}

/* --- View: Chamados ------------------------------------------------------- */
function PrViewChamados({P}){
  const steps=[
    ['22:14','Evento #1519 criado','Detecção de pessoa · CAM 04 · Solar Horizonte'],
    ['22:15','Travado por Operador 2','Tratamento iniciado 68s após o alerta'],
    ['22:18','Classificado: alerta real','Chamado CH-0482 aberto automaticamente'],
    ['22:19','Cliente avisado no WhatsApp','Mensagem padrão com link seguro da imagem'],
    ['23:02','Resolvido','Vigilante no local · evidência anexada'],
  ];
  return (
    <div className="pr-view" style={{border:`1px solid ${P.line}`,borderRadius:'var(--radius-md)',background:P.card,padding:'16px 18px'}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:14}}>
        <div>
          <div style={{fontSize:13,fontWeight:800,color:P.ink}}>Chamado CH-0482</div>
          <div style={{fontSize:10.5,color:P.sub,fontFamily:'var(--font-mono)'}}>origem: Evento #1519</div>
        </div>
        <PrTag tone="ok">Resolvido</PrTag>
      </div>
      <div style={{display:'flex',flexDirection:'column'}}>
        {steps.map(([h,t,d],i)=>(
          <div key={t} style={{display:'flex',gap:12}}>
            <div style={{display:'flex',flexDirection:'column',alignItems:'center'}}>
              <span style={{width:9,height:9,borderRadius:'50%',flexShrink:0,marginTop:4,background:i===steps.length-1?'var(--rcem-green-600)':P.chip,border:`2px solid ${i===steps.length-1?'var(--rcem-green-600)':P.line}`,boxSizing:'border-box'}}></span>
              {i<steps.length-1&&<span style={{width:1,flex:1,background:P.line,margin:'2px 0'}}></span>}
            </div>
            <div style={{paddingBottom:i<steps.length-1?14:0}}>
              <div style={{fontSize:11.5,fontWeight:700,color:P.ink}}><span style={{fontFamily:'var(--font-mono)',color:P.sub,fontWeight:500,marginRight:8}}>{h}</span>{t}</div>
              <div style={{fontSize:10.5,color:P.sub}}>{d}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* --- View: Gestão de Falhas ------------------------------------------------ */
function PrViewFalhas({P}){
  const [rows,setRows]=React.useState([
    {host:'VMS-02 · UFV Boa Vista',sev:'Alta',dur:'00:42',state:'acompanhando'},
    {host:'CAM 07 · PCH Rio Claro',sev:'Média',dur:'01:15',state:'aguardando cliente'},
    {host:'Link · Eólica Vento Sul',sev:'Alta',dur:'00:08',state:'restabelecida'},
  ]);
  const close=(i)=>setRows(prev=>prev.map((r,j)=>j===i?{...r,state:'validada'}:r));
  return (
    <div className="pr-view" style={{display:'flex',flexDirection:'column',gap:8}}>
      {rows.map((r,i)=>(
        <div key={r.host} style={{display:'flex',alignItems:'center',gap:12,border:`1px solid ${P.line}`,borderRadius:'var(--radius-md)',background:P.card,padding:'12px 14px',flexWrap:'wrap'}}>
          <PrTag tone={r.sev==='Alta'?'bad':'warn'}>{r.sev}</PrTag>
          <div style={{flex:1,minWidth:140}}>
            <div style={{fontSize:12,fontWeight:700,color:P.ink}}>{r.host}</div>
            <div style={{fontSize:10,color:P.sub,fontFamily:'var(--font-mono)'}}>duração {r.dur}</div>
          </div>
          <PrTag tone={r.state==='validada'||r.state==='restabelecida'?'ok':'info'}>{r.state}</PrTag>
          {r.state==='restabelecida'&&(
            <button type="button" onClick={()=>close(i)} style={{border:'none',cursor:'pointer',fontSize:10.5,fontWeight:700,color:'#fff',background:'var(--surface-dark)',borderRadius:'var(--radius-pill)',padding:'6px 14px',fontFamily:'var(--font-display)'}}>Validar</button>
          )}
        </div>
      ))}
      <div style={{fontSize:10.5,color:P.sub,marginTop:4}}>Desconexão segue o fluxo guiado até a validação — e pode abrir chamado técnico automático.</div>
    </div>
  );
}

/* --- View: Checklist -------------------------------------------------------- */
function PrViewChecklist({P}){
  const [done,setDone]=React.useState([true,false,false]);
  const [sec,setSec]=React.useState(154);
  React.useEffect(()=>{const id=setInterval(()=>setSec(s=>s+1),1000);return ()=>clearInterval(id)},[]);
  const items=['Verificar gravação das câmeras críticas','Testar interfones e ramais das portarias','Conferir portões e AMT armado'];
  const allDone=done.every(Boolean);
  const fmt=`${String(Math.floor(sec/60)).padStart(2,'0')}:${String(sec%60).padStart(2,'0')}`;
  return (
    <div className="pr-view" style={{border:`1px solid ${P.line}`,borderLeft:'4px solid var(--rcem-green-600)',borderRadius:'var(--radius-md)',background:P.card,padding:'16px 18px',maxWidth:520}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',gap:10,marginBottom:12,flexWrap:'wrap'}}>
        <div>
          <div style={{fontSize:13,fontWeight:800,color:P.ink}}>Checklist oficial · turno noite</div>
          <div style={{fontSize:10.5,color:P.sub}}>Recorrência diária · agendado para 22:00</div>
        </div>
        <PrTag tone={allDone?'ok':'warn'} mono>SLA {fmt}</PrTag>
      </div>
      <div style={{display:'flex',flexDirection:'column',gap:6}}>
        {items.map((q,i)=>(
          <button key={q} type="button" onClick={()=>setDone(d=>d.map((v,j)=>j===i?!v:v))}
            style={{display:'flex',alignItems:'center',gap:10,textAlign:'left',border:`1px solid ${done[i]?'var(--border-accent-strong)':P.line}`,background:done[i]?'var(--surface-accent-tint)':'transparent',borderRadius:'var(--radius-sm)',padding:'10px 12px',cursor:'pointer',fontFamily:'var(--font-display)'}}>
            <span style={{width:18,height:18,flexShrink:0,borderRadius:6,display:'flex',alignItems:'center',justifyContent:'center',background:done[i]?'var(--gradient-brand)':P.chip,color:'#fff'}}>{done[i]&&<PrIcon name="check" size={11} strokeWidth={3}/>}</span>
            <span style={{fontSize:11.5,color:P.ink,fontWeight:600}}>{q}</span>
          </button>
        ))}
      </div>
      <div style={{display:'flex',alignItems:'center',gap:8,marginTop:12,flexWrap:'wrap'}}>
        <span style={{display:'inline-flex',alignItems:'center',gap:6,fontSize:10.5,fontWeight:700,color:P.sub,border:`1px dashed ${P.line}`,borderRadius:'var(--radius-pill)',padding:'6px 12px'}}><PrIcon name="camera" size={13}/>Print obrigatório anexado</span>
        <span style={{fontSize:10.5,fontWeight:700,color:allDone?'var(--rcem-green-600)':P.sub}}>{allDone?'Pronto para entregar dentro do SLA':'Marque os itens para concluir'}</span>
      </div>
    </div>
  );
}

/* --- View: Passagem de Posto ----------------------------------------------- */
function PrViewPassagem({P}){
  const [acks,setAcks]=React.useState(['Operador 1 · 06:02']);
  return (
    <div className="pr-view" style={{border:`1px solid ${P.line}`,borderRadius:'var(--radius-md)',background:P.card,padding:'16px 18px',maxWidth:560}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',gap:10,marginBottom:10,flexWrap:'wrap'}}>
        <div style={{fontSize:13,fontWeight:800,color:P.ink}}>Passagem · turno 18h → 06h</div>
        <PrTag tone="info">Aguardando ciência</PrTag>
      </div>
      <p style={{margin:'0 0 10px',fontSize:11.5,lineHeight:1.6,color:P.ink}}>
        UFV Boa Vista com CAM 07 intermitente desde 23:40 — chamado CH-0483 aberto, fabricante acionado. Cliente Solar Horizonte pediu retorno após às 08:00. Demais unidades sem pendência.
      </p>
      <div style={{display:'flex',gap:6,flexWrap:'wrap',marginBottom:12}}>
        {['cam-07','boa-vista','retorno-cliente'].map(k=>(<span key={k} style={{fontSize:9.5,fontFamily:'var(--font-mono)',color:P.sub,background:P.chip,borderRadius:'var(--radius-pill)',padding:'3px 9px'}}>{k}</span>))}
      </div>
      <div style={{borderTop:`1px solid ${P.line}`,paddingTop:10,display:'flex',flexDirection:'column',gap:6}}>
        {acks.map(a=>(
          <div key={a} style={{display:'flex',alignItems:'center',gap:8,fontSize:10.5,color:P.sub}}>
            <PrIcon name="check" size={13} color="var(--rcem-green-600)"/>Ciência registrada · {a}
          </div>
        ))}
        {acks.length<2&&(
          <button type="button" onClick={()=>setAcks(a=>[...a,'Você · agora'])} style={{alignSelf:'flex-start',border:'none',cursor:'pointer',fontSize:10.5,fontWeight:700,color:'#fff',background:'var(--surface-dark)',borderRadius:'var(--radius-pill)',padding:'7px 16px',fontFamily:'var(--font-display)'}}>Dar ciência</button>
        )}
      </div>
    </div>
  );
}

/* --- View: WhatsApp ---------------------------------------------------------- */
function PrViewWhatsapp({P}){
  const isMobile=useIsMobile();
  const [msgs,setMsgs]=React.useState([
    {out:true,txt:'Alerta: pessoa detectada na CAM 04 (Portão leste) da usina Solar Horizonte. Operador 2 acompanhando. Evento #1519. Imagem: acessar.link/e1519'},
    {out:false,txt:'Recebido, equipe local a caminho.'},
  ]);
  const sendResolved=()=>setMsgs(m=>m.length>=4?m:[...m,{out:true,txt:'Chamado CH-0482 resolvido: vigilante confirmou equipe autorizada no local. Evento encerrado às 23:02.'}]);
  return (
    <div className="pr-view" style={{display:'flex',border:`1px solid ${P.line}`,borderRadius:'var(--radius-md)',background:P.card,overflow:'hidden',minHeight:250}}>
      {/* No mobile a lista de conversas sai: a thread precisa da largura toda. */}
      <aside style={{width:170,flexShrink:0,borderRight:`1px solid ${P.line}`,padding:'12px 8px',display:isMobile?'none':'flex',flexDirection:'column',gap:2,background:P.side}} className="pr-wa-list">
        <div style={{fontSize:10,fontWeight:800,letterSpacing:'1px',textTransform:'uppercase',color:P.sub,padding:'0 8px 8px'}}>Conversas</div>
        {[['Solar Horizonte',true],['Grupo · Equipe Usina Norte',false],['PCH Rio Claro',false]].map(([n,active])=>(
          <div key={n} style={{display:'flex',alignItems:'center',gap:8,padding:'8px 8px',borderRadius:'var(--radius-sm)',background:active?'var(--surface-accent-tint)':'transparent'}}>
            <span style={{width:24,height:24,borderRadius:'50%',flexShrink:0,background:'var(--gradient-brand)',color:'#fff',display:'flex',alignItems:'center',justifyContent:'center',fontSize:10,fontWeight:800}}>{n[0]}</span>
            <span style={{fontSize:10.5,fontWeight:active?700:500,color:P.ink,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{n}</span>
          </div>
        ))}
      </aside>
      <div style={{flex:1,display:'flex',flexDirection:'column',minWidth:0}}>
        <div style={{padding:'10px 14px',borderBottom:`1px solid ${P.line}`,display:'flex',justifyContent:'space-between',alignItems:'center'}}>
          <span style={{fontSize:11.5,fontWeight:800,color:P.ink}}>Solar Horizonte</span>
          <span style={{display:'inline-flex',alignItems:'center',gap:5,fontSize:9.5,fontWeight:700,color:'var(--rcem-green-600)'}}><span style={{width:6,height:6,borderRadius:'50%',background:'var(--rcem-green-600)'}}></span>Conectado</span>
        </div>
        <div style={{flex:1,display:'flex',flexDirection:'column',gap:8,padding:14,overflowY:'auto'}}>
          {msgs.map((m,i)=>(
            <div key={i} style={{alignSelf:m.out?'flex-end':'flex-start',maxWidth:'82%',fontSize:10.5,lineHeight:1.5,padding:'8px 11px',borderRadius:14,borderBottomRightRadius:m.out?4:14,borderBottomLeftRadius:m.out?14:4,background:m.out?'var(--gradient-brand)':P.chip,color:m.out?'#fff':P.ink,animation:'pr-bubble-in .35s var(--ease-out-expo) both'}}>
              {m.txt}
              {m.out&&<span style={{display:'block',textAlign:'right',fontSize:8.5,opacity:.75,marginTop:3}}>entregue</span>}
            </div>
          ))}
        </div>
        <div style={{padding:'10px 14px',borderTop:`1px solid ${P.line}`,display:'flex',gap:8}}>
          <span style={{flex:1,fontSize:10.5,color:P.sub,border:`1px solid ${P.line}`,borderRadius:'var(--radius-pill)',padding:'8px 14px'}}>Escreva uma mensagem…</span>
          <button type="button" onClick={sendResolved} style={{border:'none',cursor:'pointer',fontSize:10.5,fontWeight:700,color:'#fff',background:'var(--surface-dark)',borderRadius:'var(--radius-pill)',padding:'8px 14px',whiteSpace:'nowrap',fontFamily:'var(--font-display)'}}>Enviar resolução</button>
        </div>
      </div>
    </div>
  );
}

/* --- View: Relatórios -------------------------------------------------------- */
function PrViewRelatorios({P}){
  const bars=[38,52,44,61,58,73,49,66,80,57,62,71];
  const kpis=[['1.284','Total de eventos'],['1.211','Eventos resolvidos'],['1m 42s','Tempo médio de resposta']];
  return (
    <div className="pr-view" style={{display:'flex',flexDirection:'column',gap:12}}>
      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(150px,1fr))',gap:10}}>
        {kpis.map(([v,l])=>(
          <div key={l} style={{border:`1px solid ${P.line}`,borderRadius:'var(--radius-md)',padding:'12px 14px',background:P.card}}>
            <div style={{fontSize:22,fontWeight:800,color:P.ink,letterSpacing:'-.5px'}}>{v}</div>
            <div style={{fontSize:10,color:P.sub}}>{l}</div>
          </div>
        ))}
      </div>
      <div style={{border:`1px solid ${P.line}`,borderRadius:'var(--radius-md)',padding:'14px 16px',background:P.card}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:12,flexWrap:'wrap',gap:8}}>
          <span style={{fontSize:11,fontWeight:700,color:P.ink}}>Detecções por dia · este mês</span>
          <div style={{display:'flex',gap:6}}>
            {['CSV','PDF'].map(f=>(<span key={f} style={{fontSize:9.5,fontWeight:700,color:P.sub,border:`1px solid ${P.line}`,borderRadius:'var(--radius-pill)',padding:'4px 11px'}}>Exportar {f}</span>))}
          </div>
        </div>
        <div style={{display:'flex',alignItems:'flex-end',gap:6,height:90}}>
          {bars.map((h,i)=>(
            <div key={i} style={{flex:1,height:`${h}%`,borderRadius:'4px 4px 0 0',background:i===8?'var(--gradient-brand)':P.chip,transformOrigin:'bottom',animation:`pr-bar-grow .6s var(--ease-out-expo) ${i*40}ms both`}}></div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* --- View: Operadores --------------------------------------------------------- */
function PrViewOperadores({P}){
  const ops=[['Operador 1','ativo','—'],['Operador 2','ativo','—'],['Operador 3','pausado','almoço'],['Operador 4','ocioso','sem atividade 6 min'],['Operador 5','ativo','—'],['Operador 6','deslogado','turno encerrado']];
  const dot={ativo:'var(--rcem-green-600)',pausado:'#e8a013',ocioso:'#e55039',deslogado:'#9aa4a5'};
  return (
    <div className="pr-view" style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(160px,1fr))',gap:10}}>
      {ops.map(([n,s,m])=>(
        <div key={n} style={{border:`1px solid ${P.line}`,borderRadius:'var(--radius-md)',padding:'12px 14px',background:P.card,display:'flex',flexDirection:'column',gap:6}}>
          <div style={{display:'flex',alignItems:'center',gap:8}}>
            <span style={{width:26,height:26,borderRadius:'50%',flexShrink:0,background:s==='deslogado'?P.chip:'var(--gradient-brand)',color:s==='deslogado'?P.sub:'#fff',display:'flex',alignItems:'center',justifyContent:'center',fontSize:9.5,fontWeight:800}}>{n.split(' ')[1]}</span>
            <span style={{fontSize:11.5,fontWeight:700,color:P.ink}}>{n}</span>
          </div>
          <div style={{display:'flex',alignItems:'center',gap:6,fontSize:10,color:P.sub}}>
            <span style={{width:7,height:7,borderRadius:'50%',background:dot[s],animation:s==='ativo'?'acs-blink 1.6s infinite':'none'}}></span>
            <span style={{fontWeight:700,textTransform:'capitalize'}}>{s}</span>{m!=='—'&&<span>· {m}</span>}
          </div>
        </div>
      ))}
    </div>
  );
}

/* --- View: CRM · Clientes ---------------------------------------------------- */
function PrViewCrm({P}){
  const [muted,setMuted]=React.useState(false);
  const clients=[
    {name:'Solar Horizonte',cams:'18/18 online',tone:'ok',wa:true},
    {name:'Eólica Vento Sul',cams:'11/12 online',tone:'warn',wa:true},
    {name:'PCH Rio Claro',cams:'6/6 online',tone:'ok',wa:false},
  ];
  return (
    <div className="pr-view" style={{display:'flex',flexDirection:'column',gap:8}}>
      {clients.map((c,i)=>(
        <div key={c.name} style={{display:'flex',alignItems:'center',gap:12,border:`1px solid ${P.line}`,borderRadius:'var(--radius-md)',background:P.card,padding:'12px 14px',flexWrap:'wrap'}}>
          <span style={{width:30,height:30,borderRadius:'50%',flexShrink:0,background:'var(--gradient-brand)',color:'#fff',display:'flex',alignItems:'center',justifyContent:'center',fontSize:11,fontWeight:800}}>{c.name[0]}</span>
          <div style={{flex:1,minWidth:130}}>
            <div style={{fontSize:12,fontWeight:800,color:P.ink}}>{c.name}</div>
            <div style={{fontSize:10,color:P.sub}}>Processos do cliente · Câmeras · Contatos</div>
          </div>
          <PrTag tone={c.tone}>{c.cams}</PrTag>
          {c.wa&&<PrTag tone="info">WhatsApp configurado</PrTag>}
          {i===0&&(
            <button type="button" onClick={()=>setMuted(m=>!m)}
              style={{border:`1px solid ${muted?'var(--border-accent-strong)':P.line}`,cursor:'pointer',fontSize:10,fontWeight:700,color:muted?'var(--rcem-green-600)':P.sub,background:muted?'var(--surface-accent-tint)':'transparent',borderRadius:'var(--radius-pill)',padding:'6px 12px',fontFamily:'var(--font-display)'}}>
              {muted?'Silenciada por 60 min':'Silenciar usina'}
            </button>
          )}
        </div>
      ))}
      <div style={{fontSize:10.5,color:P.sub,marginTop:4}}>Cliente confirmou atividade no local? Silencie a usina pelo tempo combinado — a fila para de receber, o registro fica.</div>
    </div>
  );
}

/* --- View: Unidades ------------------------------------------------------------ */
function PrViewUnidades({P}){
  return (
    <div className="pr-view" style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(210px,1fr))',gap:10}}>
      {[
        {name:'UFV Boa Vista',sector:'Solar',info:[['Responsável','Eng. de O&M local'],['Ramal','1042 · portaria'],['Acesso','Estrada vicinal km 4']]},
        {name:'Parque Vento Sul',sector:'Eólica',info:[['Responsável','Supervisor de turbinas'],['Ramal','2010 · guarita'],['Acesso','Portão norte, 24h']]},
        {name:'CD Sorocaba',sector:'Comercial / Industrial',info:[['Responsável','Facilities'],['Ramal','3301 · recepção'],['Acesso','Doca 2, com escolta']]},
      ].map(u=>(
        <div key={u.name} style={{border:`1px solid ${P.line}`,borderRadius:'var(--radius-md)',background:P.card,padding:'14px 14px',display:'flex',flexDirection:'column',gap:8}}>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',gap:8}}>
            <span style={{fontSize:12,fontWeight:800,color:P.ink}}>{u.name}</span>
            <PrTag tone="info">{u.sector}</PrTag>
          </div>
          {u.info.map(([k,v])=>(
            <div key={k} style={{display:'flex',justifyContent:'space-between',gap:8,fontSize:10}}>
              <span style={{color:P.sub}}>{k}</span><span style={{fontWeight:700,color:P.ink,textAlign:'right'}}>{v}</span>
            </div>
          ))}
          <span style={{display:'inline-flex',alignItems:'center',gap:6,alignSelf:'flex-start',fontSize:10,fontWeight:700,color:'var(--rcem-green-600)',marginTop:2}}><PrIcon name="arrowUpRight" size={12}/>Abrir no mapa (GPS)</span>
        </div>
      ))}
    </div>
  );
}

/* --- View: Inventário ------------------------------------------------------------ */
function PrViewInventario({P}){
  const assets=[
    ['camera','Câmera de portão','CAM-P01 · Solar Horizonte','2 anexos'],
    ['phone','Interfone','Ramal 1042 · UFV Boa Vista','manual PDF'],
    ['shieldCheck','Central de alarme','AMT-03 · CD Sorocaba','esquema anexo'],
    ['terminal','Acesso remoto','Estação NOC-2 · PCH Rio Claro','credencial via cofre'],
  ];
  return (
    <div className="pr-view" style={{display:'flex',flexDirection:'column',gap:8}}>
      {assets.map(([ic,type,det,att])=>(
        <div key={det} style={{display:'flex',alignItems:'center',gap:12,border:`1px solid ${P.line}`,borderRadius:'var(--radius-md)',background:P.card,padding:'11px 14px'}}>
          <span style={{width:32,height:32,borderRadius:9,flexShrink:0,background:'var(--surface-accent-tint)',color:'var(--rcem-green-600)',display:'flex',alignItems:'center',justifyContent:'center'}}><PrIcon name={ic} size={15}/></span>
          <div style={{flex:1,minWidth:0}}>
            <div style={{fontSize:11.5,fontWeight:800,color:P.ink}}>{type}</div>
            <div style={{fontSize:10,color:P.sub,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{det}</div>
          </div>
          <span style={{fontSize:9.5,fontWeight:700,color:P.sub,border:`1px dashed ${P.line}`,borderRadius:'var(--radius-pill)',padding:'4px 10px',whiteSpace:'nowrap'}}>{att}</span>
        </div>
      ))}
    </div>
  );
}

/* --- View: Documentação ------------------------------------------------------------ */
function PrViewDocumentacao({P}){
  return (
    <div className="pr-view" style={{display:'flex',flexDirection:'column',gap:10}}>
      {[
        ['fileText','Procedimentos','Invasão de perímetro, queda de energia, acionamento de vigilante — passo a passo por cenário.'],
        ['fileCheck','Manual operacional','O manual da central, com anexos servidos por rota autenticada.'],
        ['phone','Diretório de contatos','Quem acionar, em que ordem, com telefone e horário de cada contato.'],
      ].map(([ic,t,d])=>(
        <div key={t} style={{display:'flex',gap:12,border:`1px solid ${P.line}`,borderRadius:'var(--radius-md)',background:P.card,padding:'13px 14px'}}>
          <span style={{width:32,height:32,borderRadius:9,flexShrink:0,background:'var(--surface-accent-tint)',color:'var(--rcem-green-600)',display:'flex',alignItems:'center',justifyContent:'center'}}><PrIcon name={ic} size={15}/></span>
          <div>
            <div style={{fontSize:11.5,fontWeight:800,color:P.ink}}>{t}</div>
            <div style={{fontSize:10.5,lineHeight:1.5,color:P.sub}}>{d}</div>
          </div>
        </div>
      ))}
      <div style={{display:'flex',gap:6,flexWrap:'wrap'}}>
        {['VMS','Alarme AMT','Acesso remoto','Controle de portaria'].map(t=>(
          <span key={t} style={{fontSize:9.5,fontWeight:700,color:P.sub,background:P.chip,borderRadius:'var(--radius-pill)',padding:'4px 11px'}}>{t}</span>
        ))}
        <span style={{fontSize:9.5,color:P.sub,alignSelf:'center'}}>— ferramentas cadastradas por cliente</span>
      </div>
    </div>
  );
}

/* --- View: Checagem ------------------------------------------------------------ */
function PrViewChecagem({P}){
  const [period,setPeriod]=React.useState('noite');
  const data={
    manha:[['Câmeras offline','1 pendência','warn'],['Portões abertos','nenhuma','ok'],['AMT','armado','ok']],
    tarde:[['Câmeras offline','nenhuma','ok'],['Portões abertos','1 pendência','warn'],['Interfones','todos ok','ok']],
    noite:[['Câmeras offline','2 pendências','warn'],['Portões abertos','nenhuma','ok'],['AMT','armado','ok'],['Interfones','ramal 1042 mudo','warn']],
    madrugada:[['Câmeras offline','nenhuma','ok'],['Portões abertos','nenhuma','ok'],['AMT','armado','ok']],
  };
  return (
    <div className="pr-view" style={{display:'flex',flexDirection:'column',gap:10,maxWidth:520}}>
      <div className="acs-scroll-x" style={{display:'flex',gap:6}}>
        {['manha','tarde','noite','madrugada'].map(p=>(
          <button key={p} type="button" onClick={()=>setPeriod(p)}
            style={{border:`1px solid ${period===p?'var(--border-accent-strong)':P.line}`,cursor:'pointer',fontSize:10.5,fontWeight:period===p?700:500,color:period===p?'var(--rcem-green-600)':P.sub,background:period===p?'var(--surface-accent-tint)':'transparent',borderRadius:'var(--radius-pill)',padding:'6px 14px',fontFamily:'var(--font-display)',textTransform:'capitalize',flexShrink:0}}>
            {p==='manha'?'Manhã':p}
          </button>
        ))}
      </div>
      <div key={period} className="pr-view" style={{display:'flex',flexDirection:'column',gap:6}}>
        {data[period].map(([k,v,tone])=>(
          <div key={k} style={{display:'flex',justifyContent:'space-between',alignItems:'center',gap:10,border:`1px solid ${P.line}`,borderRadius:'var(--radius-sm)',background:P.card,padding:'10px 13px'}}>
            <span style={{fontSize:11,fontWeight:700,color:P.ink}}>{k}</span>
            <PrTag tone={tone}>{v}</PrTag>
          </div>
        ))}
      </div>
      <div style={{fontSize:10.5,color:P.sub}}>Cada pendência carrega o cliente, a usina e o status de aviso — a checagem vira registro, não conversa de corredor.</div>
    </div>
  );
}

/* --- View: SLA + Notificações (animada) ---------------------------------------- */
function PrViewSla({P}){
  const CYCLE=9; // segundos até o SLA "estourar" na simulação
  const [t,setT]=React.useState(0);
  React.useEffect(()=>{const id=setInterval(()=>setT(v=>(v+1)%(CYCLE+3)),1000);return ()=>clearInterval(id)},[]);
  const pct=Math.min(100,Math.round(t/CYCLE*100));
  const burst=t>=CYCLE;
  return (
    <div className="pr-view" style={{display:'flex',flexDirection:'column',gap:10,maxWidth:540}}>
      <div style={{border:`1px solid ${P.line}`,borderRadius:'var(--radius-md)',background:P.card,padding:'14px 16px'}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:10}}>
          <span style={{fontSize:11.5,fontWeight:800,color:P.ink}}>Política: evento sem tratamento</span>
          <PrTag tone={burst?'bad':pct>70?'warn':'ok'} mono>{burst?'SLA estourado':`${pct}% do prazo`}</PrTag>
        </div>
        <div style={{height:8,borderRadius:'var(--radius-pill)',background:P.chip,overflow:'hidden'}}>
          <div style={{width:`${pct}%`,height:'100%',borderRadius:'var(--radius-pill)',background:burst?'#e55039':pct>70?'#e8a013':'var(--gradient-brand)',transition:'width 1s linear, background .4s ease'}}></div>
        </div>
        <div style={{fontSize:10,color:P.sub,marginTop:8}}>A varredura roda a cada minuto. Aqui, acelerada para você ver o ciclo inteiro.</div>
      </div>
      {/* Sempre montado: só a opacidade muda, para a altura da view não pular. */}
      <div aria-hidden={!burst} style={{display:'flex',alignItems:'center',gap:10,border:'1px solid rgba(229,80,57,.35)',borderRadius:'var(--radius-md)',background:'rgba(229,80,57,.08)',padding:'12px 14px',opacity:burst?1:0,transform:burst?'none':'translateY(-6px)',transition:'opacity .35s var(--ease-out-expo),transform .35s var(--ease-out-expo)'}}>
        <span style={{width:32,height:32,borderRadius:9,flexShrink:0,background:'rgba(229,80,57,.15)',color:'#c43a24',display:'flex',alignItems:'center',justifyContent:'center'}}><PrIcon name="shieldCheck" size={15}/></span>
        <div>
          <div style={{fontSize:11.5,fontWeight:800,color:P.ink}}>Escalonado ao supervisor</div>
          <div style={{fontSize:10.5,color:P.sub}}>Evento #1531 passou do prazo — notificação enviada em tempo real, com registro.</div>
        </div>
      </div>
      <div style={{display:'flex',flexDirection:'column',gap:6}}>
        {[['alerta_sem_tratamento','sino + toast para o operador'],['checklist_pendente','no horário agendado'],['sla_estourado','operador e supervisor'],['chamado_aberto','para quem acompanha o cliente']].map(([k,v])=>(
          <div key={k} style={{display:'flex',justifyContent:'space-between',gap:10,fontSize:10,border:`1px solid ${P.line}`,borderRadius:'var(--radius-sm)',padding:'8px 12px',background:P.card}}>
            <span style={{fontFamily:'var(--font-mono)',color:'var(--rcem-green-600)',fontWeight:700}}>{k}</span>
            <span style={{color:P.sub,textAlign:'right'}}>{v}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* --- View: Configurações ------------------------------------------------------------ */
function PrViewConfig({P}){
  return (
    <div className="pr-view" style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(220px,1fr))',gap:10}}>
      {[
        ['userCheck','Usuários e perfis','Perfis prontos, permissões por módulo e escopo por cliente para cada operador.'],
        ['refresh','Retenção de dados','Uso de disco ao vivo, política de limpeza e purge diário automático às 03:30.'],
        ['camera','Infraestrutura','Servidores de câmera com saúde ao vivo e importação em massa por CSV, tudo-ou-nada.'],
        ['fileCheck','Webhooks','Auditoria de cada alerta recebido, com reprocesso de erros em um clique.'],
      ].map(([ic,t,d])=>(
        <div key={t} style={{border:`1px solid ${P.line}`,borderRadius:'var(--radius-md)',background:P.card,padding:'14px 14px'}}>
          <span style={{width:30,height:30,borderRadius:9,background:'var(--surface-accent-tint)',color:'var(--rcem-green-600)',display:'flex',alignItems:'center',justifyContent:'center',marginBottom:8}}><PrIcon name={ic} size={14}/></span>
          <div style={{fontSize:11.5,fontWeight:800,color:P.ink,marginBottom:4}}>{t}</div>
          <div style={{fontSize:10.5,lineHeight:1.5,color:P.sub}}>{d}</div>
        </div>
      ))}
    </div>
  );
}

const PR_VIEWS={monitor:PrViewMonitor,eventos:PrViewEventos,chamados:PrViewChamados,falhas:PrViewFalhas,checklist:PrViewChecklist,passagem:PrViewPassagem,crm:PrViewCrm,unidades:PrViewUnidades,inventario:PrViewInventario,documentacao:PrViewDocumentacao,whatsapp:PrViewWhatsapp,relatorios:PrViewRelatorios,operadores:PrViewOperadores,checagem:PrViewChecagem,sla:PrViewSla,config:PrViewConfig};

/* --- O shell -------------------------------------------------------------- */
function PrTour(){
  const isMobile=useIsMobile();
  const [active,setActive]=React.useState('eventos');
  const [dark,setDark]=React.useState(false);
  const P=prPalette(dark);
  const mod=PR_MODULES.find(m=>m.id===active);
  const View=PR_VIEWS[active];

  return (
    <section id="central" style={{boxSizing:'border-box',display:'flex',flexDirection:'column',alignItems:'center',width:'100%',padding:isMobile?'56px 20px':'90px 24px',scrollMarginTop:100,background:'var(--surface-muted)'}}>
      <div className="reveal" style={{display:'flex',flexDirection:'column',alignItems:'center',textAlign:'center',maxWidth:720,marginBottom:isMobile?28:44}}>
        <PrEyebrow tone="darkCaps" style={{marginBottom:16}}>A plataforma · módulo a módulo</PrEyebrow>
        <h2 style={{margin:'0 0 12px',fontSize:'var(--text-h2)',fontWeight:'var(--fw-extrabold)',lineHeight:'var(--leading-display)',letterSpacing:'var(--track-tight-lg)',color:'var(--text-heading)'}}>Clique e conheça <GradientTextSafe>cada função</GradientTextSafe></h2>
        <p style={{margin:0,maxWidth:600,fontSize:'var(--text-lead)',lineHeight:'var(--leading-relaxed)',color:'var(--text-heading)'}}>Isto não é um print: é uma <strong>simulação navegável</strong> da Central. Troque de módulo no menu, trate um evento, dê ciência numa passagem — do jeito que o operador faz.</p>
      </div>

      <div className="reveal-zoom" style={{width:'100%',maxWidth:1040,borderRadius:'var(--radius-panel)',overflow:'hidden',background:P.shell,boxShadow:'var(--shadow-table)',border:`1px solid ${dark?'rgba(255,255,255,.1)':'var(--border-default)'}`,display:'flex',flexDirection:'column',minHeight:isMobile?0:520,transition:'background .3s ease'}}>
        {/* Header do app */}
        <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',gap:10,padding:isMobile?'12px 14px':'13px 20px',borderBottom:`1px solid ${P.line}`}}>
          <div style={{display:'flex',alignItems:'center',gap:10,minWidth:0}}>
            <span style={{width:26,height:26,borderRadius:8,background:'var(--gradient-brand)',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}><PrIcon name="camera" size={14} color="#fff"/></span>
            <div style={{minWidth:0}}>
              <div style={{fontSize:11,fontWeight:800,letterSpacing:'1.2px',color:P.ink,whiteSpace:'nowrap'}}>CONNECT CENTRAL</div>
              <div style={{fontSize:8.5,letterSpacing:'1px',color:P.sub}}>{mod.group.toUpperCase()} · {mod.label.toUpperCase()}</div>
            </div>
          </div>
          <div style={{display:'flex',alignItems:'center',gap:isMobile?8:12,flexShrink:0}}>
            {!isMobile&&<span style={{fontSize:12,fontWeight:700,color:P.ink}}><PrClock/></span>}
            <button type="button" onClick={()=>setDark(d=>!d)} aria-pressed={dark}
              style={{display:'flex',alignItems:'center',gap:6,border:`1px solid ${P.line}`,background:'transparent',color:P.sub,cursor:'pointer',fontSize:9.5,fontWeight:700,borderRadius:'var(--radius-pill)',padding:'5px 12px',fontFamily:'var(--font-display)'}}>
              <span style={{width:6,height:6,borderRadius:'50%',background:dark?'#f3f5f8':'var(--rcem-ink-900)'}}></span>
              {dark?'Tema escuro':'Tema claro'}
            </button>
            <span style={{display:'inline-flex',alignItems:'center',gap:6,fontSize:10.5,fontWeight:700,color:'var(--rcem-green-600)',background:'var(--surface-accent-tint)',borderRadius:'var(--radius-pill)',padding:'5px 12px'}}><span style={{width:6,height:6,borderRadius:'50%',background:'var(--rcem-green-600)'}}></span>Ativo</span>
          </div>
        </div>

        <div style={{display:'flex',flex:1,minHeight:0}}>
          {/* Menu lateral (desktop) */}
          {!isMobile&&(
            <aside style={{width:196,flexShrink:0,borderRight:`1px solid ${P.line}`,padding:'14px 10px',display:'flex',flexDirection:'column',gap:2,background:P.side,overflowY:'auto'}}>
              {PR_GROUPS.map(g=>(
                <React.Fragment key={g}>
                  <div style={{fontSize:8.5,fontWeight:800,letterSpacing:'1.2px',textTransform:'uppercase',color:P.sub,padding:'10px 10px 4px'}}>{g}</div>
                  {PR_MODULES.filter(m=>m.group===g).map(m=>(
                    <button key={m.id} type="button" onClick={()=>setActive(m.id)}
                      style={{display:'flex',alignItems:'center',gap:10,width:'100%',textAlign:'left',border:'none',cursor:'pointer',padding:'8px 10px',borderRadius:'var(--radius-sm)',background:active===m.id?'var(--surface-accent-tint)':'transparent',color:active===m.id?'var(--rcem-green-600)':P.ink,fontFamily:'var(--font-display)',transition:'background .15s ease'}}>
                      <PrIcon name={m.icon} size={15}/><span style={{fontSize:12,fontWeight:active===m.id?700:500}}>{m.label}</span>
                    </button>
                  ))}
                </React.Fragment>
              ))}
              <div style={{marginTop:'auto',display:'flex',alignItems:'center',gap:6,padding:'10px 10px 2px',fontSize:10,color:P.sub}}>
                <span style={{width:7,height:7,borderRadius:'50%',background:'var(--rcem-green-600)',animation:'acs-blink 1.6s infinite'}}></span>Operação ativa · v2.25
              </div>
            </aside>
          )}

          <div style={{flex:1,display:'flex',flexDirection:'column',minWidth:0}}>
            {/* Menu horizontal (mobile) */}
            {isMobile&&(
              <div className="acs-scroll-x" style={{display:'flex',gap:6,padding:'12px 14px 0'}}>
                {PR_MODULES.map(m=>(
                  <button key={m.id} type="button" onClick={()=>setActive(m.id)}
                    style={{display:'inline-flex',alignItems:'center',gap:6,flexShrink:0,border:`1px solid ${active===m.id?'var(--border-accent-strong)':P.line}`,cursor:'pointer',padding:'7px 12px',borderRadius:'var(--radius-pill)',background:active===m.id?'var(--surface-accent-tint)':'transparent',color:active===m.id?'var(--rcem-green-600)':P.ink,fontFamily:'var(--font-display)',fontSize:11,fontWeight:active===m.id?700:500,whiteSpace:'nowrap'}}>
                    <PrIcon name={m.icon} size={13}/>{m.label}
                  </button>
                ))}
              </div>
            )}
            <div key={active} style={{flex:1,padding:isMobile?14:20,overflowY:'auto'}}>
              <View P={P}/>
            </div>
          </div>
        </div>
      </div>

      {/* Ficha do módulo ativo */}
      <div key={`info-${active}`} className="pr-view" style={{width:'100%',maxWidth:1040,marginTop:16,display:'grid',gridTemplateColumns:isMobile?'1fr':'1.1fr 1fr',gap:isMobile?12:16,alignItems:'start'}}>
        <div style={{padding:'22px 24px',borderRadius:'var(--radius-xl)',background:'var(--surface-card)',border:'1px solid var(--border-subtle)',boxShadow:'var(--shadow-hairline)'}}>
          <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:8}}>
            <span style={{width:34,height:34,borderRadius:10,background:'var(--surface-accent-soft)',color:'var(--rcem-green-600)',display:'flex',alignItems:'center',justifyContent:'center'}}><PrIcon name={mod.icon} size={17}/></span>
            <div>
              <div style={{fontSize:10,fontWeight:800,letterSpacing:'1px',textTransform:'uppercase',color:'var(--rcem-grey-500)'}}>{mod.group} · {mod.label}</div>
              <div style={{fontSize:16.5,fontWeight:800,letterSpacing:'-.3px',color:'var(--rcem-ink-900)'}}>{mod.title}</div>
            </div>
          </div>
          <p style={{margin:0,fontSize:13,lineHeight:1.6,color:'var(--rcem-grey-500)'}}>{mod.desc}</p>
        </div>
        <div style={{padding:'22px 24px',borderRadius:'var(--radius-xl)',background:'var(--surface-card)',border:'1px solid var(--border-subtle)',boxShadow:'var(--shadow-hairline)',display:'flex',flexDirection:'column',gap:9}}>
          {mod.bullets.map(b=>(
            <div key={b} style={{display:'flex',alignItems:'flex-start',gap:9}}>
              <span style={{color:'var(--rcem-green-600)',flexShrink:0,marginTop:1}}><PrIcon name="check" size={14} strokeWidth={2.6}/></span>
              <span style={{fontSize:12.5,lineHeight:1.5,color:'var(--rcem-ink-900)'}}>{b}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* GradientText do bundle pode não existir em builds antigos do DS. */
function GradientTextSafe({children}){
  const GT=PR2.GradientText;
  return GT?<GT>{children}</GT>:<span className="rcem-gradient-text">{children}</span>;
}

Object.assign(window,{PrTour});