{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-highlights",
  "type": "registry:ui",
  "title": "Feature Highlights",
  "description": "Progressive reveal feature list with sliding accent indicator, grid-template-rows expand, and staggered entrance.",
  "dependencies": [],
  "files": [
    {
      "path": "registry/ruixenui/feature-highlights.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/* ═══════════════════════════════════════════════════════════\n   Feature Highlights — Staged Spotlight.\n\n   A split-layout feature showcase with an auto-advancing\n   image stage and a rack-focus crossfade between visuals.\n\n   Layout:\n     Mobile:  image (top) → feature list (bottom)\n     Desktop: feature list (left) ↔ image stage (right)\n\n   Fundamentally different from every accordion in ruixen:\n     • faq-auto-accordion: spring traveling accent, motion physics\n     • faq-scroll-accordion: self-contained scroll cascade\n     • feature-highlights: IMAGE STAGE + auto-play + rack-focus\n\n   Rack-focus crossfade:\n     Active:   opacity 1, scale 1,    blur 0\n     Inactive: opacity 0, scale 0.94, blur 6px\n   The blur+scale creates a camera depth-of-field effect —\n   incoming images \"focus in\" from a slightly larger, blurred\n   state, outgoing images \"defocus\" and recede.\n\n   Auto-play:\n     A progress bar fills from left to right over N seconds.\n     On completion, auto-advances to the next feature (loops).\n     The progress bar uses CSS @keyframes scaleX(0→1) with\n     transform-origin: left. The key prop resets the animation\n     on active change. Pauses on hover via animation-play-state.\n\n   Feature list:\n     Sliding accent indicator via ResizeObserver — tracks the\n     active item's position and height in real time.\n     Description uses grid-template-rows 0fr→1fr for smooth\n     height animation. Description text has 80ms delayed\n     fade+slide after the container opens.\n\n   Zero dependencies. No embla, no framer-motion, no next/image.\n   ═══════════════════════════════════════════════════════════ */\n\nexport interface FeatureItem {\n  title: string;\n  description: string;\n  image?: React.ReactNode;\n}\n\nexport interface FeatureHighlightsProps {\n  title?: string;\n  features?: FeatureItem[];\n  /** Seconds per feature during auto-play. 0 to disable. */\n  autoPlayInterval?: number;\n  /** Index of the initially active feature. */\n  defaultActive?: number;\n  className?: string;\n}\n\nconst defaultFeatures: FeatureItem[] = [\n  {\n    title: \"AI-Powered Automation\",\n    description:\n      \"Streamline workflows with intelligent automation that learns from your patterns and adapts to your needs.\",\n  },\n  {\n    title: \"Real-Time Analytics\",\n    description:\n      \"Monitor metrics live with sub-second latency. Dashboards update instantly as data flows in.\",\n  },\n  {\n    title: \"Seamless Integrations\",\n    description:\n      \"Connect with the tools you already use. One-click setup, zero configuration drift.\",\n  },\n  {\n    title: \"Scalable Infrastructure\",\n    description:\n      \"Grow without limits. Auto-scaling handles traffic spikes so you never think about capacity.\",\n  },\n];\n\nexport function FeatureHighlights({\n  title = \"Why we're different\",\n  features = defaultFeatures,\n  autoPlayInterval = 5,\n  defaultActive = 0,\n  className,\n}: FeatureHighlightsProps) {\n  const [active, setActive] = React.useState(defaultActive);\n  const [paused, setPaused] = React.useState(false);\n  const itemRefs = React.useRef<(HTMLButtonElement | null)[]>([]);\n  const listRef = React.useRef<HTMLDivElement>(null);\n  const [indicator, setIndicator] = React.useState({ top: 0, height: 0 });\n\n  // ── Accent indicator tracking ──────────────────────────\n  // ResizeObserver catches height changes as the description\n  // expands — the indicator stretches in real time.\n  React.useEffect(() => {\n    const el = itemRefs.current[active];\n    const list = listRef.current;\n    if (!el || !list) return;\n\n    const update = () => {\n      const listRect = list.getBoundingClientRect();\n      const elRect = el.getBoundingClientRect();\n      setIndicator({\n        top: elRect.top - listRect.top,\n        height: elRect.height,\n      });\n    };\n\n    update();\n\n    const ro = new ResizeObserver(update);\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, [active]);\n\n  // ── Auto-advance callback ──────────────────────────────\n  const advance = React.useCallback(() => {\n    setActive((prev) => (prev + 1) % features.length);\n  }, [features.length]);\n\n  return (\n    <section\n      className={cn(\"py-16 md:py-24\", className)}\n      onMouseEnter={() => setPaused(true)}\n      onMouseLeave={() => setPaused(false)}\n    >\n      <div className=\"mx-auto max-w-3xl px-6\">\n        {title && (\n          <p className=\"mb-8 text-center text-sm font-medium uppercase tracking-wider text-muted-foreground\">\n            {title}\n          </p>\n        )}\n\n        <div className=\"grid grid-cols-1 gap-6 md:grid-cols-[5fr_7fr] md:gap-8\">\n          {/* ── Feature list ──────────────────────────── */}\n          <div\n            ref={listRef}\n            className=\"relative order-2 self-center md:order-1\"\n          >\n            {/* Track line */}\n            <div className=\"absolute bottom-0 left-0 top-0 w-px bg-border\" />\n\n            {/* Sliding accent indicator */}\n            <div\n              className=\"absolute left-0 w-0.5 rounded-full bg-foreground\"\n              style={{\n                top: indicator.top,\n                height: indicator.height,\n                transition:\n                  \"top 0.5s cubic-bezier(0.16, 1, 0.3, 1), height 0.4s cubic-bezier(0.16, 1, 0.3, 1)\",\n              }}\n            />\n\n            {features.map((feature, i) => {\n              const isActive = i === active;\n\n              return (\n                <button\n                  key={i}\n                  ref={(el) => {\n                    itemRefs.current[i] = el;\n                  }}\n                  type=\"button\"\n                  className=\"relative flex w-full cursor-pointer flex-col items-start py-3 pl-5 text-left\"\n                  onClick={() => setActive(i)}\n                >\n                  {/* Index + Title */}\n                  <div className=\"flex items-baseline gap-2.5\">\n                    <span\n                      className={cn(\n                        \"font-mono text-xs tabular-nums transition-all duration-300\",\n                        isActive\n                          ? \"text-foreground\"\n                          : \"text-muted-foreground/60\",\n                      )}\n                    >\n                      {String(i + 1).padStart(2, \"0\")}\n                    </span>\n                    <span\n                      className=\"text-sm font-medium transition-all duration-300\"\n                      style={{ opacity: isActive ? 1 : 0.4 }}\n                    >\n                      {feature.title}\n                    </span>\n                  </div>\n\n                  {/* Expandable description */}\n                  <div\n                    className=\"grid w-full\"\n                    style={{\n                      gridTemplateRows: isActive ? \"1fr\" : \"0fr\",\n                      transition:\n                        \"grid-template-rows 0.4s cubic-bezier(0.16, 1, 0.3, 1)\",\n                    }}\n                  >\n                    <div className=\"overflow-hidden\">\n                      <p\n                        className=\"pt-1.5 pl-7 text-xs leading-relaxed text-muted-foreground\"\n                        style={{\n                          opacity: isActive ? 1 : 0,\n                          transform: isActive\n                            ? \"translateY(0)\"\n                            : \"translateY(6px)\",\n                          transition: isActive\n                            ? \"opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.08s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.08s\"\n                            : \"opacity 0.15s ease, transform 0.15s ease\",\n                        }}\n                      >\n                        {feature.description}\n                      </p>\n                    </div>\n                  </div>\n\n                  {/* Progress bar — fills during auto-play */}\n                  {isActive && autoPlayInterval > 0 && (\n                    <div className=\"absolute bottom-0 left-5 right-0 h-px bg-border\">\n                      <div\n                        key={`progress-${active}`}\n                        className=\"h-full origin-left bg-foreground/40\"\n                        style={{\n                          animation: `feature-highlight-progress ${autoPlayInterval}s linear forwards`,\n                          animationPlayState: paused ? \"paused\" : \"running\",\n                        }}\n                        onAnimationEnd={advance}\n                      />\n                    </div>\n                  )}\n                </button>\n              );\n            })}\n          </div>\n\n          {/* ── Image stage — rack-focus crossfade ─────── */}\n          <div className=\"relative order-1 aspect-video overflow-hidden rounded-xl border border-border/50 bg-muted md:order-2\">\n            {features.map((feature, i) => (\n              <div\n                key={i}\n                className=\"absolute inset-0\"\n                style={{\n                  opacity: i === active ? 1 : 0,\n                  transform: i === active ? \"scale(1)\" : \"scale(0.94)\",\n                  filter: i === active ? \"blur(0px)\" : \"blur(6px)\",\n                  transition:\n                    \"opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.7s cubic-bezier(0.16, 1, 0.3, 1)\",\n                }}\n              >\n                {feature.image || (\n                  <div className=\"flex h-full w-full items-center justify-center\">\n                    <span className=\"text-lg font-medium text-muted-foreground/20\">\n                      {feature.title}\n                    </span>\n                  </div>\n                )}\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n\n      <style\n        dangerouslySetInnerHTML={{\n          __html: `\n@keyframes feature-highlight-progress {\n  from { transform: scaleX(0); }\n  to { transform: scaleX(1); }\n}`,\n        }}\n      />\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/feature-highlights.tsx"
    }
  ]
}