// PSM Expert — Treinamentos (3 cards) + Setores Atendidos (10)
function Trainings() {
  const cards = [
    { img: "img/courses/bowtie-ead.png", t: "Análise de Riscos BowTie", sub: "Gestão de riscos por barreiras em segurança de processos", h: "12 h/aula", href: "cursos-e-treinamentos.html#bowtie" },
    { img: "img/courses/hazop-ead.png", t: "HazOp na Prática!", sub: "Se torne um facilitador de HazOp — Perigos e Operabilidade", h: "12 h/aula", href: "cursos-e-treinamentos.html#hazop" },
    { img: "img/courses/lopa-ead.png", t: "LOPA — Camadas de Proteção", sub: "Layer of Protection Analysis, direto ao ponto", h: "16 h/aula", href: "cursos-e-treinamentos.html#lopa" },
  ];
  return (
    <section style={tr.wrap}>
      <div style={tr.inner}>
        <SectionTitle sub="Cursos EAD com acesso vitalício na plataforma e exercícios corrigidos — disponíveis também in-company, personalizados para sua empresa.">
          Cursos & Treinamentos Técnicos
        </SectionTitle>
        <div style={tr.grid} className="psm-grid-3">
          {cards.map((c) => (
            <a key={c.t} href={c.href} style={tr.card} className="psm-train-card">
              <div style={tr.imgWrap}><img src={c.img} alt={c.t} style={tr.img} /></div>
              <div style={tr.body}>
                <span style={tr.tag}>EAD · Acesso vitalício</span>
                <h3 style={tr.t}>{c.t}</h3>
                <p style={tr.sub}>{c.sub}</p>
                <div style={tr.meta}><Icon name="clock" size={14} color="#6B7785" /> {c.h}</div>
              </div>
            </a>
          ))}
        </div>
        <div style={tr.ctaWrap}>
          <a href="cursos-e-treinamentos.html" style={tr.cta}>Ver todos os cursos <Icon name="arrow-right" size={15} color="#17304D" /></a>
        </div>
      </div>
    </section>
  );
}
const tr = {
  wrap: { background: "#F4F6F8" },
  inner: { maxWidth: 1240, margin: "0 auto", padding: "76px 32px" },
  grid: { display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 22 },
  card: { display: "flex", flexDirection: "column", background: "#fff", border: "1px solid #E8ECF1", borderRadius: 12, overflow: "hidden", boxShadow: "0 1px 2px rgba(7,28,54,.04)", textDecoration: "none", transition: "transform .2s, box-shadow .2s" },
  imgWrap: { height: 150, position: "relative", background: "#06172C" },
  img: { width: "100%", height: "100%", objectFit: "cover", display: "block" },
  body: { padding: "18px 20px 20px", display: "flex", flexDirection: "column", alignItems: "flex-start" },
  tag: { fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 700, fontSize: 10.5, letterSpacing: ".03em", color: "#F08C00", background: "#FEF4E2", borderRadius: 999, padding: "4px 11px", marginBottom: 12 },
  t: { fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: 24, color: "#071C36", margin: "0 0 5px", textTransform: "uppercase", lineHeight: 1.05 },
  sub: { fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 13.5, lineHeight: 1.5, color: "#6B7785", margin: "0 0 14px" },
  meta: { display: "inline-flex", alignItems: "center", gap: 7, fontFamily: "'IBM Plex Mono', monospace", fontSize: 12.5, color: "#17304D" },
  ctaWrap: { textAlign: "center", marginTop: 34 },
  cta: { display: "inline-flex", alignItems: "center", gap: 8, fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 600, fontSize: 14.5, color: "#17304D", textDecoration: "none", border: "1.5px solid #CBD3DC", borderRadius: 8, padding: "12px 24px" },
};

function Sectors() {
  const items = [
    { icon: "droplet", t: "Petróleo & Gás" },
    { icon: "flask", t: "Petroquímica & Química" },
    { icon: "factory", t: "Refino & Combustíveis" },
    { icon: "pill", t: "Farmacêutica & Cosmética" },
    { icon: "package", t: "Mineração" },
    { icon: "droplet", t: "Fertilizantes & Agroquímicos" },
    { icon: "zap", t: "Energia & Utilidades" },
    { icon: "wind", t: "Gases Industriais" },
    { icon: "filter", t: "Tratamento de Resíduos" },
    { icon: "building", t: "Setor Público & Regulatório", hi: true },
  ];
  return (
    <section style={se.wrap}>
      <div style={se.inner}>
        <SectionTitle sub="Experiência multissetorial em indústrias de alto risco em todo o Brasil.">
          Setores Atendidos
        </SectionTitle>
        <div style={se.grid} className="psm-grid-5">
          {items.map((s) => (
            <div key={s.t} style={{ ...se.card, ...(s.hi ? se.cardHi : {}) }} className="psm-sector-card">
              <Icon name={s.icon} size={26} color={s.hi ? "#F08C00" : "#17304D"} stroke={1.6} />
              <span style={se.label}>{s.t}</span>
              {s.hi ? <span style={se.star}></span> : null}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
const se = {
  wrap: { background: "#fff" },
  inner: { maxWidth: 1240, margin: "0 auto", padding: "16px 32px 76px" },
  grid: { display: "grid", gridTemplateColumns: "repeat(5,1fr)", gap: 14 },
  card: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 10, background: "#fff", border: "1px solid #E8ECF1", borderRadius: 10, padding: "22px 10px", textAlign: "center", transition: "border-color .15s, box-shadow .15s", minHeight: 104 },
  cardHi: { borderColor: "#F5A623", background: "#FEF9F0", boxShadow: "0 6px 18px rgba(245,166,35,.12)" },
  label: { fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 600, fontSize: 12.5, lineHeight: 1.25, color: "#17304D" },
  star: { fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 10, fontWeight: 600, color: "#F08C00", textTransform: "uppercase", letterSpacing: ".04em" },
};
Object.assign(window, { Trainings, Sectors });