/* Her Nail — Apply flow (menu → form → confirm → thanks) */

function ApplyPage({ go, initialPlan }) {
  const [step, setStep] = React.useState(0);
  const [data, setData] = React.useState({
    plan: initialPlan || "relax",
    color: "rose",
    occasion: "",
    // recipient
    recipName: "", recipAge: "", recipCare: "自宅",
    venue: "", venueAddr: "",
    // sender
    senderName: "", senderRel: "娘", email: "", phone: "",
    // schedule
    date1: "", date2: "", notes: "",
    // gift
    surprise: "no",
    giftMessage: "",
    // honeypot (hidden from humans, bots fill this)
    website: "",
  });
  const update = (k, v) => setData(d => ({ ...d, [k]: v }));

  const steps = [
    { n: "01", label: "プラン選択", en: "PLAN" },
    { n: "02", label: "ご情報", en: "DETAILS" },
    { n: "03", label: "確認", en: "CONFIRM" },
    { n: "04", label: "完了", en: "DONE" },
  ];

  return (
    <div style={{ paddingTop: 120, background: "var(--cream)" }}>
      <section className="section" style={{ paddingTop: 60, paddingBottom: 40 }}>
        <div className="container" style={{ maxWidth: 980 }}>
          <div style={{ textAlign: "center", marginBottom: 40 }}>
            <div className="tag-en" style={{ color: "var(--rose-deep)" }}>— APPLICATION</div>
            <h1 className="h-display" style={{ marginTop: 16, fontSize: "clamp(28px, 3.6vw, 44px)" }}>お申込み</h1>
          </div>

          {/* Mother's Day Campaign Banner */}
          <div className="md-epigraph" style={{ marginBottom: 56 }}>
            <div className="md-epigraph-eyebrow">
              <span className="md-line"/>
              <span>MOTHER'S DAY 2026  ·  期間限定</span>
              <span className="md-line"/>
            </div>
            <div className="md-epigraph-title">母の日キャンペーン価格にて、お申込みいただけます。</div>
            <div className="md-epigraph-sub">〜 5月31日（日）までのお申込み分に適用されます 〜</div>
          </div>

          {/* Step bar */}
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, marginBottom: 56, borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
            {steps.map((s, i) => {
              const active = i === step;
              const done = i < step;
              return (
                <div key={s.n} style={{ padding: "24px 16px", textAlign: "center", borderRight: i < steps.length - 1 ? "1px solid var(--line)" : "none", background: active ? "var(--peach)" : done ? "var(--cream-2)" : "transparent" }}>
                  <div style={{ fontFamily: "var(--serif-en)", fontSize: 13, letterSpacing: "0.1em", color: active ? "var(--rose-deep)" : "var(--mute)" }}>
                    STEP {s.n}
                  </div>
                  <div style={{ fontFamily: "var(--serif-jp)", fontSize: 15, letterSpacing: "0.16em", marginTop: 6, color: active || done ? "var(--ink)" : "var(--mute)" }}>
                    {s.label}
                  </div>
                </div>
              );
            })}
          </div>

          {/* Content */}
          {step === 0 && <StepPlan data={data} update={update} onNext={()=>setStep(1)} />}
          {step === 1 && <StepDetails data={data} update={update} onBack={()=>setStep(0)} onNext={()=>setStep(2)} />}
          {step === 2 && <StepConfirm data={data} onBack={()=>setStep(1)} onSubmit={()=>setStep(3)} />}
          {step === 3 && <StepDone data={data} go={go} />}
        </div>
      </section>
    </div>
  );
}

function StepPlan({ data, update, onNext }) {
  const [errors, setErrors] = React.useState({});

  const handleNext = () => {
    const e = {};
    if (!data.occasion) e.occasion = "ご利用の機会を選択してください";
    if (Object.keys(e).length) { setErrors(e); return; }
    onNext();
  };

  const colors = [
    { k: "rose", label: "ローズ", hex: "#e8a7ae" },
    { k: "peach", label: "ピーチ", hex: "#efc4b8" },
    { k: "mint", label: "ミント", hex: "#bfd9cf" },
    { k: "lavender", label: "ラベンダー", hex: "#c8b8d4" },
    { k: "gold", label: "ゴールド", hex: "#c9a876" },
    { k: "pearl", label: "パール", hex: "#f0e6d6" },
  ];
  const occasions = ["母の日", "敬老の日", "お誕生日", "結婚記念日", "その他"];

  return (
    <div>
      {/* Honeypot — hidden from humans, bots fill this in */}
      <div style={{ position: "absolute", left: "-9999px", top: "-9999px", opacity: 0, pointerEvents: "none" }} aria-hidden="true">
        <input type="text" name="website" tabIndex="-1" autoComplete="off" value={data.website} onChange={e=>update("website", e.target.value)} />
      </div>

      {/* Plans */}
      <div style={{ marginBottom: 40 }}>
        <div className="tag-en" style={{ color: "var(--rose-deep)", marginBottom: 20 }}>01 — プランをお選びください</div>
        <div className="m-stack" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
          {PLANS.map((p, idx) => {
            const sel = data.plan === p.key;
            return (
              <button key={p.key} onClick={()=>update("plan", p.key)}
                style={{ padding: 20, textAlign: "left", background: sel ? "#fff" : "transparent", border: `1.5px solid ${sel ? "var(--rose-deep)" : "var(--line)"}`, cursor: "pointer", transition: "all 200ms", alignSelf: "start" }}>
                <div className={`cf ${p.cfClass} gift-card ${p.key === "premium" ? "gift-card-premium" : ""}`} style={{ aspectRatio: "1/1", marginBottom: 18, position: "relative", overflow: "hidden" }}>
                  <div className="gift-card-frame"/>
                  <div className="gift-card-brand">Her <em>Nail</em></div>
                  <div className="gift-card-no">N° {String(idx+1).padStart(2,"0")}</div>
                  <div className="gift-card-mono">
                    <div className="gift-card-mono-letter">{p.enName.charAt(0)}</div>
                    <div className="gift-card-mono-sub">{p.enName.toLowerCase()}</div>
                  </div>
                  <div className="gift-card-sign">— for her</div>
                  {p.key === "premium" && <div className="gift-card-sheen" aria-hidden="true"/>}
                  {sel && <div style={{ position: "absolute", top: 10, right: 10, padding: "6px 10px", background: "var(--rose-deep)", color: "#fff", fontFamily: "var(--sans)", fontSize: 10, letterSpacing: "0.2em", zIndex: 3 }}>SELECTED</div>}
                </div>
                <div className="tag-en" style={{ color: "var(--rose-deep)" }}>{p.tag}</div>
                <div style={{ fontFamily: "var(--serif-en)", fontSize: 26, fontWeight: 300, margin: "4px 0" }}>{p.enName}</div>
                <div style={{ fontFamily: "var(--serif-jp)", fontSize: 13, color: "var(--ink-soft)", letterSpacing: "0.14em" }}>{p.jpName}</div>
                <div style={{ marginTop: 14, display: "flex", alignItems: "baseline", gap: 10, flexWrap: "wrap" }}>
                  <span style={{ fontFamily: "var(--serif-en)", fontSize: 24, color: p.accent, fontWeight: 300, letterSpacing: "0.02em" }}>¥{p.price.toLocaleString()}</span>
                  <span style={{ fontFamily: "var(--serif-jp)", fontSize: 11, color: "var(--mute)", letterSpacing: "0.1em" }}>(税込)</span>
                </div>
                <div style={{ marginTop: 6, fontFamily: "var(--serif-jp)", fontSize: 10, color: "var(--mute)", letterSpacing: "0.14em" }}>
                  母の日キャンペーン価格 / 5月31日まで
                </div>
                <div style={{ marginTop: 16, paddingTop: 14, borderTop: "1px solid var(--line-soft)" }}>
                  <div className="tag-en" style={{ color: "var(--mute)", marginBottom: 10, fontSize: 9 }}>— PLAN CONTENTS</div>
                  {p.includes.map(group => (
                    <div key={group.head} style={{ marginBottom: 10 }}>
                      <div className="tag-en" style={{ color: p.accent, marginBottom: 5, fontSize: 9 }}>{group.head}</div>
                      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 3 }}>
                        {group.items.map(it => (
                          <li key={it} style={{ fontFamily: "var(--serif-jp)", fontSize: 11, lineHeight: 1.7, letterSpacing: "0.04em", color: "var(--ink-soft)", display: "flex", gap: 6, alignItems: "flex-start" }}>
                            <span style={{ color: p.accent, flexShrink: 0 }}>—</span>
                            <span>{it}</span>
                          </li>
                        ))}
                      </ul>
                    </div>
                  ))}
                </div>
              </button>
            );
          })}
        </div>
      </div>

      {/* Color */}
      <div style={{ marginBottom: 40 }}>
        <div className="tag-en" style={{ color: "var(--rose-deep)", marginBottom: 20 }}>02 — カラー（ご希望）</div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
          {colors.map(c => {
            const sel = data.color === c.k;
            return (
              <button key={c.k} onClick={()=>update("color", c.k)}
                style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 16px 10px 10px", border: `1px solid ${sel ? "var(--rose-deep)" : "var(--line)"}`, background: sel ? "#fff" : "transparent" }}>
                <span style={{ width: 22, height: 22, borderRadius: "50%", background: c.hex, border: "1px solid rgba(0,0,0,0.08)" }} />
                <span style={{ fontFamily: "var(--serif-jp)", fontSize: 13, letterSpacing: "0.1em" }}>{c.label}</span>
              </button>
            );
          })}
        </div>
        <p style={{ fontFamily: "var(--sans)", fontSize: 11, letterSpacing: "0.1em", color: "var(--mute)", marginTop: 12 }}>ギフトを受け取る方がお好きなカラーテイストを教えてください。お問い合わせ後に購入までに相談しながら決めていくので気軽にご希望をお伝えください。</p>
      </div>

      {/* Occasion */}
      <div style={{ marginBottom: 40 }}>
        <div className="tag-en" style={{ color: "var(--rose-deep)", marginBottom: 20 }}>03 — ご利用の機会 <span className="req">*</span></div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
          {occasions.map(o => (
            <button key={o} onClick={()=>{ update("occasion", o); setErrors(e=>({...e, occasion: undefined})); }}
              style={{ padding: "12px 20px", border: `1px solid ${data.occasion === o ? "var(--rose-deep)" : errors.occasion ? "#c9606a" : "var(--line)"}`, background: data.occasion === o ? "var(--rose-deep)" : "transparent", color: data.occasion === o ? "#fff" : "var(--ink-soft)", fontFamily: "var(--serif-jp)", fontSize: 13, letterSpacing: "0.12em" }}>
              {o}
            </button>
          ))}
        </div>
        {errors.occasion && <p style={{ fontFamily: "var(--sans)", fontSize: 11, color: "#c9606a", marginTop: 8, letterSpacing: "0.06em" }}>⚠ {errors.occasion}</p>}
      </div>

      <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 40 }}>
        <button className="btn btn-dark" onClick={handleNext}>
          <span>NEXT &nbsp; ご情報の入力へ</span><span>→</span>
        </button>
      </div>
    </div>
  );
}

function StepDetails({ data, update, onBack, onNext }) {
  const [errors, setErrors] = React.useState({});

  const handleNext = () => {
    const e = {};
    if (!data.recipName.trim()) e.recipName = "お名前を入力してください";
    if (!data.venueAddr.trim()) e.venueAddr = "ご住所を入力してください";
    if (!data.senderName.trim()) e.senderName = "お名前を入力してください";
    if (!data.email.trim()) e.email = "メールアドレスを入力してください";
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) e.email = "正しいメールアドレスを入力してください";
    if (!data.phone.trim()) e.phone = "電話番号を入力してください";
    if (Object.keys(e).length) { setErrors(e); return; }
    onNext();
  };

  const upd = (k, v) => { update(k, v); setErrors(e => ({ ...e, [k]: undefined })); };

  return (
    <div>
      {/* Recipient */}
      <Fieldset title="お婆様について" en="RECIPIENT — 贈られるお婆様">
        <div className="m-stack-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
          <Field label="お名前" required value={data.recipName} onChange={v=>upd("recipName", v)} error={errors.recipName} />
          <Field label="年齢" value={data.recipAge} onChange={v=>update("recipAge", v)} placeholder="例: 78" />
        </div>
        <div style={{ marginTop: 20 }} className="field">
          <label>ご訪問先 <span className="req">*</span></label>
          <div style={{ display: "flex", gap: 10 }}>
            {["自宅", "老人ホーム", "介護施設", "病院", "その他"].map(c => (
              <button key={c} onClick={()=>update("recipCare", c)}
                style={{ padding: "12px 18px", border: `1px solid ${data.recipCare === c ? "var(--rose-deep)" : "var(--line)"}`, background: data.recipCare === c ? "var(--rose-deep)" : "#fff", color: data.recipCare === c ? "#fff" : "var(--ink-soft)", fontFamily: "var(--serif-jp)", fontSize: 13, letterSpacing: "0.12em" }}>
                {c}
              </button>
            ))}
          </div>
        </div>
        {data.recipCare !== "自宅" && (
          <div style={{ marginTop: 20 }}>
            <Field label="施設名" value={data.venue} onChange={v=>update("venue", v)} placeholder="例: 〇〇老人ホーム" />
          </div>
        )}
        <div style={{ marginTop: 20 }}>
          <Field label="ご住所" required value={data.venueAddr} onChange={v=>upd("venueAddr", v)} placeholder="都道府県から番地まで" error={errors.venueAddr} />
        </div>
      </Fieldset>

      {/* Sender */}
      <Fieldset title="ご依頼主について" en="SENDER — 贈り主様">
        <div className="m-stack-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
          <Field label="お名前" required value={data.senderName} onChange={v=>upd("senderName", v)} error={errors.senderName} />
          <div className="field">
            <label>お婆様とのご関係</label>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
              {["娘", "息子", "孫", "嫁", "その他"].map(r => (
                <button key={r} onClick={()=>update("senderRel", r)}
                  style={{ padding: "11px 16px", border: `1px solid ${data.senderRel === r ? "var(--rose-deep)" : "var(--line)"}`, background: data.senderRel === r ? "var(--rose-deep)" : "#fff", color: data.senderRel === r ? "#fff" : "var(--ink-soft)", fontFamily: "var(--serif-jp)", fontSize: 13 }}>
                  {r}
                </button>
              ))}
            </div>
          </div>
        </div>
        <div className="m-stack-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, marginTop: 20 }}>
          <Field label="メールアドレス" required value={data.email} onChange={v=>upd("email", v)} type="email" error={errors.email} />
          <Field label="お電話番号" required value={data.phone} onChange={v=>upd("phone", v)} placeholder="090-0000-0000" error={errors.phone} />
        </div>
      </Fieldset>

      {/* Schedule */}
      <Fieldset title="ご希望日時（任意）" en="SCHEDULE — 訪問日時">
        <p style={{ fontFamily: "var(--sans)", fontSize: 11, letterSpacing: "0.1em", color: "var(--mute)", marginBottom: 16 }}>もし現時点でご希望の実施時期があれば教えてください。お問い合わせ後に購入までに相談しながら決めていくので気軽にご希望をお伝えください。</p>
        <div className="m-stack-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
          <Field label="第1希望" value={data.date1} onChange={v=>update("date1", v)} placeholder="例: 5月中旬ごろ" />
          <Field label="第2希望" value={data.date2} onChange={v=>update("date2", v)} placeholder="例: 6月以降でも可" />
        </div>
      </Fieldset>

      {/* Gift */}
      <Fieldset title="ギフト設定" en="GIFT OPTION — 贈りものとして">
        <div className="field">
          <label>サプライズでお贈りしますか？</label>
          <div style={{ display: "flex", gap: 10 }}>
            {[{v: "no", l: "通常（事前にお婆様へお伝え）"}, {v: "yes", l: "サプライズ（当日までお伝えしない）"}].map(o => (
              <button key={o.v} onClick={()=>update("surprise", o.v)}
                style={{ padding: "12px 20px", flex: 1, border: `1px solid ${data.surprise === o.v ? "var(--rose-deep)" : "var(--line)"}`, background: data.surprise === o.v ? "var(--rose-deep)" : "#fff", color: data.surprise === o.v ? "#fff" : "var(--ink-soft)", fontFamily: "var(--serif-jp)", fontSize: 13, letterSpacing: "0.12em" }}>
                {o.l}
              </button>
            ))}
          </div>
        </div>
        <div style={{ marginTop: 20 }} className="field">
          <label>メッセージカードにそえる言葉（任意）</label>
          <p style={{ fontFamily: "var(--sans)", fontSize: 11, letterSpacing: "0.1em", color: "var(--mute)", margin: "6px 0 10px" }}>もし現時点でご希望のメッセージがあれば教えてください。お問い合わせ後に購入までに変更可能です。</p>
          <textarea value={data.giftMessage} onChange={e=>update("giftMessage", e.target.value)} rows="3" placeholder="お婆ちゃん、いつまでも綺麗でいてね。" />
        </div>
      </Fieldset>

      {/* Notes */}
      <Fieldset title="備考" en="NOTES — その他のご相談">
        <div className="field">
          <textarea value={data.notes} onChange={e=>update("notes", e.target.value)} rows="4"
            placeholder="アレルギー、お体の状態、ご希望のデザインなど、事前にお伝えいただけると助かります。" />
        </div>
      </Fieldset>

      <div style={{ display: "flex", justifyContent: "space-between", marginTop: 40 }}>
        <button className="btn btn-ghost" onClick={onBack}>
          <span>← BACK</span><span></span>
        </button>
        <button className="btn btn-dark" onClick={handleNext}>
          <span>CONFIRM &nbsp; 入力内容の確認へ</span><span>→</span>
        </button>
      </div>
    </div>
  );
}

function Fieldset({ title, en, children }) {
  return (
    <fieldset style={{ border: "none", padding: 0, margin: "0 0 48px" }}>
      <legend style={{ padding: 0, marginBottom: 24 }}>
        <div className="tag-en" style={{ color: "var(--rose-deep)" }}>{en}</div>
        <div style={{ fontFamily: "var(--serif-jp)", fontSize: 22, marginTop: 6, letterSpacing: "0.16em" }}>{title}</div>
      </legend>
      {children}
    </fieldset>
  );
}

function Field({ label, required, value, onChange, type="text", placeholder, error }) {
  return (
    <div className="field">
      <label>{label} {required && <span className="req">*</span>}</label>
      <input type={type} value={value} onChange={e=>onChange(e.target.value)} placeholder={placeholder}
        style={error ? { borderColor: "#c9606a" } : {}}/>
      {error && <span style={{ fontFamily: "var(--sans)", fontSize: 11, color: "#c9606a", marginTop: 4, display: "block", letterSpacing: "0.06em" }}>⚠ {error}</span>}
    </div>
  );
}

function StepConfirm({ data, onBack, onSubmit }) {
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState(null);
  const plan = PLANS.find(p => p.key === data.plan);

  const handleSubmit = async () => {
    setSubmitting(true);
    setError(null);
    try {
      const res = await fetch("/api/send", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ ...data, honeypot: data.website }),
      });
      const text = await res.text();
      let json;
      try { json = JSON.parse(text); } catch { throw new Error("サーバーエラーが発生しました。時間をおいて再度お試しください。"); }
      if (!res.ok || json.error) throw new Error(json.error || "送信に失敗しました");
      onSubmit();
    } catch (e) {
      setError(e.message || "送信に失敗しました。時間をおいて再度お試しください。");
    } finally {
      setSubmitting(false);
    }
  };

  const rows = [
    ["プラン", `${plan.jpName} (${plan.enName}) — ¥${plan.price.toLocaleString()}`],
    ["カラー", data.color],
    ["ご利用機会", data.occasion],
    ["お婆様", `${data.recipName || "—"}  (${data.recipAge || "—"}歳)`],
    ["ご訪問先", `${data.recipCare}${data.venue ? " / " + data.venue : ""}`],
    ["ご住所", data.venueAddr || "—"],
    ["贈り主", `${data.senderName || "—"} (${data.senderRel})`],
    ["ご連絡先", `${data.email || "—"}  /  ${data.phone || "—"}`],
    ["第1希望", data.date1 || "—"],
    ["第2希望", data.date2 || "—"],
    ["サプライズ", data.surprise === "yes" ? "はい（当日まで伏せる）" : "いいえ"],
    ["メッセージ", data.giftMessage || "—"],
    ["備考", data.notes || "—"],
  ];

  return (
    <div>
      <div className="tag-en" style={{ color: "var(--rose-deep)", marginBottom: 20 }}>CONFIRM — ご入力内容の確認</div>
      <div style={{ background: "#fff", border: "1px solid var(--line)" }}>
        {rows.map(([k, v], i) => (
          <div key={k} style={{ display: "grid", gridTemplateColumns: "200px 1fr", padding: "20px 28px", borderTop: i === 0 ? "none" : "1px solid var(--line-soft)" }}>
            <div className="tag-en" style={{ color: "var(--brown)" }}>{k}</div>
            <div style={{ fontFamily: "var(--serif-jp)", fontSize: 15, letterSpacing: "0.08em", color: "var(--ink)", whiteSpace: "pre-wrap" }}>{v}</div>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 40, padding: 28, background: "var(--cream-2)", fontFamily: "var(--serif-jp)", fontSize: 13, lineHeight: 2, color: "var(--ink-soft)", letterSpacing: "0.08em" }}>
        ※ 上記内容でお申込みいただきます。お申込み後、担当ネイリストより2営業日以内にご連絡いたします。料金のお支払いは、訪問日時確定後に銀行振込にて承ります。
      </div>

      {error && (
        <div style={{ marginTop: 24, padding: "18px 24px", background: "#fff0f0", border: "1px solid #e8b4b8", fontFamily: "var(--serif-jp)", fontSize: 13, lineHeight: 1.9, color: "#8b3a42", letterSpacing: "0.06em" }}>
          ⚠ {error}
        </div>
      )}

      <div style={{ display: "flex", justifyContent: "space-between", marginTop: 40 }}>
        <button className="btn btn-ghost" onClick={onBack} disabled={submitting}><span>← EDIT</span><span></span></button>
        <button className="btn btn-dark" onClick={handleSubmit} disabled={submitting}
          style={{ opacity: submitting ? 0.7 : 1, cursor: submitting ? "wait" : "pointer" }}>
          {submitting
            ? <><span>送信中...</span><span style={{ display: "inline-block", width: 16, height: 16, border: "2px solid rgba(255,255,255,0.4)", borderTopColor: "#fff", borderRadius: "50%", animation: "spin 0.7s linear infinite" }}/></>
            : <><span>SUBMIT &nbsp; この内容で申し込む</span><span>→</span></>
          }
        </button>
      </div>
    </div>
  );
}

function StepDone({ data, go }) {
  const plan = PLANS.find(p => p.key === data.plan);
  return (
    <div style={{ textAlign: "center", padding: "40px 0 0" }}>
      <div style={{ width: 120, height: 120, borderRadius: "50%", margin: "0 auto", background: "var(--peach)", display: "flex", alignItems: "center", justifyContent: "center" }}>
        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">
          <path d="M5 12l4 4L19 7" stroke="#c97b87" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </div>
      <div className="tag-en" style={{ color: "var(--rose-deep)", marginTop: 36 }}>THANK YOU</div>
      <h2 className="h-display" style={{ marginTop: 16, fontSize: "clamp(28px, 3.4vw, 40px)" }}>
        お申込みを<br/>承りました。
      </h2>
      <p className="body-jp" style={{ maxWidth: 600, margin: "28px auto 0" }}>
        {data.senderName || "贈り主"}様、ありがとうございます。<br/>
        担当ネイリストより、2営業日以内に {data.email || "ご登録のメールアドレス"} へご連絡いたします。
      </p>
      <div style={{ marginTop: 40, display: "inline-flex", padding: "16px 28px", background: "var(--cream-2)", gap: 20, alignItems: "center" }}>
        <span className="tag-en" style={{ color: "var(--rose-deep)" }}>PLAN</span>
        <span style={{ fontFamily: "var(--serif-en)", fontSize: 20, fontWeight: 300 }}>{plan.enName}</span>
        <span style={{ fontFamily: "var(--serif-jp)", fontSize: 13, color: "var(--ink-soft)" }}>¥{plan.price.toLocaleString()}</span>
      </div>
      <div style={{ marginTop: 56 }}>
        <button className="btn btn-ghost" onClick={()=>go("home")}>
          <span>← BACK TO TOP</span><span></span>
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { ApplyPage, StepPlan, StepDetails, StepConfirm, StepDone, Fieldset, Field });