// Numbers strip — fila de 4 métricas clave que definen la escala del trabajo.

function NumberStrip() {
  const { lang } = useT();

  const metrics = lang === "es"
    ? [
        { num: "+118K", label: "registros históricos",    sub: "acumulado VOA" },
        { num: "13+",   label: "métricas automatizadas", sub: "CSAT · 3 canales" },
        { num: "77",    label: "tiendas monitoreadas",   sub: "Sodimac Chile" },
        { num: "−85%",  label: "tiempo manual reducido", sub: "flujo automatizado" },
      ]
    : [
        { num: "+118K", label: "historical records",   sub: "VOA accumulated" },
        { num: "13+",   label: "metrics automated",   sub: "CSAT · 3 channels" },
        { num: "77",    label: "stores monitored",    sub: "Sodimac Chile" },
        { num: "−85%",  label: "manual time reduced", sub: "automated flow" },
      ];

  // borders: mobile is 2-col grid, desktop is 4-col
  const borders = [
    "",
    "border-l",
    "border-t md:border-t-0 md:border-l",
    "border-l border-t md:border-t-0",
  ];
  const xDirs = [-70, -25, 25, 70];

  return (
    <div style={{ background: "var(--surface-0)", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
      <div className="max-w-[1320px] mx-auto px-6 md:px-10">
        <div className="grid grid-cols-2 md:grid-cols-4">
          {metrics.map((m, i) => (
            <Reveal key={m.num} x={xDirs[i]} y={0} delay={i * 0.08}>
              <div
                className={`py-10 md:py-12 px-5 md:px-10 flex flex-col ${borders[i]}`}
                style={{ borderColor: "var(--border)" }}
              >
                <div
                  className="text-[52px] md:text-[72px] leading-none tracking-[-0.03em]"
                  style={{ color: "var(--accent-ink)", fontWeight: 800 }}
                >
                  {m.num}
                </div>
                <div
                  className="mono text-[10.5px] uppercase tracking-[0.15em] mt-3"
                  style={{ color: "var(--text-mute)", fontWeight: 700 }}
                >
                  {m.label}
                </div>
                <div
                  className="mono text-[9.5px] mt-1"
                  style={{ color: "var(--text-dim)" }}
                >
                  {m.sub}
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { NumberStrip });