---
import { benchmarkRows, speedMultiplier } from '../../data/benchmarks';
const maxTime = Math.max(...benchmarkRows.map(r => r.semgrep));
---
<div class="space-y-8">
{benchmarkRows.map((row) => {
const foxPct = Math.max((row.foxguard / maxTime) * 100, 4);
const semPct = (row.semgrep / maxTime) * 100;
return (
<div>
<div class="flex items-baseline justify-between mb-3">
<span class="text-noir-100 text-sm font-medium">{row.repo}</span>
<div class="flex items-center gap-3 text-xs">
<span class="text-fox font-medium">{speedMultiplier(row)}</span>
<span class="text-noir-600">{row.files} files</span>
</div>
</div>
<div class="flex items-center gap-3 mb-2">
<div class="w-14 sm:w-16 text-[10px] sm:text-xs text-noir-400 shrink-0">foxguard</div>
<div class="flex-1 rounded-full overflow-hidden" style="height:10px;background:rgba(41,37,36,0.5);">
<div style={`width:${foxPct}%;height:10px;background:#d97706;border-radius:9999px;`}></div>
</div>
<span class="text-xs font-mono text-fox shrink-0 w-14 text-right">{row.foxguard.toFixed(3)}s</span>
</div>
<div class="flex items-center gap-3">
<div class="w-14 sm:w-16 text-[10px] sm:text-xs text-noir-600 shrink-0">Semgrep</div>
<div class="flex-1 rounded-full overflow-hidden" style="height:10px;background:rgba(41,37,36,0.5);">
<div style={`width:${semPct}%;height:10px;background:#57534E;border-radius:9999px;`}></div>
</div>
<span class="text-xs font-mono text-noir-500 shrink-0 w-14 text-right">{row.semgrep.toFixed(1)}s</span>
</div>
</div>
);
})}
</div>
<p class="text-noir-600 text-xs mt-8">
foxguard built-ins vs Semgrep auto ยท <code class="text-noir-500">./benchmarks/run.sh</code> to reproduce
</p>