'use client' import { cn } from '@/lib/utils' import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion' import { OctagonAlert, Truck, WalletCards } from 'lucide-react' import Link from 'next/link' import { useEffect, useMemo, useState } from 'react' export function FAQs() { const faqItems = useMemo( () => [ { group: 'General', icon: , items: [ { id: 'item-1', question: 'How long does shipping take?', answer: 'Standard shipping takes 3-5 business days, depending on your location. Express shipping options are available at checkout for 1-2 business day delivery.', }, { id: 'item-2', question: 'What payment methods do you accept?', answer: 'We accept all major credit cards (Visa, Mastercard, American Express), PayPal, Apple Pay, and Google Pay. For enterprise customers, we also offer invoicing options.', }, { id: 'item-3', question: 'Can I change or cancel my order?', answer: 'You can modify or cancel your order within 1 hour of placing it. After this window, please contact our customer support team who will assist you with any changes.', }, { id: 'item-4', question: 'Do you offer gift wrapping?', answer: 'Yes, we offer gift wrapping options at checkout for an additional fee.', }, { id: 'item-5', question: 'How can I track my order?', answer: 'After your order ships, you will receive a shipping confirmation email with a tracking number to track your order.', }, ], }, { group: 'Shipping', icon: , items: [ { id: 'item-1', question: 'Do you ship internationally?', answer: 'Yes, we ship to many countries worldwide. Shipping costs and times vary based on the destination.', }, { id: 'item-2', question: 'What is your return policy?', answer: 'We offer a 30-day return policy for most items. Products must be in original condition with tags attached. Some specialty items may have different return terms, which will be noted on the product page.', }, { id: 'item-3', question: 'What are your shipping rates?', answer: 'Shipping rates vary based on the selected shipping speed and the destination of your order. You can view the rates at checkout.', }, ], }, { group: 'Payment', icon: , items: [ { id: 'item-1', question: 'What currencies do you accept?', answer: 'We accept payments in various currencies. The available currencies will be displayed at checkout based on your location.', }, { id: 'item-2', question: 'Is my payment information secure?', answer: 'Yes, we use industry-standard encryption to protect your payment information during the transaction process.', }, { id: 'item-3', question: 'Can I get a refund if I change my mind?', answer: 'Yes, you can request a refund within 14 days of receiving your order. The item must be in its original condition.', }, ], }, ], [] ) const groups = useMemo(() => faqItems.map((g) => g.group.toLowerCase()), [faqItems]) const [activeGroup, setActiveGroup] = useState(groups[0] ?? '') useEffect(() => { const sections = Array.from(document.querySelectorAll('[data-faq-group]')) if (sections.length === 0) return const observer = new IntersectionObserver( (entries) => { const visible = entries.filter((e) => e.isIntersecting).sort((a, b) => (b.intersectionRatio || 0) - (a.intersectionRatio || 0)) if (visible[0]) { const group = visible[0].target.getAttribute('data-faq-group') || '' if (group && group !== activeGroup) setActiveGroup(group) } }, { root: null, threshold: [0.35, 0.6, 0.8], rootMargin: '0px 0px -20% 0px', } ) sections.forEach((s) => observer.observe(s)) return () => observer.disconnect() }, [activeGroup]) return (

FAQs

Discover quick and comprehensive answers to common questions about our platform, services, and features.

{faqItems.map((item) => { const groupId = item.group.toLowerCase() const isActive = activeGroup === groupId return ( svg]:size-4', isActive ? 'bg-card ring-foreground/5 text-primary font-medium shadow-sm ring-1' : 'hover:text-foreground group-hover:bg-foreground/5')}> {item.icon} {item.group} ) })}

{faqItems.map((item) => (

{item.group}

{item.items.map((item) => ( {item.question}

{item.answer}

))}

) }

Modern Faqs blocks