function Contact() {
  const [form, setForm] = React.useState({
    name: "", email: "", kind: "trial", date: "", message: "",
  });
  const [sent, setSent] = React.useState(false);

  function handleSubmit(e) {
    e.preventDefault();
    setSent(true);
    // intentionally no real backend — UI kit demo
  }

  return (
    <section className="section contact-section" id="contact">
      <div className="section-inner narrow">
        <div className="section-head center">
          <div className="eyebrow">contact &nbsp;·&nbsp; お問い合わせ</div>
          <h2 className="section-title">ご予約・お問い合わせ</h2>
          <p className="section-sub">ご質問のみでも、お気軽にどうぞ。</p>
        </div>

        {sent ? (
          <div className="contact-thanks">
            <HankoStamp chars="承" size={56}/>
            <h3 className="h3">お問い合わせ、ありがとうございます。</h3>
            <p>内容を確認のうえ、{form.email || "ご連絡先"} まで折り返しご連絡いたします。<br/>少しのお時間、頂戴いたします。</p>
            <button className="btn btn-ghost btn-sm" onClick={() => setSent(false)}>もう一度送る</button>
          </div>
        ) : (
          <form className="contact-form" onSubmit={handleSubmit}>
            <label className="field">
              <div className="field-lbl">お名前</div>
              <input
                className="input"
                required
                value={form.name}
                onChange={(e) => setForm({ ...form, name: e.target.value })}
                placeholder="例：山田 花子"
              />
            </label>

            <label className="field">
              <div className="field-lbl">メールアドレス</div>
              <input
                className="input"
                type="email"
                required
                value={form.email}
                onChange={(e) => setForm({ ...form, email: e.target.value })}
                placeholder="name@example.com"
              />
            </label>

            <div className="field field-full">
              <div className="field-lbl">ご用件</div>
              <div className="radio-row">
                {[
                  { v: "trial",   l: "体験講座（¥500）" },
                  { v: "regular", l: "本講座（¥3,000）" },
                  { v: "order",   l: "命名書・色紙のご依頼" },
                  { v: "other",   l: "そのほか" },
                ].map(o => (
                  <label key={o.v} className={"radio-chip" + (form.kind === o.v ? " is-on" : "")}>
                    <input
                      type="radio"
                      name="kind"
                      value={o.v}
                      checked={form.kind === o.v}
                      onChange={() => setForm({ ...form, kind: o.v })}
                    />
                    {o.l}
                  </label>
                ))}
              </div>
            </div>

            <label className="field">
              <div className="field-lbl">ご希望の日程 <span className="opt">（任意）</span></div>
              <input
                className="input"
                value={form.date}
                onChange={(e) => setForm({ ...form, date: e.target.value })}
                placeholder="例：6月の土曜日、午後"
              />
            </label>

            <label className="field field-full">
              <div className="field-lbl">ご質問・ご要望</div>
              <textarea
                className="textarea"
                rows="5"
                value={form.message}
                onChange={(e) => setForm({ ...form, message: e.target.value })}
                placeholder="お気軽にお書きください…"
              />
            </label>

            <div className="contact-actions">
              <button type="submit" className="btn btn-primary btn-lg">
                送信する <span aria-hidden="true">→</span>
              </button>
              <p className="caption">※ いただいた情報は、ご返信目的のみに使用いたします。</p>
            </div>
          </form>
        )}
      </div>
    </section>
  );
}

Object.assign(window, { Contact });