52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
'use client';
|
||
import { useState } from 'react';
|
||
import { track } from '@/lib/analytics';
|
||
|
||
export type QA = {
|
||
q: string;
|
||
a: string;
|
||
};
|
||
|
||
export default function FAQ({ items }: { items: QA[] }) {
|
||
const [open, setOpen] = useState<number | null>(0);
|
||
|
||
const toggleItem = (index: number) => {
|
||
if (open === index) {
|
||
setOpen(null);
|
||
} else {
|
||
setOpen(index);
|
||
track('accordion_open', { question: items[index].q });
|
||
}
|
||
};
|
||
|
||
return (
|
||
<section aria-labelledby="faq-heading" className="py-24 bg-white">
|
||
<div className="container-custom">
|
||
<h2 id="faq-heading" className="font-heading font-bold text-3xl text-center mb-12">
|
||
Frequently Asked Questions
|
||
</h2>
|
||
<div className="max-w-3xl mx-auto space-y-4">
|
||
{items.map((it, i) => (
|
||
<div key={i} className="card">
|
||
<button
|
||
className="w-full text-left flex items-center justify-between hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-brand-green focus:ring-inset rounded-card"
|
||
aria-expanded={open === i}
|
||
onClick={() => toggleItem(i)}
|
||
>
|
||
<span className="font-heading font-semibold text-lg text-brand-dark">{it.q}</span>
|
||
<span className="text-brand-green text-xl font-bold">
|
||
{open === i ? '−' : '+'}
|
||
</span>
|
||
</button>
|
||
{open === i && (
|
||
<div className="mt-4 text-gray-600 leading-relaxed font-body">
|
||
{it.a}
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
} |