---
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>
