// KPI tile shared by Overview and House detail pages.
function KpiCard({ label, value, delta, sublabel, hero, accent, invertDelta }) {
  const up = delta != null && delta >= 0;
  const good = invertDelta ? !up : up;
  // `hero` kept for back-compat — now renders same as `accent`
  const isAccent = hero || accent;
  return (
    <div className="kpi" style={isAccent ? { borderColor: 'var(--accent)', boxShadow: '0 0 0 1px var(--accent) inset' } : {}}>
      <div className="kpi-label">{label}</div>
      <div className="kpi-value" style={isAccent ? { color: 'var(--accent)' } : {}}>{value}</div>
      {delta != null ? (
        <div className={`kpi-delta ${good ? 'up' : 'down'}`}>
          {up ? '↑' : '↓'} {Math.abs(delta).toFixed(1)}% vs prior year
        </div>
      ) : sublabel ? (
        <div className="kpi-delta">{sublabel}</div>
      ) : null}
    </div>
  );
}

Object.assign(window, { KpiCard });