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

function FAQ() {
  const items = [
    { q: "法務アウトソーシングは可能ですか？", a: "はい、LegalAgent は AI を活用した法務アウトソーシング(AI-BPO)を中核サービスとして提供しています。契約書レビューから法務戦略まで、貴社の法務部門の代替・補完として包括的にお引き受けします" },
    { q: "初回ご相談は有料ですか？", a: "30分のオンラインミーティングによる初回ご相談は無料で承っております。貴社の事業内容・法務体制をお伺いした上で、最適なご提案をいたします" },
    { q: "顧問契約の最低期間はありますか？", a: "契約期間は定めておりませんので、いつでも解約していただけます。月額料金プランは、未利用の月額料金を3ヶ月間繰り越し可能です" },
    { q: "料金体系を教えてください", a: "月額顧問プラン（Lite / Basic / Standard / Enterprise）と、スポット案件の固定価格制があります。M&A支援は対象会社・スコープに応じて個別お見積もりです。詳細はお問い合わせください" },
    { q: "英文契約にも対応していますか？", a: "はい、英文契約のレビュー・ドラフト・翻訳に対応しております。なお、英文の場合は日本語の場合と料金が異なりますので、別途お見積もりさせていただきます" },
    { q: "導入までどのくらいかかりますか？", a: "初回ご相談から、即日対応が可能です。詳しくはお問い合わせください" },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" className="faq section section--paper" data-screen-label="10 FAQ">
      <div className="container">
        <div className="faq__head reveal">
          <span className="eyebrow">FAQ</span>
          <h2 className="faq__title heading-jp">よくあるご質問</h2>
        </div>
        <div className="faq__list" data-reveal-stagger>
          {items.map((it, i) => (
            <div key={i} className={`faq__item ${open === i ? "is-open" : ""}`}>
              <button className="faq__q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span className="tag-num">Q.{String(i+1).padStart(2,"0")}</span>
                <span className="faq__q-text">{it.q}</span>
                <span className="faq__q-icon" aria-hidden="true">{open === i ? "−" : "+"}</span>
              </button>
              <div className="faq__a">
                <p>{it.a}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.FAQ = FAQ;