'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>
  );
}