// PSM Expert — Página consolidada de Serviços (/servicos)
function ServiceGroup({ title, items }) {
  return (
    <div style={sv.group}>
      <h3 style={sv.groupT}>{title}</h3>
      <div style={sv.grid} className="psm-grid-2">
        {items.map((it) => {
          const Tag = it.href ? "a" : "div";
          return (
            <Tag key={it.t} href={it.href} style={{ ...sv.card, ...(it.href ? {} : sv.cardStatic) }} className={it.href ? "psm-svc-card" : ""}>
              <div style={sv.cardHead}>
                <div style={sv.iconWrap}><Icon name={it.icon} size={24} color="#17304D" stroke={1.6} /></div>
                <div>
                  <h4 style={sv.t}>{it.t}</h4>
                  {it.sub ? <div style={sv.sub}>{it.sub}</div> : null}
                </div>
              </div>
              <p style={sv.d}>{it.d}</p>
              <div style={sv.foot}>
                <span style={sv.norm}>{it.norm}</span>
                {it.href ? <span style={sv.more}>Ver página <Icon name="arrow-right" size={14} color="#F5A623" /></span>
                         : <span style={sv.viaContact}>Via contato</span>}
              </div>
            </Tag>
          );
        })}
      </div>
    </div>
  );
}

function OrientationTable() {
  const rows = [
    ["Preciso fazer HAZOP para licença ambiental", "HAZOP", "hazop.html"],
    ["Regulador exigiu QRA para minha planta", "QRA", "qra.html"],
    ["Preciso saber se minhas proteções são suficientes", "LOPA", "lopa.html"],
    ["Quero estruturar meu programa de segurança", "PSM", "psm.html"],
    ["Preciso elaborar o PGR conforme a nova NR-1", "PGR / PAE", "pgr-pae.html"],
    ["Preciso comunicar riscos para minha equipe", "Bow-Tie", "bowtie.html"],
  ];
  return (
    <div style={sv.orient}>
      {rows.map(([sit, svc, href]) => (
        <a key={sit} href={href} style={sv.orientRow}>
          <span style={sv.orientSit}>{sit}</span>
          <span style={sv.orientArrow}><Icon name="arrow-right" size={15} color="#6B7785" /></span>
          <span style={sv.orientSvc}>{svc}</span>
        </a>
      ))}
    </div>
  );
}

function ServicosPage() {
  return (
    <React.Fragment>
      <Header current="servicos" />
      <PageHero
        kicker="Consultoria em Segurança de Processos"
        title="Todos os Serviços"
        subtitle="Análises técnicas, estudos de risco e programas de gestão de segurança de processos para indústrias de alto risco em todo o Brasil. Metodologia internacional, entregáveis documentados, independência técnica garantida."
        badges={["HAZOP", "QRA", "LOPA/SIL", "Bow-Tie", "PSM", "PGR/PAE", "Modelagens CFD"]} />

      <Section intro="Atuamos em todos os níveis de maturidade em segurança de processos — de análises técnicas pontuais exigidas por reguladores à implementação e gestão de programas PSM completos.">
        <ServiceGroup title="Análises e Estudos de Risco" items={[
          { icon: "search", t: "HAZOP", d: "Identificação sistemática de desvios de processo com equipe multidisciplinar. Exigido por NR-13, ANP e reguladores.", norm: "IEC 61882 · NR-13", href: "hazop.html" },
          { icon: "bar-chart", t: "QRA", sub: "Análise Quantitativa de Riscos", d: "Quantificação de frequência e consequência de cenários. Risco individual e social. Exigido por ANP e CETESB.", norm: "API 752 · ANP · CETESB", href: "qra.html" },
          { icon: "wind", t: "Modelagens Avançadas", d: "Dispersão, explosão (VCE/BLEVE), incêndio (jet/pool fire), Facility Siting e CFD para geometrias complexas.", norm: "Subpágina de QRA", href: "qra.html" },
          { icon: "filter", t: "Bow-Tie", d: "Mapeamento visual de causas, consequências e barreiras para eventos de topo. Integra HAZOP e PSM.", norm: "CCPS · IEC 61511 · IOGP", href: "bowtie.html" },
          { icon: "layers", t: "LOPA", sub: "Análise de Camadas de Proteção", d: "Avaliação semi-quantitativa das camadas de proteção independentes (IPL): frequência mitigada, critério de tolerabilidade e SIL requerido.", norm: "CCPS · IEC 61511 Anexo F", href: "lopa.html" },
          { icon: "shield-check", t: "SIS / SIF / SIL", sub: "Segurança Funcional Instrumentada", d: "Ciclo de vida completo IEC 61511 — classificação e verificação de SIL, elaboração da SRS, cálculo de PFD e Functional Safety Assessment.", norm: "IEC 61511 · IEC 61508 · ISA-84", href: "sil-sis-sif.html" },
        ]} />

        <ServiceGroup title="Gerenciamento e Programas de Segurança" items={[
          { icon: "settings", t: "PSM", sub: "Gerenciamento de Segurança de Processos", d: "Diagnóstico, auditoria e estruturação dos 14 elementos OSHA PSM e 20 elementos CCPS RBPS. Gap analysis e plano de ação.", norm: "OSHA PSM · CCPS RBPS", href: "psm.html" },
          { icon: "clipboard-check", t: "Implementação de PSM", d: "Projeto completo de implementação do programa PSM — do diagnóstico ao programa operacional, em 4 fases.", norm: "OSHA PSM · ISO 45001", href: "psm.html" },
          { icon: "alert-triangle", t: "PGR / PAE", d: "Programa de Gerenciamento de Riscos e Plano de Ação de Emergência conforme NR-1/GRO, NR-13 e CETESB.", norm: "NR-1/GRO · NR-13 · CETESB", href: "pgr-pae.html" },
        ]} />

        <ServiceGroup title="Serviços Complementares" items={[
          { icon: "search", t: "Investigação de Incidentes", d: "Análise de causa raiz (TapRoot, Bow-Tie, CCPS). Laudo técnico e relatório de lições aprendidas." },
          { icon: "shield", t: "Safety Case / PSGP", d: "Demonstração de conformidade regulatória em instalações de alto risco — O&G, mineração e química." },
          { icon: "clipboard-check", t: "Auditorias de PSM & Conformidade", d: "Auditorias técnicas frente a NR-13, ANP, CETESB e reguladores estaduais. Preparação para inspeções." },
          { icon: "refresh-cw", t: "Gerenciamento de Mudanças (MoC)", d: "Estruturação e implementação de procedimentos de Management of Change integrados ao PSM e ao HAZOP." },
        ]} />
      </Section>

      <Section title="Não sabe por onde começar?" intro="A escolha do estudo depende do contexto regulatório, do estágio do processo e do regulador aplicável. Orientamos gratuitamente na primeira conversa." bg="#F4F6F8">
        <OrientationTable />
      </Section>

      <CtaFinal title="Fale com um especialista" />
      <Footer />
    </React.Fragment>
  );
}
const sv = {
  group: { marginBottom: 40 },
  groupT: { fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: 24, color: "#17304D", margin: "0 0 18px", textTransform: "uppercase", letterSpacing: ".02em", paddingBottom: 10, borderBottom: "2px solid #F5A623", display: "inline-block" },
  grid: { display: "grid", gridTemplateColumns: "repeat(2,1fr)", gap: 16 },
  card: { display: "block", background: "#fff", border: "1px solid #E8ECF1", borderLeft: "3px solid #E8ECF1", borderRadius: 12, padding: "20px 22px", textDecoration: "none", transition: "transform .2s, box-shadow .2s, border-left-color .2s" },
  cardStatic: { background: "#FAFBFC", borderLeftColor: "#E8ECF1" },
  cardHead: { display: "flex", gap: 14, alignItems: "flex-start", marginBottom: 12 },
  iconWrap: { flex: "none", width: 46, height: 46, borderRadius: 10, background: "#F4F6F8", border: "1px solid #E8ECF1", display: "flex", alignItems: "center", justifyContent: "center" },
  t: { fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: 22, color: "#071C36", margin: "2px 0 0", textTransform: "uppercase" },
  sub: { fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 600, fontSize: 12.5, color: "#17304D", marginTop: 2 },
  d: { fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 13.5, lineHeight: 1.55, color: "#6B7785", margin: "0 0 16px" },
  foot: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10, borderTop: "1px solid #EEF1F5", paddingTop: 12 },
  norm: { fontFamily: "'IBM Plex Mono', monospace", fontSize: 10.5, color: "#6B7785", background: "#F4F6F8", borderRadius: 5, padding: "5px 9px" },
  more: { display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 600, fontSize: 12.5, color: "#17304D", whiteSpace: "nowrap" },
  viaContact: { fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 12, color: "#9AA6B2", fontStyle: "italic" },
  orient: { display: "flex", flexDirection: "column", gap: 8 },
  orientRow: { display: "flex", alignItems: "center", gap: 14, background: "#fff", border: "1px solid #E8ECF1", borderRadius: 8, padding: "13px 18px", textDecoration: "none", transition: "border-color .15s" },
  orientSit: { flex: 1, fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 14.5, color: "#1A2332" },
  orientArrow: { flex: "none", display: "flex" },
  orientSvc: { flex: "none", fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 700, fontSize: 13.5, color: "#F08C00", minWidth: 96, textAlign: "right" },
};
ReactDOM.createRoot(document.getElementById("root")).render(<ServicosPage />);