---
import { benchmarkRows, timeWidth, speedMultiplier } from '../../data/benchmarks';
---
<div class="bg-noir-900 border border-noir-800 rounded-xl p-5 sm:p-6">
<div class="hidden md:grid grid-cols-[100px_1fr_1fr] gap-3 text-[10px] font-mono uppercase tracking-widest text-noir-600 mb-5 px-1">
<div>Repo</div>
<div>foxguard</div>
<div>Semgrep</div>
</div>
<div class="flex flex-col gap-5">
{benchmarkRows.map((row) => (
<div class="grid grid-cols-1 md:grid-cols-[100px_1fr_1fr] gap-3 items-center">
<div class="md:pr-3">
<div class="font-mono text-noir-100 text-sm">{row.repo}</div>
<div class="font-mono text-[10px] text-noir-600">{row.files} files</div>
</div>
<div>
<div class="md:hidden font-mono text-[10px] uppercase tracking-widest text-noir-600 mb-1.5">foxguard</div>
<div class="bg-noir-950 rounded-md border border-noir-800 overflow-hidden h-9 flex items-center">
<div
class="h-full flex items-center justify-end px-3 text-[11px] font-mono font-semibold min-w-[72px] bg-fox text-noir-950"
style={`width: ${timeWidth(row.foxguard)}%`}
>
{row.foxguard.toFixed(3)}s
</div>
</div>
</div>
<div>
<div class="md:hidden font-mono text-[10px] uppercase tracking-widest text-noir-600 mb-1.5">Semgrep</div>
<div class="bg-noir-950 rounded-md border border-noir-800 overflow-hidden h-9 flex items-center">
<div
class="h-full flex items-center justify-end px-3 text-[11px] font-mono font-semibold min-w-[72px] bg-noir-600 text-noir-100"
style={`width: ${timeWidth(row.semgrep)}%`}
>
{row.semgrep.toFixed(3)}s
</div>
</div>
<div class="text-right mt-1">
<span class="font-mono text-[10px] text-fox">{speedMultiplier(row)} faster</span>
</div>
</div>
</div>
))}
</div>
</div>
<p class="text-[11px] text-noir-600 mt-4">
foxguard built-in rules vs Semgrep <code class="text-noir-500">auto</code>. Run <code class="text-noir-500">./benchmarks/run.sh</code> locally to reproduce.
</p>