/* Clients.jsx — confían en nosotros (logos reales) */
function Clients() {
  return (
    <section id="clientes" className="sec-pad" style={{ paddingBlock: "clamp(56px,7vw,100px)", background: "var(--paper-2)" }}>
      <div className="wrap">
        <Reveal style={{ textAlign: "center" }}>
          <SecHead kicker="Confían en nosotros" title="Nuestros clientes" align="center"
            intro="Municipios, organismos públicos, universidades y empresas líderes nos eligen para ejecutar y mantener su infraestructura vial."
            max={640} />
        </Reveal>

        <Reveal delay={80} style={{
          marginTop: "clamp(34px,5vw,56px)", background: "#ffffff",
          border: "1px solid var(--line)", borderRadius: 8,
          padding: "clamp(20px,4vw,44px)", maxWidth: 980, marginInline: "auto",
          boxShadow: "0 1px 0 rgba(0,0,0,.02)",
        }}>
          <img src="assets/clientes-logos.png" alt="Logos de clientes de RS Constructora: Municipalidad de Colonia Caroya, Gobierno de Córdoba, Municipalidad de Malagüeño, Mendiolaza, UCC, UPC, Construar, FIAT, ExportPack, SAPYC, Grossvial, Grupo Conectar, New Holland, Systel, Ingenia, Coca-Cola, ARC, Grupo IT, Aclade, Afema, Iveco y Cooperativa Horizonte"
            style={{ width: "100%", height: "auto", display: "block" }} />

          <div style={{ display: "flex", justifyContent: "center", marginTop: "clamp(18px,3vw,30px)" }}>
            <div style={{
              display: "inline-flex", alignItems: "center", justifyContent: "center",
              padding: "20px 34px", background: "#ffffff",
              border: "1px solid var(--line)", borderRadius: 6,
            }}>
              <img src="assets/logo-telecom.png" alt="Telecom"
                style={{ height: 52, width: "auto", display: "block" }} />
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}
Object.assign(window, { Clients });