---
import { frameworkGroups, features, compatFeatures } from '../../data/features';
const langColors: Record<string, string> = {
'Express / Node': '#F7DF1E',
'Flask / Django': '#3776AB',
'Gin / net/http': '#00ADD8',
'Rails / Ruby': '#CC342D',
'Spring / Java': '#ED8B00',
'PHP / Laravel': '#777BB4',
'Rust': '#DEA584',
'C# / .NET': '#512BD4',
'Kotlin / Ktor': '#7F52FF',
'Swift / iOS': '#F05138',
};
---
<section class="py-24" id="coverage">
<div class="max-w-5xl mx-auto px-6">
<h2 class="font-heading text-noir-50 text-3xl sm:text-4xl mb-4">Framework-aware by default</h2>
<p class="text-noir-500 text-base mb-2">Built-in rules for the frameworks teams actually use.</p>
<p class="text-noir-500 text-base mb-12">No rule files to download, no config to write.</p>
<!-- Frameworks -->
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-px bg-noir-800 rounded-xl overflow-hidden mb-16">
{frameworkGroups.map((group) => (
<div class="bg-noir-950 p-4">
<div class="flex items-center gap-2 mb-2">
<span class="w-1.5 h-1.5 rounded-full" style={`background: ${langColors[group.title] || '#78716C'}`}></span>
<span class="text-noir-100 text-sm">{group.title}</span>
</div>
<span class="text-noir-600 text-xs">{group.ruleCount} rules</span>
</div>
))}
</div>
<!-- Features -->
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
{features.map((f) => (
<div>
<h3 class="text-noir-100 text-sm font-medium mb-2">{f.title}</h3>
<p class="text-noir-500 text-sm leading-relaxed">{f.desc}</p>
</div>
))}
</div>
<!-- Semgrep compat -->
<div>
<h3 class="text-noir-100 text-sm font-medium mb-2">Semgrep compatibility</h3>
<p class="text-noir-500 text-sm leading-relaxed mb-4">
Load existing rules with <code class="text-noir-400">--rules</code>. Focused subset, parity-tested in CI.
</p>
<div class="flex flex-wrap gap-2">
{compatFeatures.map((f) => (
<span class:list={[
'text-xs',
f.supported ? 'text-noir-400' : 'text-noir-700 line-through'
]}>
{f.label}
</span>
))}
</div>
</div>
</div>
</section>