// KpiStripAlt.jsx — full-width KPI strip below hero
const altKpiStyles = {
  section: { background: "#fff", borderBottom: "1px solid var(--border)" },
  grid: { display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, padding: "32px 0" },
  cell: { padding: "16px 32px", borderRight: "1px solid var(--border)", display: "flex", flexDirection: "column", gap: 6 },
  cellLast: { borderRight: "none" },
  label: { fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--fg-subtle)" },
  value: { fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 32, color: "var(--fg)", lineHeight: 1, letterSpacing: "-0.015em" },
  accent: { color: "var(--gol-gold-600)" },
  sub: { fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--fg-muted)" },
};

function KpiStripAlt() {
  const kpis = [
    { label: "Грузопоток / 2025", value: "412 600 т", sub: "Из портов Китая в СНГ" },
    { label: "Активных маршрутов", value: "38", sub: "Авто · мультимодал · ЖД" },
    { label: "Доставлено в срок", value: "97,4%", sub: "По итогам Q1 2026", accent: true },
    { label: "Поддержка", value: "24 / 7", sub: "RU · CN · EN" },
  ];
  return (
    <section style={altKpiStyles.section}>
      <div className="container">
        <div style={altKpiStyles.grid}>
          {kpis.map((k, i) => (
            <div key={k.label} style={{ ...altKpiStyles.cell, ...(i === kpis.length - 1 ? altKpiStyles.cellLast : {}) }}>
              <span style={altKpiStyles.label}>{k.label}</span>
              <span style={{ ...altKpiStyles.value, ...(k.accent ? altKpiStyles.accent : {}) }} className="numeric">{k.value}</span>
              <span style={altKpiStyles.sub}>{k.sub}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.KpiStripAlt = KpiStripAlt;