const PR5 = Object.keys(window).filter(k=>/DesignSystem_/.test(k)).map(k=>window[k]).find(o=>o&&o.Button)||{};
const { Eyebrow: PrEyebrow5, GradientText: PrGrad5, Icon: PrIcon5, Button: PrBtn5, FaqItem: PrFaqItem, CtaBanner: PrCta } = PR5;

/* ---------------------------------------------------------------------------
   FAQ.
--------------------------------------------------------------------------- */

const PR_FAQ=[
  ['Preciso trocar meu sistema de câmeras?',
   'Não. A Central recebe os alertas do seu servidor VMS por webhook e busca as imagens sob demanda. Seu VMS continua sendo o VMS — a Central organiza o que acontece depois da detecção.'],
  ['Atende mais de um cliente na mesma central?',
   'Sim, esse é o desenho de fábrica: fila única para a operação, dados separados por cliente. Cada operador tem uma lista de clientes que pode ver, aplicada da fila ao download de anexo.'],
  ['Como o meu cliente fica sabendo dos alertas?',
   'Pelo WhatsApp, direto do portal: mensagem padronizada com usina, operador, número do evento e um link seguro da imagem. O relatório mensal consolida tudo em PDF.'],
  ['E a LGPD?',
   'Dados de imagem só saem por URL assinada temporária ou link com token e limite de acessos. Há política de retenção com limpeza automática, perfis de acesso e registro de atividade em cada ação. Recomendamos validar o enquadramento com o seu jurídico, como em qualquer operação com imagem.'],
  ['A plataforma aguenta o plantão da madrugada?',
   'Foi feita para ele: tema escuro, fila em tempo real, SLA cobrando a cada minuto, sessão encerrada quando o operador some e escalonamento automático ao supervisor.'],
  ['Quanto tempo leva para começar a operar?',
   'A plataforma já roda em produção — não é projeto de desenvolvimento. A implantação é cadastro: clientes, unidades, câmeras (com importação em massa por CSV), perfis e políticas de SLA. Você entra operando, não esperando.'],
  ['Vai ter inteligência artificial?',
   'Está no roadmap: classificação de criticidade assistida, agrupamento inteligente de eventos repetidos e copilot do operador. Em desenvolvimento — não vendemos como disponível o que ainda não está em produção.'],
];

function PrFaq(){
  const isMobile=useIsMobile();
  return (
    <section id="faq" style={{boxSizing:'border-box',display:'flex',justifyContent:'center',width:'100%',padding:isMobile?'64px 20px':'90px 24px',scrollMarginTop:100,background:'var(--surface-muted)'}}>
      <div style={{display:'grid',gridTemplateColumns:isMobile?'1fr':'1fr 2fr',gap:isMobile?24:48,width:'100%',maxWidth:1100,alignItems:'start'}}>
        <div className={isMobile?'reveal':'reveal-l'} style={{position:isMobile?'static':'sticky',top:120}}>
          <PrEyebrow5 tone="darkCaps" style={{marginBottom:16}}>FAQ</PrEyebrow5>
          <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)'}}>Perguntas de quem <PrGrad5>opera</PrGrad5></h2>
          <p style={{margin:0,fontSize:'var(--text-lead)',lineHeight:'var(--leading-relaxed)',color:'var(--text-heading)'}}>Não achou a sua? <a href="#contato" style={{fontWeight:600}}>Fale com a gente</a> — quem responde conhece a operação.</p>
        </div>
        <div className={isMobile?'reveal':'reveal-r'} style={{display:'flex',flexDirection:'column',gap:10,transitionDelay:'120ms'}}>
          {PR_FAQ.map(([q,a],i)=>(<PrFaqItem key={q} question={q} defaultOpen={i===0}>{a}</PrFaqItem>))}
        </div>
      </div>
    </section>
  );
}

/* ---------------------------------------------------------------------------
   CTA final + rodapé.
--------------------------------------------------------------------------- */

function PrClosing(){
  const isMobile=useIsMobile();
  return (
    <>
      <section id="contato" style={{boxSizing:'border-box',display:'flex',justifyContent:'center',width:'100%',padding:isMobile?'56px 20px':'90px 24px',scrollMarginTop:100,background:'var(--surface-page)',overflow:'hidden'}}>
        <div className="reveal acs-cta" style={{width:'100%',maxWidth:1100}}>
          <PrCta
            eyebrow="Em produção, tratando eventos todos os dias"
            title={<>Pronto para operar <strong>numa única tela</strong>?</>}
            action={<PrBtn5 variant="cta" href="mailto:contato@acessartecnologia.com.br">Pedir demonstração<PrIcon5 name="arrowUpRight" size={16} style={{marginLeft:6}}/></PrBtn5>}>
            Veja a Central rodando com um cenário da sua operação: seus tipos de alerta, seus clientes, seu turno. Demonstração guiada, sem compromisso.
          </PrCta>
        </div>
      </section>

      <footer style={{boxSizing:'border-box',display:'flex',flexDirection:'column',alignItems:'center',width:'100%',padding:isMobile?'0 20px 32px':'0 24px 40px',background:'var(--surface-page)'}}>
        <div style={{width:'100%',maxWidth:1100,borderRadius:'var(--radius-panel)',background:'var(--surface-dark)',padding:isMobile?'28px 22px':'36px 40px',boxSizing:'border-box',display:'flex',flexDirection:isMobile?'column':'row',justifyContent:'space-between',gap:24}}>
          <div style={{maxWidth:360}}>
            <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:10}}>
              <span style={{width:9,height:9,borderRadius:'50%',background:'var(--gradient-brand)'}}></span>
              <span style={{fontWeight:800,fontSize:14,letterSpacing:'2px',color:'#fff'}}>CONNECT CENTRAL</span>
            </div>
            <p style={{margin:0,fontSize:12.5,lineHeight:1.6,color:'rgba(255,255,255,.6)'}}>Plataforma de central de monitoramento 24/7: eventos, chamados, checklists, passagem de posto, WhatsApp e SLA — numa única tela.</p>
          </div>
          <div style={{display:'flex',gap:isMobile?28:48,flexWrap:'wrap'}}>
            <div>
              <div style={{fontSize:10,fontWeight:800,textTransform:'uppercase',letterSpacing:'1.2px',color:'rgba(255,255,255,.45)',marginBottom:10}}>Produto</div>
              {[['A Central','#central'],['Ciclo do evento','#ciclo'],['Tempo real','#tempo-real'],['Diferenciais','#diferenciais'],['Comparativo','#comparativo']].map(([l,h])=>(
                <a key={h} href={h} style={{display:'block',fontSize:12.5,color:'rgba(255,255,255,.8)',textDecoration:'none',marginBottom:8}}>{l}</a>
              ))}
            </div>
            <div>
              <div style={{fontSize:10,fontWeight:800,textTransform:'uppercase',letterSpacing:'1.2px',color:'rgba(255,255,255,.45)',marginBottom:10}}>Empresa</div>
              {[['Perfis de acesso','#perfis'],['Integrações','#integracoes'],['FAQ','#faq'],['Contato','#contato']].map(([l,h])=>(
                <a key={h} href={h} style={{display:'block',fontSize:12.5,color:'rgba(255,255,255,.8)',textDecoration:'none',marginBottom:8}}>{l}</a>
              ))}
            </div>
          </div>
        </div>
        <p style={{margin:'18px 0 0',maxWidth:1100,fontSize:'var(--text-fine)',lineHeight:1.6,color:'var(--rcem-grey-500)',textAlign:'center'}}>
          Connect Central é um produto da Acessar Tecnologia · Sorocaba, SP. As telas desta página são uma simulação navegável com dados fictícios — nomes de clientes, números de eventos e conversas são ilustrativos. Recursos citados como roadmap estão em desenvolvimento e ainda não disponíveis. Página de demonstração, não indexada.
        </p>
      </footer>
    </>
  );
}

Object.assign(window,{PrFaq,PrClosing});