/* global React */
const { useState: useFAQState } = React;

function FAQ() {
  const [open, setOpen] = useFAQState(0);
  const items = [
    { q: "申込み方法は？", a: "LINE からお申込みいただけます。まずは無料説明動画をご覧いただいた上で、ご検討ください。" },
    { q: "オンライン受講は可能ですか？", a: "基本はリアル参加を推奨しております。ご事情がある場合はご相談ください。個別に対応方法をご案内します。" },
    { q: "商材の準備は必要ですか？", a: "初期に必要な商材はこちらで提供いたしますので、事前のご準備は不要です。" },
    { q: "卒業後のサポートは？", a: "無料のオンラインサポートをご用意しています。卒業後も継続的に相談・フォローが可能です。" },
    { q: "支払い方法は？", a: "一括払いもしくは分割払いに対応しております。詳細は説明時にご案内します。" },
  ];
  return (
    <section id="faq" className="faq">
      <div className="container">
        <div className="section-head">
          <div className="label-col">
            <div className="num">10</div>
            <div className="eyebrow">FAQ</div>
            <div className="hr"></div>
            <div className="kicker-jp">よくある質問</div>
          </div>
          <div>
            <div className="section-title">
              経営者から<br/>
              よくいただく<em>質問</em>。
            </div>
          </div>
        </div>
        <div className="faq-list">
          {items.map((it, i) => (
            <div className={`faq-item ${open === i ? "open" : ""}`} key={i}>
              <button className="q" onClick={() => setOpen(open === i ? -1 : i)}>
                <div className="num">{String(i+1).padStart(2, "0")}</div>
                <div className="qt">{it.q}</div>
                <div className="toggle"></div>
              </button>
              <div className="a"><div className="a-inner">{it.a}</div></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.FAQ = FAQ;