// FindingCard — a single finding. Can be "gated" (blurred + locked).
function FindingCard({ f, gated }) {
  const sevColor = {
    high:   { bg: 'rgba(232,132,124,0.10)', bd: '#E8847C', tag: '#E8847C' },
    medium: { bg: 'rgba(212,145,93,0.10)',  bd: '#D4915D', tag: '#D4915D' },
    low:    { bg: 'rgba(107,122,114,0.08)', bd: '#8A948F', tag: '#8A948F' },
  }[f.severity];
  return (
    <div className={`finding-card sev-${f.severity} ${gated ? 'is-gated' : ''}`}
         style={{ background: sevColor.bg, borderColor: sevColor.bd }}>
      <div className="fc-head">
        <span className="fc-id">{f.id}</span>
        <span className="fc-sev" style={{ color: sevColor.tag, borderColor: sevColor.tag }}>
          {f.severity}
        </span>
        <span className="fc-cwe">{f.cwe}</span>
      </div>
      <div className="fc-title">{f.title}</div>
      <div className="fc-path">{f.file}<span className="fc-sep">:</span><span className="fc-line">{f.line}</span></div>
      <pre className="fc-snippet">{f.snippet.map((l, i) =>
        <div key={i}><span className="fc-snip-ln">{i+1}</span>{l}</div>)}</pre>
      <div className="fc-rule">rule · {f.rule}</div>
    </div>
  );
}
window.FindingCard = FindingCard;