// PSM Expert — Página Blog (listagem com filtro por categoria)
const BLOG_CATEGORIES = ["Todos", "Metodologias", "Gestão", "Casos"];

const BLOG_POSTS = [
  { n: "16", cat: "Casos", t: "Air India Voo AI171: Fuel Control Switches & Gerenciamento de Mudanças", href: "artigo-air-india-ai171.html", img: "img/blog/air-india-ai171.png", d: "Estudo de caso: como um alerta da FAA de 2018 nunca migrou de uma frota para outra e o risco latente persistiu por sete anos. Falhas sobrepostas de MoC." },
  { n: "01", cat: "Metodologias", t: "HAZOP: o que é, como funciona e quando é exigido", href: "artigo-hazop.html", img: "img/blog/hazop-o-que-e.png", d: "O que é o HAZOP, como funciona na prática e quando se torna aplicável ou requerido pela ANP ou CETESB." },
  { n: "17", cat: "Metodologias", t: "BowTie: a ferramenta que coloca a gestão de riscos em perspectiva", href: "artigo-bowtie.html", img: "img/blog/bowtie.png", d: "Causas, evento topo, consequências e barreiras (preventivas e mitigadoras) — o método BowTie explicado com o exemplo do café quente." },
  { n: "18", cat: "Gestão", t: "RBPS: o framework que transforma PSM em sistema de gestão real", href: "artigo-rbps-ccps.html", img: "img/blog/rbps-ccps.png", d: "Os 4 pilares e os 20 elementos do Risk Based Process Safety do CCPS — o mapa que organiza o PSM de forma proporcional ao risco." },
];

function BlogCard({ post, featured }) {
  const hasImg = !!post.img;
  return (
    <a href={post.href || "#"} style={{ ...bl.card, ...(featured ? bl.cardFeat : {}) }} className={featured ? "psm-blog-card psm-blog-feat" : "psm-blog-card"}>
      <div style={{ ...bl.thumb, ...(featured ? bl.thumbFeat : {}), ...(hasImg ? bl.thumbImg : {}) }}>
        {hasImg ? <img src={post.img} alt="" style={bl.thumbImgEl} loading="lazy" /> : null}
        {hasImg ? <span style={bl.thumbScrim} /> : null}
        {hasImg ? null : <span style={bl.thumbNum}>{post.n}</span>}
        <span style={{ ...bl.thumbCat, position: "relative", zIndex: 2 }}>{post.cat}</span>
      </div>
      <div style={bl.body}>
        <h3 style={{ ...bl.t, ...(featured ? bl.tFeat : {}) }}>{post.t}</h3>
        <p style={bl.d}>{post.d}</p>
        <span style={bl.more}>Ler artigo <Icon name="arrow-right" size={14} color="#F5A623" /></span>
      </div>
    </a>
  );
}

function BlogPage() {
  const [cat, setCat] = React.useState("Todos");
  const posts = cat === "Todos" ? BLOG_POSTS : BLOG_POSTS.filter((p) => p.cat === cat);
  const [feat, ...rest] = posts;
  return (
    <React.Fragment>
      <Header current="blog" />
      <PageHero
        kicker="Conhecimento Técnico"
        title="Blog — Segurança de Processos & PSM"
        subtitle="Artigos técnicos sobre análise de riscos, PSM e conformidade regulatória — escritos por especialistas com experiência real de campo." />

      <section style={bl.wrap}>
        <div style={bl.inner}>
          <div style={bl.filters}>
            {BLOG_CATEGORIES.map((c) => (
              <button key={c} onClick={() => setCat(c)}
                style={{ ...bl.filter, ...(cat === c ? bl.filterActive : {}) }}>
                {c}
              </button>
            ))}
          </div>

          {feat ? <div style={bl.featWrap}><BlogCard post={feat} featured /></div> : null}

          <div style={bl.grid} className="psm-grid-3">
            {rest.map((p) => <BlogCard key={p.n} post={p} />)}
          </div>

          {posts.length === 0 ? <p style={bl.empty}>Nenhum artigo nesta categoria ainda.</p> : null}
        </div>
      </section>

      <CtaFinal title="Tem uma dúvida técnica específica?" sub="Fale com um especialista. Atendimento imediato." />
      <Footer />
    </React.Fragment>
  );
}
const bl = {
  wrap: { background: "#F4F6F8" },
  inner: { maxWidth: 1180, margin: "0 auto", padding: "56px 32px 76px" },
  filters: { display: "flex", flexWrap: "wrap", gap: 9, marginBottom: 32, justifyContent: "center" },
  filter: { fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 600, fontSize: 13.5, color: "#6B7785", background: "#fff", border: "1px solid #E8ECF1", borderRadius: 999, padding: "9px 18px", cursor: "pointer", transition: "all .14s" },
  filterActive: { color: "#fff", background: "#071C36", borderColor: "#071C36" },
  featWrap: { marginBottom: 22 },
  grid: { display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 20 },
  card: { display: "flex", flexDirection: "column", background: "#fff", border: "1px solid #E8ECF1", borderRadius: 12, overflow: "hidden", textDecoration: "none", transition: "transform .2s, box-shadow .2s" },
  cardFeat: { flexDirection: "row" },
  thumb: { position: "relative", height: 150, background: "linear-gradient(135deg,#0C2747,#06172C)", display: "flex", alignItems: "flex-end", padding: 16, overflow: "hidden" },
  thumbFeat: { flex: "none", width: 320, height: "auto", minHeight: 220 },
  thumbImg: { background: "#06172C" },
  thumbImgEl: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center" },
  thumbScrim: { position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(6,23,44,.62) 0%, rgba(6,23,44,.10) 46%, rgba(6,23,44,0) 70%)" },
  thumbNum: { position: "absolute", top: 14, right: 18, fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: 44, color: "rgba(245,166,35,.22)", lineHeight: 1 },
  thumbCat: { fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, letterSpacing: ".06em", textTransform: "uppercase", color: "#071C36", background: "#F5A623", borderRadius: 5, padding: "5px 10px", fontWeight: 500 },
  body: { padding: "20px 22px", display: "flex", flexDirection: "column", flex: 1 },
  t: { fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: 21, color: "#071C36", margin: "0 0 9px", textTransform: "uppercase", lineHeight: 1.08, textWrap: "balance" },
  tFeat: { fontSize: 28 },
  d: { fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 14, lineHeight: 1.6, color: "#6B7785", margin: "0 0 16px" },
  more: { marginTop: "auto", display: "inline-flex", alignItems: "center", gap: 7, fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 600, fontSize: 13.5, color: "#17304D" },
  empty: { textAlign: "center", fontFamily: "'IBM Plex Sans', sans-serif", color: "#6B7785", padding: "40px 0" },
};
ReactDOM.createRoot(document.getElementById("root")).render(<BlogPage />);
