/* FAQ ページ — Google Sites の Q&A を完全収録 */

function FaqPage() {
  const categories = [
    {
      title: "入会について",
      items: [
        {
          q: "入会前に見学はできますか？",
          a: "可能です。WEBからご予約いただくことが可能です。",
        },
        {
          q: "入会したいのですが、どうしたらいいですか？",
          a: "完全WEB入会の流れになります。スマホ・PCからアクセスして顧客情報を入力し、メール本文内のURLをクリックして本入会手続きを完了します。その後、選択した利用開始日より利用開始となります。",
        },
        {
          q: "月の途中で入会する場合も月会費の全額が必要ですか？",
          a: "利用開始日によって日割りが適応されます。",
        },
        {
          q: "クレジットカード支払いはできますか？",
          a: "対応しております。月々の会費は引き落としまたはクレジットカード決済からお選びいただけます。",
        },
        {
          q: "月会費の引き落とし日はいつですか？",
          a: "クレジット決済は毎月20日、口座振替は毎月26日・27日となります（銀行休業日の場合は翌営業日）。",
        },
        {
          q: "別名義での口座登録はできますか？",
          a: "原則ご本人様名義の口座で登録いただきます。ご家族（親・子・配偶者）の場合のみ代表者様の口座での登録をお受けしており、他人や法人名義の口座登録は承れません。",
        },
        {
          q: "領収書は発行できますか？",
          a: "マイページより発行可能です。マイページ下部の購入履歴からお手続きください。",
        },
      ],
    },
    {
      title: "施設利用について",
      items: [
        {
          q: "利用制限（時間帯ごとなど）はありますか？",
          a: "365日、店舗ごとの営業時間にていつでもご利用いただけます。ただし気象・災害や施設点検等により営業が困難な場合は休業させていただくことがあります。",
        },
        {
          q: "お正月も開いていますか？",
          a: "はい、営業しております。ただしスタッフ不在の時間帯がございます。",
        },
        {
          q: "飲食はできますか？",
          a: "原則カフェエリアのみご飲食いただけます。スタディルームではお菓子を含めて食事禁止ですが、ペットボトル・水筒などの水分補給は可能です。",
        },
        {
          q: "2拠点はどれも同じ会員証で使えますか？",
          a: "はい、月額会員になるとすべての拠点をご利用いただけます。",
        },
      ],
    },
    {
      title: "退会・休会について",
      items: [
        {
          q: "退会したい時は、どのようにすればよいですか？",
          a: "マイページの退会フォームよりお手続きください。返金等は行いません。1カ月前までの手続きにご協力ください。再入会時は入会金・事務手数料が必要となります。",
        },
        {
          q: "休会したい時は、どのようにすればよいですか？",
          a: "休会は最大6ヶ月間で、申請月の翌々月からの休会となります。5カ月以内はお問い合わせ、6ヶ月の場合はマイページから手続きください。6ヶ月を超える場合は延長申請が必要です。",
        },
      ],
    },
  ];

  return (
    <>
      <PageHero
        breadcrumb={[{ label: "よくある質問" }]}
        title="よくある質問"
        lede="P・SPO CHITACOH へのご質問にお答えします。"
      />

      <section className="section">
        <div className="container container-narrow">
          {categories.map((cat, i) => (
            <div key={i} style={{ marginBottom: 48 }}>
              <h2 className="section__title" style={{ fontSize: 22, marginBottom: 16 }}>{cat.title}</h2>
              {cat.items.map((it, j) => <FaqItem key={j} q={it.q} a={it.a} />)}
            </div>
          ))}
          <div className="u-text-center u-mt-8">
            <p className="u-text-mute" style={{ marginBottom: 16 }}>
              他にご質問がありましたら、お気軽にお問い合わせください。
            </p>
            <a className="btn btn--primary" href="/contact/">お問い合わせ →</a>
          </div>
        </div>
      </section>
    </>
  );
}