// ── FAQ ────────────────────────────────────────────
function FAQ() {
  const qas = [
    { q: 'マッサージ店との違いは何ですか？', a: '当院は「通院がむずかしい方」を対象に、ご自宅へお伺いする医療保険対応のマッサージです。リラクゼーション目的ではなく、機能の維持・改善を目的としています。' },
    { q: '介護保険の限度額を使ってしまいますか？', a: '訪問マッサージは医療保険での取り扱いのため、介護保険の支給限度額には影響しません。デイサービス等と併用いただけます。' },
    { q: '同意書は自分で用意するのですか？', a: 'いいえ。かかりつけ医へお願いする書類は当院で準備し、取得の流れもサポートします。ご家族の負担が少なくなるようお手伝いします。' },
    { q: '体験だけでも大丈夫ですか？', a: 'もちろんです。無料体験のみで終了しても問題ありません。無理な勧誘はいたしません。' },
    { q: '家族が離れて暮らしています。相談できますか？', a: 'はい。離れて暮らすご家族からのお問い合わせも多くいただきます。お電話・メールで状況をお聞きし、ご案内します。' },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" className="section">
      <div className="container" style={{ maxWidth: 820 }}>
        <div style={{ textAlign: 'center', marginBottom: 40 }}>
          <span className="eyebrow">FAQ</span>
          <h2 className="section-title">よくあるご質問</h2>
        </div>
        <div style={{ display: 'grid', gap: 12 }}>
          {qas.map((item, i) => (
            <div key={i} className="card" style={{ padding: 0, overflow: 'hidden' }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                width: '100%', textAlign: 'left', background: 'none', border: 'none', cursor: 'pointer',
                padding: '20px 24px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16
              }}>
                <span style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 16.5, color: 'var(--color-text-heading)' }}>
                  Q. {item.q}
                </span>
                <span style={{
                  flex: '0 0 auto', fontSize: 20, color: 'var(--color-primary-500)',
                  transform: open === i ? 'rotate(45deg)' : 'none', transition: 'transform .2s'
                }}>＋</span>
              </button>
              {open === i && (
                <div style={{ padding: '0 24px 22px', fontSize: 15.5 }}>{item.a}</div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}