// PSM Expert — Prova social / Empresas Atendidas (faixa carrossel, home)
const CLIENTS = [
  { name: "ADM", slug: "adm" },
  { name: "Azul", slug: "azul" },
  { name: "GOL", slug: "gol" },
  { name: "LATAM", slug: "latam" },
  { name: "Solenis", slug: "solenis" },
  { name: "Ipiranga", slug: "ipiranga" },
  { name: "3M", slug: "3m" },
  { name: "Ecolab", slug: "ecolab" },
  { name: "ArcelorMittal", slug: "arcelormittal" },
  { name: "Grupo Boticário", slug: "boticario" },
  { name: "Aperam", slug: "aperam" },
  { name: "Galvani", slug: "galvani" },
  { name: "Alpargatas", slug: "alpargatas" },
  { name: "Bram Offshore", slug: "bram" },
  { name: "Natura &Co", slug: "natura" },
];

function MarqueeItem({ name, slug }) {
  const [failed, setFailed] = React.useState(false);
  return (
    <div style={cl.item} className="psm-client-item">
      {failed ? (
        <span style={cl.ph}>{name}</span>
      ) : (
        <img
          src={`img/clients/${slug}.png`}
          alt={name}
          style={cl.img}
          loading="lazy"
          onError={() => setFailed(true)} />
      )}
    </div>
  );
}

function Clients() {
  // Duplicada para o loop contínuo do marquee
  const loop = [...CLIENTS, ...CLIENTS];
  return (
    <section style={cl.wrap}>
      <div style={cl.head}>
        <h2 style={cl.title}>Empresas Atendidas</h2>
        <p style={cl.sub}>Indústrias e grupos que já contaram com a experiência da nossa equipe em segurança de processos e gerenciamento de riscos.</p>
      </div>
      <div style={cl.marquee} className="psm-marquee">
        <div style={cl.track} className="psm-marquee-track">
          {loop.map((c, i) => (
            <MarqueeItem key={c.slug + i} name={c.name} slug={c.slug} />
          ))}
        </div>
      </div>
    </section>
  );
}
const cl = {
  wrap: { background: "#F4F6F8", borderTop: "1px solid #E8ECF1", padding: "56px 0 60px", overflow: "hidden" },
  head: { maxWidth: 720, margin: "0 auto 36px", padding: "0 32px", textAlign: "center" },
  kicker: { display: "inline-block", fontFamily: "'IBM Plex Mono', monospace", fontSize: 12, letterSpacing: ".12em", textTransform: "uppercase", color: "#F08C00", marginBottom: 12 },
  title: { fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: 32, lineHeight: 1.05, color: "#071C36", margin: "0 0 12px", textTransform: "uppercase", letterSpacing: ".01em" },
  sub: { fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 15, color: "#6B7785", margin: 0, lineHeight: 1.55 },
  marquee: { position: "relative", width: "100%", WebkitMaskImage: "linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)", maskImage: "linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)" },
  track: { display: "flex", width: "max-content", alignItems: "center", gap: 28 },
  item: { flex: "0 0 auto", width: 180, height: 84, display: "flex", alignItems: "center", justifyContent: "center", background: "#fff", border: "1px solid #E8ECF1", borderRadius: 10, padding: "0 22px" },
  img: { maxWidth: "100%", maxHeight: 44, objectFit: "contain", display: "block" },
  imgHidden: { display: "none" },
  ph: { fontFamily: "'IBM Plex Mono', monospace", fontSize: 12.5, fontWeight: 500, color: "#9AA6B2", textAlign: "center" },
};
Object.assign(window, { Clients });