// components/FAQ.jsx
const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  // 10 FAQ items, looked up by index from the dictionary.
  const FAQS = Array.from({ length: 10 }).map((_, i) => ({
    q: t('faq.items.' + i + '.q'),
    a: t('faq.items.' + i + '.a'),
  }));
  const email = t('faq.contact_email');

  return (
    <section className="faq" id="faq">
      <div className="container faq-inner">
        <div className="faq-side">
          <span className="t-eyebrow">{t('faq.eyebrow')}</span>
          <h2>{t('faq.title')}</h2>
          <p className="faq-sub">{t('faq.sub')}</p>
          <a className="btn btn-ghost" href={"mailto:" + email}>{email}</a>
        </div>
        <div className="faq-list">
          {FAQS.map((f, i) => (
            <div key={i} className={"faq-item " + (i === open ? 'is-open' : '')}>
              <button className="faq-q" onClick={() => setOpen(i === open ? -1 : i)}>
                <span className="faq-num mono">{String(i+1).padStart(2,'0')}</span>
                <span className="faq-qtext">{f.q}</span>
                <span className="faq-chev">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 6l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </span>
              </button>
              <div className="faq-a">
                <p>{f.a}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};