// PSM Expert — Página Modelagens e Estudos Avançados de Risco (subpágina de QRA)
// 5 blocos: AQR → CFD → Simulações → EAR → Facility Siting. Cada bloco: imagem + card + FAQ accordion.

const BLOCKS = [
  {
    id: "aqr",
    icon: "bar-chart",
    img: "img/modelagens/aqr.png",
    alt: "Curvas de isorrisco sobrepostas a um parque de tancagem — Análise Quantitativa de Riscos",
    cap: "Curvas de isorrisco sobre parque de tancagem (AQR / QRA).",
    t: "AQR — Análise Quantitativa de Riscos",
    norms: ["ISO 31010", "API 581", "CCPS"],
    text: "Análises Quantitativas de Riscos — avaliação de consequências e vulnerabilidades.",
    faqs: [
      { q: "O que é a AQR e para que serve?", a: "A Análise Quantitativa de Riscos (AQR ou QRA — Quantitative Risk Assessment) combina a probabilidade de ocorrência de cenários de acidente com a magnitude de suas consequências, resultando em uma estimativa numérica de risco — expressa em risco individual (fatalidade/ano) ou risco social (curvas FN). Vai além da análise qualitativa: ao quantificar o risco, permite decisões embasadas sobre o nível de proteção necessário, a viabilidade de projetos e o atendimento a critérios regulatórios." },
      { q: "Quando a AQR é obrigatória ou recomendada?", a: "A AQR é exigida por órgãos ambientais (CETESB, IBAMA, INEA, FEPAM, entre outros) para instalações que manipulam substâncias perigosas em quantidades acima dos limiares definidos — refinarias, terminais de GNL, plantas petroquímicas, dutos de alta pressão. É também recomendada nos processos de licenciamento ambiental (EIA/RIMA, EAR/PGR) e em decisões de siting, ou seja, posicionamento de edificações em relação a fontes de risco." },
      { q: "O que é entregue ao final do estudo?", a: "O relatório de AQR inclui: inventário de substâncias e cenários de acidente; frequências de ocorrência; modelagem de consequências (dispersão, explosão, incêndio); cálculo de risco individual e social; mapeamento de curvas de isorrisco; análise de tolerabilidade de risco conforme o critério do contratante ou do regulador; e recomendações priorizadas de redução de risco." },
      { q: "Quais setores mais utilizam a AQR?", a: "Petróleo & Gás, Petroquímica, Refino, Terminais de GNL e GPL, Dutos de Transporte, Fertilizantes e Químicos, Farmacêutica, Mineração (barragens e armazenamento de reagentes) e Geração de Energia. Qualquer instalação com substâncias inflamáveis, explosivas ou tóxicas acima de limiares regulatórios é candidata a um estudo de AQR." },
    ],
  },
  {
    id: "cfd",
    icon: "layers",
    img: "img/modelagens/cfd.png",
    alt: "Simulação CFD — campo de temperatura tridimensional em domínio com malha",
    cap: "Simulação CFD — campo de temperatura 3D com malha e linhas de fluxo.",
    t: "CFD — Computational Fluid Dynamics",
    norms: ["CFD", "Validação UPC Barcelona"],
    text: "Modelagem matemática de consequências, incluindo simulações por CFD.",
    faqs: [
      { q: "O que diferencia o CFD dos modelos analíticos convencionais?", a: "Os modelos analíticos (como PHAST ou os métodos do TNO) utilizam simplificações de terreno plano, campo livre e condições atmosféricas uniformes — adequados para triagens e estudos padronizados. O CFD resolve numericamente as equações de transporte de massa, quantidade de movimento e energia em um domínio tridimensional real, capturando efeitos de obstruções, confinamento, ventos locais, topografia e complexidade geométrica que os métodos simplificados não conseguem representar." },
      { q: "Em quais situações o CFD é indicado?", a: "O CFD é indicado quando: o cenário ocorre em ambiente confinado ou semi-confinado (interiores de plantas, diques, vales); há obstáculos que alteram a dispersão ou amplificam a sobrepressão de explosão; o Facility Siting envolve geometria complexa de edificações; a modelagem de incêndios em espaços fechados exige análise de fumaça e temperatura; ou quando os métodos simplificados resultam em dados inconclusivos para uma decisão regulatória ou de projeto." },
      { q: "Qual o resultado de uma simulação CFD?", a: "A simulação CFD produz campos vetoriais e escalares tridimensionais ao longo do tempo: concentração de gás, temperatura, velocidade de chama, sobrepressão de explosão e fluxo de calor — visualizados em animações 2D e 3D, planos de corte e isossuperfícies. Os resultados são integrados ao relatório de QRA ou EAR, com mapas de consequências e zonas de dano exportáveis para SIG e documentação técnica." },
      { q: "Qual é a formação técnica da equipe em CFD?", a: "Nossa equipe possui treinamento especializado em CFD aplicado à segurança de processos pela Universitat Politècnica de Catalunya (UPC Barcelona), com experiência prática em softwares como ANSYS Fluent, OpenFOAM e ferramentas específicas para segurança industrial. Combinamos rigor acadêmico com aplicação industrial, garantindo que os resultados sejam aceitos em estudos regulatórios." },
    ],
  },
  {
    id: "simulacoes",
    icon: "activity",
    img: "img/modelagens/simulacoes.png",
    alt: "Software de modelagem de incêndio — jet fire e contorno de radiação incidente sobre refinaria",
    cap: "Modelagem de jet fire com contorno de radiação incidente sobre a planta.",
    t: "Simulações e Modelagem",
    sub: "Descargas, dispersão, incêndios, explosões e efeitos tóxicos.",
    norms: ["CETESB P4.261", "API 752", "CCPS"],
    text: "Simulações computacionais em 2D e 3D para determinação de vulnerabilidades, posicionamento e determinação de detecção e atendimento a emergências.",
    faqs: [
      { q: "Quais tipos de acidente são modelados?", a: "Modelamos os principais tipos de acidente em instalações industriais: dispersão de gás ou vapor tóxico ou inflamável (nuvem tóxica, nuvem inflamável), incêndio de poça (pool fire), incêndio por jato pressurizado (jet fire), bola de fogo (fireball/BLEVE), explosão de nuvem de vapor confinada ou em campo livre (VCE/UVCE), flash fire e efeitos de dominó entre equipamentos. A seleção dos cenários parte do inventário de substâncias, das condições operacionais e dos resultados da análise qualitativa de riscos (HAZOP, HAZID)." },
      { q: "Como os resultados são apresentados?", a: "Os resultados são entregues como mapas de vulnerabilidade em 2D e 3D sobrepostos à planta da instalação — com distâncias de efeito para os limites de dano definidos (IDLH, LEL, ERPG, zonas de radiação térmica e sobrepressão). São incluídas tabelas de distâncias de segurança, análise de sensibilidade a parâmetros atmosféricos e recomendações de layout, detecção e resposta a emergências." },
      { q: "Como essas simulações se integram ao PAE e ao PGR?", a: "As distâncias e zonas de efeito calculadas alimentam diretamente o Plano de Atendimento a Emergências (PAE) — definindo zonas de alerta e evacuação, posicionamento de recursos de combate a incêndio e critérios de acionamento do plano. No PGR, as simulações fundamentam a avaliação de risco quantitativa exigida por reguladores estaduais e federais, compondo o Estudo de Análise de Risco (EAR) e seus anexos técnicos." },
      { q: "Quais softwares são utilizados?", a: "Utilizamos plataformas consolidadas no mercado global de segurança de processos: PHAST e SAFETI (DNV), ALOHA (EPA/NOAA) e ferramentas de CFD para cenários complexos. A escolha da ferramenta segue os requisitos do estudo, o tipo de cenário e as exigências do regulador — garantindo que os resultados sejam aceitos pelos órgãos de licenciamento." },
    ],
  },
  {
    id: "ear",
    icon: "file-shield",
    img: "img/modelagens/ear.png",
    alt: "Curvas de sobrepressão de explosão sobre imagem aérea da instalação — Estudo de Análise de Riscos",
    cap: "Curvas de sobrepressão sobre a área da instalação (EAR).",
    t: "EAR — Estudo de Análise de Riscos",
    norms: ["CETESB P4.261", "CEPRAM", "IBAMA"],
    text: "Elaborado conforme exigência dos órgãos ambientais, incluindo atendimento às diretrizes EAR / PGR (P4.261 – CETESB) e CEPRAM, entre outras.",
    faqs: [
      { q: "O que é o EAR e quando é exigido?", a: "O Estudo de Análise de Risco (EAR) é um documento técnico exigido no licenciamento ambiental de empreendimentos que manipulam substâncias perigosas acima de quantidades limiares. Em São Paulo, segue as diretrizes da CETESB P4.261; em outros estados é exigido por INEA, FEAM, FEPAM, SEMA e CEPRAM, entre outros. O EAR demonstra que o risco de acidente sobre trabalhadores, população e meio ambiente é tolerável e que medidas de controle adequadas estão implantadas." },
      { q: "Quais órgãos exigem o EAR?", a: "Os principais órgãos licenciadores são: CETESB (SP) — P4.261 e P4.262; IBAMA — empreendimentos com licenciamento federal; INEA (RJ); FEAM (MG); FEPAM (RS); SEMA (PR, MT); e CEPRAM (BA). A PSM Expert conhece os requisitos de cada regulador e adapta o escopo e o formato do estudo à autoridade competente." },
      { q: "O que está incluído no escopo do EAR?", a: "O EAR inclui: descrição do empreendimento e dos processos; inventário de substâncias perigosas com propriedades físico-químicas e toxicológicas; identificação de perigos (HAZID ou APR); seleção e modelagem dos cenários de acidente representativos; estimativa de frequências e consequências; avaliação de risco qualitativa ou quantitativa conforme exigência; análise de vulnerabilidade de áreas adjacentes; e plano de ação com medidas preventivas, mitigadoras e de resposta a emergências." },
      { q: "Como o EAR se relaciona com o PGR e o PAE?", a: "O EAR, o Plano de Gerenciamento de Riscos (PGR) e o Plano de Atendimento a Emergências (PAE) formam um conjunto integrado de instrumentos de gestão de riscos. O EAR identifica e avalia os riscos; o PGR define as medidas de controle para mantê-los toleráveis; o PAE estabelece os procedimentos de resposta quando um acidente ocorrer. A PSM Expert elabora os três documentos de forma integrada, garantindo consistência técnica entre os estudos e eficiência no processo de aprovação." },
    ],
  },
  {
    id: "facility-siting",
    icon: "building",
    img: "img/modelagens/facility-siting.png",
    alt: "Diagrama de Facility Siting — zonas de sobrepressão, radiação térmica e dispersão tóxica sobre o layout da planta",
    cap: "Zonas de risco (sobrepressão, radiação e dispersão) sobre o layout e a ocupação das edificações.",
    t: "Facility Siting — Estudo de Posicionamento",
    norms: ["API 752", "API 753", "CCPS"],
    text: "Avaliação do posicionamento de edificações e áreas ocupadas em relação às fontes de risco — risco individual por posição e recomendações de layout.",
    faqs: [
      { q: "O que é o Facility Siting e por que ele importa?", a: "O Facility Siting (ou Estudo de Posicionamento) avalia se as edificações de uma planta industrial — salas de controle, escritórios, vestiários, refeitórios e outras áreas ocupadas — estão posicionadas a distâncias seguras das fontes de risco de processo. A norma API 752 estabelece os critérios para edificações permanentes; a API 753, para estruturas modulares e temporárias. O estudo é especialmente crítico após reformas de layout, expansões de planta ou identificação de novos cenários de risco em um HAZOP ou QRA." },
      { q: "Como o estudo é conduzido?", a: "O estudo parte da modelagem de consequências dos cenários de acidente relevantes (dispersão tóxica, explosão VCE, jet fire, pool fire) para cada fonte de risco da instalação. Os resultados — zonas de sobrepressão, radiação térmica e concentração tóxica — são sobrepostos ao layout da planta, e o risco individual é calculado para cada edificação e área ocupada. O produto final inclui uma matriz de risco por edificação, comparação com os critérios de tolerabilidade da API 752/753 e recomendações priorizadas de mitigação ou relocação." },
      { q: "Quando o Facility Siting é recomendado ou obrigatório?", a: "É recomendado sempre que: uma nova edificação for construída próxima a fontes de risco existentes; houver expansão ou modificação significativa do processo (MoC); a QRA ou o HAZOP identificar novos cenários de acidente não avaliados anteriormente; ou como parte de um programa de auditoria PSM. Para instalações que seguem OSHA 1910.119 ou as diretrizes do CCPS, o Facility Siting é um elemento explícito do sistema de gestão de segurança de processos." },
      { q: "Quais são as medidas de mitigação tipicamente recomendadas?", a: "As recomendações podem incluir: reforço estrutural de edificações (blast-resistant design) para resistir às sobrepressões calculadas; relocação de edificações para fora das zonas de risco inaceitável; instalação de sistemas de detecção e alarme para evacuação rápida; revisão do layout de novas instalações ainda em projeto; e restrição de acesso ou limitação de permanência em áreas de risco elevado. A PSM Expert apresenta as opções ordenadas por custo-benefício e praticidade de implementação." },
    ],
  },
];

function BlockFaq({ items }) {
  const [open, setOpen] = React.useState(-1);
  return (
    <div style={md.faqList}>
      {items.map((it, i) => {
        const isOpen = open === i;
        return (
          <div key={i} style={md.faqItem}>
            <button onClick={() => setOpen(isOpen ? -1 : i)} style={md.faqBtn} aria-expanded={isOpen}>
              <span style={md.faqQ}>{it.q}</span>
              <span style={{ ...md.faqPlus, transform: isOpen ? "rotate(45deg)" : "none" }}>+</span>
            </button>
            {isOpen ? <div style={md.faqA}>{it.a}</div> : null}
          </div>
        );
      })}
    </div>
  );
}

function FeatureBlock({ b, index }) {
  const tint = index % 2 === 1;
  const reverse = index % 2 === 1;
  return (
    <section style={{ background: tint ? "#F4F6F8" : "#fff", borderTop: "1px solid #EEF1F5" }} id={b.id}>
      <div style={md.blockInner}>
        <div className="mdl-row" style={{ ...md.row, flexDirection: reverse ? "row-reverse" : "row" }}>
          <figure style={md.figure}>
            <div style={md.figFrame}>
              <img src={b.img} alt={b.alt} style={md.figImg} loading="lazy" />
            </div>
            <figcaption style={md.figCap}>{b.cap}</figcaption>
          </figure>
          <div style={md.copy}>
            <div style={md.kickerRow}>
              <span style={md.kNum}>{String(index + 1).padStart(2, "0")}</span>
              <span style={md.iconBadge}><Icon name={b.icon} size={18} color="#F08C00" stroke={1.8} /></span>
            </div>
            <h2 style={md.t}>{b.t}</h2>
            <div style={md.norms}>
              {b.norms.map((n) => <span key={n} style={md.norm}>{n}</span>)}
            </div>
            {b.sub ? <p style={md.sub}>{b.sub}</p> : null}
            <p style={md.text}>{b.text}</p>
          </div>
        </div>

        <div style={md.faqWrap}>
          <span style={md.faqLabel}>Perguntas frequentes</span>
          <BlockFaq items={b.faqs} />
        </div>
      </div>
    </section>
  );
}

function ModelagensPage() {
  return (
    <React.Fragment>
      <Header current="servicos" />

      <div style={md.crumbWrap}>
        <div style={md.crumbInner}>
          <a href="servicos.html" style={md.crumbLink}>Serviços</a>
          <span style={md.crumbSep}>/</span>
          <a href="qra.html" style={md.crumbLink}>QRA</a>
          <span style={md.crumbSep}>/</span>
          <span style={md.crumbCur}>Modelagens Avançadas</span>
        </div>
      </div>

      <PageHero
        kicker="Soluções Técnicas · Modelagens e Estudos Avançados"
        title="Modelagens e Estudos Avançados de Risco"
        subtitle="Simulação técnica de cenários de acidente — dispersão, explosão e incêndio — com ferramentas especializadas e validação por especialistas em CFD e segurança de processos."
        badges={["CFD", "Dispersão Tóxica", "BLEVE", "VCE", "Jet Fire", "Pool Fire"]} />

      {BLOCKS.map((b, i) => <FeatureBlock key={b.id} b={b} index={i} />)}

      <Section bg="#fff">
        <Callout>As modelagens avançadas complementam a <strong>Análise Quantitativa de Riscos (QRA)</strong>, aprofundando a estimativa de consequências dos cenários de acidente identificados. Podem ser contratadas de forma integrada ao QRA ou como estudo pontual.</Callout>
      </Section>

      <CtaFinal title="Precisa de uma modelagem avançada?" sub="Fale com um especialista. Atendimento imediato." />
      <Footer />
    </React.Fragment>
  );
}

const md = {
  crumbWrap: { background: "#06172C" },
  crumbInner: { maxWidth: 980, margin: "0 auto", padding: "12px 32px", display: "flex", alignItems: "center", gap: 9, flexWrap: "wrap" },
  crumbLink: { fontFamily: "'IBM Plex Mono', monospace", fontSize: 12, color: "rgba(255,255,255,.6)", textDecoration: "none" },
  crumbSep: { color: "rgba(255,255,255,.3)", fontSize: 12 },
  crumbCur: { fontFamily: "'IBM Plex Mono', monospace", fontSize: 12, color: "#F5A623" },

  blockInner: { maxWidth: 980, margin: "0 auto", padding: "56px 32px" },
  row: { display: "flex", gap: 44, alignItems: "center" },
  figure: { flex: "1 1 0", minWidth: 0, margin: 0 },
  figFrame: { aspectRatio: "16 / 10", background: "#06172C", border: "1px solid #E8ECF1", borderRadius: 12, overflow: "hidden", boxShadow: "0 8px 26px rgba(7,28,54,.10)" },
  figImg: { width: "100%", height: "100%", objectFit: "contain", display: "block" },
  figCap: { fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 12.5, lineHeight: 1.5, color: "#6B7785", margin: "10px 2px 0", fontStyle: "italic" },

  copy: { flex: "1 1 0", minWidth: 0 },
  kickerRow: { display: "flex", alignItems: "center", gap: 12, marginBottom: 12 },
  kNum: { fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: 30, color: "#CBD3DC", lineHeight: 1, letterSpacing: ".02em" },
  iconBadge: { width: 38, height: 38, borderRadius: 9, background: "#FEF4E2", display: "flex", alignItems: "center", justifyContent: "center" },
  t: { fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: 30, color: "#071C36", margin: "0 0 12px", textTransform: "uppercase", lineHeight: 1.06 },
  norms: { display: "flex", flexWrap: "wrap", gap: 7, marginBottom: 16 },
  norm: { fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, color: "#17304D", background: "#EEF2F7", borderRadius: 5, padding: "5px 10px" },
  sub: { fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 16, fontWeight: 700, color: "#17304D", margin: "0 0 8px", lineHeight: 1.5 },
  text: { fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 16, lineHeight: 1.65, color: "#45525F", margin: 0 },

  faqWrap: { marginTop: 30 },
  faqLabel: { display: "block", fontFamily: "'IBM Plex Mono', monospace", fontSize: 11.5, letterSpacing: ".1em", textTransform: "uppercase", color: "#6B7785", marginBottom: 14 },
  faqList: { display: "flex", flexDirection: "column", gap: 10 },
  faqItem: { background: "#fff", border: "1px solid #E8ECF1", borderRadius: 10, overflow: "hidden" },
  faqBtn: { width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, background: "transparent", border: "none", cursor: "pointer", padding: "16px 18px", textAlign: "left" },
  faqQ: { fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 600, fontSize: 15, color: "#071C36" },
  faqPlus: { flex: "none", color: "#F5A623", transition: "transform .2s", fontSize: 22, lineHeight: 1, fontFamily: "'IBM Plex Sans', sans-serif" },
  faqA: { padding: "0 18px 18px", fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 14.5, lineHeight: 1.65, color: "#6B7785" },

  backWrap: { marginTop: 22 },
  backBtn: { display: "inline-flex", alignItems: "center", gap: 8, fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 600, fontSize: 14, color: "#17304D", textDecoration: "none", border: "1.5px solid #CBD3DC", borderRadius: 8, padding: "11px 20px", background: "#fff" },
};
ReactDOM.createRoot(document.getElementById("root")).render(<ModelagensPage />);
