/* お問い合わせページ */

const { useState: useStateC } = React;

function ContactPage() {
  const [form, setForm] = useStateC({
    name: "", email: "", phone: "", category: "見学希望",
    location: "清城店", message: "", consent: false,
  });
  const [status, setStatus] = useStateC("idle");

  const update = (k) => (e) => {
    const v = e.target.type === "checkbox" ? e.target.checked : e.target.value;
    setForm({ ...form, [k]: v });
  };

  const submit = async (e) => {
    e.preventDefault();
    if (!form.consent) return;
    setStatus("sending");
    try {
      const res = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(form),
      });
      if (!res.ok) throw new Error("failed");
      setStatus("ok");
    } catch (err) {
      setStatus("error");
    }
  };

  return (
    <>
      <PageHero
        breadcrumb={[{ label: "お問い合わせ" }]}
        title="お問い合わせ"
        lede="見学のご予約、入会のご質問、ご相談など、お気軽にどうぞ。"
      />

      <section className="section">
        <div className="container container-narrow">
          {status === "ok" ? (
            <div className="card" style={{ textAlign: "center", padding: 48 }}>
              <h2 className="card__title">送信が完了しました</h2>
              <p className="card__body" style={{ marginTop: 12 }}>
                ご入力いただいた内容を確認の上、担当者よりご連絡いたします。<br/>
                通常2営業日以内にご返信いたします。
              </p>
              <a className="btn btn--ghost u-mt-6" href="/">トップへ戻る</a>
            </div>
          ) : (
            <form className="form-grid" onSubmit={submit}>
              <div className="form-row">
                <label>お名前<span className="req">*</span></label>
                <input type="text" required value={form.name} onChange={update("name")} />
              </div>
              <div className="form-row">
                <label>メールアドレス<span className="req">*</span></label>
                <input type="email" required value={form.email} onChange={update("email")} />
              </div>
              <div className="form-row">
                <label>電話番号</label>
                <input type="tel" value={form.phone} onChange={update("phone")} />
              </div>
              <div className="form-row">
                <label>お問い合わせ種別<span className="req">*</span></label>
                <select required value={form.category} onChange={update("category")}>
                  <option>見学希望</option>
                  <option>入会について</option>
                  <option>料金について</option>
                  <option>設備について</option>
                  <option>その他</option>
                </select>
              </div>
              <div className="form-row">
                <label>ご希望店舗</label>
                <select value={form.location} onChange={update("location")}>
                  <option>住吉店</option>
                  <option>清城店</option>
                  <option>知多半田駅前店</option>
                  <option>未定 / 相談したい</option>
                </select>
              </div>
              <div className="form-row">
                <label>お問い合わせ内容<span className="req">*</span></label>
                <textarea required value={form.message} onChange={update("message")} />
              </div>
              <div className="form-row" style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
                <input id="consent" type="checkbox" checked={form.consent} onChange={update("consent")} />
                <label htmlFor="consent" style={{ fontWeight: 400 }}>
                  <a href="/legal/privacy/">プライバシーポリシー</a>に同意します
                </label>
              </div>
              {status === "error" && (
                <p style={{ color: "var(--c-coral)", fontSize: 14 }}>
                  送信に失敗しました。時間をおいて再度お試しください。
                </p>
              )}
              <button type="submit" className="btn btn--primary btn--lg btn--block"
                disabled={!form.consent || status === "sending"}>
                {status === "sending" ? "送信中..." : "送信する"}
              </button>
            </form>
          )}
        </div>
      </section>
    </>
  );
}