{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "integration-and-stats-section",
  "type": "registry:ui",
  "title": "Integration And Stats Section",
  "description": "Three-column feature cards with chat, analytics, and polling illustrations",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/ruixenui/integration-and-stats-section.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { motion } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\nconst DOWN_INDICES = new Set([9, 10, 21, 22, 23, 31]);\nconst BAR_COUNT = 38;\n\n/* ── spring presets ─────────────────────────────────────────────── */\nconst SPRING_CARD = { type: \"spring\" as const, stiffness: 280, damping: 32 };\nconst SPRING_SOFT = { type: \"spring\" as const, stiffness: 220, damping: 28 };\nconst SPRING_SNAPPY = { type: \"spring\" as const, stiffness: 400, damping: 30 };\n\n/* ── marks ── geometric, monochrome, one shape per concept ─────── */\nfunction CanvasMark() {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      className=\"mb-4 size-4\"\n      aria-hidden=\"true\"\n    >\n      <circle cx=\"6\" cy=\"8\" r=\"5.5\" className=\"fill-foreground/[0.10]\" />\n      <circle cx=\"10\" cy=\"8\" r=\"5.5\" className=\"fill-foreground/[0.06]\" />\n    </svg>\n  );\n}\n\nfunction PulseMark() {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      className=\"mb-4 size-4\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M0.5 8H4L6 3L8 13L10 5L12 8H15.5\"\n        className=\"stroke-foreground/[0.14]\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n\nfunction SparkleMark() {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      className=\"mb-4 size-4\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M8 1L9.2 6.8L15 8L9.2 9.2L8 15L6.8 9.2L1 8L6.8 6.8Z\"\n        className=\"fill-foreground/[0.10]\"\n      />\n    </svg>\n  );\n}\n\n/* ── card shell — invisible container, content speaks ────────── */\nfunction FeatureCard({\n  children,\n  className,\n  index,\n}: {\n  children: React.ReactNode;\n  className?: string;\n  index: number;\n}) {\n  return (\n    <motion.div\n      initial={{ opacity: 0, y: 10 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ ...SPRING_CARD, delay: index * 0.12 }}\n      className={cn(\n        \"border border-foreground/[0.06] bg-background p-5 sm:p-6\",\n        \"grid grid-rows-[auto_1fr] gap-8 overflow-hidden sm:gap-10\",\n        className,\n      )}\n    >\n      {children}\n    </motion.div>\n  );\n}\n\n/* ── main ───────────────────────────────────────────────────────── */\nexport default function IntegrationAndStatsSection() {\n  return (\n    <section className=\"mx-auto w-full max-w-5xl px-4 py-8 sm:px-6 sm:py-10 lg:py-12\">\n      <div className=\"grid grid-cols-1 sm:grid-cols-2\">\n        {/* ── Live Canvas ──────────────────────────────────────── */}\n        <FeatureCard index={0} className=\"col-span-1 sm:col-span-2\">\n          <div>\n            <CanvasMark />\n            <p className=\"text-base leading-snug tracking-tight sm:text-lg\">\n              <span className=\"font-semibold text-foreground\">\n                Create in unison.\n              </span>{\" \"}\n              <span className=\"text-muted-foreground\">\n                See every cursor in real-time, resolve conflicts instantly, and\n                co-author interfaces — without ever leaving the canvas.\n              </span>\n            </p>\n          </div>\n\n          <div\n            className=\"-m-5 flex flex-col justify-end p-5 sm:-m-6 sm:p-6\"\n            aria-hidden=\"true\"\n          >\n            <motion.div\n              initial={{ opacity: 0, y: 8 }}\n              animate={{ opacity: 1, y: 0 }}\n              transition={{ ...SPRING_SOFT, delay: 0.25 }}\n              className=\"mask-b-from-90% w-full\"\n            >\n              <motion.div\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                transition={{ ...SPRING_SOFT, delay: 0.35 }}\n                className=\"mb-4 text-xl font-medium text-foreground\"\n              >\n                Design System\n              </motion.div>\n\n              <div className=\"space-y-3 text-base/6 text-muted-foreground\">\n                <motion.div\n                  initial={{ opacity: 0 }}\n                  animate={{ opacity: 1 }}\n                  transition={{ ...SPRING_SOFT, delay: 0.45 }}\n                >\n                  Docu\n                  <motion.span\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    transition={{ ...SPRING_SOFT, delay: 0.55 }}\n                    className=\"relative select-none rounded-sm bg-blue-500/[0.08] px-0.5 text-foreground/80 dark:bg-blue-400/[0.10] dark:text-foreground/75\"\n                  >\n                    ment component\n                  </motion.span>{\" \"}\n                  <span className=\"relative inline-block\">\n                    <motion.div\n                      initial={{ opacity: 0, y: 4 }}\n                      animate={{ opacity: 1, y: 0 }}\n                      transition={{ ...SPRING_SNAPPY, delay: 0.65 }}\n                      className=\"before:h-9.5 absolute top-0.5 flex -translate-x-0.5 -translate-y-full select-none items-center gap-1.5 rounded-r-md rounded-tl-md bg-blue-600 px-1.5 py-1 text-white shadow-md shadow-black/[0.065] before:absolute before:left-0 before:top-2 before:w-0.5 before:rounded before:bg-blue-600\"\n                    >\n                      <div className=\"before:border-foreground/20 relative size-4 overflow-hidden rounded-full bg-blue-500 before:absolute before:inset-0 before:rounded-full before:border\">\n                        <span className=\"flex size-full items-center justify-center text-[7px] font-bold text-white\">\n                          E\n                        </span>\n                      </div>\n                      <span className=\"text-xs font-medium\">Elena</span>\n                    </motion.div>\n                    variants\n                  </span>{\" \"}\n                  and tokens.\n                </motion.div>\n\n                <motion.div\n                  initial={{ opacity: 0 }}\n                  animate={{ opacity: 1 }}\n                  transition={{ ...SPRING_SOFT, delay: 0.55 }}\n                >\n                  Standardize patterns, review accessibility, and ship{\" \"}\n                  <span className=\"relative inline-block\">\n                    <motion.div\n                      initial={{ opacity: 0, y: 4 }}\n                      animate={{ opacity: 1, y: 0 }}\n                      transition={{ ...SPRING_SNAPPY, delay: 0.8 }}\n                      className=\"before:h-9.5 absolute top-0.5 flex -translate-x-0.5 -translate-y-full select-none items-center gap-1.5 rounded-r-md rounded-tl-md bg-emerald-600 px-1.5 py-1 text-white shadow-md before:absolute before:left-0 before:top-2 before:w-0.5 before:rounded before:bg-emerald-600\"\n                    >\n                      <div className=\"before:border-foreground/20 relative size-4 overflow-hidden rounded-full bg-emerald-400 before:absolute before:inset-0 before:rounded-full before:border\">\n                        <span className=\"flex size-full items-center justify-center text-[7px] font-bold text-white\">\n                          J\n                        </span>\n                      </div>\n                      <span className=\"truncate text-xs font-medium\">\n                        James K.\n                      </span>\n                    </motion.div>\n                    consistent\n                  </span>{\" \"}\n                  interfaces across every surface.\n                </motion.div>\n              </div>\n            </motion.div>\n          </div>\n        </FeatureCard>\n\n        {/* ── System Pulse ─────────────────────────────────────── */}\n        <FeatureCard index={1}>\n          <div>\n            <PulseMark />\n            <p className=\"text-base leading-snug tracking-tight sm:text-lg\">\n              <span className=\"font-semibold text-foreground\">\n                Monitor at a glance.\n              </span>{\" \"}\n              <span className=\"text-muted-foreground\">\n                Track throughput, catch latency spikes, and surface errors\n                across your entire stack — the moment they happen.\n              </span>\n            </p>\n          </div>\n\n          <div className=\"-m-5 flex flex-col justify-end p-5 sm:-m-6 sm:p-6\">\n            <div className=\"w-full\">\n              <motion.div\n                initial={{ opacity: 0, y: 8 }}\n                animate={{ opacity: 1, y: 0 }}\n                transition={{ ...SPRING_SOFT, delay: 0.3 }}\n                aria-hidden=\"true\"\n                className=\"space-y-3 p-3 sm:p-4\"\n              >\n                {/* hero metric */}\n                <div>\n                  <span className=\"text-[11px] text-foreground/40\">\n                    Throughput\n                  </span>\n                  <div className=\"mt-0.5 flex items-baseline gap-1.5\">\n                    <motion.span\n                      initial={{ opacity: 0, scale: 0.95 }}\n                      animate={{ opacity: 1, scale: 1 }}\n                      transition={{ ...SPRING_SOFT, delay: 0.4 }}\n                      className=\"text-xl font-semibold tracking-tight tabular-nums text-foreground sm:text-2xl\"\n                    >\n                      14.2k\n                    </motion.span>\n                    <motion.span\n                      initial={{ opacity: 0, x: -4 }}\n                      animate={{ opacity: 1, x: 0 }}\n                      transition={{ ...SPRING_SOFT, delay: 0.55 }}\n                      className=\"text-[11px] font-medium text-blue-500/70\"\n                    >\n                      +8.7%\n                    </motion.span>\n                  </div>\n                </div>\n\n                {/* bars cascade from bottom, staggered left → right */}\n                <div className=\"flex gap-px\">\n                  {Array.from({ length: BAR_COUNT }, (_, i) => (\n                    <motion.div\n                      key={i}\n                      initial={{ scaleY: 0 }}\n                      animate={{ scaleY: 1 }}\n                      transition={{\n                        ...SPRING_SNAPPY,\n                        delay: 0.5 + i * 0.018,\n                      }}\n                      style={{ transformOrigin: \"bottom\" }}\n                      className={cn(\n                        \"h-6 flex-1\",\n                        DOWN_INDICES.has(i)\n                          ? \"bg-foreground/25\"\n                          : \"bg-blue-500\",\n                      )}\n                    />\n                  ))}\n                </div>\n\n                {/* secondary metrics */}\n                <motion.div\n                  initial={{ opacity: 0 }}\n                  animate={{ opacity: 1 }}\n                  transition={{ ...SPRING_SOFT, delay: 0.95 }}\n                  className=\"flex gap-4 border-t border-foreground/[0.06] pt-2.5\"\n                >\n                  <div>\n                    <span className=\"text-[10px] text-foreground/30\">\n                      Latency\n                    </span>\n                    <div className=\"text-xs font-medium tabular-nums text-foreground/55\">\n                      23ms\n                    </div>\n                  </div>\n                  <div>\n                    <span className=\"text-[10px] text-foreground/30\">P99</span>\n                    <div className=\"text-xs font-medium tabular-nums text-foreground/55\">\n                      89ms\n                    </div>\n                  </div>\n                  <div>\n                    <span className=\"text-[10px] text-foreground/30\">\n                      Errors\n                    </span>\n                    <div className=\"text-xs font-medium tabular-nums text-foreground/55\">\n                      0.02%\n                    </div>\n                  </div>\n                </motion.div>\n              </motion.div>\n            </div>\n          </div>\n        </FeatureCard>\n\n        {/* ── AI Copilot ───────────────────────────────────────── */}\n        <FeatureCard index={2} className=\"\">\n          <div>\n            <SparkleMark />\n            <p className=\"text-base leading-snug tracking-tight sm:text-lg\">\n              <span className=\"font-semibold text-foreground\">\n                Ship with a prompt.\n              </span>{\" \"}\n              <span className=\"text-muted-foreground\">\n                Generate components, refine edge cases, and push to production —\n                let AI handle the heavy lifting.\n              </span>\n            </p>\n          </div>\n\n          <div\n            className=\"-m-5 flex flex-col justify-end p-5 sm:-m-6 sm:p-6\"\n            aria-hidden=\"true\"\n          >\n            <motion.div\n              initial={{ opacity: 0, y: 8 }}\n              animate={{ opacity: 1, y: 0 }}\n              transition={{ ...SPRING_SOFT, delay: 0.3 }}\n              className=\"space-y-3\"\n            >\n              {/* input */}\n              <motion.div\n                initial={{ opacity: 0, y: 4, scale: 0.98 }}\n                animate={{ opacity: 1, y: 0, scale: 1 }}\n                transition={{ ...SPRING_SNAPPY, delay: 0.45 }}\n                className=\"overflow-hidden rounded-xl border border-foreground/[0.08]\"\n              >\n                <div className=\"px-4 py-3\">\n                  <motion.span\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    transition={{ ...SPRING_SOFT, delay: 0.6 }}\n                    className=\"text-sm text-muted-foreground/40\"\n                  >\n                    Build a settings page with dark mode toggle\n                  </motion.span>\n                  <motion.span\n                    animate={{ opacity: [1, 0] }}\n                    transition={{\n                      duration: 0.8,\n                      repeat: Infinity,\n                      repeatType: \"reverse\",\n                    }}\n                    className=\"ml-0.5 inline-block h-[14px] w-[1.5px] translate-y-[2px] bg-foreground/25\"\n                  />\n                </div>\n                <div className=\"flex items-center justify-end border-t border-foreground/[0.05] px-3 py-2\">\n                  <motion.div\n                    initial={{ opacity: 0, scale: 0.9 }}\n                    animate={{ opacity: 1, scale: 1 }}\n                    transition={{ ...SPRING_SNAPPY, delay: 0.7 }}\n                    className=\"flex size-6 items-center justify-center rounded-lg bg-foreground\"\n                  >\n                    <svg\n                      width=\"12\"\n                      height=\"12\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"2.5\"\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      className=\"text-background\"\n                    >\n                      <path d=\"m5 12 7-7 7 7\" />\n                      <path d=\"M12 19V5\" />\n                    </svg>\n                  </motion.div>\n                </div>\n              </motion.div>\n\n              {/* skeleton response */}\n              <motion.div\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                transition={{ ...SPRING_SOFT, delay: 0.9 }}\n                className=\"space-y-2 px-1\"\n              >\n                <div className=\"h-1.5 w-4/5 rounded-full bg-foreground/[0.04]\" />\n                <div className=\"h-1.5 w-3/5 rounded-full bg-foreground/[0.03]\" />\n                <div className=\"h-1.5 w-2/3 rounded-full bg-foreground/[0.025]\" />\n              </motion.div>\n            </motion.div>\n          </div>\n        </FeatureCard>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/integration-and-stats-section.tsx"
    }
  ]
}