// Bandeau clients (marquee)
function Clients({ lang }) {
  const t = window.I18N[lang];
  const list = window.CLIENTS;
  const doubled = [...list, ...list];

  return (
    <section id="clients" className="section" style={{ paddingTop: 60, paddingBottom: 60 }}>
      <div className="container">
        <window.Reveal>
          <div style={{
            display: "flex", justifyContent: "space-between", alignItems: "end",
            gap: 32, flexWrap: "wrap", marginBottom: 28,
          }}>
            <div className="eyebrow" style={{
              fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase",
              color: "rgba(247,247,247,0.55)",
            }}>— {t.clients.eyebrow}</div>
            <div style={{
              fontStyle: "italic", fontWeight: 800, letterSpacing: "-0.02em",
              textTransform: "lowercase", fontSize: 28,
            }}>{t.clients.trust}</div>
          </div>
        </window.Reveal>
      </div>
      <div className="marquee">
        <div className="marquee-track">
          {doubled.map((c, i) => (
            <span key={i} className="marquee-item">{c}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Clients = Clients;