---
import SeverityDot from '../ui/SeverityDot.astro';
import CopyButton from '../ui/CopyButton.astro';
import { ruleGroups, totalRules } from '../../data/rules';
---
<section class="py-20" id="rules">
<div class="section-divider mb-20"></div>
<div class="max-w-5xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="font-heading text-2xl sm:text-3xl text-noir-50 mb-3">Rules</h2>
<p class="text-noir-500 text-sm">{totalRules} built-in rules, each mapped to a CWE identifier.</p>
</div>
<div class="flex flex-col gap-3">
{ruleGroups.map((group) => (
<details class="group bg-noir-900 border border-noir-800 rounded-xl overflow-hidden">
<summary class="flex items-center justify-between px-5 py-3.5 cursor-pointer select-none list-none hover:bg-noir-800/40 transition-colors">
<span class="flex items-center gap-3">
<svg class="w-2.5 h-2.5 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 font-medium">{group.name}</span>
</span>
<span class="font-mono text-[10px] text-noir-600">{group.rules.length}</span>
</summary>
<div class="border-t border-noir-800">
{group.rules.map((rule) => (
<div class="grid grid-cols-1 sm:grid-cols-[1fr_auto_auto_2fr] gap-x-3 gap-y-0.5 items-center px-5 py-2 text-[12px] border-b border-noir-800/40 last:border-b-0">
<code class="font-mono text-fox text-[12px]">{rule.id}</code>
<SeverityDot severity={rule.severity} />
<span class="font-mono text-[10px] text-noir-600">{rule.cwe}</span>
<span class="text-noir-500 text-[12px] hidden sm:block">{rule.desc}</span>
</div>
))}
</div>
</details>
))}
</div>
</div>
</section>