// PSM Expert — Template reutilizável de artigo de blog (o "molde")
// Conteúdo é composto na página específica (ex.: ArtigoHazop.jsx) usando estes blocos.

// Cabeçalho navy do artigo: breadcrumb + categoria + título + dek + assinatura/meta
function ArticleHeader({ category, categoryHref, title, dek, dateLabel, readTime }) {
  return (
    <section style={ar.heroWrap}>
      <div style={ar.heroInner}>
        <nav style={ar.crumbs} aria-label="Trilha de navegação">
          <a href="index.html" style={ar.crumb}>Início</a>
          <span style={ar.crumbSep}>›</span>
          <a href="blog.html" style={ar.crumb}>Blog</a>
          <span style={ar.crumbSep}>›</span>
          <a href={categoryHref || "blog.html"} style={ar.crumb}>{category}</a>
        </nav>
        <span style={ar.cat}>{category}</span>
        <h1 style={ar.h1} className="psm-article-h1">{title}</h1>
        {dek ? <p style={ar.dek}>{dek}</p> : null}
        <div style={ar.meta}>
          <span style={ar.byMark} aria-hidden="true"><Icon name="shield-check" size={16} color="#F5A623" /></span>
          <span style={ar.byName}>Equipe PSM Expert</span>
          <span style={ar.metaDot}>·</span>
          <span style={ar.metaItem}>{dateLabel}</span>
          <span style={ar.metaDot}>·</span>
          <span style={ar.metaItem}>{readTime}</span>
        </div>
      </div>
    </section>
  );
}

// Coluna de leitura branca
function ArticleShell({ children }) {
  return (
    <section style={ar.bodyWrap}>
      <article style={ar.column} className="psm-prose">{children}</article>
    </section>
  );
}

// Índice "Neste artigo"
function ArticleTOC({ items }) {
  return (
    <nav style={ar.toc} aria-label="Neste artigo">
      <span style={ar.tocH}>Neste artigo</span>
      <ol style={ar.tocList}>
        {items.map((it) => (
          <li key={it.id} style={ar.tocLi}>
            <a href={"#" + it.id} style={ar.tocLink}>{it.label}</a>
          </li>
        ))}
      </ol>
    </nav>
  );
}

function ArtFigure({ src, alt, caption }) {
  return (
    <figure style={ar.figure}>
      <img src={src} alt={alt} style={ar.figImg} loading="lazy" />
      {caption ? <figcaption style={ar.figCap}>{caption}</figcaption> : null}
    </figure>
  );
}

function ArtH2({ id, children }) { return <h2 id={id} style={ar.h2}><span style={ar.h2bar} />{children}</h2>; }
function ArtH3({ children }) { return <h3 style={ar.h3}>{children}</h3>; }
function ArtLead({ children }) { return <p style={ar.lead}>{children}</p>; }
function ArtP({ children }) { return <p style={ar.p}>{children}</p>; }
function ArtUL({ items }) {
  return (
    <ul style={ar.ul}>
      {items.map((it, i) => (
        <li key={i} style={ar.li}><span style={ar.bullet} />{<span>{it}</span>}</li>
      ))}
    </ul>
  );
}

// Caixa "Principais conclusões"
function KeyTakeaways({ items, title = "Principais conclusões" }) {
  return (
    <aside style={ar.kt}>
      <div style={ar.ktHead}><Icon name="check" size={16} color="#F5A623" stroke={2.6} /><span style={ar.ktTitle}>{title}</span></div>
      <ul style={ar.ktList}>
        {items.map((it, i) => (
          <li key={i} style={ar.ktLi}><span style={ar.ktDot} />{it}</li>
        ))}
      </ul>
    </aside>
  );
}

// Assinatura institucional (sem pessoa física)
function AuthorBox() {
  return (
    <div style={ar.author}>
      <div style={ar.authorMark}><Icon name="layers" size={22} color="#fff" /></div>
      <div>
        <div style={ar.authorName}>Escrito pela equipe PSM Expert</div>
        <p style={ar.authorBio}>Consultoria técnica independente em Segurança de Processos e Gerenciamento de Riscos. Conteúdo revisado por especialistas com experiência real de campo em HAZOP, QRA, LOPA/SIL e PSM.</p>
        <a href="contato.html" style={ar.authorLink}>Falar com um especialista <Icon name="arrow-right" size={14} color="#17304D" /></a>
      </div>
    </div>
  );
}

// Barra de compartilhamento
function ShareBar({ url, title }) {
  const u = encodeURIComponent(url);
  const t = encodeURIComponent(title);
  return (
    <div style={ar.share}>
      <span style={ar.shareLabel}>Compartilhar</span>
      <a style={ar.shareBtn} href={`https://www.linkedin.com/sharing/share-offsite/?url=${u}`} target="_blank" rel="noopener" aria-label="Compartilhar no LinkedIn"><Icon name="linkedin" size={16} color="#17304D" /></a>
      <a style={ar.shareBtn} href={`https://wa.me/?text=${t}%20${u}`} target="_blank" rel="noopener" aria-label="Compartilhar no WhatsApp"><Icon name="message-circle" size={16} color="#17304D" /></a>
      <button style={ar.shareBtn} onClick={() => window.print()} aria-label="Imprimir ou salvar em PDF"><Icon name="file-text" size={16} color="#17304D" /></button>
    </div>
  );
}

// Artigos relacionados
function RelatedArticles({ items }) {
  return (
    <section style={ar.relWrap}>
      <div style={ar.relInner}>
        <h2 style={ar.relH}>Continue lendo</h2>
        <div style={ar.relGrid} className="psm-grid-3">
          {items.map((p) => (
            <a key={p.t} href={p.href || "blog.html"} style={ar.relCard} className="psm-blog-card">
              <div style={ar.relThumb}><span style={ar.relCat}>{p.cat}</span></div>
              <div style={ar.relBody}>
                <h3 style={ar.relT}>{p.t}</h3>
                <span style={ar.relMore}>Ler artigo <Icon name="arrow-right" size={13} color="#F5A623" /></span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

const ar = {
  heroWrap: { background: "linear-gradient(150deg,#071C36 0%,#06172C 100%)" },
  heroInner: { maxWidth: 820, margin: "0 auto", padding: "40px 32px 48px" },
  crumbs: { display: "flex", alignItems: "center", gap: 9, flexWrap: "wrap", marginBottom: 22, fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 13 },
  crumb: { color: "rgba(255,255,255,.6)", textDecoration: "none" },
  crumbSep: { color: "rgba(255,255,255,.35)" },
  cat: { display: "inline-block", fontFamily: "'IBM Plex Mono', monospace", fontSize: 11.5, letterSpacing: ".08em", textTransform: "uppercase", color: "#071C36", background: "#F5A623", borderRadius: 5, padding: "5px 11px", fontWeight: 500, marginBottom: 18 },
  h1: { fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: 46, lineHeight: 1.06, color: "#fff", margin: 0, textTransform: "uppercase", textWrap: "balance" },
  dek: { fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 18, lineHeight: 1.6, color: "rgba(255,255,255,.74)", margin: "18px 0 0", maxWidth: 700 },
  meta: { display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap", marginTop: 26, paddingTop: 20, borderTop: "1px solid rgba(255,255,255,.12)" },
  byMark: { width: 30, height: 30, borderRadius: 8, background: "rgba(245,166,35,.12)", border: "1px solid rgba(245,166,35,.4)", display: "flex", alignItems: "center", justifyContent: "center" },
  byName: { fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 600, fontSize: 14, color: "#fff" },
  metaDot: { color: "rgba(255,255,255,.4)" },
  metaItem: { fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 13.5, color: "rgba(255,255,255,.6)" },

  bodyWrap: { background: "#fff" },
  column: { maxWidth: 760, margin: "0 auto", padding: "52px 32px 64px" },

  toc: { background: "#F4F6F8", border: "1px solid #E8ECF1", borderRadius: 12, padding: "20px 24px", margin: "0 0 40px" },
  tocH: { display: "block", fontFamily: "'IBM Plex Mono', monospace", fontSize: 11.5, letterSpacing: ".1em", textTransform: "uppercase", color: "#6B7785", marginBottom: 12 },
  tocList: { margin: 0, padding: "0 0 0 4px", listStyle: "none", counterReset: "toc", display: "flex", flexDirection: "column", gap: 9 },
  tocLi: { display: "flex" },
  tocLink: { fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 15, color: "#17304D", textDecoration: "none", borderBottom: "1px solid transparent", paddingBottom: 1 },

  figure: { margin: "34px 0", borderRadius: 12, overflow: "hidden", border: "1px solid #E8ECF1", boxShadow: "0 14px 36px rgba(7,28,54,.10)" },
  figImg: { width: "100%", height: "auto", display: "block" },
  figCap: { fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 13, color: "#6B7785", lineHeight: 1.5, padding: "12px 16px", background: "#F9FAFB", borderTop: "1px solid #EEF1F4", margin: 0 },

  h2: { position: "relative", fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: 33, color: "#071C36", margin: "46px 0 16px", textTransform: "uppercase", letterSpacing: ".01em", lineHeight: 1.1, scrollMarginTop: 90 },
  h2bar: { display: "block", width: 46, height: 3, background: "#F5A623", borderRadius: 2, marginBottom: 14 },
  h3: { fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 600, fontSize: 24, color: "#17304D", margin: "30px 0 10px", letterSpacing: ".005em" },
  lead: { fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 19, lineHeight: 1.7, color: "#45525F", margin: "0 0 20px" },
  p: { fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 17, lineHeight: 1.75, color: "#1A2332", margin: "0 0 18px" },
  ul: { listStyle: "none", margin: "0 0 20px", padding: 0, display: "flex", flexDirection: "column", gap: 11 },
  li: { display: "flex", gap: 13, alignItems: "flex-start", fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 17, lineHeight: 1.65, color: "#1A2332" },
  bullet: { flex: "none", width: 7, height: 7, borderRadius: 2, background: "#F5A623", marginTop: 9 },

  kt: { background: "#071C36", borderRadius: 14, padding: "26px 28px", margin: "38px 0" },
  ktHead: { display: "flex", alignItems: "center", gap: 9, marginBottom: 16 },
  ktTitle: { fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: 21, color: "#fff", textTransform: "uppercase", letterSpacing: ".02em" },
  ktList: { listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 12 },
  ktLi: { display: "flex", gap: 12, alignItems: "flex-start", fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 15.5, lineHeight: 1.6, color: "rgba(255,255,255,.86)" },
  ktDot: { flex: "none", width: 7, height: 7, borderRadius: 999, background: "#F5A623", marginTop: 8 },

  author: { display: "flex", gap: 18, alignItems: "flex-start", background: "#F4F6F8", border: "1px solid #E8ECF1", borderRadius: 14, padding: "24px 26px", margin: "40px 0 8px" },
  authorMark: { flex: "none", width: 52, height: 52, borderRadius: 12, background: "#071C36", display: "flex", alignItems: "center", justifyContent: "center" },
  authorName: { fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: 21, color: "#071C36", textTransform: "uppercase", marginBottom: 6 },
  authorBio: { fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 14.5, lineHeight: 1.6, color: "#6B7785", margin: "0 0 12px" },
  authorLink: { display: "inline-flex", alignItems: "center", gap: 7, fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 600, fontSize: 14, color: "#17304D", textDecoration: "none" },

  share: { display: "flex", alignItems: "center", gap: 10, margin: "26px 0 0" },
  shareLabel: { fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 13, fontWeight: 600, color: "#6B7785" },
  shareBtn: { width: 38, height: 38, borderRadius: 9, background: "#fff", border: "1px solid #E8ECF1", display: "inline-flex", alignItems: "center", justifyContent: "center", cursor: "pointer", textDecoration: "none" },

  relWrap: { background: "#F4F6F8", borderTop: "1px solid #E8ECF1" },
  relInner: { maxWidth: 1180, margin: "0 auto", padding: "56px 32px 64px" },
  relH: { fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: 30, color: "#071C36", margin: "0 0 26px", textTransform: "uppercase", textAlign: "center" },
  relGrid: { display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 20 },
  relCard: { display: "flex", flexDirection: "column", background: "#fff", border: "1px solid #E8ECF1", borderRadius: 12, overflow: "hidden", textDecoration: "none", transition: "transform .2s, box-shadow .2s" },
  relThumb: { height: 90, background: "linear-gradient(135deg,#0C2747,#06172C)", display: "flex", alignItems: "flex-end", padding: 14 },
  relCat: { fontFamily: "'IBM Plex Mono', monospace", fontSize: 10.5, letterSpacing: ".06em", textTransform: "uppercase", color: "#071C36", background: "#F5A623", borderRadius: 5, padding: "4px 9px", fontWeight: 500 },
  relBody: { padding: "16px 18px 20px", display: "flex", flexDirection: "column", flex: 1 },
  relT: { fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: 19, color: "#071C36", margin: "0 0 12px", textTransform: "uppercase", lineHeight: 1.1, textWrap: "balance" },
  relMore: { marginTop: "auto", display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 600, fontSize: 13, color: "#17304D" },
};

Object.assign(window, { ArticleHeader, ArticleShell, ArticleTOC, ArtFigure, ArtH2, ArtH3, ArtLead, ArtP, ArtUL, KeyTakeaways, AuthorBox, ShareBar, RelatedArticles });