const PR4 = Object.keys(window).filter(k=>/DesignSystem_/.test(k)).map(k=>window[k]).find(o=>o&&o.Button)||{};
const { Eyebrow: PrEyebrow4, GradientText: PrGrad4, Icon: PrIcon4, LogoMarquee: PrMarquee, ComparisonTable: PrTable } = PR4;

/* ---------------------------------------------------------------------------
   Comparativo de prospecção: a Central contra a operação improvisada.
--------------------------------------------------------------------------- */

const PR_COMPARE_ROWS=[
  {label:'Fila de alertas',rcem:'Tempo real, com travamento por operador',legacy:'Grupo de WhatsApp e olho na tela',check:true,cross:true},
  {label:'Alerta duplicado',rcem:'Descartado e agrupado na entrada',legacy:'Tratado duas vezes — ou nenhuma',check:true,cross:true},
  {label:'Aviso ao cliente',rcem:'Mensagem padrão com imagem segura, do portal',legacy:'Copia e cola do celular de alguém',check:true,cross:true},
  {label:'Checklist do turno',rcem:'Agendado, com print obrigatório e SLA',legacy:'Documento que ninguém confere',check:true,cross:true},
  {label:'Passagem de posto',rcem:'Registro pesquisável, com ciência de cada um',legacy:'Recado verbal entre turnos',check:true,cross:true},
  {label:'Prazo estourando',rcem:'Escalonamento automático ao supervisor',legacy:'Descobre quando o cliente reclama',check:true,cross:true},
  {label:'Relatório mensal',rcem:'Gerado da operação, em PDF, com gráficos',legacy:'Dois dias montando planilha',check:true,cross:true},
  {label:'Quem fez o quê',rcem:'Timeline e log de atividade em tudo',legacy:'Ninguém sabe, ninguém viu',check:true,cross:true},
];

function PrCompare(){
  const isMobile=useIsMobile();
  return (
    <section id="comparativo" style={{boxSizing:'border-box',display:'flex',flexDirection:'column',alignItems:'center',width:'100%',padding:isMobile?'64px 20px':'90px 24px',scrollMarginTop:100,background:'var(--surface-page)'}}>
      <div className="reveal" style={{display:'flex',flexDirection:'column',alignItems:'center',textAlign:'center',maxWidth:720,marginBottom:isMobile?24:40}}>
        <PrEyebrow4 tone="darkCaps" style={{marginBottom:16}}>Antes e depois</PrEyebrow4>
        <h2 style={{margin:'0 0 12px',fontSize:'var(--text-h2)',fontWeight:400,lineHeight:'var(--leading-display)',letterSpacing:'var(--track-tight-lg)',color:'var(--text-heading)'}}>A diferença aparece <strong style={{fontWeight:'var(--fw-extrabold)'}}>no primeiro turno</strong></h2>
        <p style={{margin:0,maxWidth:580,fontSize:'var(--text-lead)',lineHeight:'var(--leading-relaxed)',color:'var(--text-heading)'}}>Toda central que cresce esbarra no mesmo teto: planilha, grupo de mensagem e memória das pessoas. A Central troca isso por <strong>processo com registro</strong>.</p>
      </div>
      <div className="reveal-zoom acs-table-scroll" style={{width:'100%',maxWidth:900}}>
        <PrTable headers={['Na prática','Com o Connect Central','Na operação improvisada']} rows={PR_COMPARE_ROWS}/>
      </div>
    </section>
  );
}

/* ---------------------------------------------------------------------------
   Perfis de acesso: seletor de papel que troca a lista de permissões.
--------------------------------------------------------------------------- */

const PR_ROLES=[
  {id:'operador',label:'Operador',icon:'userCheck',
   can:['Ver e tratar eventos, com travamento','Abrir chamado a partir do alerta','Executar checklist com evidência','Criar passagem de posto','Consultar CRM, inventário e documentação','Ver e responder WhatsApp'],
   note:'O dia a dia do posto: tudo que precisa, nada que não deve.'},
  {id:'supervisor',label:'Supervisor',icon:'scanCheck',
   can:['Tudo do operador','Monitorar operadores em tempo real','Gerenciar clientes, checklists e passagens','Relatórios completos e dashboard de atividades','Gestão de falhas e mapeamento de infraestrutura'],
   note:'Enxerga a operação inteira e recebe os escalonamentos de SLA.'},
  {id:'atendente',label:'Atendente',icon:'phone',
   can:['Abrir e resolver chamados','Relatórios','Visualização dos demais módulos'],
   note:'Foco no atendimento: chamados e números, sem tocar na fila.'},
  {id:'auxiliar',label:'Auxiliar',icon:'fileCheck',
   can:['Executar checklists atribuídos'],
   note:'O menor perfil possível — só a rotina que lhe cabe.'},
  {id:'visualizar',label:'Somente visualizar',icon:'lock',
   can:['Leitura de eventos','Leitura de relatórios','Leitura de clientes'],
   note:'Para auditoria e gestão: vê tudo que precisa, não altera nada.'},
  {id:'admin',label:'Super admin',icon:'shieldCheck',
   can:['Acesso total','Usuários, perfis e permissões','Políticas de SLA e retenção de dados','Infraestrutura, webhooks e integrações'],
   note:'Governa a plataforma — inclusive quem pode ver o quê.'},
];

function PrRoles(){
  const isMobile=useIsMobile();
  const [active,setActive]=React.useState('operador');
  const role=PR_ROLES.find(r=>r.id===active);
  return (
    <section id="perfis" style={{boxSizing:'border-box',display:'flex',flexDirection:'column',alignItems:'center',width:'100%',padding:isMobile?'64px 20px':'90px 24px',scrollMarginTop:100,background:'var(--surface-page)'}}>
      <div className="reveal" style={{display:'flex',flexDirection:'column',alignItems:'center',textAlign:'center',maxWidth:720,marginBottom:isMobile?24:40}}>
        <PrEyebrow4 tone="darkCaps" style={{marginBottom:16}}>Perfis e acesso</PrEyebrow4>
        <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)'}}>Cada pessoa vê <PrGrad4>só o que deve</PrGrad4></h2>
        <p style={{margin:0,maxWidth:600,fontSize:'var(--text-lead)',lineHeight:'var(--leading-relaxed)',color:'var(--text-heading)'}}>Seis perfis prontos e permissões por módulo. E mais: <strong>escopo por cliente</strong> — o operador só enxerga os clientes da lista dele, da fila ao download do anexo.</p>
      </div>

      <div className="reveal" style={{display:'flex',flexWrap:'wrap',justifyContent:'center',gap:8,maxWidth:760,marginBottom:20}}>
        {PR_ROLES.map(r=>(
          <button key={r.id} type="button" onClick={()=>setActive(r.id)}
            style={{display:'inline-flex',alignItems:'center',gap:7,border:`1px solid ${active===r.id?'var(--border-accent-strong)':'var(--border-default)'}`,cursor:'pointer',padding:'9px 16px',borderRadius:'var(--radius-pill)',background:active===r.id?'var(--surface-accent-tint)':'var(--surface-card)',color:active===r.id?'var(--rcem-green-600)':'var(--rcem-ink-900)',fontFamily:'var(--font-display)',fontSize:12.5,fontWeight:active===r.id?700:500,transition:'all .2s var(--ease-out-expo)',transform:active===r.id?'translateY(-2px)':'none'}}>
            <PrIcon4 name={r.icon} size={14}/>{r.label}
          </button>
        ))}
      </div>

      <div key={active} className="pr-view" style={{width:'100%',maxWidth:760,borderRadius:'var(--radius-2xl)',background:'var(--surface-card)',border:'1px solid var(--border-default)',boxShadow:'var(--shadow-hairline)',padding:isMobile?'22px 20px':'26px 30px',boxSizing:'border-box'}}>
        <div style={{display:'flex',alignItems:'center',gap:12,marginBottom:16}}>
          <span style={{width:38,height:38,borderRadius:12,background:'var(--gradient-brand)',color:'#fff',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}><PrIcon4 name={role.icon} size={18}/></span>
          <div>
            <div style={{fontSize:16,fontWeight:800,letterSpacing:'-.3px',color:'var(--rcem-ink-900)'}}>{role.label}</div>
            <div style={{fontSize:12,color:'var(--rcem-grey-500)'}}>{role.note}</div>
          </div>
        </div>
        <div style={{display:'grid',gridTemplateColumns:isMobile?'1fr':'repeat(2,1fr)',gap:'8px 20px'}}>
          {role.can.map(c=>(
            <div key={c} style={{display:'flex',alignItems:'flex-start',gap:9}}>
              <span style={{color:'var(--rcem-green-600)',flexShrink:0,marginTop:1}}><PrIcon4 name="check" size={14} strokeWidth={2.6}/></span>
              <span style={{fontSize:12.5,lineHeight:1.5,color:'var(--rcem-ink-900)'}}>{c}</span>
            </div>
          ))}
        </div>
      </div>
      <div className="reveal" style={{marginTop:14,fontSize:12,color:'var(--rcem-grey-500)',maxWidth:640,textAlign:'center'}}>
        O escopo por cliente vale também no acesso direto: registro, edição, fechamento e anexo. Não é filtro de tela — <strong style={{color:'var(--rcem-ink-900)'}}>é regra no servidor</strong>.
      </div>
    </section>
  );
}

/* ---------------------------------------------------------------------------
   Integrações.
--------------------------------------------------------------------------- */

const PR_INTEGRATIONS=[
  ['camera','Servidores VMS','Webhook nativo de alertas, catálogo de câmeras sincronizado 4x ao dia e imagem do evento sob demanda.'],
  ['phone','WhatsApp','Conexão por QR, inbox no portal e mensagens padronizadas. Pronto para a API oficial da Meta.'],
  ['refresh','Zabbix','Problemas de infraestrutura por cliente via API, com sincronização a cada 2 minutos e baixa no portal.'],
  ['layers','Postgres gerenciado','Fonte de eventos com cursor incremental a cada 30 segundos e banco de produção na região sa-east-1.'],
  ['terminal','E-mail (SMTP)','Login, recuperação de senha e verificação de conta pelo seu servidor de e-mail.'],
  ['arrowUpRight','WebSocket próprio','Broadcast em tempo real para fila, locks, operadores e notificações — sem serviço de terceiro no meio.'],
];

function PrIntegrations(){
  const isMobile=useIsMobile();
  return (
    <section id="integracoes" style={{boxSizing:'border-box',display:'flex',flexDirection:'column',alignItems:'center',width:'100%',padding:isMobile?'64px 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?24:40}}>
        <PrEyebrow4 tone="darkCaps" style={{marginBottom:16}}>Integrações</PrEyebrow4>
        <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)'}}>Conversa com o que <PrGrad4>você já usa</PrGrad4></h2>
        <p style={{margin:0,maxWidth:580,fontSize:'var(--text-lead)',lineHeight:'var(--leading-relaxed)',color:'var(--text-heading)'}}>A Central não pede para trocar seu VMS nem seu monitoramento de rede. <strong>Ela se conecta</strong> — e centraliza o que hoje está espalhado.</p>
      </div>
      <div style={{display:'grid',gridTemplateColumns:isMobile?'1fr':'repeat(3,1fr)',gap:isMobile?12:16,width:'100%',maxWidth:1000}}>
        {PR_INTEGRATIONS.map(([ic,t,d],i)=>(
          <div key={t} className="reveal-zoom" style={{transitionDelay:`${i*90}ms`,padding:'22px 22px',borderRadius:'var(--radius-xl)',background:'var(--surface-card)',border:'1px solid var(--border-subtle)',boxShadow:'var(--shadow-hairline)',transition:'transform .25s var(--ease-out-expo),box-shadow .25s var(--ease-out-expo)'}}
            onMouseEnter={e=>{e.currentTarget.style.transform='translateY(-3px)';e.currentTarget.style.boxShadow='var(--shadow-table)';}}
            onMouseLeave={e=>{e.currentTarget.style.transform='none';e.currentTarget.style.boxShadow='var(--shadow-hairline)';}}>
            <span style={{width:36,height:36,borderRadius:10,background:'var(--surface-accent-soft)',color:'var(--rcem-green-600)',display:'flex',alignItems:'center',justifyContent:'center',marginBottom:12}}><PrIcon4 name={ic} size={18}/></span>
            <div style={{fontSize:14.5,fontWeight:800,letterSpacing:'-.2px',color:'var(--rcem-ink-900)',marginBottom:6}}>{t}</div>
            <div style={{fontSize:12.5,lineHeight:1.55,color:'var(--rcem-grey-500)'}}>{d}</div>
          </div>
        ))}
      </div>
      <div className="reveal" style={{width:'100%',maxWidth:680,marginTop:isMobile?28:40,opacity:.85,overflow:'hidden'}}>
        <PrMarquee>
          {['Eventos','Chamados','Checklists','Passagem de Posto','WhatsApp','SLA','Relatórios','CRM','Inventário','Gestão de Falhas','Operadores','Documentação'].map(n=>(
            <span key={n} style={{fontSize:13,fontWeight:'var(--fw-semibold)',letterSpacing:'.06em',textTransform:'uppercase',whiteSpace:'nowrap',color:'var(--rcem-grey-500)'}}>{n}</span>
          ))}
        </PrMarquee>
      </div>
    </section>
  );
}

Object.assign(window,{PrCompare,PrRoles,PrIntegrations});
