/* キャンペーンページ */

function CampaignPage() {
  const c = window.PSPO_SITE.campaign;
  return (
    <>
      <PageHero
        breadcrumb={[{ label: "キャンペーン" }]}
        title={c.name}
        lede={`${c.deadline_label}まで。お申込み時にコードをご提示ください。`}
      />

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

      <section className="section">
        <div className="container container-narrow">
          <SectionHead eyebrow="CAMPAIGN" title="キャンペーン詳細" />
          <table className="compare-table">
            <tbody>
              <tr><td>キャンペーン名</td><td>{c.name}</td></tr>
              <tr><td>適用期間</td><td>{c.deadline_label}までのお申込み</td></tr>
              <tr><td>適用コード</td><td style={{ fontFamily: "var(--f-mono)", fontWeight: 700 }}>{c.code}</td></tr>
              <tr><td>特典</td><td>{c.benefits.join("、")}</td></tr>
              <tr><td>対象</td><td>新規ご入会の方</td></tr>
              <tr><td>適用方法</td><td>お申込みフォームのキャンペーンコード欄にコードをご入力ください</td></tr>
            </tbody>
          </table>
        </div>
      </section>

      <section className="section section--alt">
        <div className="container container-narrow prose">
          <h2 className="section__title">注意事項</h2>
          <ul>
            <li>キャンペーンは予告なく変更・終了する場合があります。</li>
            <li>他のキャンペーンとの併用はできません。</li>
            <li>本キャンペーンは新規ご入会の方が対象です。再入会の方は対象外となる場合があります。</li>
            <li>適用コードは1人1回のみ使用可能です。</li>
          </ul>
        </div>
      </section>

      <section className="section">
        <div className="container u-text-center">
          <h2 className="section__title">この機会にぜひ。</h2>
          <div className="u-mt-6">
            <a className="btn btn--primary btn--lg" href="/join/">入会する →</a>
          </div>
        </div>
      </section>
    </>
  );
}