/* 料金プランページ */

function PricingPage() {
  const site = window.PSPO_SITE;
  const p = site.pricing;
  return (
    <>
      <PageHero
        breadcrumb={[{ label: "料金プラン" }]}
        title="料金プラン"
        lede="月額1プランのみ。シンプルでわかりやすい料金体系です。"
      />

      <section className="section">
        <div className="container">
          <PriceCard />
        </div>
      </section>

      <section className="section section--alt">
        <div className="container">
          <SectionHead eyebrow="DETAILS" title="料金詳細" />
          <table className="compare-table">
            <tbody>
              <tr><td>月額（税抜）</td><td>¥{p.monthly_taxex.toLocaleString()}</td></tr>
              <tr><td>月額（税込）</td><td>¥{p.monthly_tax.toLocaleString()}</td></tr>
              <tr><td>1日あたり目安</td><td>約 ¥{p.daily_estimate}</td></tr>
              <tr><td>入会金</td><td>¥0（キャンペーン中、通常時は規定額）</td></tr>
              <tr><td>事務手数料</td><td>¥0（キャンペーン中）</td></tr>
              <tr><td>支払い方法</td><td>{p.payment.join("、")}</td></tr>
              <tr><td>引き落とし日</td><td>クレジット: 毎月20日 / 口座振替: 毎月26日・27日</td></tr>
              <tr><td>初月料金</td><td>利用開始日によって日割り適応</td></tr>
              <tr><td>休会</td><td>最大6ヶ月間。申請月の翌々月から休会</td></tr>
              <tr><td>退会</td><td>マイページの退会フォームから手続き。1カ月前までに</td></tr>
              <tr><td>利用可能拠点</td><td>住吉店・清城店・知多半田駅前店</td></tr>
            </tbody>
          </table>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHead eyebrow="COMPARISON" title="他のサービスとの比較" />
          <table className="compare-table">
            <thead>
              <tr><th></th><th>P・SPO</th><th>一般的なジム</th><th>コワーキング</th></tr>
            </thead>
            <tbody>
              <tr><td>月額</td><td>¥4,980（税抜）</td><td>¥7,000〜¥15,000</td><td>¥10,000〜¥30,000</td></tr>
              <tr><td>営業時間</td><td>24時間</td><td>店舗による</td><td>平日昼が多い</td></tr>
              <tr><td>用途</td><td>ジム・ワーク・学び</td><td>運動のみ</td><td>仕事のみ</td></tr>
              <tr><td>席</td><td>個室・自由席・ラウンジ</td><td>—</td><td>共用席中心</td></tr>
              <tr><td>Wi-Fi</td><td>1Gbps 完備</td><td>—</td><td>あり</td></tr>
              <tr><td>拠点</td><td>3拠点 使い放題</td><td>1拠点</td><td>1拠点が一般的</td></tr>
            </tbody>
          </table>
        </div>
      </section>

      <section className="section section--alt">
        <div className="container">
          <CampaignBanner />
        </div>
      </section>

      <section className="section">
        <div className="container u-text-center">
          <h2 className="section__title">入会するには</h2>
          <p className="section__lede" style={{ marginInline: "auto" }}>
            まずは見学・体験から。実際の席で集中の質を確認できます。
          </p>
          <div className="u-mt-6 u-flex u-flex-gap" style={{ justifyContent: "center" }}>
            <a className="btn btn--primary btn--lg" href="/join/">入会する →</a>
            <a className="btn btn--ghost btn--lg" href="/contact/">見学を申込む</a>
          </div>
        </div>
      </section>
    </>
  );
}