---
import BenchmarkChart from '../ui/BenchmarkChart.astro';
---
<section class="py-20" id="speed">
<div class="section-divider mb-20"></div>
<div class="max-w-4xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="font-heading text-2xl sm:text-3xl text-noir-50 mb-3">Linter speed, scanner depth</h2>
<p class="text-noir-500 max-w-xl mx-auto text-sm leading-relaxed">
Most security scanners take 10-30s. foxguard finishes in under a second. Fast enough to run on every save, not just in CI.
</p>
</div>
<BenchmarkChart />
<!-- Workflow -->
<div class="mt-16 max-w-lg mx-auto">
<div class="flex flex-col sm:flex-row items-center justify-center gap-2 sm:gap-0 font-mono text-xs">
<div class="bg-noir-900 border border-noir-800 rounded-md px-3.5 py-2.5 text-noir-500">edit</div>
<svg class="w-5 h-5 text-noir-700 shrink-0 rotate-90 sm:rotate-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14m-7-7 7 7-7 7"/></svg>
<div class="bg-noir-900 border border-fox/20 rounded-md px-3.5 py-2.5 text-fox font-medium">foxguard</div>
<svg class="w-5 h-5 text-noir-700 shrink-0 rotate-90 sm:rotate-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14m-7-7 7 7-7 7"/></svg>
<div class="bg-noir-900 border border-noir-800 rounded-md px-3.5 py-2.5 text-noir-500">fix</div>
<svg class="w-5 h-5 text-noir-700 shrink-0 rotate-90 sm:rotate-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14m-7-7 7 7-7 7"/></svg>
<div class="bg-noir-900 border border-noir-800 rounded-md px-3.5 py-2.5 text-noir-500">commit</div>
</div>
</div>
</div>
</section>