Compliance Stamp

---
import type { CompendiumMeta } from '../../../data/types';

export const meta: CompendiumMeta = {
  id: 44,
  slug: 'compliance-stamp',
  name: 'Compliance Stamp',
  category: 'governance-risk',
  subcategory: 'signoff',
  pillar: 'go',
  description: 'A bureaucratic-grade stamp — SOC-2 / GDPR / HIPAA aligned to DoCoDeGo\'s GO pillar.',
  spec: `## Intent
A spec that has cleared the relevant external-compliance review earns a stamp. The stamp is a visible commitment by the Governor that the artefact has been audited against a named regime.

## Acceptance Criteria
- [ ] Rotated, double-ringed mark — reads as bureaucratic
- [ ] Names the regime (SOC-2 TYPE II, etc.)
- [ ] Carries a date and a reviewer
- [ ] Pillar-tinted ink (GO green)

## Constraints
- Pure CSS / SVG — no raster
- Looks "stamped" not "rendered"`,
  tags: ['svg', 'stamp', 'badge', 'real-content', 'dark-mode-tested'],
  status: 'stable',
  health: { ics: 85, a11y: 'aa', themed: true, animated: false },
};

const stamp = {
  regime: 'SOC-2',
  variant: 'Type II',
  date: '2026-04-12',
  by: 'h.wirjawan',
  spec: 'SPEC-204',
};
---

<div data-this-component class="w-full bg-paper text-black border-4 border-black p-4 flex items-center gap-4 overflow-hidden">
  <div class="relative w-32 h-32 shrink-0">
    <svg viewBox="0 0 120 120" class="absolute inset-0 w-full h-full" style="transform: rotate(-12deg);" role="img" aria-label={`${stamp.regime} ${stamp.variant} attestation`}>
      <defs>
        <path id="cs-arc-top" d="M 60 60 m -46 0 a 46 46 0 1 1 92 0" fill="none" />
        <path id="cs-arc-bot" d="M 60 60 m -46 0 a 46 46 0 1 0 92 0" fill="none" />
      </defs>
      <circle cx="60" cy="60" r="52" fill="none" stroke="var(--color-go)" stroke-width="4" />
      <circle cx="60" cy="60" r="44" fill="none" stroke="var(--color-go)" stroke-width="2" />
      <text font-family="JetBrains Mono, monospace" font-weight="900" font-size="9" letter-spacing="3" fill="var(--color-go)">
        <textPath href="#cs-arc-top" startOffset="50%" text-anchor="middle">DOCODEGO · GOVERN</textPath>
      </text>
      <text font-family="JetBrains Mono, monospace" font-weight="900" font-size="8" letter-spacing="3" fill="var(--color-go)">
        <textPath href="#cs-arc-bot" startOffset="50%" text-anchor="middle">· AUDITED · {stamp.date} ·</textPath>
      </text>
      <text x="60" y="55" text-anchor="middle" font-family="Inter, sans-serif" font-weight="900" font-size="20" fill="var(--color-go)">{stamp.regime}</text>
      <text x="60" y="72" text-anchor="middle" font-family="JetBrains Mono, monospace" font-size="8" letter-spacing="2" fill="var(--color-go)">{stamp.variant.toUpperCase()}</text>
      <line x1="20" y1="80" x2="100" y2="80" stroke="var(--color-go)" stroke-width="1" />
    </svg>
  </div>

  <div class="min-w-0 flex-1">
    <p class="font-mono text-[10px] uppercase tracking-widest opacity-60">Compliance attestation</p>
    <p class="mt-1 font-black text-base leading-none">{stamp.regime} {stamp.variant}</p>
    <p class="mt-2 font-mono text-[10px]">Spec · {stamp.spec}</p>
    <p class="font-mono text-[10px]">By · {stamp.by}</p>
    <p class="font-mono text-[10px] opacity-60 tabular-nums">{stamp.date}</p>
    <div class="mt-2 inline-flex items-center gap-1 px-2 py-0.5 border-2 border-black bg-go text-black font-black text-[9px] uppercase tracking-widest">
      <span class="w-1.5 h-1.5 bg-black" aria-hidden="true"></span> Cleared
    </div>
  </div>
</div>