function Contact() {
  const [submitted, setSubmitted] = React.useState(false);
  const [form, setForm] = React.useState({
    name: "", company: "", tel: "", email: "",
    kind: "とび・土工", message: "", agree: false,
  });
  const kinds = ["とび・土工", "足場", "解体", "土木", "住宅", "太陽光", "リフォーム", "造成", "その他"];

  function submit(e) {
    e.preventDefault();
    setSubmitted(true);
  }

  return (
    <section className="section contact" id="contact" data-screen-label="Contact">
      <div className="section-inner">
        <div className="contact-grid">
          <div>
            <div className="eyebrow-row">Contact · お問い合わせ</div>
            <h2 className="contact-left-title">
              現場のこと、<br/>
              まずは<span>お話</span>を。
            </h2>
            <p style={{ fontSize: 15, lineHeight: 1.95, color: "var(--fg-2)", margin: 0 }}>
              工事のご相談・お見積りは無料です。<br/>
              現場の規模、工期、ご予算など、まずは大まかな内容で構いません。
              担当者より折り返しご連絡いたします。
            </p>

            <div className="contact-channels">
              <a className="contact-channel" href="tel:0925867547">
                <div className="contact-channel-icon" style={{ background: "#34c759" }}><IconPhone size={22}/></div>
                <div className="contact-channel-body">
                  <div className="contact-channel-label">お電話で · phone</div>
                  <div className="contact-channel-value">092-586-7547</div>
                  <div className="contact-channel-sub">受付：月〜土　8:00 – 18:00</div>
                </div>
                <span className="contact-channel-arrow"><IconArrow size={18}/></span>
              </a>
              <a className="contact-channel" href="mailto:info@taishi-kensetsu.com">
                <div className="contact-channel-icon" style={{ background: "#007aff" }}><IconMail size={20}/></div>
                <div className="contact-channel-body">
                  <div className="contact-channel-label">メールで · mail</div>
                  <div className="contact-channel-value" style={{ fontSize: 17 }}>info@taishi-kensetsu.com</div>
                  <div className="contact-channel-sub">24時間受付・翌営業日にお返事</div>
                </div>
                <span className="contact-channel-arrow"><IconArrow size={18}/></span>
              </a>
              <a className="contact-channel" href="https://www.instagram.com/taishi_kensetsu/" target="_blank" rel="noreferrer">
                <div className="contact-channel-icon" style={{ background: "transparent", padding: 0, overflow: "hidden" }}><IconInstagram size={48}/></div>
                <div className="contact-channel-body">
                  <div className="contact-channel-label">SNSで · instagram</div>
                  <div className="contact-channel-value" style={{ fontSize: 17 }}>@taishi_kensetsu</div>
                  <div className="contact-channel-sub">現場の様子を発信しています</div>
                </div>
                <span className="contact-channel-arrow"><IconArrowUR size={18}/></span>
              </a>
              <a className="contact-channel contact-channel-line" href="https://lin.ee/KKtp6HT" target="_blank" rel="noreferrer">
                <div className="contact-channel-icon" style={{ background: "transparent", padding: 0, overflow: "hidden", borderRadius: 4 }}>
                  <img src="assets/line-icon.webp" alt="LINE" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>
                </div>
                <div className="contact-channel-body">
                  <div className="contact-channel-label">LINEで · line</div>
                  <div className="contact-channel-value" style={{ fontSize: 17 }}>大志建設 公式LINE</div>
                  <div className="contact-channel-sub">友だち追加してメッセージを送る</div>
                </div>
                <span className="contact-channel-arrow"><IconArrowUR size={18}/></span>
              </a>
            </div>
          </div>

          {submitted ? (
            <div className="contact-form">
              <div className="contact-success">
                <div className="contact-success-mark">
                  <div style={{ fontSize: 18 }}>受付</div>
                  <div style={{ fontSize: 10, letterSpacing: "0.18em", marginTop: 3 }}>thanks</div>
                </div>
                <h3>お問い合わせを承りました</h3>
                <p>
                  内容を確認のうえ、担当者より2営業日以内にご連絡いたします。<br/>
                  お急ぎの場合はお電話にてご連絡ください。
                </p>
                <button className="btn btn-ghost" style={{ marginTop: 16 }} onClick={() => { setSubmitted(false); setForm({ name: "", company: "", tel: "", email: "", kind: "とび・土工", message: "", agree: false }); }}>
                  別のお問い合わせを送る
                </button>
              </div>
            </div>
          ) : (
            <form className="contact-form" onSubmit={submit}>
              <div className="field">
                <label className="field-lbl">お名前<span className="req">必須</span></label>
                <input className="input" type="text" required placeholder="山田 太郎"
                  value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })}/>
              </div>
              <div className="field">
                <label className="field-lbl">会社名<span className="opt">任意</span></label>
                <input className="input" type="text" placeholder="株式会社〇〇"
                  value={form.company} onChange={(e) => setForm({ ...form, company: e.target.value })}/>
              </div>
              <div className="field">
                <label className="field-lbl">お電話番号<span className="req">必須</span></label>
                <input className="input" type="tel" required placeholder="090-0000-0000"
                  value={form.tel} onChange={(e) => setForm({ ...form, tel: e.target.value })}/>
              </div>
              <div className="field">
                <label className="field-lbl">メールアドレス<span className="opt">任意</span></label>
                <input className="input" type="email" placeholder="example@mail.com"
                  value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })}/>
              </div>
              <div className="field field-full">
                <label className="field-lbl">ご相談の種別<span className="req">必須</span></label>
                <select className="select" value={form.kind} onChange={(e) => setForm({ ...form, kind: e.target.value })}>
                  {kinds.map((k) => <option key={k} value={k}>{k}</option>)}
                </select>
              </div>
              <div className="field field-full">
                <label className="field-lbl">お問い合わせ内容<span className="req">必須</span></label>
                <textarea className="textarea" required placeholder="現場の場所、工期、規模、ご予算など、わかる範囲で構いません。"
                  value={form.message} onChange={(e) => setForm({ ...form, message: e.target.value })}></textarea>
              </div>
              <div className="contact-actions">
                <label style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 13, color: "var(--fg-2)", cursor: "pointer" }}>
                  <input type="checkbox" required checked={form.agree} onChange={(e) => setForm({ ...form, agree: e.target.checked })}/>
                  プライバシーポリシーに同意します
                </label>
                <button type="submit" className="btn btn-primary btn-lg">
                  この内容で送信する <IconArrow/>
                </button>
              </div>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Contact });