// PSM Expert — Hero (v3, Documento Mestre) + barra de diferenciais
function Hero() {
  const chips = [
    { t: "HAZOP", n: "IEC 61511", top: "4%", right: "16%" },
    { t: "QRA", n: "Modelagem CFD", top: "40%", right: "-3%" },
    { t: "LOPA / SIL", n: "NR-13", bottom: "6%", left: "38%" },
    { t: "PSM", n: "OSHA 1910.119", top: "36%", left: "-4%" },
  ];
  const diffs = [
    { icon: "shield-check", t: "Independência Técnica", d: "Especialistas dedicados para cada setor e ferramenta, oferecemos análises independentes e de alto nível." },
    { icon: "award", t: "+200 Estudos Entregues", d: "HAZOP, EAR, QRA, LOPA, SIL e Consultorias de PSM em refinarias, siderurgia, fertilizantes e farmacêuticas." },
    { icon: "factory", t: "12+ Setores Industriais", d: "Da petroquímica à siderurgia, experiência multissetorial comprovada em todo o Brasil." },
    { icon: "clock", t: "Proposta em 48 Horas", d: "Contratação simples, burocracia reduzida. Escopo técnico detalhado na primeira reunião." },
  ];
  return (
    <section style={hero.wrap}>
      <video style={hero.bgVideo} autoPlay muted loop playsInline poster="img/hero-frame.png">
        <source src="img/hero-bg.mp4" type="video/mp4" />
      </video>
      <div style={hero.bgOverlay} />
      <div style={hero.inner} className="psm-hero-inner">
        <div style={hero.copy}>
          <h1 style={hero.h1} className="psm-hero-h1">Consultoria em Segurança de Processos <span style={hero.amp}>&amp;</span> Gerenciamento de Riscos</h1>
          <p style={hero.lead}>
            Análise técnica independente em análises de riscos HAZOP, QRA, BowTie, LOPA/SIL e PSM
            para indústrias de alto risco em todo o Brasil.
          </p>
          <div style={hero.stats} className="psm-hero-stats">
            {[["+200", "estudos entregues"], ["+15 anos", "de experiência"], ["+12", "setores atendidos"]].map(([n, l]) => (
              <div key={l} style={hero.stat}>
                <div style={hero.statN}>{n}</div>
                <div style={hero.statL}>{l}</div>
              </div>
            ))}
          </div>
          <div style={hero.actions}>
            <a style={hero.primary} href="contato.html"
              onMouseEnter={(e) => (e.currentTarget.style.background = "#F08C00")}
              onMouseLeave={(e) => (e.currentTarget.style.background = "#F5A623")}>
              Solicitar Proposta Técnica <Icon name="arrow-right" size={17} color="#071C36" />
            </a>
            <a style={hero.ghost} href="#sec-servicos"
              onMouseEnter={(e) => (e.currentTarget.style.background = "rgba(255,255,255,.08)")}
              onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}>
              Conheça nossos serviços ↓
            </a>
          </div>
        </div>
      </div>

      <div style={hero.diffWrap}>
        <div style={hero.diffInner} className="psm-hero-diffs">
          {diffs.map((d, i) => (
            <div key={i} style={{ ...hero.diff, borderLeft: i === 0 ? "none" : "1px solid rgba(255,255,255,.1)" }}>
              <Icon name={d.icon} size={28} color="#F5A623" stroke={1.6} />
              <div>
                <div style={hero.diffT}>{d.t}</div>
                <div style={hero.diffD}>{d.d}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
const hero = {
  wrap: { position: "relative", background: "linear-gradient(150deg,#071C36 0%,#06172C 100%)", overflow: "hidden" },
  bgVideo: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", zIndex: 0 },
  bgOverlay: { position: "absolute", inset: 0, zIndex: 1, background: "linear-gradient(150deg, rgba(7,28,54,.82) 0%, rgba(6,23,44,.88) 100%)" },
  inner: { position: "relative", zIndex: 2, maxWidth: 1240, margin: "0 auto", padding: "104px 32px 92px", display: "block" },
  copy: { maxWidth: 680 },
  h1: { fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: 62, lineHeight: 1.02, color: "#fff", letterSpacing: "0", margin: "0 0 20px", textWrap: "balance", textTransform: "uppercase" },
  amp: { color: "#F5A623" },
  lead: { fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 18, lineHeight: 1.6, color: "rgba(255,255,255,.74)", margin: "0 0 26px", maxWidth: 480 },
  stats: { display: "flex", gap: 30, marginBottom: 30 },
  stat: {},
  statN: { fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: 32, color: "#F5A623", lineHeight: 1 },
  statL: { fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 12.5, color: "rgba(255,255,255,.6)", marginTop: 3 },
  actions: { display: "flex", gap: 14, flexWrap: "wrap" },
  primary: { display: "inline-flex", alignItems: "center", gap: 9, fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 600, fontSize: 15, color: "#071C36", background: "#F5A623", border: "none", borderRadius: 7, padding: "14px 24px", cursor: "pointer", transition: "background .14s", textDecoration: "none" },
  ghost: { display: "inline-flex", alignItems: "center", gap: 9, fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 600, fontSize: 15, color: "#fff", background: "transparent", border: "1.5px solid rgba(255,255,255,.45)", borderRadius: 7, padding: "14px 24px", cursor: "pointer", transition: "background .14s", textDecoration: "none" },

  visual: { position: "relative", minHeight: 380, display: "flex", alignItems: "center", justifyContent: "center" },
  frame: { position: "relative", width: 300, height: 300, borderRadius: 24, overflow: "hidden", border: "1px solid rgba(255,255,255,.18)", boxShadow: "0 30px 70px rgba(0,0,0,.45)" },
  frameImg: { width: "100%", height: "100%", objectFit: "cover", display: "block" },
  frameInner: { position: "absolute", inset: 0, boxShadow: "inset 0 0 0 6px rgba(255,255,255,.06)", borderRadius: 24 },
  chip: { position: "absolute", display: "flex", alignItems: "center", gap: 7, background: "#0C2747", border: "1px solid #F5A623", borderRadius: 9, padding: "8px 13px", boxShadow: "0 8px 24px rgba(0,0,0,.35)" },
  chipT: { fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 12.5, fontWeight: 700, color: "#fff" },
  chipDot: { color: "#F5A623", fontWeight: 700 },
  chipN: { fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, color: "rgba(255,255,255,.66)" },

  diffWrap: { position: "relative", zIndex: 2, borderTop: "1px solid rgba(255,255,255,.09)", background: "rgba(255,255,255,.02)" },
  diffInner: { maxWidth: 1240, margin: "0 auto", padding: "26px 32px", display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 0 },
  diff: { display: "flex", gap: 14, alignItems: "flex-start", padding: "4px 24px" },
  diffT: { fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 700, fontSize: 14.5, color: "#fff", marginBottom: 5 },
  diffD: { fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 12.5, lineHeight: 1.45, color: "rgba(255,255,255,.6)" },
};
Object.assign(window, { Hero });