// components/PlanosFAQ.jsx — FAQ específico de planos
const PlanosFAQ = () => {
  const items = [0,1,2,3,4,5].map(i => ({
    q: t('planos.faq.items.' + i + '.q'),
    a: t('planos.faq.items.' + i + '.a'),
  }));
  const [open, setOpen] = React.useState(0);
  return (
    <section className="p-faq" id="planos-faq">
      <div className="container faq-inner">
        <div className="faq-side">
          <span className="t-eyebrow">{t('planos.faq.eyebrow')}</span>
          <h2>{t('planos.faq.title')}</h2>
          <p className="faq-sub">
            {t('planos.faq.sub_a')} <a href="index.html#faq" className="link-inline">{t('planos.faq.sub_link')}</a>{t('planos.faq.sub_b')}
          </p>
          <a className="btn btn-ghost" href="mailto:suporte@memberai.pro">
            suporte@memberai.pro
          </a>
        </div>
        <div className="faq-list">
          {items.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>
  );
};