// PSM Expert — Página Análise de Perigos de Processo (PHA)
// Fonte: uploads/analise-pha.md

const PHA_WHEN = [
  "Implementação ou auditoria de PSM, onde a PHA é um dos elementos obrigatórios",
  "Projetos novos (greenfield), para influenciar o projeto enquanto mudar ainda é barato",
  "Modificações de processo (brownfield) e gestão de mudanças (MoC), antes de implementar a alteração",
  "Licenciamento ambiental e regulatório, como insumo para EAR, PGR e exigências da CETESB",
  "Revalidação periódica, exigida pelo OSHA PSM a cada 5 anos, ou após incidentes e mudanças relevantes",
  "Due diligence e M&A industrial, para mapear o perfil de risco de um ativo antes da aquisição",
];

const PHA_TECHNIQUES = [
  { key: "HAZID", title: "HAZID — Identificação de Perigos", desc: "Varredura inicial de perigos, indicada nas fases conceituais e para definir o escopo dos estudos seguintes. Primeira etapa em projetos greenfield.", href: null },
  { key: "What-If", title: "What-If / Checklist", desc: "Análise por perguntas estruturadas ('e se...'), eficiente para processos mais simples ou para complementar estudos maiores.", href: null },
  { key: "HAZOP", title: "HAZOP — Análise de Perigos e Operabilidade", desc: "A técnica de PHA mais robusta para processos contínuos e complexos. Identifica desvios nó a nó com equipe multidisciplinar, conforme IEC 61882.", href: "hazop.html" },
  { key: "LOPA", title: "LOPA — Análise de Camadas de Proteção", desc: "Análise semi-quantitativa que avalia se as camadas de proteção independentes são suficientes e determina o SIL requerido.", href: "lopa.html" },
  { key: "Bow-Tie", title: "Bow-Tie — Análise por Barreiras", desc: "Visualização de causas, consequências e barreiras em torno de um evento de topo. Excelente para comunicar risco à gestão e integrar PSM.", href: "bowtie.html" },
];

const PHA_STEPS = [
  { n: "01", t: "Entendimento do processo e do objetivo", d: "Levantamento do tipo de processo, fase do ciclo de vida, substâncias envolvidas, requisitos regulatórios aplicáveis e o que a empresa precisa decidir com o estudo." },
  { n: "02", t: "Seleção da metodologia", d: "Definição da técnica (ou combinação de técnicas) mais adequada ao nível de complexidade e profundidade exigido, evitando tanto a análise rasa quanto o excesso de esforço." },
  { n: "03", t: "Condução do estudo", d: "Facilitação das sessões com equipe multidisciplinar, registro estruturado de cenários, causas, consequências, salvaguardas e recomendações." },
  { n: "04", t: "Priorização e plano de ação", d: "Recomendações ranqueadas por risco e custo-benefício, com responsáveis e prazos, prontas para acompanhamento." },
  { n: "05", t: "Documentação e suporte à decisão", d: "Relatório técnico rastreável, adequado para uso interno, auditorias, seguradoras e órgãos reguladores." },
];

const PHA_WHY = [
  "Especialistas com experiência prática em operação e segurança de processos, não apenas em facilitação de reuniões",
  "Domínio de todas as técnicas de PHA e critério para escolher a certa, em vez de aplicar sempre a mesma",
  "Integração natural com os demais elementos de PSM (MoC, ISD, segurança funcional, modelagem de consequências)",
  "Experiência nos setores de petróleo & gás, petroquímica, química, refino, fertilizantes, farmacêutica e nova energia",
  "Entrega orientada à decisão: o estudo vira plano de ação implementável, não relatório de gaveta",
];

const PHA_FAQS = [
  { q: "Qual a diferença entre PHA e HAZOP?", a: "PHA é o conceito amplo (Análise de Perigos de Processo); HAZOP é uma das técnicas de PHA. Todo HAZOP é uma PHA, mas uma PHA pode ser feita por What-If, HAZID, LOPA ou Bow-Tie, dependendo do caso." },
  { q: "Com que frequência preciso revalidar a PHA?", a: "Pelo OSHA PSM, a cada 5 anos, e sempre que houver mudanças significativas de processo ou após incidentes relevantes." },
  { q: "A PHA atende às exigências da CETESB e da ANP?", a: "A PHA é o insumo técnico que sustenta estudos exigidos no Brasil, como EAR e PGR. A técnica e a profundidade são definidas conforme o requisito aplicável a cada instalação." },
  { q: "Vocês conduzem o estudo ou só facilitam?", a: "Conduzimos de ponta a ponta: seleção da técnica, facilitação das sessões, documentação e plano de ação, trabalhando junto à equipe técnica do cliente." },
];

function PhaTechCard({ tc }) {
  const inner = (
    <div style={ph.techCard}>
      <div style={ph.techKey}>{tc.key}</div>
      <h3 style={ph.techTitle}>{tc.title}</h3>
      <p style={ph.techDesc}>{tc.desc}</p>
      {tc.href && <span style={ph.techLink}>Ver página completa →</span>}
    </div>
  );
  return tc.href
    ? <a href={tc.href} style={{ textDecoration: "none" }} className="psm-svc-card">{inner}</a>
    : <div className="psm-svc-card">{inner}</div>;
}

function PhaStep({ s }) {
  return (
    <div style={ph.step}>
      <div style={ph.stepNum}>{s.n}</div>
      <div>
        <h3 style={ph.stepTitle}>{s.t}</h3>
        <p style={ph.stepDesc}>{s.d}</p>
      </div>
    </div>
  );
}

function PhaFaq({ items }) {
  const [open, setOpen] = React.useState(null);
  return (
    <div style={ph.faqWrap}>
      {items.map((item, i) => (
        <div key={i} style={ph.faqItem}>
          <button style={ph.faqQ} onClick={() => setOpen(open === i ? null : i)} aria-expanded={open === i}>
            <span>{item.q}</span>
            <Icon name={open === i ? "chevron-up" : "chevron-down"} size={18} color="#F5A623" />
          </button>
          {open === i && <p style={ph.faqA}>{item.a}</p>}
        </div>
      ))}
    </div>
  );
}

function Pha() {
  const WPP = "https://wa.me/5511937598873?text=Ol%C3%A1%2C%20preciso%20de%20uma%20an%C3%A1lise%20PHA%20%2F%20HAZOP%20para%20o%20meu%20processo.";
  return (
    <div style={ph.page}>
      <Header current="analises" />

      {/* Hero */}
      <section style={ph.hero}>
        <div style={ph.heroInner}>
          <div style={ph.heroBadge}>PHA — Process Hazard Analysis</div>
          <h1 style={ph.heroH1}>Análise de Perigos de Processo (PHA)</h1>
          <p style={ph.heroLead}>Identifique, avalie e controle os perigos do seu processo com a técnica certa para cada cenário — HAZOP, What-If, LOPA, Bow-Tie e mais.</p>
          <div style={ph.heroCtas}>
            <a href={WPP} style={ph.ctaPrimary} target="_blank" rel="noopener"
              onMouseEnter={e => e.currentTarget.style.background="#F08C00"}
              onMouseLeave={e => e.currentTarget.style.background="#F5A623"}>
              <Icon name="message-circle" size={17} color="#071C36" /> Solicitar avaliação
            </a>
            <a href="contato.html" style={ph.ctaGhost}
              onMouseEnter={e => e.currentTarget.style.borderColor="#fff"}
              onMouseLeave={e => e.currentTarget.style.borderColor="rgba(255,255,255,.25)"}>
              Falar com um especialista →
            </a>
          </div>
          <div style={ph.heroBadges}>
            {["OSHA 1910.119","CCPS RBPS","IEC 61882","NR-1/GRO","CETESB","ANP"].map(b => (
              <span key={b} style={ph.badge}>{b}</span>
            ))}
          </div>
        </div>
      </section>

      {/* O que é PHA */}
      <section style={ph.section}>
        <div style={ph.container}>
          <div style={ph.sectionLabel}>O que é PHA?</div>
          <h2 style={ph.sectionH2}>O núcleo de qualquer programa de segurança de processos</h2>
          <div style={ph.twoCol}>
            <div>
              <p style={ph.body}>PHA (Process Hazard Analysis, ou Análise de Perigos de Processo) é o termo guarda-chuva para o conjunto de metodologias sistemáticas usadas para identificar e avaliar os perigos associados a um processo industrial. Em vez de uma única ferramenta, PHA é uma família de técnicas, e cada uma responde melhor a um tipo de processo, fase de projeto e profundidade de análise.</p>
              <p style={ph.body}>A PHA é exigência explícita do padrão <strong>OSHA PSM (29 CFR 1910.119)</strong> e do framework <strong>RBPS do CCPS</strong>, e está na base dos requisitos brasileiros de gestão de risco (NR-1/GRO, exigências da CETESB e da ANP para instalações de alto risco).</p>
            </div>
            <div style={ph.threeQBox}>
              <div style={ph.threeQTitle}>Uma PHA responde a três perguntas fundamentais</div>
              {[
                "O que pode dar errado neste processo?",
                "Quão grave é a consequência e com que frequência pode ocorrer?",
                "As proteções existentes são suficientes, ou precisamos de mais camadas?",
              ].map((q, i) => (
                <div key={i} style={ph.threeQItem}>
                  <span style={ph.threeQN}>{i + 1}</span>
                  <span style={ph.threeQText}>{q}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Quando é necessária */}
      <section style={{ ...ph.section, background: "#F4F6F8" }}>
        <div style={ph.container}>
          <div style={ph.sectionLabel}>Quando é necessária</div>
          <h2 style={ph.sectionH2}>Situações que exigem uma PHA</h2>
          <div style={ph.whenGrid}>
            {PHA_WHEN.map((item, i) => (
              <div key={i} style={ph.whenItem}>
                <Icon name="check-circle" size={18} color="#1A7A4A" stroke={1.8} />
                <span style={ph.whenText}>{item}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Técnicas */}
      <section style={ph.section}>
        <div style={ph.container}>
          <div style={ph.sectionLabel}>As técnicas de PHA</div>
          <h2 style={ph.sectionH2}>Não existe uma técnica "melhor" — existe a técnica certa</h2>
          <p style={{ ...ph.body, marginBottom: 40, maxWidth: 720 }}>As principais metodologias que conduzimos, sozinhas ou combinadas conforme o processo, a fase e o nível de detalhe exigido:</p>
          <div style={ph.techGrid}>
            {PHA_TECHNIQUES.map(tc => <PhaTechCard key={tc.key} tc={tc} />)}
          </div>
          <div style={ph.integNote}>
            <Icon name="info" size={16} color="#F5A623" />
            <p style={ph.integNoteText}>Em muitos projetos essas técnicas se combinam: o HAZID define o escopo, o HAZOP aprofunda os cenários, a LOPA quantifica a suficiência das proteções e o Bow-Tie comunica o resultado à gestão. Quando a análise aponta necessidade de instrumentação de segurança, ela conecta diretamente à <a href="sil-sis-sif.html" style={{ color: "#F5A623" }}>verificação de SIL/SIS/SIF →</a></p>
          </div>
        </div>
      </section>

      {/* Como escolhemos */}
      <section style={{ ...ph.section, background: "#071C36" }}>
        <div style={ph.container}>
          <div style={{ ...ph.sectionLabel, color: "#F5A623" }}>Nossa metodologia</div>
          <h2 style={{ ...ph.sectionH2, color: "#fff" }}>Como escolhemos a técnica certa</h2>
          <div style={ph.stepsWrap}>
            {PHA_STEPS.map(s => <PhaStep key={s.n} s={s} />)}
          </div>
        </div>
      </section>

      {/* Revalidação */}
      <section style={{ ...ph.section, background: "#F4F6F8" }}>
        <div style={ph.container}>
          <div style={ph.revalBox}>
            <div>
              <div style={ph.sectionLabel}>Revalidação de PHA</div>
              <h2 style={{ ...ph.sectionH2, marginBottom: 16 }}>Obrigatória a cada 5 anos pelo OSHA PSM</h2>
              <p style={ph.body}>A revalidação não é refazer o estudo do zero: é verificar se ele ainda reflete a planta real, incorporar as mudanças ocorridas (MoC), revisar as recomendações pendentes e atualizar os cenários à luz de novos aprendizados e incidentes. A PSM Expert conduz revalidações preservando o histórico do estudo original e documentando claramente o que mudou e por quê.</p>
            </div>
            <div style={ph.revalBadge}>
              <div style={ph.revalNum}>5</div>
              <div style={ph.revalUnit}>anos</div>
              <div style={ph.revalSub}>ciclo máximo de revalidação — OSHA PSM 29 CFR 1910.119</div>
            </div>
          </div>
        </div>
      </section>

      {/* Por que PSM Expert */}
      <section style={ph.section}>
        <div style={ph.container}>
          <div style={ph.sectionLabel}>Por que a PSM Expert</div>
          <h2 style={ph.sectionH2}>Especialistas em PHA, não apenas facilitadores</h2>
          <div style={ph.whyGrid}>
            {PHA_WHY.map((item, i) => (
              <div key={i} style={ph.whyItem}>
                <Icon name="shield-check" size={20} color="#071C36" stroke={1.7} />
                <p style={ph.whyText}>{item}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section style={{ ...ph.section, background: "#F4F6F8" }}>
        <div style={ph.container}>
          <div style={ph.sectionLabel}>Perguntas frequentes</div>
          <h2 style={{ ...ph.sectionH2, marginBottom: 32 }}>Dúvidas sobre PHA</h2>
          <div style={{ maxWidth: 800 }}>
            <PhaFaq items={PHA_FAQS} />
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={ph.ctaSection}>
        <div style={ph.ctaInner}>
          <h2 style={ph.ctaH2}>Seu processo já passou por uma análise de perigos estruturada?</h2>
          <p style={ph.ctaLead}>Fale com a PSM Expert. Avaliamos seu cenário e indicamos a técnica de PHA mais adequada para a sua operação.</p>
          <div style={ph.ctaBtns}>
            <a href={WPP} style={ph.ctaPrimary} target="_blank" rel="noopener"
              onMouseEnter={e => e.currentTarget.style.background="#F08C00"}
              onMouseLeave={e => e.currentTarget.style.background="#F5A623"}>
              <Icon name="message-circle" size={17} color="#071C36" /> Solicitar avaliação
            </a>
            <a href="contato.html" style={ph.ctaGhost}
              onMouseEnter={e => e.currentTarget.style.borderColor="#fff"}
              onMouseLeave={e => e.currentTarget.style.borderColor="rgba(255,255,255,.25)"}>
              Falar com um especialista →
            </a>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
}

const ph = {
  page: { fontFamily: "'IBM Plex Sans', sans-serif", color: "#1A2332", background: "#fff" },
  hero: { background: "#071C36", padding: "80px 32px 72px" },
  heroInner: { maxWidth: 840, margin: "0 auto" },
  heroBadge: { display: "inline-block", fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, fontWeight: 500, letterSpacing: ".13em", textTransform: "uppercase", color: "#F5A623", marginBottom: 18 },
  heroH1: { fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 800, fontSize: "clamp(36px,6vw,64px)", lineHeight: 1.06, color: "#fff", margin: "0 0 20px", letterSpacing: "-.01em", textTransform: "uppercase" },
  heroLead: { fontSize: 18, lineHeight: 1.65, color: "rgba(255,255,255,.8)", margin: "0 0 32px", maxWidth: 680 },
  heroCtas: { display: "flex", gap: 14, flexWrap: "wrap", marginBottom: 32 },
  ctaPrimary: { display: "inline-flex", alignItems: "center", gap: 8, fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 600, fontSize: 15, color: "#071C36", background: "#F5A623", borderRadius: 8, padding: "13px 24px", textDecoration: "none", transition: "background .14s" },
  ctaGhost: { display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 500, fontSize: 15, color: "rgba(255,255,255,.85)", border: "1px solid rgba(255,255,255,.25)", borderRadius: 8, padding: "13px 22px", textDecoration: "none", transition: "border-color .14s" },
  heroBadges: { display: "flex", gap: 8, flexWrap: "wrap" },
  badge: { fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, fontWeight: 500, letterSpacing: ".06em", color: "rgba(255,255,255,.55)", border: "1px solid rgba(255,255,255,.15)", borderRadius: 5, padding: "4px 9px" },
  section: { padding: "72px 32px" },
  container: { maxWidth: 1200, margin: "0 auto" },
  sectionLabel: { fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, fontWeight: 500, letterSpacing: ".13em", textTransform: "uppercase", color: "#1A7A4A", marginBottom: 12 },
  sectionH2: { fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: "clamp(26px,4vw,40px)", lineHeight: 1.1, color: "#071C36", margin: "0 0 28px", textTransform: "uppercase", letterSpacing: "-.01em" },
  body: { fontSize: 16, lineHeight: 1.72, color: "#3D4D5C", margin: "0 0 20px" },
  twoCol: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "start" },
  threeQBox: { background: "#F4F6F8", borderRadius: 12, padding: "28px 32px" },
  threeQTitle: { fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, fontWeight: 500, letterSpacing: ".1em", textTransform: "uppercase", color: "#6B7785", marginBottom: 20 },
  threeQItem: { display: "flex", gap: 14, alignItems: "flex-start", marginBottom: 16 },
  threeQN: { minWidth: 26, height: 26, borderRadius: "50%", background: "#071C36", color: "#F5A623", fontFamily: "'IBM Plex Mono', monospace", fontWeight: 700, fontSize: 12, display: "flex", alignItems: "center", justifyContent: "center" },
  threeQText: { fontSize: 15, lineHeight: 1.6, color: "#1A2332" },
  whenGrid: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(340px, 1fr))", gap: 16 },
  whenItem: { display: "flex", gap: 14, alignItems: "flex-start", background: "#fff", borderRadius: 10, padding: "18px 20px", border: "1px solid #E2E8F0" },
  whenText: { fontSize: 15, lineHeight: 1.6, color: "#1A2332" },
  techGrid: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: 16, marginBottom: 24 },
  techCard: { background: "#F4F6F8", borderRadius: 12, padding: "24px 26px", height: "100%", border: "1px solid transparent", transition: "border-color .14s, background .14s" },
  techKey: { fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, fontWeight: 600, letterSpacing: ".1em", color: "#1A7A4A", textTransform: "uppercase", marginBottom: 8 },
  techTitle: { fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: 20, color: "#071C36", margin: "0 0 10px", lineHeight: 1.2, textTransform: "uppercase" },
  techDesc: { fontSize: 14, lineHeight: 1.65, color: "#3D4D5C", margin: "0 0 12px" },
  techLink: { fontSize: 13, fontWeight: 600, color: "#F5A623" },
  integNote: { display: "flex", gap: 12, alignItems: "flex-start", background: "#071C36", borderRadius: 10, padding: "18px 22px" },
  integNoteText: { fontSize: 14, lineHeight: 1.65, color: "rgba(255,255,255,.78)", margin: 0 },
  stepsWrap: { display: "flex", flexDirection: "column", gap: 0 },
  step: { display: "flex", gap: 24, alignItems: "flex-start", padding: "28px 0", borderBottom: "1px solid rgba(255,255,255,.08)" },
  stepNum: { minWidth: 48, height: 48, borderRadius: 10, background: "rgba(245,166,35,.15)", border: "1px solid rgba(245,166,35,.3)", color: "#F5A623", fontFamily: "'IBM Plex Mono', monospace", fontWeight: 700, fontSize: 16, display: "flex", alignItems: "center", justifyContent: "center" },
  stepTitle: { fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: 20, color: "#fff", margin: "0 0 8px", textTransform: "uppercase" },
  stepDesc: { fontSize: 14.5, lineHeight: 1.68, color: "rgba(255,255,255,.72)", margin: 0 },
  revalBox: { display: "grid", gridTemplateColumns: "1fr auto", gap: 48, alignItems: "center" },
  revalBadge: { textAlign: "center", background: "#071C36", borderRadius: 16, padding: "32px 40px", minWidth: 180 },
  revalNum: { fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 800, fontSize: 80, lineHeight: 1, color: "#F5A623" },
  revalUnit: { fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: 24, color: "#fff", textTransform: "uppercase", letterSpacing: ".06em" },
  revalSub: { fontSize: 11, color: "rgba(255,255,255,.5)", marginTop: 8, lineHeight: 1.5, fontFamily: "'IBM Plex Mono', monospace", letterSpacing: ".05em" },
  whyGrid: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(340px, 1fr))", gap: 16 },
  whyItem: { display: "flex", gap: 16, alignItems: "flex-start", background: "#F4F6F8", borderRadius: 10, padding: "20px 22px" },
  whyText: { fontSize: 15, lineHeight: 1.65, color: "#1A2332", margin: 0 },
  faqWrap: { display: "flex", flexDirection: "column", gap: 0 },
  faqItem: { borderBottom: "1px solid #E2E8F0" },
  faqQ: { width: "100%", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, background: "transparent", border: "none", padding: "20px 0", cursor: "pointer", fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 600, fontSize: 16, color: "#071C36", textAlign: "left" },
  faqA: { fontSize: 15, lineHeight: 1.72, color: "#3D4D5C", margin: "0 0 20px", paddingRight: 32 },
  ctaSection: { background: "#071C36", padding: "80px 32px" },
  ctaInner: { maxWidth: 760, margin: "0 auto", textAlign: "center" },
  ctaH2: { fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 800, fontSize: "clamp(28px,4.5vw,46px)", color: "#fff", margin: "0 0 16px", textTransform: "uppercase", lineHeight: 1.1 },
  ctaLead: { fontSize: 17, lineHeight: 1.65, color: "rgba(255,255,255,.75)", margin: "0 0 36px" },
  ctaBtns: { display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" },
};

ReactDOM.createRoot(document.getElementById("root")).render(React.createElement(Pha));