{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "error",
  "title": "Error",
  "author": "AlgorizeTech",
  "description": "Ask the user to pick one of 5 error variants: https://avaraui.com/view/error. This item holds 5 of them as looks of one component (terminal, quantum-glitch, modern-animated, service-pipeline, prismatic-glass). Skip the question if the user already named one. A responsive, animated Cyberpunk Diagnostic Terminal Error Website Section with full Light and Dark mode adaptive styling, diagnostic monitors, and live stacktrace inspection.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/components/custom/blocks/ErrorBlock.tsx",
      "content": "\"use client\";\n\nimport React, { useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  Home,\n  Copy,\n  Check,\n  ServerCrash,\n  Radio,\n  LifeBuoy,\n  RefreshCw,\n  Cpu,\n  ShieldAlert,\n  Terminal,\n  ChevronDown,\n  ChevronUp,\n  Laptop,\n  Globe,\n  Database,\n  CheckCircle2,\n  XCircle,\n  Activity,\n  Layers,\n  Sparkles,\n  Gauge,\n  Binary,\n} from \"lucide-react\";\n\nexport interface ServiceStatusItem {\n  name: string;\n  status: \"operational\" | \"degraded\" | \"outage\";\n  latency?: string;\n}\n\nexport type ErrorVariant =\n  | \"terminal\"\n  | \"modern-animated\"\n  | \"cosmic-pulse\"\n  | \"service-pipeline\"\n  | \"pipeline\"\n  | \"quantum-glitch\"\n  | \"quantum-hud\"\n  | \"prismatic-glass\"\n  | \"prismatic\"\n  | \"aurora-prism\";\n\nexport interface ErrorSectionProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Visual layout variant:\n   * - \"terminal\": Cyberpunk diagnostic enclosure with technical readout.\n   * - \"modern-animated\" / \"cosmic-pulse\": Ultra-modern animated orbital radar with live health micro-monitors.\n   * - \"service-pipeline\" / \"pipeline\": Interactive animated service topology & network flow showing failure point.\n   * - \"quantum-glitch\" / \"quantum-hud\": High-tech chromatic glitch 2-column bento HUD with system vitals and memory hex dump.\n   * - \"prismatic-glass\" / \"aurora-prism\": Ultra-clean glassmorphic floating crystal with spinning rainbow refraction halo.\n   * Defaults to \"terminal\".\n   */\n  variant?: ErrorVariant;\n  /** Primary error code or status, e.g. \"500\", \"503\", \"CLIENT_EXCEPTION\" */\n  errorCode?: string;\n  /** Main heading */\n  title?: string;\n  /** Explanatory message */\n  description?: string;\n  /** Technical error stack or raw message to show in expandable viewer */\n  errorDetails?: string;\n  /** Digest/incident ID */\n  errorId?: string;\n  /** Micro-service telemetry status items (used in modern-animated variant) */\n  services?: ServiceStatusItem[];\n  /** Callback triggered when user clicks 'Try Again' / 'Reload' */\n  onRetry?: () => void;\n  /** Callback triggered when user clicks 'Back to Home' */\n  onHome?: () => void;\n  /** Callback for contacting support */\n  onSupport?: () => void;\n}\n\nconst MODERN_STYLES = `\n@keyframes err-float {\n  0%, 100% { transform: translateY(0px); }\n  50% { transform: translateY(-8px); }\n}\n@keyframes err-radar-sweep {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n@keyframes err-spin-slow {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n@keyframes err-spin-reverse {\n  from { transform: rotate(360deg); }\n  to { transform: rotate(0deg); }\n}\n@keyframes err-pulse-halo {\n  0%, 100% { opacity: 0.35; transform: scale(1); }\n  50% { opacity: 0.7; transform: scale(1.08); }\n}\n@keyframes err-beacon-ping {\n  0% { transform: scale(0.9); opacity: 0.8; }\n  70%, 100% { transform: scale(1.6); opacity: 0; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .err-anim-float,\n  .err-anim-sweep,\n  .err-anim-spin,\n  .err-anim-spin-reverse,\n  .err-anim-halo,\n  .err-anim-ping {\n    animation: none !important;\n  }\n}\n`;\n\nconst PIPELINE_STYLES = `\n@keyframes pipe-pulse-halo {\n  0%, 100% { opacity: 0.35; transform: scale(1); }\n  50% { opacity: 0.75; transform: scale(1.12); }\n}\n@keyframes pipe-beam-flow {\n  0% { stroke-dashoffset: 48; }\n  100% { stroke-dashoffset: 0; }\n}\n@keyframes pipe-ping-alert {\n  0% { transform: scale(0.95); opacity: 0.9; }\n  75%, 100% { transform: scale(1.7); opacity: 0; }\n}\n@keyframes pipe-heartbeat-glow {\n  0%, 100% { filter: drop-shadow(0 0 2px rgba(239, 68, 68, 0.4)); }\n  50% { filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.9)); }\n}\n@media (prefers-reduced-motion: reduce) {\n  .pipe-anim-halo,\n  .pipe-anim-beam,\n  .pipe-anim-ping,\n  .pipe-anim-heartbeat {\n    animation: none !important;\n  }\n}\n`;\n\nconst GLITCH_STYLES = `\n@keyframes glitch-anim-1 {\n  0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }\n  20% { clip-path: inset(20% 0 60% 0); transform: translate(-2px, 2px); }\n  40% { clip-path: inset(40% 0 30% 0); transform: translate(2px, -2px); }\n  60% { clip-path: inset(80% 0 5% 0); transform: translate(-1px, 1px); }\n  80% { clip-path: inset(10% 0 70% 0); transform: translate(1px, -1px); }\n}\n@keyframes glitch-anim-2 {\n  0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }\n  25% { clip-path: inset(70% 0 10% 0); transform: translate(2px, 1px); }\n  50% { clip-path: inset(15% 0 55% 0); transform: translate(-2px, -1px); }\n  75% { clip-path: inset(50% 0 35% 0); transform: translate(1px, 2px); }\n}\n@keyframes vitals-stripes {\n  from { background-position: 0 0; }\n  to { background-position: 30px 0; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .glitch-layer-1,\n  .glitch-layer-2,\n  .vitals-striped-bar {\n    animation: none !important;\n  }\n}\n`;\n\nconst PRISMATIC_STYLES = `\n@keyframes prism-spin {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n@keyframes prism-float {\n  0%, 100% { transform: translateY(0px) rotate(45deg); }\n  50% { transform: translateY(-10px) rotate(45deg); }\n}\n@keyframes prism-orbit {\n  from { transform: rotate(0deg) translateX(70px) rotate(0deg); }\n  to { transform: rotate(360deg) translateX(70px) rotate(-360deg); }\n}\n@keyframes prism-aurora-glow {\n  0%, 100% { opacity: 0.35; transform: scale(1) translate(-50%, -50%); }\n  50% { opacity: 0.7; transform: scale(1.15) translate(-48%, -52%); }\n}\n@media (prefers-reduced-motion: reduce) {\n  .prism-anim-spin,\n  .prism-anim-float,\n  .prism-anim-orbit,\n  .prism-anim-glow {\n    animation: none !important;\n  }\n}\n`;\n\nexport function ErrorSection({\n  variant = \"terminal\",\n  errorCode = \"500\",\n  title,\n  description,\n  errorDetails,\n  errorId = \"ERR_0x9481FA\",\n  services,\n  onRetry,\n  onHome,\n  onSupport,\n  className,\n  ...props\n}: ErrorSectionProps) {\n  const [copied, setCopied] = useState(false);\n  const [retrying, setRetrying] = useState(false);\n  const [detailsOpen, setDetailsOpen] = useState(false);\n  const [pipelineTab, setPipelineTab] = useState<\"trace\" | \"remediation\">(\"trace\");\n\n  const isModern = variant === \"modern-animated\" || variant === \"cosmic-pulse\";\n  const isPipeline = variant === \"service-pipeline\" || variant === \"pipeline\";\n  const isGlitch = variant === \"quantum-glitch\" || variant === \"quantum-hud\";\n  const isPrismatic =\n    variant === \"prismatic-glass\" ||\n    variant === \"prismatic\" ||\n    variant === \"aurora-prism\";\n\n  const resolvedTitle =\n    title ||\n    (isPrismatic\n      ? \"UNRESOLVED SYSTEM STATE\"\n      : isGlitch\n      ? \"KERNEL EXECUTION ANOMALY\"\n      : isPipeline\n      ? \"SERVICE PIPELINE INTERRUPTED\"\n      : isModern\n      ? \"UNEXPECTED SYSTEM ANOMALY\"\n      : \"SYSTEM RUNTIME EXCEPTION\");\n\n  const resolvedDescription =\n    description ||\n    (isPrismatic\n      ? \"A transient disruption fractured the runtime pipeline. Cryptographic memory buffers remain sealed and preserved for triage.\"\n      : isGlitch\n      ? \"High-priority execution thread encountered an unrecoverable kernel panic. Isolation protocols engaged to preserve system integrity.\"\n      : isPipeline\n      ? \"A critical downstream node failed during request execution. The pipeline halted safely to isolate fault propagation.\"\n      : isModern\n      ? \"An unhandled runtime disruption interrupted the telemetry pipeline. Critical memory states were safely captured for telemetry diagnostics.\"\n      : \"Critical process halted due to an unhandled kernel exception. Memory buffers preserved for telemetry diagnostics.\");\n\n  const sampleDetails =\n    errorDetails ||\n    `[KernelRuntimeException]: Minified React error #301\n  at renderWithHooksAgain (react-dom.production.min.js:4133:61)\n  at updateFunctionComponent (react-dom.production.min.js:5523:21)\n  at performUnitOfWork (react-dom.production.min.js:6892:12)\n  thread_context: 0x8849bf | origin: avara.ui/runtime\n  incident_digest: \"${errorId}\"`;\n\n  const copyIncidentId = () => {\n    if (typeof navigator !== \"undefined\") {\n      navigator.clipboard.writeText(`${errorId}\\n${sampleDetails}`);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    }\n  };\n\n  const handleRetry = () => {\n    setRetrying(true);\n    if (onRetry) {\n      onRetry();\n    }\n    setTimeout(() => setRetrying(false), 1200);\n  };\n\n  const defaultServices: ServiceStatusItem[] = [\n    { name: \"API Gateway\", status: \"operational\", latency: \"24ms\" },\n    { name: \"Worker Pool\", status: \"degraded\", latency: \"820ms\" },\n    { name: \"Database Shard\", status: \"outage\", latency: \"TIMEOUT\" },\n  ];\n  const resolvedServices = services || defaultServices;\n\n  // -------------------------------------------------------------------------\n  // VARIANT: Prismatic Aurora Glass (\"prismatic-glass\" / \"aurora-prism\")\n  // -------------------------------------------------------------------------\n  if (isPrismatic) {\n    const defaultPrismServices = [\n      { name: \"Edge Mesh\", status: \"operational\" as const, latency: \"12ms\" },\n      { name: \"Auth Cluster\", status: \"degraded\" as const, latency: \"420ms\" },\n      { name: \"State Store\", status: \"outage\" as const, latency: \"TIMEOUT\" },\n    ];\n    const resolvedPrismServices = services || defaultPrismServices;\n\n    return (\n      <section\n        className={cn(\n          \"relative w-full py-12 sm:py-20 md:py-24 px-4 sm:px-6 lg:px-8 bg-background text-foreground overflow-hidden flex flex-col items-center justify-center min-h-[660px] transition-colors duration-300 font-sans select-none\",\n          className\n        )}\n        {...props}\n      >\n        <style>{PRISMATIC_STYLES}</style>\n\n        {/* Ambient multi-color liquid aurora mesh backdrop */}\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[700px] max-w-full h-[440px] bg-gradient-to-tr from-rose-500/15 via-red-500/10 to-violet-500/15 blur-[140px] rounded-full prism-anim-glow\"\n          style={{ animation: \"prism-aurora-glow 6s ease-in-out infinite\" }}\n        />\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-0 opacity-[0.03] dark:opacity-[0.045] bg-[radial-gradient(#ef4444_1px,transparent_1px)] [background-size:28px_28px] [mask-image:radial-gradient(ellipse_at_center,black_45%,transparent_75%)]\"\n        />\n\n        <div className=\"relative z-10 w-full max-w-2xl mx-auto flex flex-col items-center text-center space-y-6 sm:space-y-8\">\n          {/* Header Iridescent Pill Badge */}\n          <div className=\"inline-flex items-center gap-2 px-3.5 py-1 rounded-full border border-rose-500/30 bg-rose-500/10 dark:bg-rose-950/40 text-rose-600 dark:text-rose-400 text-xs font-mono tracking-wider font-semibold shadow-xs backdrop-blur-md\">\n            <span className=\"relative flex h-2 w-2\">\n              <span className=\"animate-ping absolute inline-flex h-full w-full rounded-full bg-rose-400 opacity-75\" />\n              <span className=\"relative inline-flex rounded-full h-2 w-2 bg-rose-500\" />\n            </span>\n            <Sparkles className=\"w-3.5 h-3.5 text-rose-500 animate-pulse\" />\n            <span>PRISMATIC RUNTIME INTERRUPT // 0x500</span>\n          </div>\n\n          {/* Central Prismatic Glass Shard Centerpiece */}\n          <div className=\"relative flex items-center justify-center w-52 h-52 sm:w-60 sm:h-60 my-2 select-none\">\n            {/* Spinning Rainbow Refraction Halo Ring */}\n            <div\n              className=\"absolute inset-4 rounded-full opacity-60 dark:opacity-80 blur-xl prism-anim-spin pointer-events-none\"\n              style={{\n                background:\n                  \"conic-gradient(from 0deg, #ef4444, #f43f5e, #a855f7, #3b82f6, #06b6d4, #ef4444)\",\n                animation: \"prism-spin 16s linear infinite\",\n              }}\n            />\n\n            {/* Orbiting Glass Satellite Bead */}\n            <div\n              className=\"absolute inset-0 rounded-full pointer-events-none prism-anim-orbit\"\n              style={{ animation: \"prism-orbit 8s linear infinite\" }}\n            >\n              <div className=\"w-3 h-3 rounded-full bg-rose-500 shadow-[0_0_12px_#f43f5e]\" />\n            </div>\n\n            {/* Levitating Diamond Glass Gem */}\n            <div\n              className=\"relative z-10 w-28 h-28 sm:w-32 sm:h-32 rounded-2xl bg-card/60 dark:bg-card/40 backdrop-blur-2xl border border-white/40 dark:border-white/10 shadow-[0_12px_40px_rgba(244,63,94,0.22)] dark:shadow-[0_12px_45px_rgba(239,68,68,0.3)] flex items-center justify-center prism-anim-float\"\n              style={{ animation: \"prism-float 5s ease-in-out infinite\" }}\n            >\n              {/* Upright Center Icon Counter-Rotated (-45deg) */}\n              <div className=\"-rotate-45 relative flex items-center justify-center\">\n                <ShieldAlert className=\"w-12 h-12 text-rose-500 dark:text-rose-400 drop-shadow-[0_0_15px_rgba(244,63,94,0.6)]\" />\n                <span className=\"absolute -top-1 -right-1 flex h-3 w-3\">\n                  <span className=\"animate-ping absolute inline-flex h-full w-full rounded-full bg-rose-400 opacity-75\" />\n                  <span className=\"relative inline-flex rounded-full h-3 w-3 bg-rose-500\" />\n                </span>\n              </div>\n            </div>\n          </div>\n\n          {/* Typography: Stylized High-Fashion Gradient Code & Titles */}\n          <div className=\"space-y-2 max-w-lg\">\n            <div className=\"font-mono font-black text-4xl sm:text-5xl md:text-6xl tracking-tight bg-gradient-to-r from-red-500 via-rose-500 to-amber-500 bg-clip-text text-transparent drop-shadow-xs\">\n              {errorCode}\n            </div>\n            <h2 className=\"text-2xl sm:text-3xl font-extrabold tracking-tight text-foreground uppercase font-sans\">\n              {resolvedTitle}\n            </h2>\n            <p className=\"text-xs sm:text-sm md:text-base text-muted-foreground leading-relaxed\">\n              {resolvedDescription}\n            </p>\n          </div>\n\n          {/* Live Micro-Mesh Service Pills */}\n          <div className=\"grid grid-cols-1 sm:grid-cols-3 gap-2.5 w-full max-w-lg mx-auto\">\n            {resolvedPrismServices.map((svc, i) => {\n              const isOk = svc.status === \"operational\";\n              const isDegraded = svc.status === \"degraded\";\n              return (\n                <div\n                  key={i}\n                  className=\"flex items-center justify-between px-3.5 py-2.5 rounded-xl border border-border/80 bg-card/65 backdrop-blur-xl transition-all hover:scale-[1.02] shadow-xs\"\n                >\n                  <div className=\"flex items-center gap-2 min-w-0\">\n                    <span\n                      className={cn(\n                        \"w-2 h-2 rounded-full shrink-0\",\n                        isOk && \"bg-emerald-500 shadow-[0_0_8px_#10b981]\",\n                        isDegraded && \"bg-amber-500 animate-pulse shadow-[0_0_8px_#f59e0b]\",\n                        !isOk && !isDegraded && \"bg-rose-500 animate-ping shadow-[0_0_8px_#f43f5e]\"\n                      )}\n                    />\n                    <span className=\"text-[12px] font-medium text-foreground truncate\">\n                      {svc.name}\n                    </span>\n                  </div>\n                  <span\n                    className={cn(\n                      \"text-[10px] font-mono uppercase font-semibold shrink-0 ml-2 px-1.5 py-0.5 rounded\",\n                      isOk && \"text-emerald-600 dark:text-emerald-400 bg-emerald-500/10\",\n                      isDegraded && \"text-amber-600 dark:text-amber-400 bg-amber-500/10\",\n                      !isOk && !isDegraded && \"text-rose-600 dark:text-rose-400 bg-rose-500/10\"\n                    )}\n                  >\n                    {svc.latency ?? svc.status}\n                  </span>\n                </div>\n              );\n            })}\n          </div>\n\n          {/* Frosted Glass Diagnostic Drawer with Copy Trace Button */}\n          <div className=\"w-full max-w-lg mx-auto rounded-xl border border-border/80 bg-card/70 backdrop-blur-xl overflow-hidden transition-all shadow-xs text-left\">\n            <div className=\"flex items-center justify-between px-3.5 py-2.5 border-b border-border/60 bg-muted/40 text-xs\">\n              <button\n                type=\"button\"\n                onClick={() => setDetailsOpen(!detailsOpen)}\n                className=\"flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors cursor-pointer select-none font-mono\"\n              >\n                <Terminal className=\"w-3.5 h-3.5 text-rose-500 shrink-0\" />\n                <span className=\"truncate\">\n                  Prism Trace: <strong className=\"text-foreground\">{errorId}</strong>\n                </span>\n                {detailsOpen ? (\n                  <ChevronUp className=\"w-3.5 h-3.5 shrink-0\" />\n                ) : (\n                  <ChevronDown className=\"w-3.5 h-3.5 shrink-0\" />\n                )}\n              </button>\n\n              <button\n                type=\"button\"\n                onClick={copyIncidentId}\n                className=\"inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[11px] font-mono bg-background hover:bg-muted border border-border transition-colors cursor-pointer shrink-0 ml-2\"\n              >\n                {copied ? (\n                  <>\n                    <Check className=\"w-3 h-3 text-emerald-500\" />\n                    <span className=\"text-emerald-600 dark:text-emerald-400 font-medium\">Copied</span>\n                  </>\n                ) : (\n                  <>\n                    <Copy className=\"w-3 h-3 text-muted-foreground\" />\n                    <span>Copy Hash</span>\n                  </>\n                )}\n              </button>\n            </div>\n\n            {detailsOpen && (\n              <div className=\"p-2.5 sm:p-3\">\n                <div className=\"p-3 sm:p-3.5 rounded-lg border border-neutral-200/90 dark:border-neutral-800 bg-neutral-100/70 dark:bg-neutral-950/80 text-rose-600 dark:text-rose-400 text-[11px] font-mono overflow-x-auto max-h-44 overflow-y-auto leading-relaxed whitespace-pre-wrap select-all shadow-xs selection:bg-rose-500/20\">\n                  {sampleDetails}\n                </div>\n              </div>\n            )}\n          </div>\n\n          {/* Interactive Floating Action Pills Hub */}\n          <div className=\"flex flex-col sm:flex-row items-center justify-center gap-3 w-full max-w-md mx-auto pt-2\">\n            <button\n              type=\"button\"\n              onClick={handleRetry}\n              disabled={retrying}\n              className=\"inline-flex items-center justify-center gap-2 w-full sm:w-auto px-6 py-2.5 rounded-xl font-medium text-xs sm:text-sm bg-gradient-to-r from-red-600 via-rose-600 to-rose-500 hover:opacity-95 text-white shadow-lg shadow-rose-500/25 transition-all active:scale-95 cursor-pointer disabled:opacity-50\"\n            >\n              <RefreshCw className={cn(\"w-4 h-4\", retrying && \"animate-spin\")} />\n              {retrying ? \"Re-crystallizing State...\" : \"Re-crystallize State\"}\n            </button>\n            <button\n              type=\"button\"\n              onClick={onHome}\n              className=\"inline-flex items-center justify-center gap-2 w-full sm:w-auto px-5 py-2.5 rounded-xl font-medium text-xs sm:text-sm bg-secondary hover:bg-secondary/80 text-secondary-foreground border border-border transition-all active:scale-95 cursor-pointer\"\n            >\n              <Home className=\"w-4 h-4\" />\n              Return to Safety\n            </button>\n          </div>\n\n          {onSupport && (\n            <button\n              type=\"button\"\n              onClick={onSupport}\n              className=\"text-xs text-muted-foreground hover:text-rose-500 dark:hover:text-rose-400 inline-flex items-center gap-1.5 transition-colors cursor-pointer mt-1\"\n            >\n              <LifeBuoy className=\"w-3.5 h-3.5\" /> Consult Core Architecture Team &rarr;\n            </button>\n          )}\n        </div>\n      </section>\n    );\n  }\n\n  // -------------------------------------------------------------------------\n  // VARIANT: Quantum Glitch Bento HUD (\"quantum-glitch\" / \"quantum-hud\")\n  // -------------------------------------------------------------------------\n  if (isGlitch) {\n    return (\n      <section\n        className={cn(\n          \"relative w-full py-12 sm:py-20 md:py-24 px-4 sm:px-6 lg:px-8 bg-background text-foreground overflow-hidden flex flex-col items-center justify-center min-h-[660px] transition-colors duration-300 font-sans select-none\",\n          className\n        )}\n        {...props}\n      >\n        <style>{GLITCH_STYLES}</style>\n\n        {/* Ambient perspective wireframe & multi-layer glowing spotlights */}\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-0 opacity-[0.035] dark:opacity-[0.05] bg-[linear-gradient(to_right,#ef4444_1px,transparent_1px),linear-gradient(to_bottom,#ef4444_1px,transparent_1px)] bg-[size:32px_32px] [mask-image:radial-gradient(ellipse_at_center,black_40%,transparent_75%)]\"\n        />\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute top-1/2 left-1/4 -translate-x-1/2 -translate-y-1/2 w-[680px] max-w-full h-[400px] bg-red-500/12 dark:bg-red-600/15 blur-[140px] rounded-full\"\n        />\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute top-1/2 right-1/4 translate-x-1/2 -translate-y-1/2 w-[520px] max-w-full h-[360px] bg-cyan-500/8 dark:bg-cyan-500/10 blur-[130px] rounded-full\"\n        />\n\n        {/* Main 2-Column Bento Container */}\n        <div className=\"relative z-10 w-full max-w-5xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-6 sm:gap-8 items-start\">\n          {/* Left Column: Hero Status, Chromatic Glitch Code, Copy & Actions */}\n          <div className=\"lg:col-span-5 flex flex-col items-center lg:items-start text-center lg:text-left space-y-5 sm:space-y-6\">\n            {/* Telemetry Status Pill */}\n            <div className=\"inline-flex items-center gap-2 px-3 py-1 rounded-full border border-red-500/30 bg-red-500/10 dark:bg-red-950/40 text-red-600 dark:text-red-400 text-xs font-mono tracking-wider font-semibold shadow-xs\">\n              <span className=\"relative flex h-2 w-2\">\n                <span className=\"animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75\" />\n                <span className=\"relative inline-flex rounded-full h-2 w-2 bg-red-500\" />\n              </span>\n              <ShieldAlert className=\"w-3.5 h-3.5 text-red-500\" />\n              <span>SUBSYSTEM PANIC // HALT_0xFA</span>\n            </div>\n\n            {/* Giant Chromatic Aberration Glitch Typography */}\n            <div className=\"relative inline-block select-none my-1\">\n              <span className=\"font-mono font-black text-6xl sm:text-7xl md:text-8xl tracking-tight text-foreground drop-shadow-xs\">\n                {errorCode}\n              </span>\n              <span\n                aria-hidden=\"true\"\n                className=\"absolute inset-0 font-mono font-black text-6xl sm:text-7xl md:text-8xl tracking-tight text-red-500 opacity-75 pointer-events-none glitch-layer-1\"\n                style={{\n                  animation: \"glitch-anim-1 3s infinite linear alternate-reverse\",\n                }}\n              >\n                {errorCode}\n              </span>\n              <span\n                aria-hidden=\"true\"\n                className=\"absolute inset-0 font-mono font-black text-6xl sm:text-7xl md:text-8xl tracking-tight text-cyan-500 opacity-65 pointer-events-none glitch-layer-2\"\n                style={{\n                  animation: \"glitch-anim-2 2.4s infinite linear alternate-reverse\",\n                }}\n              >\n                {errorCode}\n              </span>\n            </div>\n\n            {/* Heading & Explanatory Copy */}\n            <div className=\"space-y-2.5 max-w-md\">\n              <h2 className=\"text-2xl sm:text-3xl font-extrabold tracking-tight text-foreground uppercase font-sans\">\n                {resolvedTitle}\n              </h2>\n              <p className=\"text-xs sm:text-sm text-muted-foreground leading-relaxed\">\n                {resolvedDescription}\n              </p>\n            </div>\n\n            {/* System Metadata Tags */}\n            <div className=\"flex flex-wrap items-center justify-center lg:justify-start gap-2 text-[10px] font-mono\">\n              <span className=\"px-2.5 py-1 rounded-md bg-muted/70 text-muted-foreground border border-border/70\">\n                REGION: US-EAST-1\n              </span>\n              <span className=\"px-2.5 py-1 rounded-md bg-muted/70 text-muted-foreground border border-border/70\">\n                KERNEL: V8_ISOLATE\n              </span>\n              <span className=\"px-2.5 py-1 rounded-md bg-red-500/10 text-red-600 dark:text-red-400 border border-red-500/25 font-bold\">\n                SEV: 0 (CRITICAL)\n              </span>\n            </div>\n\n            {/* Primary & Secondary Action Hub */}\n            <div className=\"flex flex-col sm:flex-row items-stretch sm:items-center gap-3 w-full max-w-sm pt-2\">\n              <button\n                type=\"button\"\n                onClick={handleRetry}\n                disabled={retrying}\n                className=\"inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-xl font-medium text-xs sm:text-sm bg-red-600 hover:bg-red-500 text-white shadow-lg shadow-red-500/25 transition-all active:scale-95 cursor-pointer disabled:opacity-50\"\n              >\n                <RefreshCw className={cn(\"w-4 h-4\", retrying && \"animate-spin\")} />\n                {retrying ? \"Executing Cold Boot...\" : \"Initiate Cold Restart\"}\n              </button>\n              <button\n                type=\"button\"\n                onClick={onHome}\n                className=\"inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl font-medium text-xs sm:text-sm bg-secondary hover:bg-secondary/80 text-secondary-foreground border border-border transition-all active:scale-95 cursor-pointer\"\n              >\n                <Home className=\"w-4 h-4\" />\n                Return to Safety\n              </button>\n            </div>\n\n            {onSupport && (\n              <button\n                type=\"button\"\n                onClick={onSupport}\n                className=\"text-xs text-muted-foreground hover:text-red-500 dark:hover:text-red-400 inline-flex items-center gap-1.5 transition-colors cursor-pointer pt-1\"\n              >\n                <LifeBuoy className=\"w-3.5 h-3.5\" /> Emergency DevOps Hotline &rarr;\n              </button>\n            )}\n          </div>\n\n          {/* Right Column: Live Vitals & Memory Hex Dump Bento */}\n          <div className=\"lg:col-span-7 flex flex-col space-y-4 w-full\">\n            {/* Card 1: System Vitals Telemetry */}\n            <div className=\"p-4 sm:p-5 rounded-2xl border border-border/80 bg-card/75 backdrop-blur-xl shadow-xs space-y-3.5 text-left\">\n              <div className=\"flex items-center justify-between text-xs font-mono pb-2 border-b border-border/60\">\n                <span className=\"flex items-center gap-2 font-bold uppercase text-foreground\">\n                  <Gauge className=\"w-4 h-4 text-red-500 shrink-0\" />\n                  Telemetry Vitals at Crash\n                </span>\n                <span className=\"text-[10px] px-2 py-0.5 rounded bg-red-500/10 text-red-600 dark:text-red-400 font-semibold border border-red-500/20\">\n                  CRITICAL SPIKE\n                </span>\n              </div>\n\n              {/* Progress 1: Heap Allocation */}\n              <div className=\"space-y-1.5 text-xs font-mono\">\n                <div className=\"flex justify-between text-[11px]\">\n                  <span className=\"text-muted-foreground\">Heap Allocation</span>\n                  <span className=\"text-red-600 dark:text-red-400 font-bold\">\n                    105% (8.40 GB / 8.00 GB)\n                  </span>\n                </div>\n                <div className=\"w-full h-2 rounded-full bg-muted overflow-hidden\">\n                  <div\n                    className=\"h-full bg-gradient-to-r from-amber-500 via-red-500 to-red-600 rounded-full vitals-striped-bar\"\n                    style={{\n                      width: \"100%\",\n                      backgroundImage:\n                        \"linear-gradient(45deg, rgba(255,255,255,0.2) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, transparent 75%, transparent)\",\n                      backgroundSize: \"16px 16px\",\n                      animation: \"vitals-stripes 1.2s linear infinite\",\n                    }}\n                  />\n                </div>\n              </div>\n\n              {/* Progress 2: Active Threads */}\n              <div className=\"space-y-1.5 text-xs font-mono\">\n                <div className=\"flex justify-between text-[11px]\">\n                  <span className=\"text-muted-foreground\">Active Coroutines</span>\n                  <span className=\"text-amber-600 dark:text-amber-400 font-semibold\">\n                    4,096 (THREAD_LOCK)\n                  </span>\n                </div>\n                <div className=\"w-full h-2 rounded-full bg-muted overflow-hidden\">\n                  <div className=\"h-full bg-amber-500 rounded-full\" style={{ width: \"88%\" }} />\n                </div>\n              </div>\n\n              {/* Progress 3: IO Throughput */}\n              <div className=\"space-y-1.5 text-xs font-mono\">\n                <div className=\"flex justify-between text-[11px]\">\n                  <span className=\"text-muted-foreground\">Ingress Network IO</span>\n                  <span className=\"text-red-600 dark:text-red-400 font-semibold\">\n                    0 KB/s (HALTED)\n                  </span>\n                </div>\n                <div className=\"w-full h-2 rounded-full bg-muted overflow-hidden\">\n                  <div className=\"h-full bg-red-500 rounded-full\" style={{ width: \"8%\" }} />\n                </div>\n              </div>\n            </div>\n\n            {/* Card 2: Interactive Memory Hex Fault Dump */}\n            <div className=\"p-4 sm:p-5 rounded-2xl border border-border/80 bg-card/75 backdrop-blur-xl shadow-xs space-y-3 text-left\">\n              <div className=\"flex items-center justify-between text-xs font-mono pb-2 border-b border-border/60\">\n                <span className=\"flex items-center gap-2 font-bold uppercase text-foreground\">\n                  <Binary className=\"w-4 h-4 text-primary shrink-0\" />\n                  Memory Segment Fault Dump\n                </span>\n                <span className=\"text-[10px] text-muted-foreground font-mono\">\n                  BASE: 0x004F_DEAD\n                </span>\n              </div>\n\n              <div className=\"p-3 rounded-lg border border-neutral-200/90 dark:border-neutral-800 bg-neutral-100/70 dark:bg-neutral-950/80 font-mono text-[10px] sm:text-[11px] leading-relaxed text-muted-foreground select-all overflow-x-auto space-y-1\">\n                <div className=\"flex items-center justify-between gap-2\">\n                  <span>0x0040: 7F 45 4C 46 02 01 01 00</span>\n                  <span className=\"text-muted-foreground/60 hidden sm:inline\">.ELF....</span>\n                </div>\n                <div className=\"flex items-center justify-between gap-2\">\n                  <span>0x0050: 00 00 00 00 00 00 00 00</span>\n                  <span className=\"text-muted-foreground/60 hidden sm:inline\">........</span>\n                </div>\n                <div className=\"flex items-center justify-between gap-2 text-red-600 dark:text-red-400 font-bold bg-red-500/10 px-1.5 py-0.5 rounded\">\n                  <span>0x0060: FF 1B C4 DE 00 00 00 00</span>\n                  <span className=\"text-red-500\">!PANIC!</span>\n                </div>\n                <div className=\"flex items-center justify-between gap-2\">\n                  <span>0x0070: 08 00 00 00 00 00 00 00</span>\n                  <span className=\"text-muted-foreground/60 hidden sm:inline\">........</span>\n                </div>\n              </div>\n            </div>\n\n            {/* Card 3: Expandable Diagnostic Drawer with Copy Trace Button */}\n            <div className=\"rounded-2xl border border-border/80 bg-card/75 backdrop-blur-xl shadow-xs overflow-hidden text-left\">\n              <div className=\"flex items-center justify-between px-4 py-2.5 border-b border-border/60 bg-muted/30 text-xs\">\n                <button\n                  type=\"button\"\n                  onClick={() => setDetailsOpen(!detailsOpen)}\n                  className=\"flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors cursor-pointer font-mono\"\n                >\n                  <Terminal className=\"w-3.5 h-3.5 text-red-500 shrink-0\" />\n                  <span>\n                    Incident: <strong className=\"text-foreground\">{errorId}</strong>\n                  </span>\n                  {detailsOpen ? (\n                    <ChevronUp className=\"w-3.5 h-3.5 shrink-0\" />\n                  ) : (\n                    <ChevronDown className=\"w-3.5 h-3.5 shrink-0\" />\n                  )}\n                </button>\n\n                <button\n                  type=\"button\"\n                  onClick={copyIncidentId}\n                  className=\"inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[11px] font-mono bg-background hover:bg-muted border border-border transition-colors cursor-pointer text-muted-foreground hover:text-foreground shrink-0 ml-2\"\n                >\n                  {copied ? (\n                    <>\n                      <Check className=\"w-3 h-3 text-emerald-500\" />\n                      <span className=\"text-emerald-600 dark:text-emerald-400\">Copied</span>\n                    </>\n                  ) : (\n                    <>\n                      <Copy className=\"w-3 h-3\" />\n                      <span>Copy Hash</span>\n                    </>\n                  )}\n                </button>\n              </div>\n\n              {detailsOpen && (\n                <div className=\"p-2.5 sm:p-3\">\n                  <div className=\"p-3 sm:p-3.5 rounded-lg border border-neutral-200/90 dark:border-neutral-800 bg-neutral-100/70 dark:bg-neutral-950/80 text-red-600 dark:text-red-400 text-[11px] font-mono overflow-x-auto max-h-44 overflow-y-auto leading-relaxed whitespace-pre-wrap select-all shadow-xs selection:bg-red-500/20\">\n                    {sampleDetails}\n                  </div>\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n      </section>\n    );\n  }\n\n  // -------------------------------------------------------------------------\n  // VARIANT: Service Pipeline Topology (\"service-pipeline\" / \"pipeline\")\n  // -------------------------------------------------------------------------\n  if (isPipeline) {\n    const pipelineSteps = [\n      {\n        id: \"client\",\n        name: \"Client Device\",\n        subtext: \"Browser Handshake\",\n        status: \"passed\" as const,\n        icon: Laptop,\n        metric: \"HTTP 200 OK\",\n        time: \"14ms\",\n      },\n      {\n        id: \"edge\",\n        name: \"Edge CDN\",\n        subtext: \"Anycast Route\",\n        status: \"passed\" as const,\n        icon: Globe,\n        metric: \"TLS 1.3 Valid\",\n        time: \"32ms\",\n      },\n      {\n        id: \"gateway\",\n        name: \"App Gateway\",\n        subtext: \"Origin Service\",\n        status: \"failed\" as const,\n        icon: ServerCrash,\n        metric: `HTTP ${errorCode} Fault`,\n        time: \"TIMEOUT\",\n      },\n      {\n        id: \"data\",\n        name: \"Data Layer\",\n        subtext: \"Primary Cluster\",\n        status: \"blocked\" as const,\n        icon: Database,\n        metric: \"Unreachable\",\n        time: \"--\",\n      },\n    ];\n\n    return (\n      <section\n        className={cn(\n          \"relative w-full py-12 sm:py-20 md:py-24 px-4 sm:px-6 lg:px-8 bg-background text-foreground overflow-hidden flex flex-col items-center justify-center min-h-[660px] transition-colors duration-300 font-sans select-none\",\n          className\n        )}\n        {...props}\n      >\n        <style>{PIPELINE_STYLES}</style>\n\n        {/* Ambient subtle cyber-dot grid background */}\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-0 opacity-[0.035] dark:opacity-[0.05] bg-[radial-gradient(#ef4444_1px,transparent_1px)] [background-size:24px_24px] [mask-image:radial-gradient(ellipse_at_center,black_40%,transparent_75%)]\"\n        />\n\n        {/* Dual animated ambient aura spotlights */}\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute top-1/3 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[760px] max-w-full h-[380px] bg-red-500/12 dark:bg-red-600/15 blur-[130px] rounded-full pipe-anim-halo\"\n          style={{ animation: \"pipe-pulse-halo 5s ease-in-out infinite\" }}\n        />\n\n        {/* Giant Ghost Watermark Error Code */}\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute top-6 sm:top-10 left-1/2 -translate-x-1/2 font-mono font-black text-[120px] sm:text-[180px] md:text-[230px] leading-none tracking-tighter text-foreground opacity-[0.03] dark:opacity-[0.04] select-none\"\n        >\n          {errorCode}\n        </div>\n\n        <div className=\"relative z-10 w-full max-w-3xl mx-auto flex flex-col items-center text-center space-y-6 sm:space-y-8\">\n          {/* Header Status Badge */}\n          <div className=\"inline-flex items-center gap-2 px-3 py-1 rounded-full border border-red-500/30 bg-red-500/10 dark:bg-red-950/40 text-red-600 dark:text-red-400 text-xs font-mono tracking-wider font-semibold shadow-xs\">\n            <span className=\"relative flex h-2 w-2\">\n              <span className=\"animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75\" />\n              <span className=\"relative inline-flex rounded-full h-2 w-2 bg-red-500\" />\n            </span>\n            <Activity className=\"w-3.5 h-3.5 text-red-500 animate-pulse\" />\n            <span>DOWNSTREAM TIMEOUT • NODE 03 BREACH</span>\n          </div>\n\n          {/* Heading & Explanatory Copy */}\n          <div className=\"space-y-2 max-w-xl text-center\">\n            <h2 className=\"text-2xl sm:text-3xl md:text-4xl font-extrabold tracking-tight text-foreground uppercase font-sans\">\n              {resolvedTitle}\n            </h2>\n            <p className=\"text-xs sm:text-sm md:text-base text-muted-foreground leading-relaxed\">\n              {resolvedDescription}\n            </p>\n          </div>\n\n          {/* Interactive Topology Pipeline Stage Card */}\n          <div className=\"w-full rounded-2xl border border-border/80 bg-card/75 backdrop-blur-xl p-4 sm:p-7 shadow-xs relative overflow-hidden transition-all text-left\">\n            {/* Pipeline Header Bar */}\n            <div className=\"flex items-center justify-between pb-4 sm:pb-6 border-b border-border/60 text-xs font-mono\">\n              <div className=\"flex items-center gap-2 text-muted-foreground\">\n                <Layers className=\"w-4 h-4 text-primary shrink-0\" />\n                <span className=\"font-semibold text-foreground tracking-wide uppercase\">\n                  Service Execution Topology\n                </span>\n              </div>\n              <div className=\"flex items-center gap-1.5 px-2.5 py-0.5 rounded-full bg-red-500/10 text-red-600 dark:text-red-400 font-semibold border border-red-500/20 text-[11px]\">\n                <span className=\"w-1.5 h-1.5 rounded-full bg-red-500 animate-ping\" />\n                FAILURE DETECTED\n              </div>\n            </div>\n\n            {/* Nodes Row with Connected Signal Beams */}\n            <div className=\"py-6 sm:py-8 relative\">\n              {/* Desktop Connecting Flow Track Behind Nodes */}\n              <div\n                aria-hidden=\"true\"\n                className=\"hidden sm:block absolute top-[52px] left-12 right-12 h-1 pointer-events-none select-none z-0\"\n              >\n                {/* SVG Animated Beams */}\n                <svg className=\"w-full h-4 overflow-visible\" preserveAspectRatio=\"none\">\n                  <defs>\n                    <linearGradient id=\"pipe-fail-grad\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n                      <stop offset=\"0%\" stopColor=\"#10b981\" />\n                      <stop offset=\"100%\" stopColor=\"#ef4444\" />\n                    </linearGradient>\n                  </defs>\n                  {/* Segment 1: Client -> Edge (Healthy Green) */}\n                  <line\n                    x1=\"6%\"\n                    y1=\"2\"\n                    x2=\"38%\"\n                    y2=\"2\"\n                    stroke=\"#10b981\"\n                    strokeWidth=\"2.5\"\n                    strokeDasharray=\"6 6\"\n                    className=\"pipe-anim-beam\"\n                    style={{ animation: \"pipe-beam-flow 1.5s linear infinite\" }}\n                  />\n                  {/* Segment 2: Edge -> Gateway (Degrading to Red) */}\n                  <line\n                    x1=\"38%\"\n                    y1=\"2\"\n                    x2=\"68%\"\n                    y2=\"2\"\n                    stroke=\"url(#pipe-fail-grad)\"\n                    strokeWidth=\"2.5\"\n                    strokeDasharray=\"6 6\"\n                    className=\"pipe-anim-beam\"\n                    style={{ animation: \"pipe-beam-flow 1.2s linear infinite\" }}\n                  />\n                  {/* Segment 3: Gateway -> Data (Broken Gray) */}\n                  <line\n                    x1=\"68%\"\n                    y1=\"2\"\n                    x2=\"94%\"\n                    y2=\"2\"\n                    stroke=\"currentColor\"\n                    className=\"text-border/80\"\n                    strokeWidth=\"2\"\n                    strokeDasharray=\"4 4\"\n                  />\n                </svg>\n              </div>\n\n              {/* Responsive Nodes Grid */}\n              <div className=\"grid grid-cols-1 sm:grid-cols-4 gap-4 sm:gap-2 relative z-10\">\n                {pipelineSteps.map((step) => {\n                  const Icon = step.icon;\n                  const isPassed = step.status === \"passed\";\n                  const isFailed = step.status === \"failed\";\n                  const isBlocked = step.status === \"blocked\";\n\n                  return (\n                    <div\n                      key={step.id}\n                      className={cn(\n                        \"relative flex flex-col items-center text-center p-3 sm:p-2.5 rounded-xl transition-all duration-200 border\",\n                        isPassed &&\n                          \"border-emerald-500/25 bg-emerald-500/[0.03] dark:bg-emerald-950/20\",\n                        isFailed &&\n                          \"border-red-500/50 bg-red-500/[0.08] dark:bg-red-950/40 shadow-[0_0_25px_rgba(239,68,68,0.25)]\",\n                        isBlocked && \"border-border/60 bg-muted/20 opacity-60\"\n                      )}\n                    >\n                      {/* Node Icon Capsule */}\n                      <div className=\"relative mb-2.5\">\n                        {/* Ping Ripple on Failed Node */}\n                        {isFailed && (\n                          <div\n                            aria-hidden=\"true\"\n                            className=\"absolute -inset-2 rounded-full border-2 border-red-500/60 pipe-anim-ping pointer-events-none\"\n                            style={{\n                              animation: \"pipe-ping-alert 2.2s cubic-bezier(0,0,0.2,1) infinite\",\n                            }}\n                          />\n                        )}\n\n                        <div\n                          className={cn(\n                            \"w-12 h-12 rounded-full flex items-center justify-center transition-all shadow-xs border\",\n                            isPassed &&\n                              \"bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/40 shadow-[0_0_15px_rgba(16,185,129,0.2)]\",\n                            isFailed &&\n                              \"bg-red-500 text-white border-red-600 shadow-[0_0_20px_rgba(239,68,68,0.5)] animate-pulse\",\n                            isBlocked &&\n                              \"bg-muted text-muted-foreground border-border/80\"\n                          )}\n                        >\n                          <Icon className=\"w-5 h-5\" />\n                        </div>\n\n                        {/* Status Mini Indicator Bead */}\n                        <div className=\"absolute -bottom-1 -right-1\">\n                          {isPassed && (\n                            <CheckCircle2 className=\"w-4 h-4 text-emerald-600 dark:text-emerald-400 fill-background\" />\n                          )}\n                          {isFailed && (\n                            <XCircle className=\"w-4 h-4 text-red-600 dark:text-red-400 fill-background\" />\n                          )}\n                          {isBlocked && (\n                            <div className=\"w-3.5 h-3.5 rounded-full bg-muted-foreground/40 border-2 border-background\" />\n                          )}\n                        </div>\n                      </div>\n\n                      {/* Label & Details */}\n                      <span className=\"text-xs font-semibold text-foreground tracking-tight\">\n                        {step.name}\n                      </span>\n                      <span className=\"text-[11px] text-muted-foreground mt-0.5 truncate\">\n                        {step.subtext}\n                      </span>\n\n                      {/* Status Metric Pill */}\n                      <div\n                        className={cn(\n                          \"mt-2 px-2 py-0.5 rounded text-[10px] font-mono font-bold uppercase\",\n                          isPassed &&\n                            \"text-emerald-600 dark:text-emerald-400 bg-emerald-500/10 border border-emerald-500/20\",\n                          isFailed &&\n                            \"text-white bg-red-600 shadow-[0_0_10px_rgba(239,68,68,0.4)]\",\n                          isBlocked &&\n                            \"text-muted-foreground bg-muted/60 border border-border/50\"\n                        )}\n                      >\n                        {step.metric}\n                      </div>\n\n                      {/* Time */}\n                      <span className=\"text-[9px] font-mono text-muted-foreground/75 mt-1\">\n                        latency: {step.time}\n                      </span>\n                    </div>\n                  );\n                })}\n              </div>\n            </div>\n\n            {/* Heartbeat & Incident Digest Strip */}\n            <div className=\"pt-4 border-t border-border/60 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs font-mono\">\n              {/* Animated Flatline Waveform */}\n              <div className=\"flex items-center gap-2 text-muted-foreground\">\n                <span className=\"text-[11px] uppercase tracking-wider font-semibold text-red-600 dark:text-red-400 flex items-center gap-1.5\">\n                  <span className=\"w-1.5 h-1.5 rounded-full bg-red-500 animate-pulse\" />\n                  HEARTBEAT:\n                </span>\n                <svg\n                  viewBox=\"0 0 140 24\"\n                  className=\"w-28 h-5 text-red-500 stroke-current fill-none stroke-[2] pipe-anim-heartbeat\"\n                  style={{ animation: \"pipe-heartbeat-glow 2s ease-in-out infinite\" }}\n                >\n                  <path d=\"M0,12 L30,12 L36,4 L42,20 L48,12 L56,12 L140,12\" />\n                </svg>\n                <span className=\"text-[10px] text-red-500/80 font-bold uppercase\">\n                  LOST (0 BPS)\n                </span>\n              </div>\n\n              {/* Hash & Copy */}\n              <div className=\"flex items-center gap-2\">\n                <span className=\"text-[11px] text-muted-foreground\">\n                  INCIDENT: <strong className=\"text-foreground\">{errorId}</strong>\n                </span>\n                <button\n                  type=\"button\"\n                  onClick={copyIncidentId}\n                  className=\"inline-flex items-center gap-1 px-2 py-0.5 rounded text-[11px] font-mono bg-background hover:bg-muted border border-border transition-colors cursor-pointer text-muted-foreground hover:text-foreground\"\n                >\n                  {copied ? (\n                    <>\n                      <Check className=\"w-3 h-3 text-emerald-500\" />\n                      <span className=\"text-emerald-600 dark:text-emerald-400\">Copied</span>\n                    </>\n                  ) : (\n                    <>\n                      <Copy className=\"w-3 h-3\" />\n                      <span>Copy</span>\n                    </>\n                  )}\n                </button>\n              </div>\n            </div>\n          </div>\n\n          {/* Diagnostic Inspection & Remediation Drawer with Tabs */}\n          <div className=\"w-full max-w-2xl mx-auto rounded-xl border border-border/80 bg-card/70 backdrop-blur-md overflow-hidden transition-all shadow-xs text-left\">\n            {/* Drawer Tabs Header */}\n            <div className=\"flex items-center justify-between px-3.5 py-2 border-b border-border/60 bg-muted/40 text-xs\">\n              <div className=\"flex items-center gap-1\">\n                <button\n                  type=\"button\"\n                  onClick={() => setPipelineTab(\"trace\")}\n                  className={cn(\n                    \"px-3 py-1 rounded-md text-xs font-mono font-medium transition-all cursor-pointer\",\n                    pipelineTab === \"trace\"\n                      ? \"bg-background text-foreground shadow-xs font-semibold\"\n                      : \"text-muted-foreground hover:text-foreground\"\n                  )}\n                >\n                  <Terminal className=\"w-3 h-3 inline-block mr-1.5 text-red-500\" />\n                  Stack Diagnostic\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => setPipelineTab(\"remediation\")}\n                  className={cn(\n                    \"px-3 py-1 rounded-md text-xs font-mono font-medium transition-all cursor-pointer\",\n                    pipelineTab === \"remediation\"\n                      ? \"bg-background text-foreground shadow-xs font-semibold\"\n                      : \"text-muted-foreground hover:text-foreground\"\n                  )}\n                >\n                  <Sparkles className=\"w-3 h-3 inline-block mr-1.5 text-amber-500\" />\n                  Remediation Steps\n                </button>\n              </div>\n\n              <span className=\"text-[11px] font-mono text-muted-foreground hidden sm:inline\">\n                Triage Channel: #eng-telemetry\n              </span>\n            </div>\n\n            {/* Tab 1: Mode-Adaptive Trace Box */}\n            {pipelineTab === \"trace\" && (\n              <div className=\"p-2.5 sm:p-3\">\n                <div className=\"p-3 sm:p-3.5 rounded-lg border border-neutral-200/90 dark:border-neutral-800 bg-neutral-100/70 dark:bg-neutral-950/80 text-red-600 dark:text-red-400 text-[11px] font-mono overflow-x-auto max-h-44 overflow-y-auto leading-relaxed whitespace-pre-wrap select-all shadow-xs selection:bg-red-500/20\">\n                  {sampleDetails}\n                </div>\n              </div>\n            )}\n\n            {/* Tab 2: Remediation Action Plan */}\n            {pipelineTab === \"remediation\" && (\n              <div className=\"p-3 sm:p-4 space-y-2.5 text-xs text-muted-foreground\">\n                <div className=\"flex items-start gap-2.5 p-2 rounded-lg bg-muted/30 border border-border/50\">\n                  <span className=\"flex-shrink-0 w-5 h-5 rounded-full bg-primary/10 text-primary flex items-center justify-center font-bold text-[10px]\">\n                    1\n                  </span>\n                  <div>\n                    <strong className=\"text-foreground\">Re-run Pipeline Handshake:</strong> Click Attempt\n                    Auto-Recovery below to trigger an automatic retry with exponential backoff.\n                  </div>\n                </div>\n                <div className=\"flex items-start gap-2.5 p-2 rounded-lg bg-muted/30 border border-border/50\">\n                  <span className=\"flex-shrink-0 w-5 h-5 rounded-full bg-primary/10 text-primary flex items-center justify-center font-bold text-[10px]\">\n                    2\n                  </span>\n                  <div>\n                    <strong className=\"text-foreground\">Check Downstream Health:</strong> Verify if\n                    database replicas and worker clusters are responsive under current traffic.\n                  </div>\n                </div>\n                <div className=\"flex items-start gap-2.5 p-2 rounded-lg bg-muted/30 border border-border/50\">\n                  <span className=\"flex-shrink-0 w-5 h-5 rounded-full bg-primary/10 text-primary flex items-center justify-center font-bold text-[10px]\">\n                    3\n                  </span>\n                  <div>\n                    <strong className=\"text-foreground\">Escalate Incident:</strong> Provide Incident ID{\" \"}\n                    <code className=\"text-red-600 dark:text-red-400 font-mono font-bold\">\n                      {errorId}\n                    </code>{\" \"}\n                    to the DevOps on-call team for container restart.\n                  </div>\n                </div>\n              </div>\n            )}\n          </div>\n\n          {/* Action Buttons Hub */}\n          <div className=\"flex flex-col sm:flex-row items-center justify-center gap-3 w-full max-w-md mx-auto pt-2\">\n            <button\n              type=\"button\"\n              onClick={handleRetry}\n              disabled={retrying}\n              className=\"inline-flex items-center justify-center gap-2 w-full sm:w-auto px-6 py-2.5 rounded-xl font-medium text-xs sm:text-sm bg-red-600 hover:bg-red-500 text-white shadow-lg shadow-red-500/25 transition-all active:scale-95 cursor-pointer disabled:opacity-50\"\n            >\n              <RefreshCw className={cn(\"w-4 h-4\", retrying && \"animate-spin\")} />\n              {retrying ? \"Re-executing Pipeline...\" : \"Attempt Auto-Recovery\"}\n            </button>\n            <button\n              type=\"button\"\n              onClick={onHome}\n              className=\"inline-flex items-center justify-center gap-2 w-full sm:w-auto px-5 py-2.5 rounded-xl font-medium text-xs sm:text-sm bg-secondary hover:bg-secondary/80 text-secondary-foreground border border-border transition-all active:scale-95 cursor-pointer\"\n            >\n              <Home className=\"w-4 h-4\" />\n              Return to Safety\n            </button>\n          </div>\n\n          {onSupport && (\n            <button\n              type=\"button\"\n              onClick={onSupport}\n              className=\"text-xs text-muted-foreground hover:text-red-500 dark:hover:text-red-400 inline-flex items-center gap-1.5 transition-colors cursor-pointer mt-1\"\n            >\n              <LifeBuoy className=\"w-3.5 h-3.5\" /> Escalate to Infrastructure Engineering &rarr;\n            </button>\n          )}\n        </div>\n      </section>\n    );\n  }\n\n  // -------------------------------------------------------------------------\n  // VARIANT: Modern Animated Orbital Radar (\"modern-animated\" / \"cosmic-pulse\")\n  // -------------------------------------------------------------------------\n  if (isModern) {\n    return (\n      <section\n        className={cn(\n          \"relative w-full py-12 sm:py-20 md:py-24 px-4 sm:px-6 lg:px-8 bg-background text-foreground overflow-hidden flex flex-col items-center justify-center min-h-[620px] transition-colors duration-300 font-sans select-none\",\n          className\n        )}\n        {...props}\n      >\n        <style>{MODERN_STYLES}</style>\n\n        {/* Ambient background cyber grid & multi-layer glowing spotlights */}\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-0 opacity-[0.035] dark:opacity-[0.05] bg-[radial-gradient(#ef4444_1px,transparent_1px)] [background-size:24px_24px] [mask-image:radial-gradient(ellipse_at_center,black_40%,transparent_75%)]\"\n        />\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[720px] max-w-full h-[400px] bg-red-500/12 dark:bg-red-600/15 blur-[130px] rounded-full\"\n        />\n\n        <div className=\"relative z-10 w-full max-w-2xl mx-auto flex flex-col items-center text-center space-y-6 sm:space-y-8\">\n\n          {/* Center Orbital Animated Radar Core */}\n          <div\n            className=\"relative flex items-center justify-center w-52 h-52 sm:w-60 sm:h-60 err-anim-float my-2 select-none\"\n            style={{ animation: \"err-float 6s ease-in-out infinite\" }}\n          >\n            {/* Ambient glowing radial halo */}\n            <div\n              className=\"absolute inset-0 rounded-full bg-red-500/20 dark:bg-red-600/25 blur-3xl err-anim-halo pointer-events-none\"\n              style={{ animation: \"err-pulse-halo 4s ease-in-out infinite\" }}\n            />\n\n            {/* Outer Dashed Orbit with Satellite bead */}\n            <div\n              className=\"absolute inset-0 rounded-full border border-dashed border-red-500/30 dark:border-red-400/30 err-anim-spin\"\n              style={{ animation: \"err-spin-slow 24s linear infinite\" }}\n            >\n              <div className=\"absolute -top-1.5 left-1/2 -translate-x-1/2 w-3 h-3 rounded-full bg-red-500 shadow-[0_0_12px_#ef4444]\" />\n            </div>\n\n            {/* Middle Orbit with Cardinal crosshairs */}\n            <div\n              className=\"absolute inset-4 rounded-full border border-red-500/20 dark:border-red-500/25 err-anim-spin-reverse\"\n              style={{ animation: \"err-spin-reverse 16s linear infinite\" }}\n            >\n              <span className=\"absolute top-0 left-1/2 -translate-x-1/2 w-1.5 h-1 bg-red-500/60\" />\n              <span className=\"absolute bottom-0 left-1/2 -translate-x-1/2 w-1.5 h-1 bg-red-500/60\" />\n              <span className=\"absolute left-0 top-1/2 -translate-y-1/2 w-1 h-1.5 bg-red-500/60\" />\n              <span className=\"absolute right-0 top-1/2 -translate-y-1/2 w-1 h-1.5 bg-red-500/60\" />\n            </div>\n\n            {/* Conic Radar Scanner Sweep */}\n            <div\n              className=\"absolute inset-6 rounded-full opacity-60 err-anim-sweep pointer-events-none\"\n              style={{\n                background:\n                  \"conic-gradient(from 0deg, transparent 0deg, transparent 270deg, rgba(239,68,68,0.3) 360deg)\",\n                animation: \"err-radar-sweep 4s linear infinite\",\n              }}\n            />\n\n            {/* Pulsing beacon waves */}\n            <div\n              className=\"absolute inset-10 rounded-full border border-red-500/40 err-anim-ping pointer-events-none\"\n              style={{ animation: \"err-beacon-ping 3s cubic-bezier(0, 0, 0.2, 1) infinite\" }}\n            />\n\n            {/* Center Frosted Glass Capsule */}\n            <div className=\"relative z-10 w-24 h-24 sm:w-28 sm:h-28 rounded-full bg-card/80 backdrop-blur-xl border border-red-500/40 shadow-[0_0_35px_rgba(239,68,68,0.25)] dark:shadow-[0_0_50px_rgba(239,68,68,0.35)] flex flex-col items-center justify-center\">\n              <div className=\"relative\">\n                <ShieldAlert className=\"w-10 h-10 sm:w-12 sm:h-12 text-red-500 dark:text-red-400 drop-shadow-[0_0_12px_rgba(239,68,68,0.5)]\" />\n                <span className=\"absolute -top-1 -right-1 flex h-3 w-3\">\n                  <span className=\"animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75\" />\n                  <span className=\"relative inline-flex rounded-full h-3 w-3 bg-red-500\" />\n                </span>\n              </div>\n            </div>\n\n          </div>\n\n          {/* Heading & Explanatory Copy */}\n          <div className=\"space-y-2.5 max-w-lg\">\n            <h2 className=\"text-2xl sm:text-3xl md:text-4xl font-extrabold tracking-tight text-foreground uppercase font-sans\">\n              {resolvedTitle}\n            </h2>\n            <p className=\"text-xs sm:text-sm md:text-base text-muted-foreground leading-relaxed\">\n              {resolvedDescription}\n            </p>\n          </div>\n\n          {/* Micro-Service Live Health Monitors */}\n          <div className=\"grid grid-cols-1 sm:grid-cols-3 gap-2.5 w-full max-w-lg mx-auto\">\n            {resolvedServices.map((svc, i) => {\n              const isOk = svc.status === \"operational\";\n              const isDegraded = svc.status === \"degraded\";\n              return (\n                <div\n                  key={i}\n                  className=\"flex items-center justify-between px-3.5 py-2.5 rounded-xl border border-border/80 bg-card/60 backdrop-blur-md transition-all hover:border-foreground/20 hover:scale-[1.02] shadow-xs\"\n                >\n                  <div className=\"flex items-center gap-2 min-w-0\">\n                    <span\n                      className={cn(\n                        \"w-2 h-2 rounded-full shrink-0\",\n                        isOk && \"bg-emerald-500 shadow-[0_0_8px_#10b981]\",\n                        isDegraded && \"bg-amber-500 animate-pulse shadow-[0_0_8px_#f59e0b]\",\n                        !isOk && !isDegraded && \"bg-red-500 animate-ping shadow-[0_0_8px_#ef4444]\"\n                      )}\n                    />\n                    <span className=\"text-[12px] font-medium text-foreground truncate\">\n                      {svc.name}\n                    </span>\n                  </div>\n                  <span\n                    className={cn(\n                      \"text-[10px] font-mono uppercase font-semibold shrink-0 ml-2 px-1.5 py-0.5 rounded\",\n                      isOk && \"text-emerald-600 dark:text-emerald-400 bg-emerald-500/10\",\n                      isDegraded && \"text-amber-600 dark:text-amber-400 bg-amber-500/10\",\n                      !isOk && !isDegraded && \"text-red-600 dark:text-red-400 bg-red-500/10\"\n                    )}\n                  >\n                    {svc.latency ?? svc.status}\n                  </span>\n                </div>\n              );\n            })}\n          </div>\n\n          {/* Expandable Diagnostic Drawer with Copy Trace Button */}\n          <div className=\"w-full max-w-lg mx-auto rounded-xl border border-border/80 bg-card/70 backdrop-blur-md overflow-hidden transition-all shadow-xs text-left\">\n            <div className=\"flex items-center justify-between px-3.5 py-2.5 border-b border-border/60 bg-muted/40 text-xs\">\n              <button\n                type=\"button\"\n                onClick={() => setDetailsOpen(!detailsOpen)}\n                className=\"flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors cursor-pointer select-none font-mono\"\n              >\n                <Terminal className=\"w-3.5 h-3.5 text-red-500 shrink-0\" />\n                <span className=\"truncate\">\n                  Trace: <strong className=\"text-foreground\">{errorId}</strong>\n                </span>\n                {detailsOpen ? (\n                  <ChevronUp className=\"w-3.5 h-3.5 shrink-0\" />\n                ) : (\n                  <ChevronDown className=\"w-3.5 h-3.5 shrink-0\" />\n                )}\n              </button>\n\n              <button\n                type=\"button\"\n                onClick={copyIncidentId}\n                className=\"inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[11px] font-mono bg-background hover:bg-muted border border-border transition-colors cursor-pointer shrink-0 ml-2\"\n              >\n                {copied ? (\n                  <>\n                    <Check className=\"w-3 h-3 text-emerald-500\" />\n                    <span className=\"text-emerald-600 dark:text-emerald-400 font-medium\">Copied</span>\n                  </>\n                ) : (\n                  <>\n                    <Copy className=\"w-3 h-3 text-muted-foreground\" />\n                    <span>Copy Hash</span>\n                  </>\n                )}\n              </button>\n            </div>\n\n            {detailsOpen && (\n              <div className=\"p-2.5 sm:p-3 pt-2\">\n                <div className=\"p-3 sm:p-3.5 rounded-lg border border-neutral-200/90 dark:border-neutral-800 bg-neutral-100/70 dark:bg-neutral-950/80 text-red-600 dark:text-red-400 text-[11px] font-mono overflow-x-auto max-h-44 overflow-y-auto leading-relaxed whitespace-pre-wrap select-all shadow-xs selection:bg-red-500/20\">\n                  {sampleDetails}\n                </div>\n              </div>\n            )}\n          </div>\n\n          {/* Interactive Actions Hub */}\n          <div className=\"flex flex-col sm:flex-row items-center justify-center gap-3 w-full max-w-md mx-auto pt-2\">\n            <button\n              type=\"button\"\n              onClick={handleRetry}\n              disabled={retrying}\n              className=\"inline-flex items-center justify-center gap-2 w-full sm:w-auto px-6 py-2.5 rounded-xl font-medium text-xs sm:text-sm bg-red-600 hover:bg-red-500 text-white shadow-lg shadow-red-500/25 transition-all active:scale-95 cursor-pointer disabled:opacity-50\"\n            >\n              <RefreshCw className={cn(\"w-4 h-4\", retrying && \"animate-spin\")} />\n              {retrying ? \"Re-initiating Pipeline...\" : \"Attempt Auto-Recovery\"}\n            </button>\n            <button\n              type=\"button\"\n              onClick={onHome}\n              className=\"inline-flex items-center justify-center gap-2 w-full sm:w-auto px-5 py-2.5 rounded-xl font-medium text-xs sm:text-sm bg-secondary hover:bg-secondary/80 text-secondary-foreground border border-border transition-all active:scale-95 cursor-pointer\"\n            >\n              <Home className=\"w-4 h-4\" />\n              Return to Safety\n            </button>\n          </div>\n\n          {onSupport && (\n            <button\n              type=\"button\"\n              onClick={onSupport}\n              className=\"text-xs text-muted-foreground hover:text-red-500 dark:hover:text-red-400 inline-flex items-center gap-1.5 transition-colors cursor-pointer mt-1\"\n            >\n              <LifeBuoy className=\"w-3.5 h-3.5\" /> Escalate to Infrastructure Engineering &rarr;\n            </button>\n          )}\n        </div>\n      </section>\n    );\n  }\n\n  // -------------------------------------------------------------------------\n  // VARIANT: Cyberpunk Diagnostic Terminal (\"terminal\", default)\n  // -------------------------------------------------------------------------\n  return (\n    <section\n      className={cn(\n        \"relative w-full py-10 sm:py-20 md:py-24 px-3 sm:px-6 lg:px-8 bg-neutral-50 dark:bg-[#07090e] text-neutral-900 dark:text-neutral-100 overflow-hidden flex items-center justify-center min-h-[560px] sm:min-h-[600px] transition-colors duration-300 font-sans\",\n        className\n      )}\n      {...props}\n    >\n      {/* Ambient background cyber grid & red spotlight (adaptive for Light & Dark) */}\n      <div\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute inset-0 opacity-[0.04] dark:opacity-[0.035] bg-[linear-gradient(to_right,#ef4444_1px,transparent_1px),linear-gradient(to_bottom,#ef4444_1px,transparent_1px)] bg-[size:32px_32px]\"\n      />\n      <div\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[850px] max-w-full h-[420px] bg-red-500/10 dark:bg-red-600/12 blur-[140px] rounded-full\"\n      />\n\n      {/* Outer Terminal Enclosure */}\n      <div className=\"relative z-10 w-full max-w-4xl mx-auto rounded-2xl sm:rounded-3xl border border-red-500/20 dark:border-red-500/25 bg-white/95 dark:bg-[#0b0e14]/90 backdrop-blur-2xl shadow-[0_20px_70px_-15px_rgba(239,68,68,0.15)] dark:shadow-[0_0_80px_-20px_rgba(239,68,68,0.3)] overflow-hidden transition-all duration-300\">\n        {/* Top Window Bar */}\n        <div className=\"flex items-center justify-between px-3.5 sm:px-5 py-2.5 sm:py-3.5 bg-neutral-100/80 dark:bg-black/70 border-b border-red-500/15 dark:border-red-500/20 select-none gap-2\">\n          <div className=\"flex items-center gap-2 sm:gap-3 min-w-0\">\n            <div className=\"flex items-center gap-1 sm:gap-1.5 flex-shrink-0\">\n              <span className=\"w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500/90 shadow-[0_0_8px_#ef4444] inline-block animate-pulse\" />\n              <span className=\"w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500/80 inline-block\" />\n              <span className=\"w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-emerald-500/80 inline-block\" />\n            </div>\n            <div className=\"h-3.5 sm:h-4 w-[1px] bg-red-500/20 mx-0.5 sm:mx-1 flex-shrink-0\" />\n            <span className=\"text-[10px] sm:text-[11px] font-mono font-medium text-neutral-600 dark:text-neutral-400 tracking-wider flex items-center gap-1 sm:gap-1.5 uppercase truncate\">\n              <Cpu className=\"w-3 h-3 sm:w-3.5 sm:h-3.5 text-red-500 dark:text-red-400 flex-shrink-0\" />\n              <span className=\"hidden sm:inline\">telemetry::</span>diagnostic_monitor\n            </span>\n          </div>\n\n          <div className=\"flex items-center gap-1.5 sm:gap-2 flex-shrink-0\">\n            <span className=\"px-2 sm:px-2.5 py-0.5 rounded text-[9px] sm:text-[10px] font-mono uppercase bg-red-100 dark:bg-red-950/80 text-red-600 dark:text-red-400 border border-red-300 dark:border-red-500/40 flex items-center gap-1 sm:gap-1.5 font-semibold\">\n              <Radio className=\"w-2.5 h-2.5 sm:w-3 sm:h-3 animate-ping\" />\n              STATUS: {errorCode}\n            </span>\n          </div>\n        </div>\n\n        {/* Section Content */}\n        <div className=\"p-4 sm:p-8 lg:p-12 space-y-5 sm:space-y-8\">\n          <div className=\"flex flex-col sm:flex-row sm:items-start gap-4 sm:gap-6\">\n            {/* Holographic Glowing Crash Icon */}\n            <div className=\"relative flex-shrink-0 w-14 h-14 sm:w-20 sm:h-20 rounded-xl sm:rounded-2xl bg-gradient-to-br from-red-500/15 to-red-100/50 dark:from-red-500/20 dark:to-red-950/40 border border-red-500/30 dark:border-red-500/40 flex items-center justify-center text-red-600 dark:text-red-400 shadow-[0_0_35px_-5px_rgba(239,68,68,0.25)] dark:shadow-[0_0_35px_-5px_rgba(239,68,68,0.35)]\">\n              <ServerCrash className=\"w-7 h-7 sm:w-10 sm:h-10 animate-pulse\" />\n              <div className=\"absolute -top-1 -right-1 w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 bg-red-500 rounded-full border-2 border-white dark:border-black animate-ping\" />\n              <div className=\"absolute -bottom-1 -left-1 sm:-bottom-1.5 sm:-left-1.5 px-1 sm:px-1.5 py-0.5 rounded text-[8px] sm:text-[9px] font-mono font-bold bg-white dark:bg-black text-red-600 dark:text-red-400 border border-red-300 dark:border-red-500/40 shadow-xs\">\n                HALT\n              </div>\n            </div>\n\n            <div className=\"space-y-1.5 sm:space-y-2 flex-1 min-w-0\">\n              <div className=\"flex flex-wrap items-center gap-1.5 sm:gap-2.5 text-[11px] sm:text-xs font-mono text-red-600 dark:text-red-400/90 font-medium\">\n                <span className=\"font-bold uppercase tracking-wider\">FATAL_SIGNAL</span>\n                <span className=\"text-neutral-400\">/</span>\n                <span className=\"text-neutral-500 dark:text-neutral-400 truncate\">\n                  INCIDENT ID: {errorId}\n                </span>\n              </div>\n              <h3 className=\"text-xl sm:text-2xl lg:text-3xl font-black tracking-tight text-neutral-900 dark:text-white font-mono uppercase break-words\">\n                {resolvedTitle}\n              </h3>\n              <p className=\"text-xs sm:text-sm lg:text-base text-neutral-600 dark:text-neutral-400 leading-relaxed font-sans max-w-2xl\">\n                {resolvedDescription}\n              </p>\n            </div>\n          </div>\n\n          {/* Interactive Stacktrace Console — Modern Clean Terminal Box with Subtle Border */}\n          <div className=\"rounded-xl sm:rounded-2xl border border-neutral-200/90 dark:border-neutral-800 bg-neutral-50/70 dark:bg-neutral-950/70 overflow-hidden shadow-sm transition-all duration-200\">\n            {/* Box Header Bar */}\n            <div className=\"flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-3 border-b border-neutral-200/80 dark:border-neutral-800 bg-neutral-100/60 dark:bg-neutral-900/40 select-none gap-2\">\n              <div className=\"flex items-center gap-1.5 sm:gap-2 min-w-0\">\n                <span className=\"w-1.5 h-1.5 sm:w-2 sm:h-2 rounded-full bg-red-500 animate-pulse flex-shrink-0\" />\n                <span className=\"text-[10px] sm:text-[11px] font-mono font-semibold uppercase tracking-wider text-neutral-700 dark:text-neutral-300 truncate\">\n                  <span className=\"hidden sm:inline\">RAW SYSTEM </span>DIAGNOSTIC TRACE\n                </span>\n              </div>\n\n              <button\n                type=\"button\"\n                onClick={copyIncidentId}\n                className=\"hover:text-neutral-950 dark:hover:text-white text-neutral-500 dark:text-neutral-400 flex items-center gap-1 sm:gap-1.5 text-[11px] sm:text-xs transition-colors px-2 sm:px-2.5 py-1 rounded-md bg-white dark:bg-neutral-800/80 border border-neutral-200 dark:border-neutral-700/80 hover:border-neutral-300 dark:hover:border-neutral-600 shadow-xs cursor-pointer flex-shrink-0\"\n              >\n                {copied ? (\n                  <>\n                    <Check className=\"w-3 h-3 sm:w-3.5 sm:h-3.5 text-emerald-600 dark:text-emerald-400\" />\n                    <span className=\"text-emerald-600 dark:text-emerald-400 font-medium\">Copied</span>\n                  </>\n                ) : (\n                  <>\n                    <Copy className=\"w-3 h-3 sm:w-3.5 sm:h-3.5\" />\n                    <span>\n                      Copy<span className=\"hidden sm:inline\"> Trace</span>\n                    </span>\n                  </>\n                )}\n              </button>\n            </div>\n\n            {/* Trace Code Content with subtle inner border and light background */}\n            <div className=\"p-2 sm:p-4\">\n              <pre className=\"text-red-600 dark:text-red-400 leading-relaxed text-[10px] sm:text-xs p-3 sm:p-5 rounded-lg sm:rounded-xl bg-white dark:bg-black/50 border border-neutral-200/70 dark:border-neutral-800/80 font-mono overflow-x-auto whitespace-pre-wrap selection:bg-red-500/20 max-h-56 sm:max-h-72 overflow-y-auto\">\n                {sampleDetails}\n              </pre>\n            </div>\n          </div>\n\n          {/* Actions Bar */}\n          <div className=\"flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4 pt-1 sm:pt-2\">\n            <div className=\"flex flex-col sm:flex-row items-stretch sm:items-center gap-2.5 sm:gap-3 w-full sm:w-auto\">\n              <button\n                type=\"button\"\n                onClick={handleRetry}\n                disabled={retrying}\n                className=\"inline-flex items-center justify-center gap-2 px-5 sm:px-6 py-2.5 sm:py-3 rounded-xl font-medium text-xs sm:text-sm bg-red-600 hover:bg-red-500 text-white transition-all shadow-[0_0_25px_rgba(239,68,68,0.35)] active:scale-95 cursor-pointer disabled:opacity-50 w-full sm:w-auto\"\n              >\n                <RefreshCw\n                  className={cn(\"w-3.5 h-3.5 sm:w-4 sm:h-4\", retrying && \"animate-spin\")}\n                />\n                {retrying ? \"Rebooting Cluster...\" : \"Reboot System\"}\n              </button>\n              <button\n                type=\"button\"\n                onClick={onHome}\n                className=\"inline-flex items-center justify-center gap-2 px-4 sm:px-5 py-2.5 sm:py-3 rounded-xl font-medium text-xs sm:text-sm bg-neutral-100 hover:bg-neutral-200 text-neutral-800 dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-300 border border-neutral-300 dark:border-neutral-800 transition-all active:scale-95 cursor-pointer w-full sm:w-auto\"\n              >\n                <Home className=\"w-3.5 h-3.5 sm:w-4 sm:h-4\" />\n                Return Home\n              </button>\n            </div>\n\n            {onSupport && (\n              <button\n                type=\"button\"\n                onClick={onSupport}\n                className=\"text-xs text-neutral-500 hover:text-red-600 dark:text-neutral-400 dark:hover:text-red-400 flex items-center justify-center sm:justify-start gap-1.5 transition-colors cursor-pointer py-1 sm:py-0 w-full sm:w-auto\"\n              >\n                <LifeBuoy className=\"w-3.5 h-3.5 sm:w-4 sm:h-4\" /> Contact Escalation Team\n              </button>\n            )}\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n\nexport default ErrorSection;\n",
      "type": "registry:component",
      "target": "components/custom/blocks/ErrorBlock.tsx"
    }
  ],
  "docs": "Named export: ErrorSection (also default export) and ErrorSectionProps. Designed to serve as a full-page 500, 404, or runtime error boundary with light & dark theme support, one-click incident copying, and reboot action triggers.",
  "categories": [
    "marketing",
    "layout",
    "feedback"
  ],
  "type": "registry:component"
}