// PSM Expert — Página Facility Siting Studies e QRA
// Fonte: facility-siting.md

const FS_STEPS = [
  { t: "Levantamento e definição de cenários", d: "Mapeamento das fontes de risco, inventário de substâncias, condições operacionais e cenários de perda de contenção mais críticos e credíveis." },
  { t: "Modelagem de consequências", d: "Simulação computacional de explosões (sobrepressão), incêndios (radiação térmica) e dispersão de substâncias tóxicas, com geração de mapas georreferenciados." },
  { t: "Avaliação quantitativa de risco", d: "Estimativa de frequências e cálculo de risco individual e social (curvas F-N), comparados a critérios de tolerabilidade reconhecidos (HSE, RIVM, ALARP)." },
  { t: "Recomendações e priorização", d: "Identificação das medidas de controle mais eficazes em custo-benefício e redução de risco, com plano de implementação priorizado." },
  { t: "Relatório técnico e suporte à decisão", d: "Documentação completa para uso interno, apresentação a reguladores, seguradoras e tomadores de decisão." },
];

const FS_WHEN = [
  "Expansão ou construção de novas instalações — posicionar edificações, abrigos e áreas de controle a distâncias seguras das fontes de risco",
  "Operações com hidrogênio, amônia, GLP, gases inflamáveis ou substâncias tóxicas — quantificar zonas de risco toleráveis e intoleráveis",
  "Cumprimento de requisitos regulatórios — OSHA PSM, EPA RMP, normas ABNT e exigências de seguradoras industriais",
  "Avaliação de projetos brownfield — revisar layout existente à luz de novas operações ou mudanças de processo",
  "Due diligence e M&A industrial — identificar passivos de risco antes de aquisições",
];

const FS_WHY = [
  "Especialistas com experiência prática em operações industriais e segurança de processo — não apenas modelagem teórica",
  "Uso de software de referência internacional para modelagem de consequências e QRA",
  "Entrega orientada à decisão de negócio: estudos traduzidos em ações práticas, não apenas em relatórios",
  "Experiência em petróleo & gás, petroquímica, química fina, energia e hidrogênio",
  "Suporte ao longo do ciclo: da concepção do projeto à implementação das medidas recomendadas",
];

const FS_CASES = [
  { icon: "wind", t: "Facility Siting para Plantas de Hidrogênio Verde", d: "Explosões de H₂ têm características únicas — overpressure, jet fires e flash fires que ignoram regras convencionais. Veja como avaliamos e mitigamos riscos em uma planta de geração de H₂ verde.", href: "nova-energia-hidrogenio-amonia.html" },
  { icon: "droplet", t: "QRA em Instalações de Amônia Verde", d: "Amônia verde como vetor energético traz riscos tóxicos subestimados. Descubra o que as zonas de risco revelaram — e o que mudou no projeto por causa disso.", href: "nova-energia-hidrogenio-amonia.html" },
  { icon: "activity", t: "Dispersão para Posicionamento de Detectores de Gás", d: "Um detector mal posicionado pode ser pior do que não ter detector. Saiba como estudos de dispersão CFD definem onde, quantos e de que tipo — com base em física, não em regras de bolso.", href: "analise-dispersao-detectores.html" },
  { icon: "file-shield", t: "Análise de Riscos conforme CETESB P4.261", d: "Mais do que cumprir a norma — veja como transformamos um estudo de AR exigido pelo licenciamento em um instrumento real de gestão de risco para o cliente.", href: "ear.html" },
  { icon: "anchor", t: "Risco de Amônia em Transporte Marítimo e Portuário", d: "Terminais portuários com amônia concentram múltiplos cenários críticos em espaços confinados e populações vulneráveis. Veja como a modelagem CFD redefiniu as distâncias de segurança.", href: "contato.html" },
];

function FSCaseCard({ c }) {
  return (
    <a href={c.href} style={fs.caseCard} className="psm-svc-card">
      <span style={fs.caseIcon}><Icon name={c.icon} size={22} color="#17304D" stroke={1.7} /></span>
      <h3 style={fs.caseT}>{c.t}</h3>
      <p style={fs.caseD}>{c.d}</p>
      <span style={fs.caseMore}>Ver o estudo <Icon name="arrow-right" size={14} color="#F5A623" /></span>
    </a>
  );
}

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

      <div style={fs.crumbWrap}>
        <div style={fs.crumbInner}>
          <a href="servicos.html" style={fs.crumbLink}>Serviços</a>
          <span style={fs.crumbSep}>/</span>
          <a href="qra.html" style={fs.crumbLink}>QRA</a>
          <span style={fs.crumbSep}>/</span>
          <span style={fs.crumbCur}>Facility Siting &amp; QRA</span>
        </div>
      </div>

      <PageHero
        kicker="Soluções Técnicas · Facility Siting Studies"
        title="Facility Siting Studies e QRA"
        subtitle="Avalie riscos, proteja pessoas e tome decisões com base em dados. Consequências de explosões, incêndios e liberações tóxicas deixaram de ser estimativas — com FSS e QRA, sua organização quantifica os riscos reais e prioriza as mitigações mais eficazes."
        badges={["FSS", "QRA", "API 752 / 753", "Sobrepressão", "Radiação Térmica", "Dispersão Tóxica", "ALARP"]} />

      {/* O que é */}
      <Section title="O que é um Facility Siting Study?"
        intro="Facility Siting Studies (FSS) e Quantitative Risk Assessments (QRA) são metodologias estruturadas de segurança de processo que avaliam quantitativamente as consequências e os riscos associados a cenários críticos de perda de contenção em instalações industriais.">

        <figure style={fs.heroFig}>
          <div style={fs.heroFigFrame}>
            <img src="img/nova-energia/facility-siting-paineis.png" alt="Planta de situação, mapa de sobrepressão de explosão e distâncias de segurança de facility siting" style={fs.heroFigImg} loading="lazy" />
          </div>
          <figcaption style={fs.figCap}>Da planta de situação ao mapa de sobrepressão e às distâncias de segurança: os cenários de explosão, incêndio e liberação tóxica definem o layout seguro da instalação.</figcaption>
        </figure>

        <P>Por meio de modelos de dispersão, análise de sobrepressão e avaliação de efeitos térmicos, esses estudos permitem determinar com precisão:</P>
        <BulletList items={[
          "A extensão e severidade de eventos de explosão, incêndio e liberação de substâncias tóxicas",
          "O impacto sobre pessoal onsite e população offsite",
          "A efetividade comparativa de diferentes medidas de mitigação",
        ]} />
      </Section>

      {/* Quando */}
      <Section title="Quando um FSS ou QRA é necessário?" bg="#F4F6F8"
        intro="Esses estudos são fundamentais em situações como:">
        <BulletList items={FS_WHEN} />
      </Section>

      {/* Abordagem */}
      <Section title="Nossa abordagem"
        intro="Um processo estruturado em cinco etapas, da definição de cenários ao suporte à decisão.">
        <StepsVertical steps={FS_STEPS} />
      </Section>

      {/* Por que */}
      <Section title="Por que a PSM Expert?" bg="#F4F6F8">
        <CheckList items={FS_WHY} />
      </Section>

      {/* Cases */}
      <Section title="Cases e últimos trabalhos"
        intro="O que já entregamos para operações como a sua — estudos aplicados em projetos reais, do posicionamento de instalações à homologação regulatória.">
        <div style={fs.caseGrid} className="psm-grid-2">
          {FS_CASES.map((c) => <FSCaseCard key={c.t} c={c} />)}
        </div>
        <RelatedServices exclude="" />
      </Section>

      <Section bg="#06172C">
        <div style={fs.closeWrap}>
          <h2 style={fs.closeT}>Sua instalação já tem visibilidade sobre os riscos que representa?</h2>
          <p style={fs.closeP}>Fale com a PSM Expert. Avaliamos o seu cenário e indicamos o estudo mais adequado para a sua operação.</p>
          <div style={fs.closeActions}>
            <a href="https://wa.me/5511934083465" style={fs.closeWpp}><Icon name="message-circle" size={18} color="#fff" /> Chamar no WhatsApp</a>
            <a href="contato.html" style={fs.closeMail}><Icon name="mail" size={18} color="#071C36" /> Solicitar avaliação</a>
          </div>
        </div>
      </Section>

      <Footer />
    </React.Fragment>
  );
}

const fs = {
  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" },

  heroFig: { margin: "0 0 26px" },
  heroFigFrame: { background: "#fff", border: "1px solid #E8ECF1", borderRadius: 12, overflow: "hidden", boxShadow: "0 10px 30px rgba(7,28,54,.10)" },
  heroFigImg: { width: "100%", height: "auto", display: "block" },
  figCap: { fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 12.5, lineHeight: 1.5, color: "#6B7785", margin: "10px 2px 0", fontStyle: "italic" },

  caseGrid: { display: "grid", gridTemplateColumns: "repeat(2,1fr)", gap: 18 },
  caseCard: { display: "flex", flexDirection: "column", background: "#fff", border: "1px solid #E8ECF1", borderLeft: "3px solid #E8ECF1", borderRadius: 12, padding: "22px 24px", textDecoration: "none", transition: "transform .2s, box-shadow .2s, border-left-color .2s" },
  caseIcon: { width: 44, height: 44, borderRadius: 10, background: "#F4F6F8", border: "1px solid #E8ECF1", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 14 },
  caseT: { fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: 21, color: "#071C36", margin: "0 0 8px", textTransform: "uppercase", lineHeight: 1.1 },
  caseD: { fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 14, lineHeight: 1.6, color: "#6B7785", margin: "0 0 16px", flex: 1 },
  caseMore: { display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 600, fontSize: 13, color: "#17304D" },

  closeWrap: { maxWidth: 720 },
  closeT: { fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: 34, color: "#fff", margin: "0 0 12px", textTransform: "uppercase", lineHeight: 1.08, textWrap: "balance" },
  closeP: { fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 16, lineHeight: 1.6, color: "rgba(255,255,255,.75)", margin: "0 0 24px" },
  closeActions: { display: "flex", gap: 13, flexWrap: "wrap" },
  closeWpp: { display: "inline-flex", alignItems: "center", gap: 9, fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 600, fontSize: 15, color: "#fff", background: "#25D366", border: "none", borderRadius: 8, padding: "14px 24px", textDecoration: "none" },
  closeMail: { display: "inline-flex", alignItems: "center", gap: 9, fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 600, fontSize: 15, color: "#071C36", background: "#F5A623", border: "none", borderRadius: 8, padding: "14px 24px", textDecoration: "none" },
};
ReactDOM.createRoot(document.getElementById("root")).render(<FacilitySitingPage />);