const PR6 = Object.keys(window).filter(k=>/DesignSystem_/.test(k)).map(k=>window[k]).find(o=>o&&o.Button)||{};
const { Eyebrow: PrEyebrow6, GradientText: PrGrad6, Icon: PrIcon6, Button: PrBtn6 } = PR6;

/* ---------------------------------------------------------------------------
   Inteligência: pré-análise por IA na fila + Relatórios de IA (agente analytics).
   Dois recursos EM PRODUÇÃO — o resto da página trata IA como roadmap, aqui não.
   A IA é consultiva: sugere e mostra a base histórica, o operador confirma.
--------------------------------------------------------------------------- */

const PR_AI_BADGE={display:'inline-flex',alignItems:'center',gap:5,fontSize:8.5,fontWeight:800,letterSpacing:'.8px',textTransform:'uppercase',background:'var(--gradient-brand)',color:'#fff',borderRadius:'var(--radius-pill)',padding:'3px 8px'};

/* --- Visual A: card da fila com o bloco de pré-análise --------------------- */

const PR_AI_CARDS=[
  {cam:'BARRA DOS GARÇAS · CAM 02',id:'#36597',ago:'12 s',verdict:'Provável rotina',pct:95,
   base:'Nesta câmera, 294 de 302 alertas semelhantes (câmera + classe + turno) foram resolvidos como rotina.'},
  {cam:'BARRA DOS GARÇAS · CAM 18',id:'#36595',ago:'50 s',verdict:'Provável rotina',pct:92,
   base:'Nesta câmera, 736 de 786 alertas semelhantes (câmera + classe + turno) foram resolvidos como rotina.'},
  {cam:'AMÉRICA DOURADO 01 · CAM 04',id:'#36588',ago:'2 min',verdict:'Fora do padrão',pct:31,
   base:'Nesta câmera, só 12 de 39 alertas semelhantes neste turno terminaram como rotina. Trate com prioridade.'},
];

function PrAiEventCard(){
  const [i,setI]=React.useState(0);
  const c=PR_AI_CARDS[i];
  const routine=c.pct>=60;
  const tone=routine
    ?{bg:'rgba(29,111,224,.07)',line:'rgba(29,111,224,.22)',fg:'var(--rcem-green-600)'}
    :{bg:'rgba(232,160,19,.10)',line:'rgba(232,160,19,.32)',fg:'#b87709'};

  React.useEffect(()=>{
    const id=setInterval(()=>setI(v=>(v+1)%PR_AI_CARDS.length),5200);
    return ()=>clearInterval(id);
  },[]);

  return (
    <div style={{width:'100%',maxWidth:400,borderRadius:'var(--radius-2xl)',background:'var(--surface-card)',border:'1px solid var(--border-default)',boxShadow:'var(--shadow-table)',padding:'18px 20px',boxSizing:'border-box'}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',gap:10,marginBottom:12}}>
        <div style={{minWidth:0}}>
          <div style={{fontSize:12.5,fontWeight:800,color:'var(--rcem-ink-900)'}}>Detecção · pessoa</div>
          <div style={{fontSize:10.5,color:'var(--rcem-grey-500)',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{c.cam}</div>
        </div>
        <span style={{flexShrink:0,fontSize:9.5,fontWeight:700,borderRadius:'var(--radius-pill)',padding:'3px 10px',background:'rgba(229,80,57,.12)',color:'#c43a24'}}>Alta</span>
      </div>

      {/* moldura da imagem — sem foto real de cliente */}
      <div style={{height:104,borderRadius:'var(--radius-md)',background:'var(--rcem-grey-100)',border:'1px dashed var(--border-default)',display:'flex',alignItems:'center',justifyContent:'center',gap:7,color:'var(--rcem-grey-500)',fontSize:10.5,fontWeight:600}}>
        <PrIcon6 name="camera" size={14}/>captura do evento
      </div>

      <div style={{display:'flex',justifyContent:'space-between',fontSize:10,color:'var(--rcem-grey-500)',margin:'9px 0 12px',fontFamily:'var(--font-mono)'}}>
        <span>há {c.ago}</span><span>{c.id}</span>
      </div>

      <div key={c.id} className="pr-view" style={{border:`1px solid ${tone.line}`,background:tone.bg,borderRadius:'var(--radius-md)',padding:'12px 14px'}}>
        <div style={{display:'flex',alignItems:'center',gap:7,marginBottom:7}}>
          <PrIcon6 name="scanCheck" size={13} color={tone.fg}/>
          <span style={{fontSize:9,fontWeight:800,letterSpacing:'1px',textTransform:'uppercase',color:tone.fg}}>Pré-analisado por IA</span>
        </div>
        <div style={{fontSize:14.5,fontWeight:800,letterSpacing:'-.3px',color:tone.fg,marginBottom:6}}>{c.verdict} · {c.pct}%</div>
        <div style={{height:4,borderRadius:4,background:'rgba(0,0,0,.06)',overflow:'hidden',marginBottom:9}}>
          <div style={{height:'100%',width:`${c.pct}%`,borderRadius:4,background:tone.fg,transition:'width .6s var(--ease-out-expo)'}}></div>
        </div>
        <p style={{margin:0,fontSize:11.5,lineHeight:1.5,color:'var(--rcem-ink-900)'}}>{c.base}</p>
        <div style={{marginTop:8,fontSize:10,color:'var(--rcem-grey-500)'}}>{routine?'confiança alta':'confiança baixa'} · confirme na imagem</div>
      </div>

      <div style={{marginTop:12,display:'flex',alignItems:'center',justifyContent:'center',height:38,borderRadius:'var(--radius-pill)',background:'var(--rcem-ink-900)',color:'#fff',fontSize:12,fontWeight:700}}>Tratar</div>

      <div style={{display:'flex',justifyContent:'center',gap:6,marginTop:12}}>
        {PR_AI_CARDS.map((_,n)=>(
          <button key={n} type="button" aria-label={`Ver alerta ${n+1}`} onClick={()=>setI(n)}
            style={{width:n===i?18:7,height:7,padding:0,border:'none',cursor:'pointer',borderRadius:'var(--radius-pill)',background:n===i?'var(--rcem-green-600)':'var(--rcem-grey-100)',transition:'width .25s var(--ease-out-expo)'}}/>
        ))}
      </div>
    </div>
  );
}

/* --- Visual B: Relatórios de IA (agente analytics) ------------------------- */

const PR_AI_KPIS=[['339','tratados no dia','média 7d: 534'],['58,3%','resolvidos como rotina','201 de 345'],['144','exigiram ação',''],['13,0%','tratados sem imagem','evento fechado sem captura']];
const PR_AI_RANK=[['Operador 1',161,47.5],['Operador 2',102,30.1],['Operador 3',53,15.6],['Operador 4',22,6.5],['Operador 5',1,0.3]];
const PR_AI_CAMS=[['PARQUE 02 · CAM 02',196,82.1],['PARQUE 01 · CAM 02',91,24.2],['PARQUE 01 · CAM 04',31,6.5],['PARQUE 01 · CAM 01',14,78.6]];

function PrAiReport(){
  const isMobile=useIsMobile();
  return (
    <div style={{width:'100%',borderRadius:'var(--radius-2xl)',background:'var(--surface-card)',border:'1px solid var(--border-default)',boxShadow:'var(--shadow-table)',padding:isMobile?'18px 16px':'22px 24px',boxSizing:'border-box'}}>
      <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',gap:10,flexWrap:'wrap',marginBottom:14}}>
        <div>
          <div style={{fontSize:9,fontWeight:800,letterSpacing:'1.2px',textTransform:'uppercase',color:'var(--rcem-grey-500)'}}>Agente IA · Analytics</div>
          <div style={{fontSize:16,fontWeight:800,letterSpacing:'-.4px',color:'var(--rcem-ink-900)',fontFamily:'var(--font-mono)'}}>2026-08-31</div>
        </div>
        <span style={{fontSize:10,color:'var(--rcem-grey-500)',border:'1px solid var(--border-default)',borderRadius:'var(--radius-pill)',padding:'5px 12px'}}>Dia · último com movimento</span>
      </div>

      <div style={{display:'grid',gridTemplateColumns:isMobile?'repeat(2,1fr)':'repeat(4,1fr)',gap:10,marginBottom:16}}>
        {PR_AI_KPIS.map(([v,l,s])=>(
          <div key={l} style={{border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-md)',padding:'12px 14px'}}>
            <div style={{fontSize:isMobile?19:22,fontWeight:800,letterSpacing:'-.6px',color:'var(--rcem-ink-900)',fontVariantNumeric:'tabular-nums'}}>{v}</div>
            <div style={{fontSize:10,lineHeight:1.4,color:'var(--rcem-grey-500)'}}>{l}</div>
            {s&&<div style={{fontSize:9,marginTop:2,color:'var(--rcem-grey-500)',opacity:.75}}>{s}</div>}
          </div>
        ))}
      </div>

      <div style={{display:'grid',gridTemplateColumns:'1fr',gap:16}}>
        <div>
          <div style={{fontSize:9,fontWeight:800,letterSpacing:'1.2px',textTransform:'uppercase',color:'var(--rcem-grey-500)',marginBottom:8}}>Volume · ranking do dia</div>
          {PR_AI_RANK.map(([n,q,p],i)=>(
            <div key={n} style={{display:'flex',alignItems:'center',gap:8,marginBottom:7}}>
              <span style={{width:76,flexShrink:0,fontSize:10.5,color:'var(--rcem-ink-900)',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{n}</span>
              <span style={{flex:1,height:7,borderRadius:7,background:'var(--rcem-grey-100)',overflow:'hidden'}}>
                <span style={{display:'block',height:'100%',width:`${p*2}%`,maxWidth:'100%',borderRadius:7,background:'var(--gradient-brand)',transformOrigin:'left',animation:`pr-bar-grow .6s var(--ease-out-expo) ${i*80}ms both`}}></span>
              </span>
              <span style={{width:62,flexShrink:0,textAlign:'right',fontSize:10,fontFamily:'var(--font-mono)',color:'var(--rcem-grey-500)'}}>{q} · {String(p).replace('.',',')}%</span>
            </div>
          ))}
        </div>
        <div>
          <div style={{fontSize:9,fontWeight:800,letterSpacing:'1.2px',textTransform:'uppercase',color:'var(--rcem-grey-500)',marginBottom:8}}>Campo · proporção de rotina por câmera</div>
          {PR_AI_CAMS.map(([n,ev,p],i)=>(
            <div key={n} style={{display:'flex',alignItems:'center',gap:8,marginBottom:7}}>
              <span style={{width:isMobile?92:112,flexShrink:0,fontSize:10,color:'var(--rcem-ink-900)',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{n}</span>
              <span style={{width:30,flexShrink:0,fontSize:10,fontFamily:'var(--font-mono)',color:'var(--rcem-grey-500)'}}>{ev}</span>
              <span style={{flex:1,height:7,borderRadius:7,background:'var(--rcem-grey-100)',overflow:'hidden'}}>
                <span style={{display:'block',height:'100%',width:`${p}%`,borderRadius:7,background:p>70?'var(--gradient-brand)':'rgba(29,111,224,.35)',transformOrigin:'left',animation:`pr-bar-grow .6s var(--ease-out-expo) ${i*80}ms both`}}></span>
              </span>
              <span style={{width:40,flexShrink:0,textAlign:'right',fontSize:10,fontFamily:'var(--font-mono)',color:'var(--rcem-grey-500)'}}>{String(p).replace('.',',')}%</span>
            </div>
          ))}
          <div style={{marginTop:8,fontSize:10.5,lineHeight:1.5,color:'var(--rcem-grey-500)'}}>Câmera com muito evento e rotina alta é candidata a ajuste de sensibilidade ou máscara de área.</div>
        </div>
      </div>
    </div>
  );
}

/* --- A seção -------------------------------------------------------------- */

const PR_AI_POINTS_A=[
  'Veredito com percentual e a base que o gerou: quantos alertas semelhantes daquela câmera, classe e turno terminaram como rotina.',
  'Fora do padrão aparece marcado — o alerta que foge do histórico da câmera sobe na atenção do operador.',
  'A pré-análise é consultiva: nada é fechado sozinho, o operador confirma na imagem e registra o desfecho.',
  'Cada desfecho realimenta o histórico daquela câmera. Quanto mais a central opera, mais afiada fica a leitura.',
];
const PR_AI_POINTS_B=[
  'Volume do dia e da semana, operadores no posto, mediana de tratamento e proporção de eventos fechados sem imagem.',
  'Ranking e detalhe por operador, com classificação comparada aos pares — quem foge do padrão do time aparece.',
  'Visão de campo por parque: eventos resolvidos, quanto virou rotina, quanto exigiu ação e volume por turno.',
  'Perfil de câmera: distribuição de desfechos por turno, insumo direto para reposicionar, mascarar área ou ajustar sensibilidade.',
];

function PrAiPoints({items}){
  return (
    <div style={{display:'flex',flexDirection:'column',gap:10}}>
      {items.map(t=>(
        <div key={t} style={{display:'flex',alignItems:'flex-start',gap:9}}>
          <span style={{color:'var(--rcem-green-600)',flexShrink:0,marginTop:2}}><PrIcon6 name="check" size={14} strokeWidth={2.6}/></span>
          <span style={{fontSize:13,lineHeight:1.55,color:'var(--rcem-ink-900)'}}>{t}</span>
        </div>
      ))}
    </div>
  );
}

function PrAI(){
  const isMobile=useIsMobile();
  const head=(badge,title,lead)=>(
    <div>
      <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:10,flexWrap:'wrap'}}>
        <span style={PR_AI_BADGE}>Novo</span>
        <span style={{fontSize:10,fontWeight:800,letterSpacing:'1.2px',textTransform:'uppercase',color:'var(--rcem-grey-500)'}}>{badge}</span>
      </div>
      <h3 style={{margin:'0 0 10px',fontSize:isMobile?21:'clamp(22px,2.4vw,28px)',fontWeight:'var(--fw-extrabold)',letterSpacing:'-.7px',lineHeight:1.15,color:'var(--rcem-ink-900)'}}>{title}</h3>
      <p style={{margin:'0 0 18px',fontSize:14,lineHeight:1.6,color:'var(--rcem-grey-500)'}}>{lead}</p>
    </div>
  );

  return (
    <section id="ia" 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:760,marginBottom:isMobile?32:52}}>
        <PrEyebrow6 tone="darkCaps" style={{marginBottom:16}}>Inteligência · em produção</PrEyebrow6>
        <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)'}}>A fila chega <PrGrad6>pré-analisada</PrGrad6></h2>
        <p style={{margin:0,maxWidth:620,fontSize:'var(--text-lead)',lineHeight:'var(--leading-relaxed)',color:'var(--text-heading)'}}>Numa central madura, a maior parte do alerta é rotina — e a atenção do operador se gasta separando rotina de ocorrência. A Central agora faz essa leitura antes: <strong>análise por IA em cada alerta</strong> e <strong>relatórios de IA</strong> sobre operação e campo.</p>
      </div>

      {/* Bloco 1 — Assistente de IA na fila */}
      <div style={{display:'grid',gridTemplateColumns:isMobile?'1fr':'1fr 1fr',gap:isMobile?24:56,alignItems:'center',width:'100%',maxWidth:1040}}>
        <div className={isMobile?'reveal':'reveal-l'}>
          {head('Assistente de IA · fila de eventos','O alerta já chega com um palpite fundamentado',
            'Cada detecção entra na fila com um veredito da IA e o histórico que o sustenta. O operador não começa do zero: começa sabendo o que aquela câmera, naquele turno, costuma ser.')}
          <PrAiPoints items={PR_AI_POINTS_A}/>
        </div>
        <div className={isMobile?'reveal':'reveal-r'} style={{display:'flex',justifyContent:'center',transitionDelay:'120ms'}}>
          <PrAiEventCard/>
        </div>
      </div>

      {/* Bloco 2 — Relatórios de IA */}
      <div style={{display:'grid',gridTemplateColumns:isMobile?'1fr':'1fr 1fr',gap:isMobile?24:56,alignItems:'center',width:'100%',maxWidth:1040,marginTop:isMobile?48:80}}>
        <div className={isMobile?'reveal':'reveal-l'} style={{order:isMobile?0:1}}>
          {head('Relatórios de IA · agente analytics','O relatório que aponta onde a operação dói',
            'Um agente lê o dia da central e devolve leitura pronta: quem tratou o quê, em quanto tempo, quanto virou rotina e qual câmera está gerando ruído. Sem alguém montando planilha para descobrir.')}
          <PrAiPoints items={PR_AI_POINTS_B}/>
        </div>
        <div className={isMobile?'reveal':'reveal-r'} style={{order:isMobile?1:0,transitionDelay:'120ms'}}>
          <PrAiReport/>
        </div>
      </div>

      <div className="reveal" style={{display:'flex',alignItems:'flex-start',gap:10,maxWidth:760,marginTop:isMobile?32:48,padding:'14px 18px',borderRadius:'var(--radius-xl)',background:'var(--surface-accent-tint)',border:'1px solid var(--border-accent)',boxSizing:'border-box'}}>
        <span style={{color:'var(--rcem-green-600)',flexShrink:0,marginTop:1}}><PrIcon6 name="shieldCheck" size={16}/></span>
        <p style={{margin:0,fontSize:12.5,lineHeight:1.6,color:'var(--rcem-ink-900)'}}>
          <strong>A IA sugere, a pessoa decide.</strong> Nenhum evento é encerrado automaticamente: a pré-análise entra como contexto ao lado da imagem, e o desfecho continua sendo registrado por um operador identificado — com timeline e log de atividade, como todo o resto da Central.
        </p>
      </div>
    </section>
  );
}

Object.assign(window,{PrAI});