/** Trust / compliance visual for resources CTA column. */
export function TrustComplianceGraphic({ className = '' }: { className?: string }) {
  return (
    <div className={`relative ${className}`} aria-hidden>
      <svg viewBox="0 0 360 280" className="h-auto w-full" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="shield-fill" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stopColor="#f97316" stopOpacity="0.25" />
            <stop offset="100%" stopColor="#fbbf24" stopOpacity="0.05" />
          </linearGradient>
        </defs>

        {/* Shield */}
        <path
          d="M180 24 L280 64 L280 140 C280 196 230 236 180 256 C130 236 80 196 80 140 L80 64 Z"
          fill="url(#shield-fill)"
          stroke="#f97316"
          strokeOpacity="0.6"
          strokeWidth="1.5"
        />
        <path
          d="M180 56 L240 80 L240 132 C240 172 210 200 180 212 C150 200 120 172 120 132 L120 80 Z"
          fill="#111827"
          stroke="#374151"
          strokeWidth="1"
        />
        <path
          d="M156 132 L172 148 L204 108"
          fill="none"
          stroke="#34d399"
          strokeWidth="3"
          strokeLinecap="round"
          strokeLinejoin="round"
        />

        {/* Compliance badges */}
        {[
          { x: 48, y: 200, label: 'SOC 2' },
          { x: 140, y: 228, label: 'GDPR' },
          { x: 232, y: 200, label: 'eIDAS' },
        ].map((badge) => (
          <g key={badge.label} transform={`translate(${badge.x} ${badge.y})`}>
            <rect x="-28" y="-12" width="56" height="24" rx="12" fill="#1f2937" stroke="#4b5563" strokeWidth="1" />
            <text x="0" y="4" textAnchor="middle" fill="#fb923c" fontSize="9" fontWeight="700">
              {badge.label}
            </text>
          </g>
        ))}
      </svg>
    </div>
  );
}
