{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "security-compliance-badges",
  "title": "Security Compliance Badges",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/security-compliance-badges/SecurityComplianceBadges.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Check, CheckCircle2, Copy, Download, RefreshCw, ShieldCheck } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\n\ninterface CompliancePillar {\n  id: string\n  name: string\n  standard: string\n  status: string\n  auditor: string\n  lastAudit: string\n  sha256: string\n  highlights: string[]\n}\n\nconst pillars: CompliancePillar[] = [\n  {\n    id: 'soc2',\n    name: 'SOC2 Type II Certified',\n    standard: 'AICPA Trust Services Criteria (Security, Availability, Confidentiality)',\n    status: 'Clean Opinion (Zero Exceptions)',\n    auditor: 'Schellman & Company, LLC',\n    lastAudit: 'Q4 2025 Audit Period',\n    sha256: '9f86d081884c7d659a2feaa0c55ad015a3bf4f1b2b0b822cd15d6c15b0f00a08',\n    highlights: [\n      'Continuous 24/7 automated control monitoring via Drata',\n      'Annual independent black-box & white-box penetration testing',\n      'Mandatory hardware key 2FA (WebAuthn / FIDO2) across all staff',\n      'Immutable tamper-evident centralized audit logs with 365-day retention',\n    ],\n  },\n  {\n    id: 'iso27001',\n    name: 'ISO/IEC 27001:2022',\n    standard: 'Information Security Management System (ISMS)',\n    status: 'Globally Certified',\n    auditor: 'BSI Group Global',\n    lastAudit: 'Continuous Surveillance',\n    sha256: '5e884898da28047151d0e56f8dc6292773603d0d6aabbdd62a11ef721d1542d8',\n    highlights: [\n      'Strict cryptographic key management with automated rotation',\n      'Zero vendor data sharing or telemetry monetization guarantees',\n      'Comprehensive disaster recovery with RPO < 1 min, RTO < 15 mins',\n      'Physical security auditing of all tier-4 sovereign edge hosting locations',\n    ],\n  },\n  {\n    id: 'gdpr',\n    name: 'GDPR & CCPA Compliant',\n    standard: 'EU 2016/679 & California Consumer Privacy Act',\n    status: 'Strict Privacy Tier',\n    auditor: 'Internal Privacy Council + DPO',\n    lastAudit: 'Live Continuous Compliance',\n    sha256: '4b227777d4dd1fc61c6f884f48641d02b4d121d3fd328cb08b5531fcacdabf8a',\n    highlights: [\n      'Zero third-party tracking cookies or marketing beacons in registry AST',\n      'Automated self-serve data portability & deletion API endpoints',\n      'EU Standard Contractual Clauses (SCCs) baked into standard DPA',\n      'Encrypted localized edge caches with sovereign residency enforcement',\n    ],\n  },\n  {\n    id: 'hipaa',\n    name: 'HIPAA & HITECH Ready',\n    standard: 'Health Insurance Portability and Accountability Act',\n    status: 'BAA Eligible',\n    auditor: 'Coalfire Systems',\n    lastAudit: 'Annual Attestation',\n    sha256: 'ef2d127de37b942baad06145e54b0c619a1f22327b2ebbcfbec78f5564afe39d',\n    highlights: [\n      'AES-256 encryption for data at rest and TLS 1.3 in transit',\n      'Automated Business Associate Agreement (BAA) execution for enterprise tiers',\n      'Strict role-based access control (RBAC) with just-in-time privilege escalation',\n      'PHI isolation architecture with zero persistent client-side caching',\n    ],\n  },\n]\n\nconst activeTab = ref<string>('soc2')\nconst copiedHash = ref(false)\nconst isDownloadingReport = ref(false)\n\nconst currentPillar = computed(() => pillars.find((p) => p.id === activeTab.value)!)\n\nfunction copyHash() {\n  navigator.clipboard.writeText(currentPillar.value.sha256)\n  copiedHash.value = true\n  setTimeout(() => (copiedHash.value = false), 2000)\n}\n\nfunction mockDownload() {\n  isDownloadingReport.value = true\n  setTimeout(() => {\n    isDownloadingReport.value = false\n  }, 1200)\n}\n</script>\n\n<template>\n  <section\n    data-slot=\"security-compliance-badges\"\n    class=\"bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8\"\n  >\n    <!-- Ambient Radial Glow -->\n    <div\n      class=\"bg-success/10 pointer-events-none absolute top-1/3 left-1/2 -z-10 h-80 w-full max-w-4xl -translate-x-1/2 -translate-y-1/2 rounded-full blur-xl\"\n    />\n\n    <div class=\"mx-auto max-w-6xl space-y-12\">\n      <!-- Section Header -->\n      <div class=\"mx-auto max-w-3xl space-y-4 text-center\">\n        <Badge variant=\"secondary\" class=\"gap-1.5 px-3 py-1 font-mono text-xs shadow-xs\">\n          <ShieldCheck class=\"text-success size-3.5\" />\n          Enterprise Trust & Cryptographic Security\n        </Badge>\n        <h2 class=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">\n          Built for the most compliance-sensitive architectures.\n        </h2>\n        <p class=\"text-muted-foreground text-base\">\n          Zero runtime bloat, zero tracking beacons, and independent third-party verified attestations for your SecOps\n          team.\n        </p>\n      </div>\n\n      <!-- Compliance Badges 4-Tile Preview Row -->\n      <div class=\"grid grid-cols-2 gap-3 sm:grid-cols-4 sm:gap-4\">\n        <button\n          v-for=\"p in pillars\"\n          :key=\"p.id\"\n          type=\"button\"\n          class=\"group relative overflow-hidden rounded-2xl border p-4 text-left transition-colors\"\n          :class=\"\n            activeTab === p.id\n              ? 'border-success/80 bg-success/5 ring-success/30 shadow-md ring-1'\n              : 'border-border bg-card/70 hover:border-border hover:bg-card'\n          \"\n          @click=\"activeTab = p.id\"\n        >\n          <div class=\"mb-3 flex items-center justify-between\">\n            <div\n              class=\"bg-success/10 text-success flex size-8 items-center justify-center rounded-lg font-mono text-xs font-bold\"\n            >\n              <ShieldCheck class=\"size-4\" />\n            </div>\n            <span class=\"size-2 rounded-full\" :class=\"activeTab === p.id ? 'bg-success animate-pulse' : 'bg-muted'\" />\n          </div>\n\n          <h3 class=\"text-foreground truncate font-mono text-xs font-bold\">{{ p.name.split(' ')[0] }}</h3>\n          <p class=\"text-muted-foreground mt-0.5 truncate text-xs\">{{ p.status }}</p>\n        </button>\n      </div>\n\n      <!-- Interactive Attestation & Security Workbench Card -->\n      <Card\n        class=\"border-border bg-card/95 space-y-6 overflow-hidden rounded-2xl p-6 shadow-sm backdrop-blur-md sm:p-8\"\n      >\n        <!-- Workbench Top Details -->\n        <div class=\"border-border/80 flex flex-col justify-between gap-4 border-b pb-6 sm:flex-row sm:items-center\">\n          <div class=\"space-y-1\">\n            <div class=\"flex items-center gap-2\">\n              <h3 class=\"text-foreground font-mono text-xl font-bold\">{{ currentPillar.name }}</h3>\n              <Badge variant=\"outline\" class=\"border-success/20 bg-success/10 text-success font-mono text-xs\">\n                Verified\n              </Badge>\n            </div>\n            <p class=\"text-muted-foreground font-mono text-xs\">{{ currentPillar.standard }}</p>\n          </div>\n\n          <Button size=\"sm\" variant=\"outline\" class=\"shrink-0 gap-2 font-mono text-xs\" @click=\"mockDownload\">\n            <RefreshCw v-if=\"isDownloadingReport\" class=\"text-primary size-3.5 animate-spin\" />\n            <Download v-else class=\"text-muted-foreground size-3.5\" />\n            <span>{{ isDownloadingReport ? 'Preparing DPA Bundle...' : 'Download Security Whitepaper' }}</span>\n          </Button>\n        </div>\n\n        <!-- Audit Details Grid -->\n        <div class=\"grid grid-cols-1 gap-6 md:grid-cols-2\">\n          <!-- Left: Key Controls & Technical Enforcements -->\n          <div class=\"space-y-3\">\n            <p class=\"text-muted-foreground font-mono text-xs tracking-wider uppercase\">Key Technical Controls</p>\n            <ul class=\"space-y-2.5\">\n              <li\n                v-for=\"(item, idx) in currentPillar.highlights\"\n                :key=\"idx\"\n                class=\"text-foreground/90 flex items-start gap-2.5 text-xs leading-relaxed\"\n              >\n                <CheckCircle2 class=\"text-success mt-0.5 size-4 shrink-0\" />\n                <span>{{ item }}</span>\n              </li>\n            </ul>\n          </div>\n\n          <!-- Right: Auditor & Cryptographic SHA-256 Fingerprint -->\n          <div class=\"border-border bg-muted/20 flex flex-col justify-between space-y-4 rounded-xl border p-5\">\n            <div class=\"space-y-3\">\n              <div class=\"flex items-center justify-between font-mono text-xs\">\n                <span class=\"text-muted-foreground\">Independent Auditor:</span>\n                <span class=\"text-foreground font-semibold\">{{ currentPillar.auditor }}</span>\n              </div>\n              <div class=\"flex items-center justify-between font-mono text-xs\">\n                <span class=\"text-muted-foreground\">Audit Cycle:</span>\n                <span class=\"text-foreground\">{{ currentPillar.lastAudit }}</span>\n              </div>\n              <div class=\"flex items-center justify-between font-mono text-xs\">\n                <span class=\"text-muted-foreground\">CVE Vulnerability Scan:</span>\n                <span class=\"text-success font-bold\">0 High &bull; 0 Critical</span>\n              </div>\n            </div>\n\n            <!-- SHA-256 Hash Box -->\n            <div class=\"border-border/60 space-y-1.5 border-t pt-3\">\n              <div class=\"text-muted-foreground flex items-center justify-between font-mono text-xs\">\n                <span>Attestation PDF SHA-256 Fingerprint:</span>\n                <button type=\"button\" class=\"text-primary flex items-center gap-1 hover:underline\" @click=\"copyHash\">\n                  <Check v-if=\"copiedHash\" class=\"text-success size-3\" />\n                  <Copy v-else class=\"size-3\" />\n                  <span>{{ copiedHash ? 'Copied' : 'Copy Hash' }}</span>\n                </button>\n              </div>\n              <p\n                class=\"text-muted-foreground bg-background/80 border-border rounded border p-2 font-mono text-xs break-all select-all\"\n              >\n                {{ currentPillar.sha256 }}\n              </p>\n            </div>\n          </div>\n        </div>\n      </Card>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/SecurityComplianceBadges.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json"
  ],
  "description": "Enterprise security and compliance workbench featuring SOC2, ISO27001, GDPR, and HIPAA audit inspection, cryptographic SHA-256 fingerprint verification, and whitepaper download.",
  "categories": [
    "marketing"
  ]
}