function ScreenBenchmarks() {
  const bars = [
    ['Your org',          71, 'bg-blue-600',   true],
    ['Housing sector',    62, 'bg-slate-300',  false],
    ['Top quartile (HA)', 78, 'bg-emerald-500',false],
    ['ALMO average',      59, 'bg-slate-300',  false],
  ];
  const metrics = [
    { l: 'eNPS',          you: '+38', sector: '+22', tone: 'emerald' },
    { l: 'Wellbeing',     you: '7.4', sector: '6.8', tone: 'emerald' },
    { l: 'Manager trust', you: '72%', sector: '76%', tone: 'amber' },
  ];
  return (
    <FSFrame label="Benchmarks · Q1 2026">
      <div className="p-4 sm:p-5 bg-slate-50/60 h-full flex flex-col">
        <div className="text-[11px] uppercase tracking-wider font-semibold text-slate-500 mb-2">Response rate vs sector</div>
        <div className="rounded-lg bg-white border border-slate-200 p-3.5">
          <div className="space-y-2.5">
            {bars.map(([name, pct, color, you]) => (
              <div key={name} className="flex items-center gap-3">
                <span className={`w-36 text-[12px] truncate ${you ? 'font-bold text-slate-900' : 'font-medium text-slate-600'}`}>{name}</span>
                <div className="flex-1 h-3 bg-slate-100 rounded">
                  <div className={`h-full rounded ${color}`} style={{ width: pct + '%' }} />
                </div>
                <span className={`w-10 text-[12px] tabular-nums text-right ${you ? 'font-bold text-slate-900' : 'text-slate-600'}`}>{pct}%</span>
              </div>
            ))}
          </div>
        </div>

        <div className="mt-3 text-[11px] uppercase tracking-wider font-semibold text-slate-500 mb-2">Where you stand</div>
        <div className="grid grid-cols-3 gap-2.5 flex-1 min-h-0">
          {metrics.map((m) => (
            <div key={m.l} className="rounded-lg bg-white border border-slate-200 p-3 flex flex-col">
              <div className="text-[11px] uppercase tracking-wider font-semibold text-slate-500">{m.l}</div>
              <div className="mt-1 text-[22px] font-bold text-slate-900 leading-none tabular-nums">{m.you}</div>
              <div className={`mt-1.5 text-[11px] font-semibold ${m.tone === 'emerald' ? 'text-emerald-700' : 'text-amber-700'}`}>
                Sector {m.sector}
              </div>
            </div>
          ))}
        </div>

        <div className="mt-3 text-[11px] text-slate-500">Compared against 110 UK social landlords on CX-Feedback.</div>
      </div>
    </FSFrame>
  );
}