/* Section 9 — FAQ */

const FAQS = [
  { q: '千葉県外でも対応できますか？',
    a: '可能です。freee専門＋オンライン運用が前提のため、全国のお客様にサービス提供しています。2020年の法人設立以来、千葉を拠点に約80社の顧問先をご支援してきた経緯から、千葉近郊の事例が多いのが特徴です。' },
  { q: '相談だけでも大丈夫？',
    a: 'もちろんです。無理な営業は一切しません。相談の結果「今の社労士でOK」となるケースもあります。まずはご状況をお聞かせください。' },
  { q: '各サービスの料金や詳細を知りたい',
    a: 'オマカセロウムくん（労務顧問）、オマカセ助成金申請、オマカセfreee導入、オマカセできない就業規則——それぞれの料金・範囲・契約までの流れ・よくある質問は、各サービスページに全公開しています。サービス一覧ページから選び方フローチャートもご覧いただけます。' }
];

const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="faq" id="faq" data-screen-label="09 FAQ">
      <div className="container">
        <div className="section-head" style={{alignItems:'center',textAlign:'center'}}>
          <Eyebrow>FAQ</Eyebrow>
          <h2>よくあるご質問</h2>
        </div>
        <div className="faq__list">
          {FAQS.map((f, i) => (
            <div className={`faq__item ${open===i?'open':''}`} key={i}>
              <button className="faq__q" onClick={() => setOpen(open===i?-1:i)}>
                <span className="qmark">Q.</span>
                <span>{f.q}</span>
                <span className="chev"><Arrow dir="d"/></span>
              </button>
              <div className="faq__a">{f.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.FAQ = FAQ;