/* global React, SectionHeading, Counter */
const STATS = [
  { value: 100,  prefix: "+",   suffix: "",    label: "Importadoras confían en nosotros" },
  { value: 176,  prefix: "+$",  suffix: "M",   label: "Volumen mensual transaccionado", note: "USD" },
  { value: 24,   prefix: "<",   suffix: "Hrs", label: "Registro en menos de 24 horas" },
];

function StatsSection() {
  return (
    <section style={{ background: "var(--bg-1)", padding: "124px 0 56px" }}>
      <div className="wrap">
        <SectionHeading
          eyebrow="Tracción"
          statement="Estás creando algo que perdure."
          twist="Nosotros también."
        />

        <div
          className="reveal"
          style={{
            display: "grid", gridTemplateColumns: "repeat(3, 1fr)",
            gap: 48, maxWidth: 800, margin: "0 auto",
          }}
        >
          {STATS.map((s) => (
            <div key={s.label} style={{ textAlign: "center" }}>
              <div style={{
                margin: 0, fontSize: "clamp(2.4rem, 4vw + 1rem, 3.6rem)",
                fontWeight: 500, color: "var(--accent)",
                fontFamily: "var(--font-display)",
                letterSpacing: "-0.03em", lineHeight: 1,
                marginBottom: 10,
              }}>
                <Counter value={s.value} prefix={s.prefix} suffix={s.suffix}/>
              </div>
              <p style={{ margin: 0, fontSize: 13, color: "var(--fg-2)" }}>
                {s.label}
                {s.note && (
                  <span style={{
                    display: "inline-block", marginLeft: 7, 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>
                )}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.StatsSection = StatsSection;