"use client"; import { useRef, useState } from "react"; import { ChevronDownIcon } from "lucide-react"; import { AnimatePresence, motion, useInView, useReducedMotion } from "motion/react"; import { motionStagger, motionViewport } from "@/lib/motion-tokens"; import { cn } from "@/lib/utils"; import { faqItems, faqSplitHeader } from "../faqs-data"; import { SectionShell } from "@/components/layout-contract"; const spring = { type: "spring" as const, duration: 0.3, bounce: 0 }; const featuredItems = faqItems.slice(0, 6); export function FaqsCardGridSection() { const reduceMotion = useReducedMotion(); const ref = useRef(null); const inView = useInView(ref, motionViewport); const [openId, setOpenId] = useState(featuredItems[0]?.id ?? null); const itemVariants = reduceMotion ? { hidden: { opacity: 1 }, visible: { opacity: 1 } } : { hidden: { opacity: 0, filter: "blur(4px)", y: 8 }, visible: { opacity: 1, filter: "blur(0px)", y: 0, transition: spring }, }; return (

{faqSplitHeader.eyebrow}

Pick a topic

Card grid for scanners — expand one answer at a time without leaving the page rhythm.

{featuredItems.map((item, index) => { const isOpen = openId === item.id; return ( ); })}

); }