{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "faq-section",
  "title": "Faq Section",
  "author": "AlgorizeTech",
  "description": "Ask the user to pick one of 2 faq section variants: https://avaraui.com/view/faq-section. This item holds 2 of them as looks of one component (homepage, two-column). Skip the question if the user already named one. A complete animated FAQ website section pairing an editorial header with a dynamic morphing nature photography canvas and an expandable question accordion.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/components/custom/blocks/FAQSectionBlock.tsx",
      "content": "\"use client\";\n\nimport { useCallback, useEffect, useState } from \"react\";\nimport { ChevronDown, Compass, MapPin, Sparkles } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { FAQ_ITEMS, type FAQItem } from \"./faq-section-data\";\n\nexport type { FAQItem };\n\n// ==========================================\n// MOTION CONSTANTS & KEYFRAMES\n// The canvas eases to each item's size; the photos crossfade, the new one\n// settling from a touch larger while the old one shrinks away; the answer\n// panels open and close to their own height; the chevron turns over.\n// ==========================================\nconst EASE = \"cubic-bezier(0.16, 1, 0.3, 1)\";\n\nconst STYLES = `\n@keyframes faq-photo-in { from { opacity: 0; transform: scale(1.04); } }\n@keyframes faq-photo-out { to { opacity: 0; transform: scale(0.98); } }\n.faq-photo-in { animation: faq-photo-in 0.4s ${EASE} backwards; }\n.faq-photo-out { animation: faq-photo-out 0.4s ${EASE} forwards; }\n`;\n\ninterface PhotoLayer {\n  key: number;\n  item: FAQItem;\n  leaving: boolean;\n}\n\nfunction usePhotoLayers(item: FAQItem) {\n  const [layers, setLayers] = useState<PhotoLayer[]>(() => [{ key: 0, item, leaving: false }]);\n\n  const top = layers[layers.length - 1];\n  if (top.item.id !== item.id) {\n    setLayers([\n      ...layers.map((layer) => (layer.leaving ? layer : { ...layer, leaving: true })),\n      { key: top.key + 1, item, leaving: false },\n    ]);\n  } else if (top.item !== item) {\n    setLayers([...layers.slice(0, -1), { ...top, item }]);\n  }\n\n  const drop = useCallback((key: number) => {\n    setLayers((current) => current.filter((layer) => layer.key !== key));\n  }, []);\n\n  const leavingKeys = layers.filter((layer) => layer.leaving).map((layer) => layer.key).join();\n  useEffect(() => {\n    if (!leavingKeys) return;\n    const t = window.setTimeout(() => {\n      setLayers((current) => current.filter((layer) => !layer.leaving || !leavingKeys.split(\",\").includes(String(layer.key))));\n    }, 500);\n    return () => window.clearTimeout(t);\n  }, [leavingKeys]);\n\n  return { layers, drop };\n}\n\n// ==========================================\n// INNER ANIMATED FAQ GRID (CANVAS + ACCORDION)\n// ==========================================\n\nexport interface AnimatedFAQBlockProps {\n  items?: FAQItem[];\n  className?: string;\n  defaultActiveId?: string;\n}\n\nexport function AnimatedFAQBlock({\n  items = FAQ_ITEMS,\n  className,\n  defaultActiveId = FAQ_ITEMS[0].id,\n}: AnimatedFAQBlockProps) {\n  const [activeId, setActiveId] = useState<string>(defaultActiveId);\n  const activeItem = items.find((i) => i.id === activeId) || items[0];\n  const photos = usePhotoLayers(activeItem);\n\n  const handleToggle = (id: string) => {\n    setActiveId(id);\n  };\n\n  return (\n    <div\n      className={cn(\n        \"grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-14 items-center\",\n        className,\n      )}\n    >\n      <style>{STYLES}</style>\n      {/* ───────────────────────────────────────────────────────────\n          LEFT COLUMN: VERTICALLY CENTERED NATURE CANVAS\n          ─────────────────────────────────────────────────────────── */}\n      <div className=\"lg:col-span-6 w-full lg:sticky lg:top-24 self-center flex flex-col items-center justify-center min-h-[480px] py-6\">\n        {/* Dynamic morphing canvas container */}\n        <div\n          style={{\n            height: activeItem.height,\n            maxWidth: activeItem.maxWidth,\n            transition: `height 0.45s ${EASE}, max-width 0.45s ${EASE}`,\n          }}\n          className=\"relative w-full flex items-center justify-center\"\n        >\n          {/* Extended Horizontal Guide: Top */}\n          <div className=\"pointer-events-none absolute -top-[1px] -left-10 -right-10 h-[1px] bg-border\" />\n\n          {/* Extended Horizontal Guide: Bottom */}\n          <div className=\"pointer-events-none absolute -bottom-[1px] -left-10 -right-10 h-[1px] bg-border\" />\n\n          {/* Extended Vertical Guide: Left */}\n          <div className=\"pointer-events-none absolute -left-[1px] -top-10 -bottom-10 w-[1px] bg-border\" />\n\n          {/* Extended Vertical Guide: Right */}\n          <div className=\"pointer-events-none absolute -right-[1px] -top-10 -bottom-10 w-[1px] bg-border\" />\n\n          {/* 4 Corner Square Dots / Registration Markers */}\n          <div\n            className=\"pointer-events-none absolute -top-1 -left-1 size-2 bg-muted-foreground border border-border rounded-[1px] shadow-xs z-20\"\n            title=\"Top Left Anchor\"\n          />\n          <div\n            className=\"pointer-events-none absolute -top-1 -right-1 size-2 bg-muted-foreground border border-border rounded-[1px] shadow-xs z-20\"\n            title=\"Top Right Anchor\"\n          />\n          <div\n            className=\"pointer-events-none absolute -bottom-1 -left-1 size-2 bg-muted-foreground border border-border rounded-[1px] shadow-xs z-20\"\n            title=\"Bottom Left Anchor\"\n          />\n          <div\n            className=\"pointer-events-none absolute -bottom-1 -right-1 size-2 bg-muted-foreground border border-border rounded-[1px] shadow-xs z-20\"\n            title=\"Bottom Right Anchor\"\n          />\n\n          {/* Subtle Ambient Radial Backlight */}\n          <div className=\"pointer-events-none absolute -inset-6 rounded-3xl bg-primary/8 dark:bg-primary/5 blur-2xl opacity-60\" />\n\n          {/* Chamfered Nature Image Container (Cut Top-Left & Bottom-Right) */}\n          <div\n            className=\"relative w-full h-full overflow-hidden bg-muted/90 shadow-xl dark:shadow-2xl border border-border/70 transition-all\"\n            style={{\n              clipPath: `polygon(${activeItem.clipCut} 0%, 100% 0%, 100% calc(100% - ${activeItem.clipCut}), calc(100% - ${activeItem.clipCut}) 100%, 0% 100%, 0% ${activeItem.clipCut})`,\n            }}\n          >\n            {photos.layers.map(({ key, item: photo, leaving }) => (\n              <div\n                key={key}\n                onAnimationEnd={(e) => {\n                  if (leaving && e.target === e.currentTarget) photos.drop(key);\n                }}\n                className={cn(\n                  \"absolute inset-0 w-full h-full\",\n                  leaving ? \"faq-photo-out\" : \"faq-photo-in\",\n                )}\n              >\n                <img\n                  src={photo.image}\n                  alt={photo.question}\n                  className=\"w-full h-full object-cover object-center filter brightness-[0.97] contrast-[1.03]\"\n                />\n\n                {/* Soft Light-Aware Vignette Overlay */}\n                <div className=\"absolute inset-0 bg-gradient-to-t from-black/45 via-transparent to-black/20 dark:from-black/75 dark:via-black/20 dark:to-black/35 pointer-events-none\" />\n\n                {/* Top Corner Watermark Tag */}\n                <div className=\"absolute top-4 left-5 right-5 flex items-center justify-between text-xs pointer-events-none\">\n                  <div className=\"inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-background/85 backdrop-blur-md border border-border/70 text-[11px] font-mono tracking-wider text-foreground shadow-xs\">\n                    <Compass className=\"size-3 text-primary\" />\n                    <span>{photo.category}</span>\n                  </div>\n\n                  <span className=\"font-mono text-[10px] text-muted-foreground tracking-widest uppercase bg-background/75 border border-border/50 px-2 py-0.5 rounded backdrop-blur-xs shadow-xs\">\n                    {photo.coordinates}\n                  </span>\n                </div>\n\n                {/* Bottom Nature Caption & Location */}\n                <div className=\"absolute bottom-4 left-5 right-5 pointer-events-none\">\n                  <div className=\"inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-background/90 backdrop-blur-md border border-border/80 text-xs text-foreground font-medium shadow-sm\">\n                    <MapPin className=\"size-3.5 text-primary shrink-0\" />\n                    <span className=\"truncate\">{photo.location}</span>\n                  </div>\n                </div>\n              </div>\n            ))}\n\n            {/* Chamfered Border Outline via SVG to preserve crisp angle */}\n            <svg\n              className=\"pointer-events-none absolute inset-0 w-full h-full text-foreground/20\"\n              fill=\"none\"\n              preserveAspectRatio=\"none\"\n              viewBox=\"0 0 100 100\"\n            >\n              <polygon\n                points=\"8 0, 100 0, 100 92, 92 100, 0 100, 0 8\"\n                stroke=\"currentColor\"\n                strokeWidth=\"1\"\n                vectorEffect=\"non-scaling-stroke\"\n              />\n            </svg>\n          </div>\n        </div>\n\n        {/* Dimension indicator tag below */}\n        <div className=\"mt-6 flex items-center gap-4 text-[11px] font-mono text-muted-foreground/80\">\n          <span>\n            W: <strong className=\"text-foreground\">{activeItem.maxWidth}px</strong>\n          </span>\n          <span>•</span>\n          <span>\n            H: <strong className=\"text-foreground\">{activeItem.height}px</strong>\n          </span>\n          <span>•</span>\n          <span className=\"text-foreground/70 font-medium\">Dynamic Nature Canvas</span>\n        </div>\n      </div>\n\n      {/* ───────────────────────────────────────────────────────────\n          RIGHT COLUMN: ACCORDION QUESTIONS LIST\n          ─────────────────────────────────────────────────────────── */}\n      <div className=\"lg:col-span-6 w-full space-y-3 sm:space-y-4\">\n        {items.map((item, idx) => {\n          const isActive = item.id === activeId;\n          const num = String(idx + 1).padStart(2, \"0\");\n\n          return (\n            <div\n              key={item.id}\n              className={cn(\n                \"rounded-2xl border transition-all duration-300 overflow-hidden\",\n                isActive\n                  ? \"border-primary/50 bg-card shadow-lg ring-1 ring-primary/20\"\n                  : \"border-border/60 bg-card/40 hover:border-border hover:bg-card/80\",\n              )}\n            >\n              <button\n                type=\"button\"\n                onClick={() => handleToggle(item.id)}\n                aria-expanded={isActive}\n                className=\"w-full text-left p-4 sm:p-5 flex items-start justify-between gap-4 cursor-pointer select-none transition-colors group\"\n              >\n                <div className=\"flex items-start gap-3.5 sm:gap-4 min-w-0\">\n                  {/* Number Badge */}\n                  <span\n                    className={cn(\n                      \"shrink-0 font-mono text-xs font-semibold px-2 py-1 rounded-md border transition-colors mt-0.5\",\n                      isActive\n                        ? \"bg-primary text-primary-foreground border-primary shadow-sm\"\n                        : \"bg-muted/80 text-muted-foreground border-border/50 group-hover:text-foreground group-hover:border-primary/30\",\n                    )}\n                  >\n                    {num}\n                  </span>\n\n                  <div className=\"min-w-0\">\n                    {/* Category Tag */}\n                    <div className=\"flex items-center gap-2 mb-1\">\n                      <span\n                        className={cn(\n                          \"text-[10px] font-medium uppercase tracking-wider\",\n                          isActive\n                            ? \"text-primary font-semibold\"\n                            : \"text-muted-foreground/70\",\n                        )}\n                      >\n                        {item.category}\n                      </span>\n                    </div>\n\n                    {/* Question Title */}\n                    <h3\n                      className={cn(\n                        \"text-sm sm:text-base font-semibold leading-snug transition-colors\",\n                        isActive\n                          ? \"text-foreground\"\n                          : \"text-foreground/80 group-hover:text-foreground\",\n                      )}\n                    >\n                      {item.question}\n                    </h3>\n                  </div>\n                </div>\n\n                {/* Animated Expand Chevron */}\n                <div\n                  style={{\n                    rotate: isActive ? \"180deg\" : \"0deg\",\n                    transition:\n                      \"rotate 0.25s cubic-bezier(0.42, 0, 0.58, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1)\",\n                  }}\n                  className={cn(\n                    \"shrink-0 size-7 rounded-full flex items-center justify-center border transition-colors mt-0.5\",\n                    isActive\n                      ? \"bg-primary/10 border-primary/30 text-primary\"\n                      : \"bg-muted/50 border-border/50 text-muted-foreground group-hover:text-foreground group-hover:border-primary/20\",\n                  )}\n                >\n                  <ChevronDown className=\"size-4\" />\n                </div>\n              </button>\n\n              {/* Accordion Expandable Answer */}\n              <div\n                inert={!isActive}\n                style={{\n                  display: \"grid\",\n                  gridTemplateRows: isActive ? \"1fr\" : \"0fr\",\n                  opacity: isActive ? 1 : 0,\n                  transition: `grid-template-rows 0.25s ${EASE}, opacity 0.25s ${EASE}`,\n                }}\n              >\n                <div className=\"min-h-0 overflow-hidden\">\n                  <div className=\"px-4 pb-4 sm:px-5 sm:pb-5 pt-0 border-t border-border/40 text-sm text-muted-foreground leading-relaxed\">\n                    <p className=\"pt-3 text-[13px] sm:text-sm text-foreground/80\">\n                      {item.answer}\n                    </p>\n\n                    <div className=\"mt-3.5 flex items-center justify-between gap-2 pt-3 border-t border-border/30 text-xs\">\n                      <span className=\"text-xs text-muted-foreground/80 flex items-center gap-1.5\">\n                        <MapPin className=\"size-3 text-primary\" />\n                        <span>{item.location}</span>\n                      </span>\n                      <span className=\"font-mono text-[11px] text-primary/90\">\n                        {item.maxWidth}×{item.height}px\n                      </span>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\n// ==========================================\n// SUPPORT TEAM & TWO-COLUMN FAQ SECTION\n// Inspired by the sticky two-column layout with support card\n// ==========================================\n\nexport const DEFAULT_SUPPORT_TEAM = [\n  {\n    name: \"Ana R.\",\n    src: \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_120,h_120,c_fill/v1790145139/pexels-photo-1036623-1790145143487.jpg\",\n  },\n  {\n    name: \"Tom M.\",\n    src: \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_120,h_120,c_fill/v1790145142/pexels-photo-2043590-1790145143488.jpg\",\n  },\n  {\n    name: \"Mara K.\",\n    src: \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_120,h_120,c_fill/v1790145139/pexels-photo-1587009-1790145143488.jpg\",\n  },\n];\n\nexport interface TwoColumnFAQSectionProps {\n  id?: string;\n  className?: string;\n  title?: string;\n  description?: string;\n  items?: FAQItem[];\n  supportTeam?: Array<{ name: string; src: string }>;\n  supportEmail?: string;\n  defaultActiveId?: string;\n}\n\nexport function TwoColumnFAQSection({\n  id = \"faq\",\n  className,\n  title = \"Questions people ask before they install.\",\n  description = \"Short answers on licensing, theming and where the components run. If yours isn't here, we read every message.\",\n  items = FAQ_ITEMS,\n  supportTeam = DEFAULT_SUPPORT_TEAM,\n  supportEmail = \"hello@example.com\",\n  defaultActiveId,\n}: TwoColumnFAQSectionProps) {\n  const [activeId, setActiveId] = useState<string>(defaultActiveId || items[0]?.id || \"\");\n\n  return (\n    <section\n      id={id}\n      className={cn(\n        \"w-full rounded-3xl border border-border bg-background px-4 py-8 sm:px-10 lg:px-14 lg:py-16\",\n        className,\n      )}\n    >\n      <div className=\"mx-auto grid max-w-6xl gap-8 sm:gap-12 lg:grid-cols-[minmax(0,5fr)_minmax(0,7fr)] lg:gap-20\">\n        {/* Left column stays put while the answers scroll on large screens. */}\n        <div className=\"lg:sticky lg:top-8 lg:self-start\">\n          <h2 className=\"max-w-md font-serif text-3xl leading-[1.1] tracking-tight text-foreground sm:text-4xl lg:text-5xl\">\n            {title}\n          </h2>\n          {description && (\n            <p className=\"mt-4 sm:mt-5 max-w-md text-sm sm:text-base leading-relaxed text-muted-foreground\">\n              {description}\n            </p>\n          )}\n\n          {supportTeam && supportTeam.length > 0 && (\n            <div className=\"mt-6 sm:mt-8 flex flex-col sm:flex-row items-start sm:items-center gap-3 sm:gap-4 rounded-2xl bg-muted/60 p-4 max-w-md\">\n              <div className=\"flex shrink-0 -space-x-2\">\n                {supportTeam.map((person) => (\n                  <img\n                    key={person.name}\n                    src={person.src}\n                    alt={person.name}\n                    className=\"size-9 shrink-0 rounded-full border-2 border-background object-cover\"\n                    loading=\"lazy\"\n                  />\n                ))}\n              </div>\n              <div className=\"min-w-0 flex-1\">\n                <p className=\"text-sm font-medium text-foreground\">Still stuck?</p>\n                <a\n                  href={`mailto:${supportEmail}`}\n                  className=\"text-sm text-muted-foreground underline-offset-4 transition-colors hover:text-primary hover:underline break-words\"\n                >\n                  Email the team, we reply within a day\n                </a>\n              </div>\n            </div>\n          )}\n        </div>\n\n        {/* Right column: Questions Accordion */}\n        <div className=\"w-full space-y-3 sm:space-y-4\">\n          {items.map((item, idx) => {\n            const isActive = item.id === activeId;\n            const num = String(idx + 1).padStart(2, \"0\");\n\n            return (\n              <div\n                key={item.id}\n                className={cn(\n                  \"rounded-2xl border transition-all duration-300 overflow-hidden\",\n                  isActive\n                    ? \"border-primary/50 bg-card shadow-lg ring-1 ring-primary/20\"\n                    : \"border-border/60 bg-card/40 hover:border-border hover:bg-card/80\",\n                )}\n              >\n                <button\n                  type=\"button\"\n                  onClick={() => setActiveId(isActive ? \"\" : item.id)}\n                  aria-expanded={isActive}\n                  className=\"w-full text-left p-4 sm:p-5 flex items-start justify-between gap-4 cursor-pointer select-none transition-colors group\"\n                >\n                  <div className=\"flex items-start gap-3.5 sm:gap-4 min-w-0\">\n                    <span\n                      className={cn(\n                        \"shrink-0 font-mono text-xs font-semibold px-2 py-1 rounded-md border transition-colors mt-0.5\",\n                        isActive\n                          ? \"bg-primary text-primary-foreground border-primary shadow-sm\"\n                          : \"bg-muted/80 text-muted-foreground border-border/50 group-hover:text-foreground group-hover:border-primary/30\",\n                      )}\n                    >\n                      {num}\n                    </span>\n\n                    <div className=\"min-w-0\">\n                      {item.category && (\n                        <div className=\"flex items-center gap-2 mb-1\">\n                          <span\n                            className={cn(\n                              \"text-[10px] font-medium uppercase tracking-wider\",\n                              isActive\n                                ? \"text-primary font-semibold\"\n                                : \"text-muted-foreground/70\",\n                            )}\n                          >\n                            {item.category}\n                          </span>\n                        </div>\n                      )}\n                      <h3\n                        className={cn(\n                          \"text-sm sm:text-base font-semibold leading-snug transition-colors\",\n                          isActive\n                            ? \"text-foreground\"\n                            : \"text-foreground/80 group-hover:text-foreground\",\n                        )}\n                      >\n                        {item.question}\n                      </h3>\n                    </div>\n                  </div>\n\n                  <div\n                    style={{\n                      rotate: isActive ? \"180deg\" : \"0deg\",\n                      transition:\n                        \"rotate 0.25s cubic-bezier(0.42, 0, 0.58, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1)\",\n                    }}\n                    className={cn(\n                      \"shrink-0 size-7 rounded-full flex items-center justify-center border transition-colors mt-0.5\",\n                      isActive\n                        ? \"bg-primary/10 border-primary/30 text-primary\"\n                        : \"bg-muted/50 border-border/50 text-muted-foreground group-hover:text-foreground group-hover:border-primary/20\",\n                    )}\n                  >\n                    <ChevronDown className=\"size-4\" />\n                  </div>\n                </button>\n\n                <div\n                  inert={!isActive}\n                  style={{\n                    display: \"grid\",\n                    gridTemplateRows: isActive ? \"1fr\" : \"0fr\",\n                    opacity: isActive ? 1 : 0,\n                    transition: `grid-template-rows 0.25s ${EASE}, opacity 0.25s ${EASE}`,\n                  }}\n                >\n                  <div className=\"min-h-0 overflow-hidden\">\n                    <div className=\"px-4 pb-4 sm:px-5 sm:pb-5 pt-0 border-t border-border/40 text-sm text-muted-foreground leading-relaxed\">\n                      <p className=\"pt-3 text-[13px] sm:text-sm text-foreground/80\">\n                        {item.answer}\n                      </p>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </section>\n  );\n}\n\n// ==========================================\n// COMPLETE WEBSITE FAQ SECTION COMPONENT\n// Matching the homepage FAQ Section layout\n// ==========================================\n\nexport interface FAQSectionProps {\n  id?: string;\n  className?: string;\n  variant?: \"canvas\" | \"two-column\";\n  eyebrow?: string;\n  title?: string;\n  description?: string;\n  items?: FAQItem[];\n  showGlows?: boolean;\n  defaultActiveId?: string;\n  supportTeam?: Array<{ name: string; src: string }>;\n  supportEmail?: string;\n}\n\nexport function FAQSection({\n  id = \"faq\",\n  className,\n  variant = \"canvas\",\n  eyebrow = \"Common Queries\",\n  title = \"Frequently Asked Questions\",\n  description = \"Everything you need to know about using Docs UI, component integration, licensing, and custom styling.\",\n  items = FAQ_ITEMS,\n  showGlows = true,\n  defaultActiveId,\n  supportTeam,\n  supportEmail,\n}: FAQSectionProps) {\n  if (variant === \"two-column\") {\n    return (\n      <TwoColumnFAQSection\n        id={id}\n        className={className}\n        title={title}\n        description={description}\n        items={items}\n        supportTeam={supportTeam}\n        supportEmail={supportEmail}\n        defaultActiveId={defaultActiveId}\n      />\n    );\n  }\n\n  return (\n    <section\n      id={id}\n      className={cn(\n        \"py-16 md:py-24 relative overflow-hidden bg-background border-t border-border/40\",\n        className\n      )}\n    >\n      {showGlows && (\n        <>\n          {/* Ambient background glows */}\n          <div className=\"pointer-events-none absolute top-10 left-1/4 -translate-x-1/2 w-[600px] h-[300px] bg-primary/5 rounded-full blur-3xl opacity-60\" />\n          <div className=\"pointer-events-none absolute bottom-10 right-1/4 w-[500px] h-[300px] bg-primary/5 rounded-full blur-3xl opacity-50\" />\n        </>\n      )}\n\n      <div className=\"max-w-[1320px] mx-auto px-6 md:px-8 relative z-10\">\n        {/* Section Header */}\n        <div className=\"text-center max-w-3xl mx-auto mb-12 sm:mb-16\">\n          {eyebrow && (\n            <div className=\"inline-flex items-center gap-1.5 rounded-full bg-foreground/[0.04] backdrop-blur px-3 py-1 text-[12px] text-foreground/90 mb-4 border border-foreground/[0.06]\">\n              <Sparkles className=\"size-3.5 text-primary\" />\n              <span>{eyebrow}</span>\n            </div>\n          )}\n\n          <h2 className=\"font-serif font-normal text-[clamp(26px,3.6vw,46px)] leading-[1.15] tracking-[-0.02em] text-foreground mb-3\">\n            {title}\n          </h2>\n\n          {description && (\n            <p className=\"text-[15px] leading-[1.65] text-foreground/45 max-w-[490px] mx-auto\">\n              {description}\n            </p>\n          )}\n        </div>\n\n        {/* Animated FAQ Nature Canvas + Accordion */}\n        <AnimatedFAQBlock items={items} defaultActiveId={defaultActiveId} />\n      </div>\n    </section>\n  );\n}\n\nexport default FAQSection;\n",
      "type": "registry:component",
      "target": "components/custom/blocks/FAQSectionBlock.tsx"
    },
    {
      "path": "src/components/custom/blocks/faq-section-data.ts",
      "content": "// Sample data and item shape for FAQSection. Kept out of the component file so\n// it stays a components-only module (React Fast Refresh).\n\nexport interface FAQItem {\n  id: string;\n  question: string;\n  category: string;\n  answer: string;\n  /** Pure sunlit nature photography */\n  image: string;\n  location: string;\n  coordinates: string;\n  /** Dynamic morphing dimensions for Uniserve-style slow transition */\n  height: number;\n  maxWidth: number;\n  clipCut: string;\n}\n\nexport const FAQ_ITEMS: FAQItem[] = [\n  {\n    id: \"installation\",\n    category: \"CLI & Setup\",\n    question: \"How do I install and use components in my project?\",\n    answer:\n      \"Installing components takes seconds using the official shadcn CLI. The code drops straight into your repository as pure TypeScript and Tailwind CSS — with zero third-party wrapper dependencies or build configuration headaches.\",\n    image:\n      \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto/v1790224284/photo-1464822759023-fed622ff2c3b-1790145143491-1790224284663.webp\",\n    location: \"Mount Rainier National Park, Washington\",\n    coordinates: \"46.8523° N, 121.7603° W\",\n    height: 420,\n    maxWidth: 460,\n    clipCut: \"2.5rem\",\n  },\n  {\n    id: \"theming\",\n    category: \"Tailwind & Theming\",\n    question: \"Can I customize the colors, dark mode, and border radiuses?\",\n    answer:\n      \"Yes, absolutely. All components are architected around standard Tailwind CSS variables and OKLCH design tokens. Modifying your primary color, font family, or container radius automatically updates every component across both light and dark themes.\",\n    image:\n      \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto/v1790224284/photo-1448375240586-882707db888b-1790145143491-1790224284683.webp\",\n    location: \"Cascades Redwood Rainforest, Oregon\",\n    coordinates: \"43.7694° N, 122.5694° W\",\n    height: 340,\n    maxWidth: 530,\n    clipCut: \"2rem\",\n  },\n  {\n    id: \"licensing\",\n    category: \"MIT Licensing\",\n    question: \"Is Docs UI free to use for commercial client projects and SaaS?\",\n    answer:\n      \"Docs UI is 100% free and open-source under the permissive MIT license. You can use it in personal side projects, client portals, venture-backed SaaS applications, or commercial products with zero royalty fees or attribution requirements.\",\n    image:\n      \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto/v1790224285/photo-1507525428034-b723cf961d3e-1790146212208-1790224284653.webp\",\n    location: \"Big Sur Pacific Coastline, California\",\n    coordinates: \"36.2704° N, 121.8081° W\",\n    height: 390,\n    maxWidth: 480,\n    clipCut: \"2.75rem\",\n  },\n  {\n    id: \"performance\",\n    category: \"Performance & FPS\",\n    question: \"How do you achieve 60fps animations with zero layout shift?\",\n    answer:\n      \"Our motion components rely exclusively on GPU-accelerated CSS properties (translate3d, scale, opacity) and spring curves rendered as native CSS easing. We avoid animating height or layout reflow properties whenever possible, guaranteeing zero CLS and a 100% Lighthouse score.\",\n    image:\n      \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto/v1790224284/photo-1506744038136-46273834b3fb-1790146212208-1790224284681.webp\",\n    location: \"Tre Cime di Lavaredo, Italian Dolomites\",\n    coordinates: \"46.6186° N, 12.3028° E\",\n    height: 330,\n    maxWidth: 540,\n    clipCut: \"2rem\",\n  },\n];\n",
      "type": "registry:component",
      "target": "components/custom/blocks/faq-section-data.ts"
    }
  ],
  "docs": "Named export: FAQSection (also default export); AnimatedFAQBlock and the FAQItem type are also exported; the sample data FAQ_ITEMS lives in faq-section-data.ts, which installs alongside.",
  "categories": [
    "marketing",
    "layout"
  ],
  "type": "registry:component"
}