/* 入会案内ページ — Google Sites の入会マニュアル準拠 */

function JoinPage() {
  const c = window.PSPO_SITE.campaign;
  const joinUrl = window.PSPO_SITE.joinUrl;

  const steps = [
    {
      title: "申し込みスタート",
      body: "入会フォームの「入会する」ボタンをタップ。「お客さま情報入力」画面が開きます。",
    },
    {
      title: "基本情報を入力",
      body: "氏名（漢字・カナ）、性別、生年月日、電話番号、郵便番号、住所をご入力ください。",
    },
    {
      title: "顔写真を登録",
      body: "「画像を選択する」をタップ。スマホ内の顔写真を選択または撮影し、写真位置を調整して「この画像を使用」をタップ。背景はシンプルで顔全体が映るように。",
    },
    {
      title: "ログイン情報を設定",
      body: "メールアドレス・パスワードをご入力いただき、「会員登録して次へ」をタップ。",
    },
    {
      title: "認証メールを確認",
      body: "登録したメールアドレスに「メールアドレスの確認」が届きます。本文のURLをタップして認証完了画面で「プラン契約に進む」をタップ。",
    },
    {
      title: "店舗・プランの選択",
      body: "所属店舗（愛知県→ご利用店舗）を選択。契約プラン（ベーシックプランなど）を選び、入会日をカレンダーから選択して「次へ」。",
    },
    {
      title: "支払い・クーポン入力",
      body: "支払い方法を確認。「クーポンコードを入力する」にチェックし、コード入力欄にキャンペーンコードをご入力いただきます。",
    },
    {
      title: "最終確認・申込完了",
      body: "表示金額（クーポン割引適用状況含む）を確認。利用規約に同意して「プランを契約する」をタップで完了。",
    },
  ];

  return (
    <>
      <PageHero
        breadcrumb={[{ label: "入会案内" }]}
        title="入会案内"
        lede="完全 WEB 入会、所要時間 5〜10 分。入会当日からご利用いただけます。"
      />

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

      <section className="section">
        <div className="container">
          <SectionHead eyebrow="HOW TO JOIN" title="入会の流れ" lede="スマホ・PCから完結する完全WEB入会です。" />
          <div className="grid grid--4">
            {steps.slice(0, 4).map((s, i) => (
              <div key={i} className="step">
                <div className="step__num">0{i + 1}</div>
                <h3 className="step__title">{s.title}</h3>
                <p className="step__body">{s.body}</p>
              </div>
            ))}
          </div>
          <div className="grid grid--4" style={{ marginTop: 16 }}>
            {steps.slice(4).map((s, i) => (
              <div key={i + 4} className="step">
                <div className="step__num">0{i + 5}</div>
                <h3 className="step__title">{s.title}</h3>
                <p className="step__body">{s.body}</p>
              </div>
            ))}
          </div>
          <p className="u-text-mute u-text-center u-mt-6" style={{ fontSize: 13 }}>
            所要時間 5〜10 分程度
          </p>
        </div>
      </section>

      <section className="section section--alt">
        <div className="container container-narrow">
          <SectionHead eyebrow="PAYMENT" title="お支払い方法" />
          <table className="compare-table">
            <tbody>
              <tr><td>クレジットカード</td><td>毎月20日に引き落とし</td></tr>
              <tr><td>口座振替</td><td>毎月26日・27日（銀行休業日の場合は翌営業日）</td></tr>
              <tr><td>名義について</td><td>原則ご本人様名義の口座のみ。ご家族（親・子・配偶者）の場合は代表者様の口座も可。他人・法人名義は不可</td></tr>
              <tr><td>初月のお支払い</td><td>利用開始日によって日割り適応</td></tr>
              <tr><td>領収書</td><td>マイページの購入履歴から発行可能</td></tr>
            </tbody>
          </table>
        </div>
      </section>

      <section className="section">
        <div className="container container-narrow">
          <SectionHead eyebrow="CAMPAIGN CODE" title="キャンペーンコード" />
          <div className="card" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
            <div>
              <h3 className="card__title">{c.name}</h3>
              <p className="card__body">{c.deadline_label}までのお申込みに適用されます。</p>
            </div>
            <div style={{
              fontFamily: "var(--f-mono)", fontSize: 22, fontWeight: 700,
              padding: "10px 20px", background: "var(--c-coral-soft)", color: "var(--c-coral)",
              borderRadius: "var(--r-sm)", letterSpacing: "0.05em",
            }}>{c.code}</div>
          </div>
          <p className="u-text-mute u-mt-4" style={{ fontSize: 13 }}>
            ※ 契約後の割引追加等はできませんので、お申込み時にご入力ください。
          </p>
        </div>
      </section>

      <section className="section section--alt">
        <div className="container u-text-center">
          <h2 className="section__title">まずは見学・体験から、お気軽に。</h2>
          <p className="section__lede" style={{ marginInline: "auto" }}>
            見学はWEBからご予約いただけます。実際の席で集中の質を確認できます。
          </p>
          <div className="u-mt-6 u-flex u-flex-gap" style={{ justifyContent: "center", flexWrap: "wrap" }}>
            <a className="btn btn--primary btn--lg" href={joinUrl} target="_blank" rel="noopener">入会フォームへ →</a>
            <a className="btn btn--ghost btn--lg" href="/contact/">見学を申込む</a>
          </div>
        </div>
      </section>
    </>
  );
}