initial

web/components/FAQ.tsx

@@ -0,0 +1,52 @@
+'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>
+  );
+}