/* =========================================================
   v2 共通UIパーツ + 現行データ
   ========================================================= */

function SectionLabel({ number, title, sub }) {
  return (
    <div className="section-label">
      <span className="section-label__num">{number}</span>
      <div>
        <h2 className="section-label__title">{title}</h2>
        {sub && <p className="section-label__sub">{sub}</p>}
      </div>
    </div>
  );
}

function FormField({ label, required, hint, children, error }) {
  return (
    <div className="field">
      <label className="field__label">
        <span>{label}</span>
        {required ? <span className="field__req">必須</span> : <span className="field__opt">任意</span>}
      </label>
      {children}
      {hint && !error && <p className="field__hint">{hint}</p>}
      {error && <p className="field__error">{error}</p>}
    </div>
  );
}

function Tag({ label }) { return <span className="tag">{label}</span>; }

/* 現行のサーバー定義（画像 + 説明） */
const SERVERS = [
  { id: "アクアエイト",                           name: "アクアエイト",          description: "アクアスリムの後継モデル",  img: "assets/images/server_eight.png" },
  { id: "アクアスリムS",                          name: "アクアスリムS",         description: "卓上タイプ",                 img: "assets/images/server_slims.png", compact: true },
  { id: "アクアファブ 白",                        name: "アクアファブ 白",       description: "一番人気のモデル",           img: "assets/images/server_fabW.png" },
  { id: "アクアファブ 黒",                        name: "アクアファブ 黒",       description: "一番人気のモデル",           img: "assets/images/server_fabB.png" },
  { id: "ヘラルボニーデザインサーバー ドロップス", name: "ヘラルボニー ドロップス", description: "ヘラルボニーさんとのコラボ商品", img: "assets/images/heralbony_drops.png" },
  { id: "ヘラルボニーデザインサーバー かえでのチョキチョキ", name: "ヘラルボニー かえでのチョキチョキ", description: "ヘラルボニーさんとのコラボ商品", img: "assets/images/heralbony_chokichoki.png" },
  { id: "未定",                                   name: "未定",                  description: "相談しながら決めたい",       img: null },
];

/* form.js と同じロジック */
function isHeralbony(server) {
  return server && server.indexOf("ヘラルボニーデザインサーバー") !== -1;
}
function getSupportMonthly(server, plan) {
  if (!server || !plan || server === "未定" || plan === "未定") return null;
  const isDiscount = (plan === "2年割プラン" || plan === "子育てアクアプラン");
  if (isHeralbony(server)) return 1980;
  if (server === "アクアファブ 白" || server === "アクアファブ 黒") return isDiscount ? 1430 : 1650;
  if (server === "アクアエイト" || server === "アクアスリムS") return 1100;
  return null;
}
function getWaterPrice(bottle, plan) {
  if (!bottle || !plan || bottle === "未定" || plan === "未定") return null;
  const table = {
    "12L": { "通常プラン": 1728, "2年割プラン": 1620, "子育てアクアプラン": 1620 },
    "7L":  { "通常プラン": 1296, "2年割プラン": 1188, "子育てアクアプラン": 1188 },
  };
  return (table[bottle] || {})[plan] ?? null;
}

const BOTTLES = [
  { id: "12L",  name: "12L",  description: "しっかり使う方向け",     img: "assets/images/bottle_12.png" },
  { id: "7L",   name: "7L",   description: "軽くて交換しやすいボトル", img: "assets/images/bottle_7.png" },
  { id: "未定", name: "未定", description: "相談しながら決めたい",   img: null },
];

const PLANS = [
  { id: "2年割プラン",       name: "2年割プラン",       description: "2年毎の自動更新で料金が割り引かれるお得なプランです。",                              badge: "お得" },
  { id: "子育てアクアプラン", name: "子育てアクアプラン", description: "妊産婦から6歳以下の未就学のお子様がいるご家庭は毎月550円（税込）引き！", badge: "毎月割引" },
  { id: "通常プラン",         name: "通常プラン",         description: "最低1年利用の基本的なプランです。",                                                   badge: "基本" },
  { id: "未定",               name: "未定",               description: "相談しながら決めたい方はこちら。担当より最適な内容をご案内します。" },
];

const CONTACT_METHODS = ["メール", "電話", "どちらでも可"];

function yen(n) { return n.toLocaleString("ja-JP"); }

function ServerCard({ item, selected, onClick }) {
  return (
    <button type="button" onClick={onClick}
      className={"server-card " + (selected ? "is-selected" : "")} aria-pressed={selected}>
      <div className="server-card__thumb">
        {item.img
          ? <img src={item.img} alt={item.name} className={"server-card__img " + (item.compact ? "server-card__img--compact" : "")} />
          : <span className="server-card__q">?</span>}
        {selected && (
          <span className="server-card__check" aria-hidden>
            <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2">
              <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
            </svg>
          </span>
        )}
      </div>
      <div className="server-card__body">
        <p className="server-card__name">{item.name}</p>
        <p className="server-card__desc">{item.description}</p>
      </div>
    </button>
  );
}

function BottleCard({ item, selected, onClick }) {
  return (
    <button type="button" onClick={onClick}
      className={"bottle-card " + (selected ? "is-selected" : "")} aria-pressed={selected}>
      <div className="bottle-card__thumb">
        {item.img
          ? <img src={item.img} alt={item.name} className="bottle-card__img" />
          : <span className="bottle-card__q">?</span>}
      </div>
      <div className="bottle-card__body">
        <p className="bottle-card__name">{item.name}</p>
        <p className="bottle-card__desc">{item.description}</p>
      </div>
      {selected && (
        <span className="bottle-card__check" aria-hidden>
          <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2.4">
            <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
          </svg>
        </span>
      )}
    </button>
  );
}

function PlanCard({ item, selected, onClick }) {
  return (
    <button type="button" onClick={onClick}
      className={"plan-card " + (selected ? "is-selected" : "")} aria-pressed={selected}>
      <div className="plan-card__head">
        <p className="plan-card__name">{item.name}</p>
        {item.badge && <span className="plan-card__badge">{item.badge}</span>}
      </div>
      <p className="plan-card__desc">{item.description}</p>
      {selected && (
        <span className="plan-card__check" aria-hidden>
          <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2.4">
            <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
          </svg>
        </span>
      )}
    </button>
  );
}

/* 現行 index.php に含まれている規約本文（保持） */
const TERMS_TEXT = `1.インターネットで申込
この申込規約にご同意のうえ、専用フォームにてお申込みください。
2.申込について
アクアクララを申込みされる際には、申込者は申込みフォームに正確な個人情報を記入し、株式会社アクアクララ千代田にご提供いただく必要があります。 申込者は、自らの意思に基いて個人情報の提供についてご判断ください。なお、必要な個人情報を提供していただけない場合、アクアクララは当該申込みを受け付けません。
(ご提供いただいた個人情報の取り扱いに関しては、次項[個人情報の取り扱いについて]をご参照ください。)
3.通常プラン申込時のご注意
ご入会いただいてから1年以内に退会される際、途中解除料（9,900円（税込））が発生します。
ウォーターボトルの料金は、12L 1,728円／本（税込）、7L 1,296円／本（税込）となり、あんしんサポート料については、ご利用されるウォーターサーバーにより異なります。
4.2年割プラン申込時のご注意
2年割プランは2年毎のお申込みとなります。ウォーターサーバー設置の日から起算して2年以内（あるいは更新して2年以内）に解除した場合は、途中解除料（12,980円（税込））が発生します。本プラン規約終了の日までに本サーバー会員から担当加盟店宛に更新しない旨の連絡が無い限り、本プラン規約は2ヵ年自動更新されることとし、その後も同様とします。
ウォーターボトルの料金は割引価格が適用となり、あんしんサポート料については、ご利用されるウォーターサーバー毎に異なりますのでご確認ください。
ウォーターボトル　通常価格時：12L 1,728円／本（税込）、7L 1,296円／本（税込）
割引適用時：12L 1,620円／本（税込）、7L 1,188円／本（税込）
5.子育てアクアプラン申込み時のご注意
子育てアクアプラン（以下「本プラン」という）はアクアクララクラブの会員資格を取得した会員且つ、妊産婦、0～6歳以下の未就学児（以下「対象のお子様」という）がいらっしゃる方に限り適用いたします。
本プラン適用に際し、対象のお子様を確認するため、母子手帳・健康保険証・住民票・戸籍謄本・戸籍抄本のいずれかのご提示、もしくは複写（コピー）をご提出いただきます。
本プランの特典は、入会申込み特典（本会員になると同時に、本プランの適用を受け本プラン会員となった方が対象）は以下の内容となります。
①毎月ご利用額から550円（税込）割引（新規設置月は対象外となります）
②特典商品の進呈（時期により仕様、デザイン、内容等が異なる場合がございます）
本プランは2年毎の申込みとなります。プラン入会日から起算して2年以内（あるいは更新して2年以内）に本プランを解除した場合は途中解除料として12,980円（税込）をお支払いいただきます。本プラン適用から2ヵ年後までに本プランを更新しない旨の申し出が無い場合、本プランは対象期間中2ヵ年自動更新されることとし、その後も同様とします。ご利用期間中にご注文いただいたウォーターボトルの本数が月間2本（年間24本）未満の場合、本プランの更新をお断りさせていただく場合がございます。本プラン会員は、他の割引サービスや特別プランとの併用、重複は出来ません。
※ウォーターボトルの料金は、2年割プラン同様の割引価格が適用されます。
あんしんサポート料については、ご利用されるウォーターサーバー毎に異なりますのでご確認ください。
6.申込特典についてのご注意
申込特典はアクアクララを初めて申込みされる方限定の特典です。
過去にご利用になられていた方や現在ご利用中の方は適用いたしかねます。
7.申込みをお断りするケース
当社は、次の各号に該当する場合には、本サービスの利用申込を承諾しないことがあります。
（1）当社が、申込みに係る本サービスの提供または本サービスに係る機器（ウォーターサーバー等）の手配・保守が困難と判断した場合
（2）以前に当社との契約上の義務の履行を怠ったことがある等、申込者が当社との契約上の義務の履行を怠るおそれがある場合
（3）申込内容に虚偽記載・誤記・記入漏れがあった場合
（4）申込者が日本国内に在住していない場合
（5）申込者が当社の社会的信用を失墜させる態様で、本サービスを利用するおそれがある場合
（6）申込者による公序良俗に反する行為、又はそのおそれのある行為、もしくは公序良俗に反する情報を他の会員又は第三者に提供する行為が認められる場合
（7）申込者が暴力団関係者その他反社会的団体に属する者と認められる場合
（8）その他、当社が申込みを承諾することが相当でないと認める場合
8.申込みに関するお問合せ先
株式会社アクアクララ千代田
（営業時間　平日9：00～17：30）　電話 0120-074-032
[個人情報の取り扱いについて]
1.事業者の名称及び個人情報保護管理者
名称：株式会社アクアクララ千代田　個人情報保護管理者【電話03-5259-8035】
2.利用目的
ご入力頂いたお客様の個人情報を、(1)商品の申込み受付処理、(2)商品や景品の配達・発送、(3)商品・サービス・キャンペーン・メールマガジン・広告等の各種ご案内やダイレクトメール・電子メールを送付・配信するため、(4)業務上必要なご連絡をするため、(5)本人から請求の個人情報の開示等に応じるため、(6)第三者から取得した個人関連情報（cookie、ウェブ閲覧履歴等）を当社で保有する個人データと結合し成果確認および広告配信等の目的のために利用致します。
3.第三者提供について
上記利用(1)(2)(3)(4)目的達成のため、個人情報の取扱いに関して記載した契約を結んでいるアクアクララフランチャイズ本部へご入力頂いた個人情報の全てを、ネットワークを通じた方法等で提供致します。
4.委託について
必要な範囲内で個人情報の取扱いを外部の委託先に預ける場合がございます。
5.任意項目への入力について
申込み画面の個人情報の入力において任意項目の箇所がございますが、任意項目を入力しないことによりお客様に不利益が生じることはございません。
6.Cookieについて
当社のウェブサイトをより便利に閲覧して頂くため、「Cookie」という技術を使用しています。Cookieにより、ウェブサイトはお客様のコンピューターを識別することができるようになりますが、お客様本人を特定する情報を取得することはございません。また、ブラウザーの設定でクッキーの受取を拒否することが可能ですが、クッキーの受取を拒否することによりウェブサイトのご利用が正常にできない場合がありますのでご注意下さい。
7.開示対象個人情報の利用目的の通知・開示・訂正・追加・利用停止等について
開示対象個人情報の利用目的の通知・開示・訂正・追加・利用停止等については下記までお問合せ下さい。お客様本人と確認でき次第対応いたします。
株式会社アクアクララ千代田　（営業時間　平日9：00～17：30
電話:0120-074-032`;

Object.assign(window, {
  SectionLabel, FormField, Tag,
  SERVERS, BOTTLES, PLANS, CONTACT_METHODS, yen,
  ServerCard, BottleCard, PlanCard, TERMS_TEXT,
  isHeralbony, getSupportMonthly, getWaterPrice,
});