// PSM Expert — Soluções Técnicas (6 cards + badge de norma + link)
function Services() {
  const items = [
    { icon: "search", t: "HAZOP", sub: "Análise de Perigos e Operabilidade",
      d: "Identificação sistemática de desvios de processo com equipe multidisciplinar. Entregável documentado com planilha de nós, causas e recomendações.",
      norm: "IEC 61882 · CCPS · ANP · CETESB", href: "hazop.html", ready: true },
    { icon: "bar-chart", t: "QRA", sub: "Análise Quantitativa de Riscos",
      d: "Modelagem de cenários de acidente com cálculo de frequência, consequência e vulnerabilidade. Incluindo dispersão, explosão e incêndio (CFD), EAR, PGR (P4.261 – CETESB) e CEPRAM entre outras.",
      norm: "API 752 · ANP · CETESB", href: "qra.html", ready: true },
    { 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", ready: true },
    { icon: "filter", t: "Bow-Tie", sub: "Análise de Riscos por Barreiras",
      d: "Mapeamento visual de causas, consequências e barreiras de controle para eventos de topo. Integra com HAZOP e PSM.",
      norm: "CCPS · IEC 61511", href: "bowtie.html", ready: true },
    { icon: "settings", t: "PSM - IMPLEMENTAÇÃO", sub: "Gerenciamento de Segurança de Processos",
      d: "Diagnóstico, Implementação e auditoria dos 14 elementos PSM (OSHA 1910.119) ou 20 elementos RBPS (CCPS). Diagnóstico, gap analysis e plano de ação.",
      norm: "OSHA PSM · CCPS RBPS", href: "psm.html", ready: true },
    { icon: "alert-triangle", t: "PGR / PAE", sub: "Gerenciamento de Riscos & Planos de Emergência",
      d: "Elaboração do Programa de Gerenciamento de Riscos e Plano de Ação de Emergência seguindo os requerimentos Nacionais e Globais.",
      norm: "NR-1/GRO · NFPA · CETESB", href: "pgr-pae.html", ready: true },
  ];
  return (
    <section style={svc.wrap}>
      <div style={svc.inner}>
        <SectionTitle sub="Análises e estudos de segurança de processos conduzidos com metodologia internacional e entregáveis técnicos documentados.">
          Soluções Técnicas
        </SectionTitle>
        <div style={svc.grid} className="psm-grid-3">
          {items.map((it) => (
            <a key={it.t} href={it.href} style={svc.card} className="psm-svc-card">
              <div style={svc.iconWrap}><Icon name={it.icon} size={28} color="#17304D" stroke={1.6} /></div>
              <h3 style={svc.t}>{it.t}</h3>
              <div style={svc.sub}>{it.sub}</div>
              <p style={svc.d}>{it.d}</p>
              <div style={svc.foot}>
                <span style={svc.norm}>{it.norm}</span>
                <span style={svc.more}>Saiba mais <Icon name="arrow-right" size={14} color="#F5A623" /></span>
              </div>
            </a>
          ))}
        </div>
        <div style={svc.allWrap}>
          <a href="servicos.html" style={svc.all}>Ver todos os serviços <Icon name="arrow-right" size={15} color="#17304D" /></a>
        </div>
      </div>
    </section>
  );
}
const svc = {
  wrap: { background: "#F4F6F8" },
  inner: { maxWidth: 1240, margin: "0 auto", padding: "76px 32px" },
  grid: { display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 22 },
  card: { display: "block", background: "#fff", border: "1px solid #E8ECF1", borderLeft: "3px solid #E8ECF1", borderRadius: 12, padding: "28px 26px 22px", textDecoration: "none", cursor: "pointer", transition: "transform .2s, box-shadow .2s, border-left-color .2s" },
  iconWrap: { width: 56, height: 56, borderRadius: 12, background: "#F4F6F8", border: "1px solid #E8ECF1", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 16 },
  t: { fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: 26, color: "#071C36", margin: "0 0 2px", textTransform: "uppercase", letterSpacing: ".01em" },
  sub: { fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 600, fontSize: 13, color: "#17304D", marginBottom: 10 },
  d: { fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 13.5, lineHeight: 1.55, color: "#6B7785", margin: "0 0 18px" },
  foot: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10, borderTop: "1px solid #EEF1F5", paddingTop: 14 },
  norm: { fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, 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" },
  allWrap: { textAlign: "center", marginTop: 34 },
  all: { display: "inline-flex", alignItems: "center", gap: 8, fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 600, fontSize: 14.5, color: "#17304D", textDecoration: "none", border: "1.5px solid #CBD3DC", borderRadius: 8, padding: "12px 24px" },
};
Object.assign(window, { Services });