// PSM Expert — Como Funciona a Nossa Consultoria (home, 6-node stepper)
function HowItWorks() {
  const steps = [
    { icon: "search", t: "Diagnóstico Inicial", d: "Avaliação técnica para captura do processo, dos riscos e das necessidades." },
    { icon: "file-text", t: "Proposta Técnica", d: "Escopo detalhado, metodologia, equipe e cronograma — em até 48 horas." },
    { icon: "clipboard-check", t: "Coleta de Dados", d: "Levantamento de documentos de referência como P&IDs, procedimentos e histórico de incidentes (variável para cada ferramenta)." },
    { icon: "settings", t: "Análise & Estudo", d: "Condução dos estudos com equipes multidisciplinares, software próprio e condução lean." },
    { icon: "file-shield", t: "Relatório Técnico", d: "Entregável completo com recomendações priorizadas e referências normativas." },
    { icon: "users", t: "Suporte Pós-Entrega", d: "Apresentação dos resultados e suporte na implementação das recomendações." },
  ];
  return (
    <section style={hw.wrap}>
      <div style={hw.inner}>
        <SectionTitle sub="Um processo estruturado, do diagnóstico ao entregável — sem surpresas no escopo.">
          Como Funciona a Nossa Consultoria
        </SectionTitle>
        <div style={hw.row} className="psm-stepper">
          {steps.map((s, i) => (
            <React.Fragment key={s.t}>
              <div style={hw.node} className="psm-step-node">
                <div style={hw.iconBox}>
                  <Icon name={s.icon} size={26} color="#17304D" stroke={1.6} />
                  <span style={hw.num}>{i + 1}</span>
                </div>
                <div style={hw.t}>{s.t}</div>
                <div style={hw.d}>{s.d}</div>
              </div>
              {i < steps.length - 1 ? <div style={hw.conn} className="psm-step-conn"><span style={hw.dot} /></div> : null}
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}
const hw = {
  wrap: { background: "#EEF1F5" },
  inner: { maxWidth: 1240, margin: "0 auto", padding: "76px 32px" },
  row: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" },
  node: { flex: "1 1 0", display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", padding: "0 6px", minWidth: 0 },
  iconBox: { position: "relative", width: 58, height: 58, borderRadius: 12, background: "#fff", border: "1px solid #E8ECF1", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 16, boxShadow: "0 2px 6px rgba(7,28,54,.05)" },
  num: { position: "absolute", top: -8, right: -8, width: 22, height: 22, borderRadius: 999, background: "#F5A623", color: "#071C36", fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: 13, display: "flex", alignItems: "center", justifyContent: "center" },
  t: { fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: 18, color: "#071C36", marginBottom: 7, lineHeight: 1.1, textTransform: "uppercase" },
  d: { fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 12, lineHeight: 1.45, color: "#6B7785", maxWidth: 160 },
  conn: { flex: "0 0 30px", height: 58, display: "flex", alignItems: "center", justifyContent: "center", borderTop: "2px dotted #C4CCD6", marginTop: 28 },
  dot: { width: 9, height: 9, borderRadius: 999, background: "#F5A623", boxShadow: "0 0 0 4px #EEF1F5" },
};
Object.assign(window, { HowItWorks });