const PR3 = Object.keys(window).filter(k=>/DesignSystem_/.test(k)).map(k=>window[k]).find(o=>o&&o.Button)||{};
const { Eyebrow: PrEyebrow3, GradientText: PrGrad3, Icon: PrIcon3, TimelineStep: PrStep, FeatureCard: PrFeature, Button: PrBtn3 } = PR3;

/* ---------------------------------------------------------------------------
   Ciclo de vida do evento: 5 passos clicáveis que dirigem um visual único.
   Auto-avança até a primeira interação, como o "Como funciona" do DS.
--------------------------------------------------------------------------- */

const PR_FLOW=[
  {step:'Passo 01',title:'A câmera detecta',icon:'camera',
   desc:<>O servidor VMS envia o alerta direto para a Central por webhook. Duplicados da mesma detecção são <strong>descartados na entrada</strong> — a fila só recebe o que importa.</>},
  {step:'Passo 02',title:'O operador trava e trata',icon:'userCheck',
   desc:<>O card mostra a imagem e <strong>trava para um único operador</strong>. Classificação, urgência e os procedimentos daquele cliente, a um clique.</>},
  {step:'Passo 03',title:'Alerta real vira chamado',icon:'fileText',
   desc:<>Chamado aberto <strong>automaticamente</strong>, com código próprio e timeline que nasce no evento — nada de recontar a história depois.</>},
  {step:'Passo 04',title:'O cliente é avisado',icon:'phone',
   desc:<>Mensagem padronizada no WhatsApp, com usina, operador e <strong>link seguro da imagem</strong>. Sem sair da Central, sem copiar e colar.</>},
  {step:'Passo 05',title:'SLA cobra, relatório registra',icon:'check',
   desc:<>A varredura de SLA roda <strong>a cada minuto</strong> e escala ao supervisor se estourar. No fim do mês, o relatório do cliente já está pronto.</>},
];

/* Visuais compactos, um por passo. */
function PrFlowVisual({step}){
  const box={width:'100%',maxWidth:400,borderRadius:'var(--radius-2xl)',background:'var(--surface-card)',border:'1px solid var(--border-default)',boxShadow:'var(--shadow-table)',padding:'20px 22px',boxSizing:'border-box'};
  const ink={color:'var(--rcem-ink-900)'};
  const sub={color:'var(--rcem-grey-500)'};
  const head=(t,badge,tone)=>(
    <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:14}}>
      <span style={{fontSize:12.5,fontWeight:800,...ink}}>{t}</span>
      <span style={{fontSize:9.5,fontWeight:700,borderRadius:'var(--radius-pill)',padding:'3px 10px',background:tone==='ok'?'rgba(29,111,224,.12)':'rgba(232,160,19,.15)',color:tone==='ok'?'var(--rcem-green-600)':'#b87709'}}>{badge}</span>
    </div>
  );
  const visuals=[
    <div key={0} style={box} className="pr-view">
      {head('Webhook recebido','novo alerta','warn')}
      <div style={{fontFamily:'var(--font-mono)',fontSize:10.5,lineHeight:1.8,background:'var(--rcem-grey-50)',borderRadius:'var(--radius-md)',padding:'12px 14px',...ink}}>
        POST /webhooks/ispy/alertas<br/>
        camera: <strong>CAM 04 · Portão leste</strong><br/>
        objeto: pessoa · confiança 0.97<br/>
        hash: <span style={sub}>a91f…</span> <span style={{color:'var(--rcem-green-600)',fontWeight:700}}>único, aceito</span>
      </div>
      <div style={{marginTop:12,fontSize:11,...sub}}>Evento <span style={{fontFamily:'var(--font-mono)'}}>#1519</span> criado e transmitido à fila em tempo real.</div>
    </div>,
    <div key={1} style={box} className="pr-view">
      {head('Evento #1519','travado por você','warn')}
      <div style={{display:'flex',flexDirection:'column',gap:8}}>
        {[['Classificação','Reportar invasão'],['Urgência','Alta'],['Procedimento','Processos do cliente · Solar Horizonte']].map(([k,v])=>(
          <div key={k} style={{display:'flex',justifyContent:'space-between',gap:10,border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-sm)',padding:'9px 12px'}}>
            <span style={{fontSize:10.5,...sub}}>{k}</span><span style={{fontSize:10.5,fontWeight:700,...ink,textAlign:'right'}}>{v}</span>
          </div>
        ))}
      </div>
      <div style={{marginTop:12,fontSize:11,...sub}}>Nenhum outro operador consegue abrir este card enquanto o lock está ativo.</div>
    </div>,
    <div key={2} style={box} className="pr-view">
      {head('Chamado CH-0482','aberto automático','ok')}
      <div style={{display:'flex',flexDirection:'column',gap:0}}>
        {[['22:14','Evento #1519 criado'],['22:15','Travado por Operador 2'],['22:18','Alerta real · chamado aberto']].map(([h,t],i,arr)=>(
          <div key={t} style={{display:'flex',gap:10}}>
            <div style={{display:'flex',flexDirection:'column',alignItems:'center'}}>
              <span style={{width:8,height:8,borderRadius:'50%',marginTop:4,background:i===arr.length-1?'var(--rcem-green-600)':'var(--rcem-grey-300)'}}></span>
              {i<arr.length-1&&<span style={{width:1,flex:1,background:'var(--border-hairline)',margin:'2px 0'}}></span>}
            </div>
            <div style={{paddingBottom:i<arr.length-1?12:0,fontSize:11,...ink}}>
              <span style={{fontFamily:'var(--font-mono)',...sub,marginRight:8}}>{h}</span><strong style={{fontWeight:700}}>{t}</strong>
            </div>
          </div>
        ))}
      </div>
    </div>,
    <div key={3} style={box} className="pr-view">
      {head('WhatsApp · Solar Horizonte','conectado','ok')}
      <div style={{display:'flex',flexDirection:'column',gap:8}}>
        <div style={{alignSelf:'flex-end',maxWidth:'88%',fontSize:10.5,lineHeight:1.55,padding:'9px 12px',borderRadius:14,borderBottomRightRadius:4,background:'var(--gradient-brand)',color:'#fff'}}>
          Alerta: pessoa detectada na CAM 04 (Portão leste). Operador 2 acompanhando. Evento #1519. Imagem: acessar.link/e1519
        </div>
        <div style={{alignSelf:'flex-start',maxWidth:'70%',fontSize:10.5,padding:'9px 12px',borderRadius:14,borderBottomLeftRadius:4,background:'var(--rcem-grey-100)',...ink}}>Recebido, equipe a caminho.</div>
      </div>
      <div style={{marginTop:12,fontSize:11,...sub}}>Link da imagem com token não adivinhável e limite de acessos por minuto.</div>
    </div>,
    <div key={4} style={box} className="pr-view">
      {head('Fechamento do ciclo','dentro do SLA','ok')}
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8}}>
        {[['1m 42s','resposta média'],['100%','eventos tratados'],['CH-0482','resolvido 23:02'],['PDF','relatório mensal']].map(([v,l])=>(
          <div key={l} style={{border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-md)',padding:'12px 12px'}}>
            <div style={{fontSize:16,fontWeight:800,letterSpacing:'-.3px',...ink}}>{v}</div>
            <div style={{fontSize:9.5,...sub}}>{l}</div>
          </div>
        ))}
      </div>
      <div style={{marginTop:12,fontSize:11,...sub}}>Se o prazo estourasse, o supervisor seria escalado — pela plataforma, não por alguém lembrar.</div>
    </div>,
  ];
  return visuals[step];
}

function PrFlow(){
  const isMobile=useIsMobile();
  const [active,setActive]=React.useState(0);
  const [isAuto,setIsAuto]=React.useState(true);

  // Auto-avança até a primeira interação do usuário.
  // No mobile fica parado: trocar altura sozinho no meio do scroll faz a página pular.
  React.useEffect(()=>{
    if(!isAuto||isMobile) return;
    const id=setInterval(()=>setActive(a=>(a+1)%PR_FLOW.length),4500);
    return ()=>clearInterval(id);
  },[isAuto,isMobile]);

  const pick=(i)=>{setIsAuto(false);setActive(i);};

  return (
    <section id="ciclo" 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?28:48}}>
        <PrEyebrow3 tone="darkCaps" style={{marginBottom:16}}>Como funciona</PrEyebrow3>
        <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)'}}>Da detecção ao relatório, <PrGrad3>sem fresta</PrGrad3></h2>
        <p style={{margin:0,maxWidth:580,fontSize:'var(--text-lead)',lineHeight:'var(--leading-relaxed)',color:'var(--text-heading)'}}>Cinco passos, <strong>zero passagem de bastão manual</strong>. Cada etapa deixa registro — e a próxima começa sozinha.</p>
      </div>
      <div style={{display:'grid',gridTemplateColumns:isMobile?'1fr':'minmax(320px,460px) minmax(300px,420px)',gap:isMobile?20:48,alignItems:'start',justifyContent:'center',width:'100%',maxWidth:1000}}>
        <div className={isMobile?'reveal':'reveal-l'} style={{display:'flex',flexDirection:'column',gap:10,order:isMobile?2:1}}>
          {PR_FLOW.map((s,i)=>(
            <PrStep key={s.title} step={s.step} title={s.title} icon={<PrIcon3 name={s.icon} size={20}/>} active={active===i} onClick={()=>pick(i)}>
              {active===i?s.desc:null}
            </PrStep>
          ))}
        </div>
        {/* minHeight reserva o espaço do maior visual: trocar de passo não move a página. */}
        <div className={isMobile?'reveal':'reveal-r'} style={{display:'flex',justifyContent:'center',alignItems:'flex-start',order:isMobile?1:2,minHeight:isMobile?250:320,position:isMobile?'static':'sticky',top:110}}>
          <PrFlowVisual step={active}/>
        </div>
      </div>
    </section>
  );
}

/* ---------------------------------------------------------------------------
   Diferenciais de engenharia — trilho horizontal de cards, como no DS.
--------------------------------------------------------------------------- */

const PR_DIFFS=[
  {icon:'lockDot',title:'Fila sem retrabalho',
   body:<>Travamento por operador, liberação automática de locks expirados e <strong>agrupamento de duplicados</strong> da mesma câmera. Dois operadores nunca tratam o mesmo alerta.</>},
  {icon:'refresh',title:'Tempo real de verdade',
   body:<>WebSocket próprio: card novo, lock, status de operador e passagem de posto aparecem <strong>sem recarregar a página</strong> — em qualquer tela aberta da central.</>},
  {icon:'layers',title:'Fonte de eventos plugável',
   body:<>A origem dos alertas é uma interface: trocar de provedor é <strong>uma variável de ambiente</strong>. Nenhum módulo interno muda.</>},
  {icon:'fileCheck',title:'Evidência em tudo',
   body:<>Imagem promovida a permanente quando vira chamado, print obrigatório em checklist, timeline <strong>append-only</strong> e log de atividade em cada registro.</>},
  {icon:'shieldCheck',title:'Dados sob controle',
   body:<>Imagem de alerta só por <strong>URL assinada ou link com token</strong>, credenciais fora do código e retenção com purge automático — LGPD no desenho, não no anexo.</>},
  {icon:'scanCheck',title:'Automação que executa',
   body:<>Debounce de câmera offline, scheduler idempotente de checklist, varredura de SLA por minuto e sessão encerrada sem heartbeat. <strong>Garantia de execução</strong>, não torcida.</>},
];

function PrDiffs(){
  const isMobile=useIsMobile();
  const trackRef=React.useRef(null);
  const scrollBy=(dir)=>{trackRef.current&&trackRef.current.scrollBy({left:dir*360,behavior:'smooth'});};
  return (
    <section id="diferenciais" style={{boxSizing:'border-box',display:'flex',flexDirection:'column',alignItems:'center',width:'100%',padding:isMobile?'64px 0':'90px 0',scrollMarginTop:100,background:'var(--surface-muted)'}}>
      <div className="reveal" style={{display:'flex',flexDirection:'column',alignItems:'center',textAlign:'center',maxWidth:720,marginBottom:isMobile?24:36,paddingInline:isMobile?20:24}}>
        <PrEyebrow3 tone="darkCaps" style={{marginBottom:16}}>Engenharia</PrEyebrow3>
        <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)'}}>Feita para o plantão <PrGrad3>das 3 da manhã</PrGrad3></h2>
        <p style={{margin:0,maxWidth:600,fontSize:'var(--text-lead)',lineHeight:'var(--leading-relaxed)',color:'var(--text-heading)'}}>Uma central não pode parar. Estes são os detalhes que seguram a operação quando ninguém está olhando — cobertos por <strong>528 testes automatizados</strong>.</p>
      </div>
      <div ref={trackRef} className="track">
        {PR_DIFFS.map(d=>(
          <PrFeature key={d.title} icon={<PrIcon3 name={d.icon} size={20}/>} title={d.title} style={{flexShrink:0}}>{d.body}</PrFeature>
        ))}
      </div>
      {!isMobile&&(
        <div style={{display:'flex',gap:10,marginTop:4}}>
          {[['arrowLeft',-1,'Anterior'],['arrowRight',1,'Próximo']].map(([ic,dir,label])=>(
            <button key={ic} type="button" aria-label={label} onClick={()=>scrollBy(dir)}
              style={{width:44,height:44,borderRadius:'50%',border:'1px solid var(--border-default)',background:'var(--surface-card)',color:'var(--rcem-ink-900)',cursor:'pointer',display:'flex',alignItems:'center',justifyContent:'center',transition:'all .2s var(--ease-out-expo)'}}
              onMouseEnter={e=>{e.currentTarget.style.background='var(--rcem-ink-900)';e.currentTarget.style.color='#fff';}}
              onMouseLeave={e=>{e.currentTarget.style.background='var(--surface-card)';e.currentTarget.style.color='var(--rcem-ink-900)';}}>
              <PrIcon3 name={ic} size={17}/>
            </button>
          ))}
        </div>
      )}
    </section>
  );
}

Object.assign(window,{PrFlow,PrDiffs});