---
import { ruleGroups, totalRules } from '../../data/rules';
---
<section class="py-24" id="rules">
<div class="max-w-5xl mx-auto px-6">
<h2 class="font-heading text-noir-50 text-3xl sm:text-4xl mb-4">Rules</h2>
<p class="text-noir-500 text-base mb-12">{totalRules} built-in rules, each mapped to a CWE.</p>
<div class="flex flex-col gap-px bg-noir-800 rounded-xl overflow-hidden">
{ruleGroups.map((group) => (
<details class="group bg-noir-950">
<summary class="flex items-center justify-between px-5 py-3.5 cursor-pointer select-none list-none hover:bg-noir-900/50 transition-colors">
<span class="flex items-center gap-3">
<svg class="w-2 h-2 text-noir-600 transition-transform duration-200 group-open:rotate-90" viewBox="0 0 12 12" fill="currentColor"><path d="M4 1l6 5-6 5V1z"/></svg>
<span class="text-noir-100 text-sm">{group.name}</span>
</span>
<span class="text-noir-600 text-sm">{group.rules.length}</span>
</summary>
<div class="border-t border-noir-800/50">
{group.rules.map((rule) => (
<div class="px-5 py-2 border-b border-noir-800/20 last:border-b-0">
<div class="flex items-center gap-3">
<code class="font-mono text-fox text-xs">{rule.id}</code>
<span class:list={[
'text-[10px]',
rule.severity === 'critical' ? 'text-purple-400' :
rule.severity === 'high' ? 'text-red-400' :
rule.severity === 'medium' ? 'text-yellow-500' : 'text-noir-600'
]}>{rule.severity}</span>
<span class="text-noir-600 text-[10px]">{rule.cwe}</span>
</div>
<div class="text-noir-500 text-xs mt-0.5 hidden sm:block">{rule.desc}</div>
</div>
))}
</div>
</details>
))}
</div>
</div>
</section>