// PSM Expert — Quem Somos + CTA band + Footer (v3, Documento Mestre)
function About() {
  return (
    <section style={ab.wrap}>
      <div style={ab.inner} className="psm-stack-2">
        <div style={ab.text}>
          <h2 style={ab.h2}>Quem Somos</h2>
          <div style={ab.rule} />
          <p style={ab.p}>
            A PSM Expert é uma consultoria técnica independente fundada por especialistas
            com mais de 15 anos de atuação em Segurança de Processos e Gerenciamento de
            Riscos em indústrias de alto risco.
          </p>
          <p style={ab.p}>
            As consultorias são realizadas por profissionais que possuem ampla experiência
            na indústria, e não somente em consultoria, o que fornece entregas reais, dentro
            da realidade de cada setor e empresa apoiada.
          </p>
          <div style={{ margin: "22px 0 26px" }}>
            <CheckList items={[
              "Consultores com formação técnica e científica, com experiência real na indústria",
              "Experiência em Óleo & Gás, Químicas e Petroquímicas, Siderurgia, Mineração, bens de consumo (farmacêuticas e cosméticos), armazenagem e setor público",
              "Metodologias: CCPS, IEC 61511, OSHA PSM, API, ABNT",
            ]} />
          </div>
          <a href="contato.html" style={ab.btn}>Fale com nossa equipe <Icon name="arrow-right" size={16} color="#17304D" /></a>
        </div>
        <div style={ab.imgWrap}>
          <img src="img/about.png" alt="Equipe técnica PSM Expert" style={ab.img} />
        </div>
      </div>
    </section>
  );
}
const ab = {
  wrap: { background: "#fff" },
  inner: { maxWidth: 1240, margin: "0 auto", padding: "16px 32px 76px", display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 48, alignItems: "center" },
  text: {},
  h2: { fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: 38, color: "#071C36", margin: "0 0 12px", textTransform: "uppercase" },
  rule: { width: 64, height: 3, background: "#F5A623", borderRadius: 2, marginBottom: 22 },
  p: { fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 15.5, lineHeight: 1.7, color: "#6B7785", margin: "0 0 14px" },
  btn: { display: "inline-flex", alignItems: "center", gap: 8, fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 600, fontSize: 14, color: "#17304D", background: "transparent", border: "1.5px solid #CBD3DC", borderRadius: 7, padding: "12px 22px", cursor: "pointer", textDecoration: "none" },
  imgWrap: { borderRadius: 14, overflow: "hidden", boxShadow: "0 18px 44px rgba(7,28,54,.16)", height: 380 },
  img: { width: "100%", height: "100%", objectFit: "cover", display: "block" },
};

function CtaBand() {
  return (
    <section style={cb.wrap}>
      <div style={cb.inner}>
        <div>
          <h2 style={cb.h2}>Pronto para Iniciar sua Análise de Riscos?</h2>
          <p style={cb.p}>Fale com um especialista. Atendimento imediato.</p>
          <div style={cb.micro}>Sem compromisso · Atendimento imediato · Proposta técnica detalhada</div>
        </div>
        <div style={cb.actions}>
          <a style={cb.wpp} href="https://wa.me/5511934083465"
            onMouseEnter={(e) => (e.currentTarget.style.background = "#1FB85A")}
            onMouseLeave={(e) => (e.currentTarget.style.background = "#25D366")}>
            <Icon name="message-circle" size={18} color="#fff" /> Chamar no WhatsApp
          </a>
          <a style={cb.mail} href="contato.html"
            onMouseEnter={(e) => (e.currentTarget.style.background = "#F08C00")}
            onMouseLeave={(e) => (e.currentTarget.style.background = "#F5A623")}>
            <Icon name="mail" size={18} color="#071C36" /> Enviar mensagem
          </a>
        </div>
      </div>
    </section>
  );
}
const cb = {
  wrap: { background: "#0C2747" },
  inner: { maxWidth: 1240, margin: "0 auto", padding: "38px 32px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 28, flexWrap: "wrap" },
  h2: { fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: 30, color: "#fff", margin: "0 0 6px", textTransform: "uppercase" },
  p: { fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 14.5, color: "rgba(255,255,255,.7)", margin: "0 0 8px" },
  micro: { fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 12, color: "rgba(255,255,255,.45)" },
  actions: { display: "flex", gap: 13, flexWrap: "wrap" },
  wpp: { display: "inline-flex", alignItems: "center", gap: 9, fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 600, fontSize: 14.5, color: "#fff", background: "#25D366", border: "none", borderRadius: 7, padding: "13px 22px", cursor: "pointer", transition: "background .14s", textDecoration: "none" },
  mail: { display: "inline-flex", alignItems: "center", gap: 9, fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 600, fontSize: 14.5, color: "#071C36", background: "#F5A623", border: "none", borderRadius: 7, padding: "13px 22px", cursor: "pointer", transition: "background .14s", textDecoration: "none" },
};

function Footer() {
  const [viewMode, setViewMode] = React.useState("mobile");
  React.useEffect(() => {
    const saved = localStorage.getItem("psm-view-mode") || "mobile";
    setViewMode(saved);
    applyViewMode(saved);
  }, []);
  function applyViewMode(mode) {
    let vp = document.querySelector('meta[name="viewport"]');
    if (!vp) { vp = document.createElement("meta"); vp.name = "viewport"; document.head.appendChild(vp); }
    vp.setAttribute("content", mode === "web" ? "width=1240" : "width=device-width, initial-scale=1");
  }
  function setMode(mode) {
    setViewMode(mode);
    localStorage.setItem("psm-view-mode", mode);
    applyViewMode(mode);
  }
  const cols = [
    { h: "Serviços", items: [["HAZOP", "hazop.html"], ["QRA & Modelagens", "qra.html"], ["Bow-Tie", "bowtie.html"], ["LOPA", "lopa.html"], ["SIS / SIF / SIL", "sil-sis-sif.html"], ["PSM", "psm.html"], ["PGR / PAE", "pgr-pae.html"], ["Ver todos os serviços", "servicos.html"]] },
    { h: "Empresa", items: [["Sobre a PSM Expert", "index.html#sec-sobre"], ["Cursos & Treinamentos", "cursos-e-treinamentos.html"], ["Blog Técnico", "blog.html"], ["Cases & Resultados", "contato.html"], ["Glossário", "contato.html"]] },
  ];
  return (
    <footer style={ft.foot}>
      <div style={ft.inner} className="psm-footer-grid">
        <div style={ft.brand}>
          <img src="../../assets/logo-white.png" alt="PSM Expert" style={{ height: 34, marginBottom: 16 }} />
          <p style={ft.tag}>Consultoria em Segurança de Processos & Gerenciamento de Riscos.</p>
          <div style={ft.social}>
            <a style={ft.socialBtn} href="https://www.linkedin.com/company/psmex/" target="_blank" rel="noopener"><Icon name="linkedin" size={16} color="#fff" /></a>
            <a style={ft.socialBtn} href="https://wa.me/5511934083465"><Icon name="message-circle" size={16} color="#fff" /></a>
          </div>
        </div>
        {cols.map((c) => (
          <div key={c.h} style={ft.col}>
            <h4 style={ft.colH}>{c.h}</h4>
            {c.items.map(([x, href]) => (
              <a key={x} href={href} style={ft.colLink}
                 onMouseEnter={(e) => (e.currentTarget.style.color = "#F5A623")}
                 onMouseLeave={(e) => (e.currentTarget.style.color = "rgba(255,255,255,.6)")}>{x}</a>
            ))}
          </div>
        ))}
        <div style={ft.col}>
          <h4 style={ft.colH}>Contato</h4>
          <a style={ft.contact} href="https://wa.me/5511934083465"><Icon name="message-circle" size={14} color="#F5A623" /> (11) 93408-3465</a>
          <a style={ft.contact} href="mailto:contato@psmexpert.com.br"><Icon name="mail" size={14} color="#F5A623" /> contato@psmexpert.com.br</a>
          <a style={ft.contact} href="https://www.linkedin.com/company/psmex/" target="_blank" rel="noopener"><Icon name="linkedin" size={14} color="#F5A623" /> linkedin.com/company/psmex</a>
          <span style={ft.contact}><Icon name="map-pin" size={14} color="#F5A623" /> Atendimento em todo o Brasil</span>
        </div>
      </div>
      <div style={ft.bottom}>
        <div style={ft.bottomInner}>
          <span>© {new Date().getFullYear()} PSM Expert. Todos os direitos reservados.</span>
          <span style={ft.legal}>
            <span style={ft.viewToggle}>
              <span style={ft.viewLabel}>Visualizar:</span>
              <button style={{ ...ft.viewBtn, ...(viewMode === "web" ? ft.viewBtnOn : {}) }} onClick={() => setMode("web")}>Web</button>
              <button style={{ ...ft.viewBtn, ...(viewMode === "mobile" ? ft.viewBtnOn : {}) }} onClick={() => setMode("mobile")}>Mobile</button>
            </span>
            <a style={ft.legalLink} href="politica-de-privacidade.html"
               onMouseEnter={(e) => (e.currentTarget.style.color = "#F5A623")}
               onMouseLeave={(e) => (e.currentTarget.style.color = "rgba(255,255,255,.45)")}>Política de Privacidade</a>
          </span>
        </div>
      </div>
    </footer>
  );
}
const ft = {
  foot: { background: "#06172C", color: "#fff" },
  inner: { maxWidth: 1240, margin: "0 auto", padding: "56px 32px 40px", display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1.5fr", gap: 32 },
  brand: {},
  tag: { fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 13.5, lineHeight: 1.6, color: "rgba(255,255,255,.55)", margin: "0 0 16px", maxWidth: 280 },
  social: { display: "flex", gap: 9 },
  socialBtn: { width: 34, height: 34, borderRadius: 7, background: "rgba(255,255,255,.08)", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", textDecoration: "none" },
  col: { display: "flex", flexDirection: "column" },
  colH: { fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 600, fontSize: 17, color: "#fff", margin: "0 0 16px", textTransform: "uppercase", letterSpacing: ".02em" },
  colLink: { fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 13.5, color: "rgba(255,255,255,.6)", padding: "5px 0", cursor: "pointer", textDecoration: "none", transition: "color .14s" },
  contact: { display: "flex", alignItems: "center", gap: 9, fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 13.5, color: "rgba(255,255,255,.6)", padding: "5px 0", textDecoration: "none" },
  bottom: { borderTop: "1px solid rgba(255,255,255,.08)" },
  bottomInner: { maxWidth: 1240, margin: "0 auto", padding: "18px 32px", display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 10, fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 12.5, color: "rgba(255,255,255,.45)" },
  legal: { display: "flex", gap: 22, alignItems: "center" },
  legalLink: { color: "rgba(255,255,255,.45)", cursor: "pointer", textDecoration: "none" },
  viewToggle: { display: "flex", alignItems: "center", gap: 6 },
  viewLabel: { color: "rgba(255,255,255,.45)" },
  viewBtn: { fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 12, fontWeight: 600, color: "rgba(255,255,255,.6)", background: "rgba(255,255,255,.06)", border: "1px solid rgba(255,255,255,.12)", borderRadius: 6, padding: "5px 12px", cursor: "pointer", transition: "all .14s" },
  viewBtnOn: { color: "#071C36", background: "#F5A623", borderColor: "#F5A623" },
};
Object.assign(window, { About, CtaBand, Footer });