// KpiStrip.jsx — the signature numbers strip
// One tile is highlighted with Signal background.

const kpiStyles = {
  outer: {
    maxWidth: 'var(--container-max)',
    margin: '0 auto',
    padding: '0 var(--container-pad)',
  },
  eyebrow: {
    fontFamily: 'var(--font-mono)',
    fontSize: 11,
    letterSpacing: '0.14em',
    textTransform: 'uppercase',
    color: 'var(--fg-muted)',
    fontWeight: 500,
    marginBottom: 16,
    display: 'flex',
    alignItems: 'baseline',
    justifyContent: 'space-between',
  },
  grid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(4, 1fr)',
    border: '1px solid var(--border)',
    borderRadius: 'var(--r-md)',
    background: 'var(--bg-elevated)',
    overflow: 'hidden',
  },
  tile: {
    padding: '24px 22px',
    borderRight: '1px solid var(--border)',
  },
  label: {
    fontFamily: 'var(--font-mono)',
    fontSize: 10,
    letterSpacing: '0.14em',
    textTransform: 'uppercase',
    color: 'var(--fg-muted)',
    fontWeight: 500,
  },
  value: {
    fontFamily: 'var(--font-mono)',
    fontVariantNumeric: 'tabular-nums',
    fontSize: 36,
    color: 'var(--fg)',
    marginTop: 8,
    letterSpacing: '-0.01em',
  },
  delta: {
    fontFamily: 'var(--font-mono)',
    fontSize: 12,
    marginTop: 4,
  },
};

function KpiStrip() {
  return (
    <section style={{padding: '32px 0 64px'}}>
      <div style={kpiStyles.outer}>
        <div style={kpiStyles.eyebrow}>
          <span>Aggregate, all clients · last 90 days</span>
          <span style={{color:'var(--fg-faint)'}}>updated 12 May 2026</span>
        </div>
        <div style={kpiStyles.grid}>
          <div style={kpiStyles.tile}>
            <div style={kpiStyles.label}>Ad spend deployed</div>
            <div style={kpiStyles.value}>₹2.4 Cr</div>
            <div style={{...kpiStyles.delta, color: 'var(--fg-muted)'}}>across 18 SMBs</div>
          </div>
          <div style={kpiStyles.tile}>
            <div style={kpiStyles.label}>Qualified leads</div>
            <div style={kpiStyles.value}>14,820</div>
            <div style={{...kpiStyles.delta, color: 'var(--vault-500)'}}>▲ 38% QoQ</div>
          </div>
          <div style={{...kpiStyles.tile, background: 'var(--powder-50)', borderRight: '1px solid var(--powder-100)'}}>
            <div style={{...kpiStyles.label, color: 'var(--powder-700)'}}>Median CPL</div>
            <div style={{...kpiStyles.value, color: 'var(--ink-1000)'}}>₹1,372</div>
            <div style={{...kpiStyles.delta, color: 'var(--vault-500)'}}>▼ ₹248 vs Q1</div>
          </div>
          <div style={{...kpiStyles.tile, borderRight: 'none'}}>
            <div style={kpiStyles.label}>Median ROAS</div>
            <div style={kpiStyles.value}>4.2×</div>
            <div style={{...kpiStyles.delta, color: 'var(--vault-500)'}}>▲ 0.6 vs Q1</div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { KpiStrip });