{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "frequently-asked-questions-stack",
  "type": "registry:block",
  "title": "Frequently asked questions Stack",
  "description": "A modern FAQ section with layered stack design and smooth scroll-triggered animations.",
  "author": "Ahdeetai <https://aditya.is-cool.dev>",
  "registryDependencies": ["@scrollxui/layer-stack", "@scrollxui/progress"],
  "dependencies": [],
  "files": [
    {
      "type": "registry:component",
      "path": "registry/blocks/frequently-asked-questions/frequently-asked-questions-stack.tsx",
      "content": "'use client';\n\nimport { motion } from 'motion/react';\nimport { cn } from '@/lib/utils';\nimport { LayerStack, Card } from '@/components/ui/layer-stack';\n\ninterface FAQItem {\n  question: string;\n  answer: string;\n}\n\ninterface FrequentlyAskedQuestionsStackProps {\n  title?: string;\n  description?: string;\n  data?: FAQItem[];\n  className?: string;\n  supportEmail?: string;\n}\n\nconst defaultFAQs: FAQItem[] = [\n  {\n    question: 'What is the purpose of this website?',\n    answer:\n      'We help you find the best products and services by curating top-quality offerings so you can make informed decisions fast.',\n  },\n  {\n    question: 'How do I contact support?',\n    answer:\n      'Email us at support@example.com or use the live chat in the bottom-right corner. We respond within 24 hours on business days.',\n  },\n  {\n    question: 'How do I find the best products?',\n    answer:\n      'Use the search bar to browse by category, keyword, or brand. Filter by rating, price, and availability to narrow down your options.',\n  },\n  {\n    question: 'Can I return a product?',\n    answer:\n      'Yes, we offer a hassle-free 30-day return policy. Go to your order history, select the item, and follow the steps. Refunds take 5–7 business days.',\n  },\n  {\n    question: 'Do you offer international shipping?',\n    answer:\n      'We ship to over 50 countries. Rates and estimated delivery times are calculated at checkout based on your location.',\n  },\n  {\n    question: 'How can I track my order?',\n    answer:\n      \"Once dispatched, you'll receive a confirmation email with a tracking number to follow your package in real time.\",\n  },\n];\n\nexport default function FrequentlyAskedQuestionsStack({\n  title = 'Frequently asked questions',\n  description = \"We are here to help you with any questions you may have. If you don't find what you need, please contact us.\",\n  data = defaultFAQs,\n  className,\n  supportEmail = 'support@example.com',\n}: FrequentlyAskedQuestionsStackProps) {\n  const words = title.split(' ');\n\n  return (\n    <section className={cn('relative w-full overflow-hidden py-24', className)}>\n      <div className='mx-auto max-w-5xl px-6'>\n        <h1 className='relative z-10 mx-auto max-w-4xl text-center text-3xl font-bold tracking-tight text-zinc-800 md:text-5xl lg:text-6xl dark:text-zinc-100'>\n          {words.map((word, index) => (\n            <motion.span\n              key={`${word}-${index}`}\n              initial={{ opacity: 0, filter: 'blur(6px)', y: 12 }}\n              whileInView={{ opacity: 1, filter: 'blur(0px)', y: 0 }}\n              viewport={{ once: true }}\n              transition={{\n                duration: 0.4,\n                delay: index * 0.08,\n                ease: 'easeInOut',\n              }}\n              className='mr-2 inline-block'\n            >\n              {word}\n            </motion.span>\n          ))}\n        </h1>\n\n        <motion.p\n          initial={{ opacity: 0 }}\n          whileInView={{ opacity: 1 }}\n          viewport={{ once: true }}\n          transition={{ duration: 0.5, delay: 0.4 }}\n          className='relative z-10 mx-auto mt-6 max-w-2xl text-center text-base text-zinc-500 dark:text-zinc-400 md:text-lg'\n        >\n          {description}{' '}\n          <a\n            href={`mailto:${supportEmail}`}\n            className='text-primary underline underline-offset-4 hover:opacity-80 transition-opacity'\n          >\n            {supportEmail}\n          </a>\n        </motion.p>\n\n        <motion.div\n          initial={{ opacity: 0, y: 20 }}\n          whileInView={{ opacity: 1, y: 0 }}\n          viewport={{ once: true }}\n          transition={{ duration: 0.5, delay: 0.5 }}\n          className='mt-16'\n        >\n          <LayerStack\n            cardWidth={360}\n            cardGap={16}\n            stageHeight={320}\n            lastCardFullWidth={true}\n            mobileSensitivity={1.8}\n          >\n            {data.map((item, index) => {\n              const isLast = index === data.length - 1;\n\n              if (isLast) {\n                return (\n                  <Card\n                    key={index}\n                    className='bg-card text-foreground border border-border overflow-hidden'\n                  >\n                    <div className='flex h-full flex-col justify-between p-6 md:p-8 gap-4'>\n                      <div className='flex items-center justify-between'>\n                        <span className='text-[11px] font-medium tracking-[0.16em] uppercase text-muted-foreground'>\n                          {String(index + 1).padStart(2, '0')}\n                        </span>\n                        <div className='size-1.5 rounded-full bg-foreground/20 dark:bg-foreground/40' />\n                      </div>\n                      <div className='space-y-3 flex-1'>\n                        <div className='h-px w-8 bg-border' />\n                        <h3 className='text-xl md:text-2xl font-semibold tracking-tight leading-tight'>\n                          {item.question}\n                        </h3>\n                        <p className='text-sm leading-relaxed text-muted-foreground'>\n                          {item.answer}\n                        </p>\n                      </div>\n                      <div className='pt-3 border-t border-border'>\n                        <p className='text-[10px] tracking-[0.14em] uppercase text-muted-foreground'>\n                          Question {index + 1} of {data.length}\n                        </p>\n                      </div>\n                    </div>\n                  </Card>\n                );\n              }\n\n              return (\n                <Card\n                  key={index}\n                  className='bg-card text-foreground border border-border overflow-hidden'\n                >\n                  <div className='flex h-full flex-col justify-between p-6 md:p-8 gap-4'>\n                    <div className='flex items-center justify-between'>\n                      <span className='text-[11px] font-medium tracking-[0.16em] uppercase text-muted-foreground'>\n                        {String(index + 1).padStart(2, '0')}\n                      </span>\n                      <div className='size-1.5 rounded-full bg-foreground/20 dark:bg-foreground/40' />\n                    </div>\n\n                    <div className='space-y-3 flex-1'>\n                      <div className='h-px w-8 bg-border' />\n                      <h3 className='text-xl md:text-2xl font-semibold tracking-tight leading-tight'>\n                        {item.question}\n                      </h3>\n                      <p className='text-sm leading-relaxed text-muted-foreground'>\n                        {item.answer}\n                      </p>\n                    </div>\n\n                    <div className='pt-3 border-t border-border'>\n                      <p className='text-[10px] tracking-[0.14em] uppercase text-muted-foreground'>\n                        Question {index + 1} of {data.length}\n                      </p>\n                    </div>\n                  </div>\n                </Card>\n              );\n            })}\n          </LayerStack>\n        </motion.div>\n      </div>\n    </section>\n  );\n}"
    }
  ]
}