// PSM Expert — shared primitives (v3)
function SectionTitle({ children, sub, light }) {
  return (
    <div style={{ textAlign: "center", marginBottom: 40 }}>
      <h2 style={{ fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: 38, lineHeight: 1.05, color: light ? "#fff" : "#071C36", margin: "0 0 12px", textTransform: "uppercase", letterSpacing: ".01em" }}>{children}</h2>
      <div style={{ width: 64, height: 3, background: "#F5A623", borderRadius: 2, margin: "0 auto" }} />
      {sub ? <p style={{ fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 16, color: light ? "rgba(255,255,255,.7)" : "#6B7785", margin: "18px auto 0", maxWidth: 620, lineHeight: 1.55 }}>{sub}</p> : null}
    </div>
  );
}

// Page hero used by service / institutional pages
function PageHero({ kicker, title, subtitle, badges }) {
  return (
    <section style={ph.wrap}>
      <div style={ph.inner}>
        {kicker ? <div style={ph.kicker}>{kicker}</div> : null}
        <h1 style={ph.h1} className="psm-pagehero-h1">{title}</h1>
        {subtitle ? <p style={ph.sub}>{subtitle}</p> : null}
        {badges && badges.length ? (
          <div style={ph.badges}>
            {badges.map((b) => <span key={b} style={ph.badge}>{b}</span>)}
          </div>
        ) : null}
      </div>
    </section>
  );
}
const ph = {
  wrap: { background: "linear-gradient(150deg,#071C36 0%,#06172C 100%)" },
  inner: { maxWidth: 900, margin: "0 auto", padding: "64px 32px 56px" },
  kicker: { fontFamily: "'IBM Plex Mono', monospace", fontSize: 12.5, letterSpacing: ".12em", textTransform: "uppercase", color: "#F5A623", marginBottom: 16 },
  h1: { fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: 54, lineHeight: 1.04, color: "#fff", margin: 0, textTransform: "uppercase", textWrap: "balance" },
  sub: { fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 18, lineHeight: 1.6, color: "rgba(255,255,255,.74)", margin: "20px 0 0", maxWidth: 680 },
  badges: { display: "flex", flexWrap: "wrap", gap: 9, marginTop: 26 },
  badge: { fontFamily: "'IBM Plex Mono', monospace", fontSize: 12, color: "#fff", background: "#0C2747", border: "1px solid #F5A623", borderRadius: 6, padding: "6px 12px" },
};

function Callout({ kind = "info", children }) {
  const k = kind === "alert"
    ? { bg: "#FEF4E2", bar: "#F5A623", ic: "⚠" }
    : { bg: "#EEF2F7", bar: "#17304D", ic: "ℹ" };
  return (
    <div style={{ display: "flex", gap: 13, background: k.bg, borderLeft: `4px solid ${k.bar}`, borderRadius: "0 8px 8px 0", padding: "16px 18px", margin: "22px 0" }}>
      <span style={{ fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 16, color: k.bar, flex: "none", fontWeight: 700 }}>{k.ic}</span>
      <div style={{ fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 15, lineHeight: 1.6, color: "#1A2332" }}>{children}</div>
    </div>
  );
}

function CheckList({ items }) {
  return (
    <ul style={{ listStyle: "none", margin: "0 0 8px", padding: 0, display: "flex", flexDirection: "column", gap: 11 }}>
      {items.map((it, i) => (
        <li key={i} style={{ display: "flex", gap: 11, alignItems: "flex-start" }}>
          <span style={{ flex: "none", width: 22, height: 22, borderRadius: 999, background: "#E6F2EC", display: "flex", alignItems: "center", justifyContent: "center", marginTop: 1 }}>
            <Icon name="check" size={13} color="#1A7A4A" stroke={2.4} />
          </span>
          <span style={{ fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 15, lineHeight: 1.55, color: "#1A2332" }}>{it}</span>
        </li>
      ))}
    </ul>
  );
}

// Vertical numbered stepper for service pages
function StepsVertical({ steps }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
      {steps.map((s, i) => (
        <div key={i} style={{ display: "flex", gap: 18 }}>
          <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
            <div style={{ flex: "none", width: 38, height: 38, borderRadius: 9, background: "#071C36", color: "#F5A623", fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: 19, display: "flex", alignItems: "center", justifyContent: "center" }}>{i + 1}</div>
            {i < steps.length - 1 ? <div style={{ width: 2, flex: 1, borderLeft: "2px dotted #CBD3DC", margin: "4px 0" }} /> : null}
          </div>
          <div style={{ paddingBottom: i < steps.length - 1 ? 26 : 0 }}>
            <h3 style={{ fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 600, fontSize: 22, color: "#071C36", margin: "4px 0 5px", textTransform: "uppercase" }}>{s.t}</h3>
            <p style={{ fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 14.5, lineHeight: 1.6, color: "#6B7785", margin: 0, maxWidth: 620 }}>{s.d}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

function FaqList({ items }) {
  const [open, setOpen] = React.useState(0);
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12, maxWidth: 820, margin: "0 auto" }}>
      {items.map((it, i) => {
        const isOpen = open === i;
        return (
          <div key={i} style={{ background: "#fff", border: "1px solid #E8ECF1", borderRadius: 10, overflow: "hidden" }}>
            <button onClick={() => setOpen(isOpen ? -1 : i)} style={{ width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, background: "transparent", border: "none", cursor: "pointer", padding: "18px 20px", textAlign: "left" }}>
              <span style={{ fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 600, fontSize: 15.5, color: "#071C36" }}>{it.q}</span>
              <span style={{ flex: "none", color: "#F5A623", transform: isOpen ? "rotate(45deg)" : "none", transition: "transform .2s", fontSize: 22, lineHeight: 1, fontFamily: "'IBM Plex Sans', sans-serif" }}>+</span>
            </button>
            {isOpen ? <div style={{ padding: "0 20px 20px", fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 14.5, lineHeight: 1.65, color: "#6B7785" }}>{it.a}</div> : null}
          </div>
        );
      })}
    </div>
  );
}

function CtaFinal({ title = "Precisa de apoio técnico?", sub = "Fale com nossa equipe. Atendimento imediato.", micro = "Sem compromisso · Proposta técnica detalhada · Todo o Brasil" }) {
  return (
    <section style={{ background: "linear-gradient(150deg,#071C36,#06172C)" }}>
      <div style={{ maxWidth: 760, margin: "0 auto", padding: "64px 32px", textAlign: "center" }}>
        <h2 style={{ fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: 40, color: "#fff", margin: "0 0 10px", textTransform: "uppercase", textWrap: "balance" }}>{title}</h2>
        <p style={{ fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 17, color: "rgba(255,255,255,.72)", margin: "0 0 26px" }}>{sub}</p>
        <div style={{ display: "flex", gap: 13, justifyContent: "center", flexWrap: "wrap" }}>
          <a href="https://wa.me/5511934083465" style={{ 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" }}>
            <Icon name="message-circle" size={18} color="#fff" /> Chamar no WhatsApp
          </a>
          <a href="contato.html" style={{ 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" }}>
            <Icon name="mail" size={18} color="#071C36" /> Solicitar proposta
          </a>
        </div>
        <div style={{ fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 12.5, color: "rgba(255,255,255,.5)", marginTop: 18 }}>{micro}</div>
      </div>
    </section>
  );
}

// ---- Shared building blocks for service pages ----
function Section({ title, intro, children, bg = "#fff" }) {
  return (
    <section style={{ background: bg }}>
      <div style={{ maxWidth: 900, margin: "0 auto", padding: "56px 32px" }}>
        {title ? <h2 style={pr.h2}>{title}</h2> : null}
        {intro ? <p style={pr.intro}>{intro}</p> : null}
        {children}
      </div>
    </section>
  );
}

function P({ children }) {
  return <p style={pr.p}>{children}</p>;
}

function DeliverableGrid({ items }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(2,1fr)", gap: 18 }} className="psm-grid-2">
      {items.map((it) => (
        <div key={it.t} style={pr.deliv}>
          <div style={pr.delivIcon}><Icon name={it.icon} size={22} color="#17304D" stroke={1.7} /></div>
          <h3 style={pr.delivT}>{it.t}</h3>
          <p style={pr.delivD}>{it.d}</p>
        </div>
      ))}
    </div>
  );
}

function NormTable({ rows }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
      {rows.map((r) => (
        <div key={r.n} style={pr.normRow}>
          <span style={pr.normTag}>{r.n}</span>
          <span style={pr.normDesc}>{r.d}</span>
        </div>
      ))}
    </div>
  );
}

const pr = {
  h2: { fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: 34, color: "#071C36", margin: "0 0 18px", textTransform: "uppercase", letterSpacing: ".01em" },
  intro: { fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 17, lineHeight: 1.65, color: "#6B7785", margin: "0 0 22px", maxWidth: 760 },
  p: { fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 16, lineHeight: 1.72, color: "#1A2332", margin: "0 0 16px" },
  deliv: { background: "#fff", border: "1px solid #E8ECF1", borderLeft: "3px solid #F5A623", borderRadius: 10, padding: "20px 22px" },
  delivIcon: { width: 44, height: 44, borderRadius: 10, background: "#F4F6F8", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 12 },
  delivT: { fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: 20, color: "#071C36", margin: "0 0 6px", textTransform: "uppercase" },
  delivD: { fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 13.5, lineHeight: 1.55, color: "#6B7785", margin: 0 },
  normRow: { display: "flex", alignItems: "center", gap: 16, background: "#fff", border: "1px solid #E8ECF1", borderRadius: 8, padding: "12px 16px" },
  normTag: { flex: "none", fontFamily: "'IBM Plex Mono', monospace", fontSize: 12.5, fontWeight: 500, color: "#071C36", background: "#EEF2F7", borderRadius: 5, padding: "6px 10px", minWidth: 150, textAlign: "center" },
  normDesc: { fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 14.5, color: "#6B7785" },
};

// ---- Data table: petroleum header, zebra rows (brand table spec) ----
function DataTable({ head, rows }) {
  return (
    <div style={{ overflowX: "auto", border: "1px solid #E8ECF1", borderRadius: 10 }}>
      <table style={{ width: "100%", borderCollapse: "collapse", minWidth: 520, fontFamily: "'IBM Plex Sans', sans-serif" }}>
        <thead>
          <tr>
            {head.map((h, i) => (
              <th key={i} style={{ textAlign: "left", background: "#071C36", color: "#fff", fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 600, fontSize: 15, letterSpacing: ".02em", textTransform: "uppercase", padding: "13px 16px", borderRight: i < head.length - 1 ? "1px solid rgba(255,255,255,.1)" : "none" }}>{h}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((r, ri) => (
            <tr key={ri} style={{ background: ri % 2 ? "#F4F6F8" : "#fff" }}>
              {r.map((c, ci) => (
                <td key={ci} style={{ padding: "13px 16px", fontSize: 14, lineHeight: 1.55, color: ci === 0 ? "#071C36" : "#1A2332", fontWeight: ci === 0 ? 600 : 400, borderTop: "1px solid #E8ECF1", borderRight: ci < r.length - 1 ? "1px solid #E8ECF1" : "none", verticalAlign: "top" }}>{c}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

// ---- Norm reference blocks: mono tag + bold title + description ----
function NormBadgeList({ items }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
      {items.map((it, i) => (
        <div key={i} style={{ background: "#fff", border: "1px solid #E8ECF1", borderLeft: "3px solid #17304D", borderRadius: 10, padding: "18px 20px" }}>
          <div style={{ display: "flex", flexWrap: "wrap", alignItems: "baseline", gap: 10, marginBottom: 8 }}>
            <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 12.5, fontWeight: 500, color: "#071C36", background: "#EEF2F7", borderRadius: 5, padding: "5px 10px" }}>{it.tag}</span>
            {it.title ? <span style={{ fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 600, fontSize: 18, color: "#071C36", textTransform: "uppercase", letterSpacing: ".01em" }}>{it.title}</span> : null}
          </div>
          <p style={{ fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 14.5, lineHeight: 1.62, color: "#6B7785", margin: 0 }}>{it.desc}</p>
        </div>
      ))}
    </div>
  );
}

// ---- Plain bullet list (neutral, e.g. “problemas comuns”) ----
function BulletList({ items }) {
  return (
    <ul style={{ listStyle: "none", margin: "0 0 8px", padding: 0, display: "flex", flexDirection: "column", gap: 10 }}>
      {items.map((it, i) => (
        <li key={i} style={{ display: "flex", gap: 11, alignItems: "flex-start" }}>
          <span style={{ flex: "none", width: 6, height: 6, borderRadius: 999, background: "#F5A623", marginTop: 9 }} />
          <span style={{ fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 15, lineHeight: 1.6, color: "#1A2332" }}>{it}</span>
        </li>
      ))}
    </ul>
  );
}

// ---- Tag flow: wrapping chips (sectors, keywords) ----
function TagFlow({ items }) {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
      {items.map((it, i) => (
        <span key={i} style={{ fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 14, fontWeight: 500, color: "#17304D", background: "#fff", border: "1px solid #E8ECF1", borderRadius: 999, padding: "8px 16px" }}>{it}</span>
      ))}
    </div>
  );
}

// ---- Numbered list: enumerated items (not sequential steps) ----
function NumberedList({ items }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(2,1fr)", gap: 16 }} className="psm-grid-2">
      {items.map((it, i) => (
        <div key={i} style={{ display: "flex", gap: 14, background: "#fff", border: "1px solid #E8ECF1", borderRadius: 10, padding: "18px 20px" }}>
          <span style={{ flex: "none", width: 34, height: 34, borderRadius: 8, background: "#EEF2F7", color: "#071C36", fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: 18, display: "flex", alignItems: "center", justifyContent: "center" }}>{i + 1}</span>
          <div>
            <h4 style={{ fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 700, fontSize: 15, color: "#071C36", margin: "4px 0 5px" }}>{it.t}</h4>
            <p style={{ fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 14, lineHeight: 1.58, color: "#6B7785", margin: 0 }}>{it.d}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

// ---- Pillar cards: framework pillars / components (icon + title + sub-items) ----
function PillarCards({ pillars }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: `repeat(${Math.min(pillars.length, 4)},1fr)`, gap: 16 }} className="psm-grid-2">
      {pillars.map((p, i) => (
        <div key={i} style={{ background: "#fff", border: "1px solid #E8ECF1", borderTop: "3px solid #F5A623", borderRadius: 10, padding: "20px 18px", display: "flex", flexDirection: "column" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}>
            <span style={{ flex: "none", width: 40, height: 40, borderRadius: 9, background: "#071C36", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name={p.icon} size={20} color="#F5A623" stroke={1.8} /></span>
            <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 11.5, fontWeight: 500, color: "#6B7785", letterSpacing: ".06em" }}>{p.tag}</span>
          </div>
          <h3 style={{ fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: 20, color: "#071C36", margin: "0 0 10px", textTransform: "uppercase", lineHeight: 1.1 }}>{p.t}</h3>
          <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 7 }}>
            {p.items.map((el, j) => (
              <li key={j} style={{ display: "flex", gap: 8, fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 13.5, lineHeight: 1.5, color: "#1A2332" }}>
                <span style={{ flex: "none", width: 5, height: 5, borderRadius: 999, background: "#F5A623", marginTop: 7 }} />{el}
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

const ALL_SERVICES = [
  { t: "HAZOP", href: "hazop.html" },
  { t: "QRA", href: "qra.html" },
  { t: "EAR", href: "ear.html" },
  { t: "Detectores", href: "analise-dispersao-detectores.html" },
  { t: "LOPA", href: "lopa.html" },
  { t: "SIS / SIF / SIL", href: "sil-sis-sif.html" },
  { t: "PSM", href: "psm.html" },
  { t: "Bow-Tie", href: "bowtie.html" },
  { t: "PGR", href: "pgr.html" },
  { t: "PAE", href: "pae.html" },
  { t: "Gestão de Riscos", href: "gerenciamento-de-riscos.html" },
];
function RelatedServices({ exclude }) {
  const items = ALL_SERVICES.filter((s) => s.href !== exclude);
  return (
    <div style={{ marginTop: 26, display: "flex", flexWrap: "wrap", gap: 10, alignItems: "center" }}>
      <span style={{ fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 13, fontWeight: 600, color: "#6B7785" }}>Serviços relacionados:</span>
      {items.map((s) => (
        <a key={s.t} href={s.href} style={{ fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 13, fontWeight: 600, color: "#17304D", textDecoration: "none", border: "1px solid #E8ECF1", borderRadius: 999, padding: "6px 14px" }}>{s.t}</a>
      ))}
    </div>
  );
}

Object.assign(window, { SectionTitle, PageHero, Callout, CheckList, StepsVertical, FaqList, CtaFinal, Section, P, DeliverableGrid, NormTable, RelatedServices, DataTable, NormBadgeList, TagFlow, NumberedList, PillarCards, BulletList });