// faq.jsx
function FAQ() {
  const [openIdx, setOpenIdx] = React.useState(0);
  return (
    <section className="faq" id="faq">
      <div className="container">
        <SectionHeader label="◤ FAQ" title={<>よくあるしつもん</>} subtitle="それでも解決しない場合は、公式LINEまたはお問い合わせフォームからどうぞ。" align="center" />
        <div className="faq-list">
          {window.FAQ_ITEMS.map((item, i) => (
            <div key={i} className={`faq-item ${openIdx === i ? 'open' : ''}`}>
              <button className="faq-q" onClick={() => setOpenIdx(openIdx === i ? -1 : i)}>
                <span className="q-mark">Q</span>
                <span style={{ flex: 1 }}>{item.q}</span>
                <span className="plus">+</span>
              </button>
              <div className="faq-a">{item.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { FAQ });