/* global React, Counter */
function LogosCarousel() {
  const TRUST = [
    { value: 100, prefix: "+",   suffix: "",    label: "importadoras activas", fn: 6 },
    { value: 176, prefix: "+$",  suffix: "M",   label: "volumen mensual", note: "USD" },
    { value: 24,  prefix: "<",   suffix: "Hrs", label: "para registrarte", fn: 7 },
  ];
  // Sizes reduced ~20% from previous (108→86, 200→160, 216→172, 220→176)
  const logos = [
    { src: "assets/client-logos/dashboard.png", name: "Dashboard", h: 128, w: 272 },
    { src: "assets/client-logos/gac.png",       name: "GAC",       h: 128, w: 179 },
    { src: "assets/client-logos/venado.png",    name: "Venado",    h: 138, w: 154 },
    { src: "assets/client-logos/quimicos.png",  name: "Químicos",  h: 128, w: 166 },
    { src: "assets/client-logos/paccocsa.png",  name: "Paccocsa",  h: 128, w: 198 },
    { src: "assets/client-logos/meraki.png",    name: "Meraki",    h: 128, w: 272 },
    { src: "assets/client-logos/fongtek.png",   name: "Fongtek",   h: 54,  w: 174 },
  ];

  const doubled = [...logos, ...logos];

  return (
    <section style={{ padding: "56px 0 76px", background: "var(--bg-1)" }}>
      <div className="wrap reveal" style={{ textAlign: "center", marginBottom: 28 }}>
        <p style={{
          margin: 0, fontSize: 12, color: "var(--fg-3)",
          letterSpacing: "0.08em", textTransform: "uppercase", fontWeight: 500,
        }}>
          CIENTOS DE{" "}
          <span style={{ color: "var(--fg-1)", fontWeight: 600 }}>IMPORTADORAS AMBICIOSAS</span>
          {" "}EN MÉXICO YA CONFÍAN EN MEEFI
        </p>
      </div>

      {/* Trust metrics (moved up from the Seguridad section) */}
      <div className="wrap">
        <div className="sec-trust" style={{ margin: "0 auto 52px" }}>
          {TRUST.map((s, i) => (
            <React.Fragment key={s.label}>
              {i > 0 && <span className="sec-trust-div" aria-hidden="true"/>}
              <div className="sec-trust-item reveal" style={{ "--reveal-delay": `${i * 110}ms` }}>
                <span className="sec-trust-v">
                  <Counter value={s.value} prefix={s.prefix} suffix={s.suffix}/>
                </span>
                <span className="sec-trust-l">
                  {s.label}{s.fn && <Fn n={s.fn}/>}
                  {s.note && (
                    <span style={{
                      display: "inline-block", marginLeft: 6, verticalAlign: "middle",
                      fontSize: 10, fontWeight: 700, letterSpacing: ".07em",
                      color: "var(--accent)", background: "rgba(5,48,206,.08)",
                      padding: "2px 7px", borderRadius: 9999,
                    }}>{s.note}</span>
                  )}
                </span>
              </div>
            </React.Fragment>
          ))}
        </div>
      </div>

      <div className="reveal logos-rail">
        <div
          className="logos-rail-inner"
          style={{
            maskImage: "linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%)",
            WebkitMaskImage: "linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%)",
          }}
        >
          <div className="marquee-track">
            {doubled.map((l, i) => (
              <div
                key={i}
                data-hover="1"
                style={{
                  flexShrink: 0, margin: "0 18px",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  height: 160, width: l.w,
                }}
              >
                <img
                  src={l.src}
                  alt={l.name}
                  style={{
                    height: l.h, width: "auto", maxWidth: "100%", objectFit: "contain",
                    opacity: 0.55, filter: "grayscale(1)",
                  }}
                />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.LogosCarousel = LogosCarousel;