const Contact = () => {
  const [form, setForm] = React.useState({ name: "", company: "", email: "", subject: "consulting", message: "", website: "" });
  const [status, setStatus] = React.useState({ state: "idle", message: "" });
  // state: idle | sending | success | error

  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const onSubmit = async (e) => {
    e.preventDefault();
    if (status.state === "sending") return;

    setStatus({ state: "sending", message: "" });

    try {
      // reCAPTCHA v3 トークン取得
      let token = "";
      if (window.grecaptcha) {
        try {
          await new Promise((res) => window.grecaptcha.ready(res));
          token = await window.grecaptcha.execute("6LdwPNEsAAAAAD68QVRnvpylu6dgq-hjRvfHsSN-", { action: "contact" });
        } catch (e) {
          setStatus({ state: "error", message: "reCAPTCHAの読み込みに失敗しました。ページを再読込してお試しください。" });
          return;
        }
      }

      const fd = new FormData();
      Object.entries(form).forEach(([k, v]) => fd.append(k, v));
      fd.append("recaptcha_token", token);

      const res = await fetch("contact.php", { method: "POST", body: fd });
      const data = await res.json();

      if (data.success) {
        setStatus({ state: "success", message: data.message });
        setForm({ name: "", company: "", email: "", subject: "consulting", message: "", website: "" });
      } else {
        setStatus({ state: "error", message: data.message || "送信に失敗しました。" });
      }
    } catch (err) {
      setStatus({ state: "error", message: "通信エラーが発生しました。時間を空けて再度お試しください。" });
    }
  };

  const sending = status.state === "sending";

  return (
    <section className="section contact" id="contact">
      <div className="container">
        <div className="contact-card">
          <div className="contact-side">
            <div className="label">CONTACT</div>
            <h2>お気軽に、<br/>ご相談ください。</h2>
            <p>初回のご相談は無料です。<br/>「こんなことできますか？」というお声がけだけでも、お気軽にどうぞ。</p>
            <div className="contact-info">
              <div className="row"><div className="k">Mail</div><div className="v">info@fujisawa-planning.jp</div></div>
              <div className="row"><div className="k">Web</div><div className="v">fujisawa-planning.jp</div></div>
              <div className="row"><div className="k">Place</div><div className="v ja">〒761-0433<br/>香川県高松市十川西町239-1</div></div>
            </div>
          </div>

          <form className="contact-form" onSubmit={onSubmit} noValidate>
            <div className="field-row">
              <div className="field">
                <label>Name <span className="req">*</span></label>
                <input required value={form.name} onChange={update("name")} placeholder="藤澤 宏茂" disabled={sending} />
              </div>
              <div className="field">
                <label>Company</label>
                <input value={form.company} onChange={update("company")} placeholder="貴社名" disabled={sending} />
              </div>
            </div>

            <div className="field">
              <label>Email <span className="req">*</span></label>
              <input type="email" required value={form.email} onChange={update("email")} placeholder="you@example.com" disabled={sending} />
            </div>

            <div className="field">
              <label>Subject</label>
              <select value={form.subject} onChange={update("subject")} disabled={sending}>
                <option value="consulting">ITコンサルティングについて</option>
                <option value="doc">資料制作について</option>
                <option value="web">Web制作について</option>
                <option value="beans">FUJISAWA BEANSについて</option>
                <option value="other">その他</option>
              </select>
            </div>

            <div className="field">
              <label>Message <span className="req">*</span></label>
              <textarea required rows="5" value={form.message} onChange={update("message")} placeholder="ご相談内容をお聞かせください。" disabled={sending} />
            </div>

            {/* Honeypot — 人間には見えないダミー項目（スパム対策） */}
            <div className="hp-field" aria-hidden="true">
              <label>Website</label>
              <input type="text" tabIndex="-1" autoComplete="off" value={form.website} onChange={update("website")} />
            </div>

            {status.state === "success" && (
              <div className="form-msg form-msg-success">
                ✓ {status.message}
              </div>
            )}
            {status.state === "error" && (
              <div className="form-msg form-msg-error">
                {status.message}
              </div>
            )}

            <div className="contact-submit">
              <button type="submit" className="btn" disabled={sending}>
                {sending ? "送信中…" : "送信する"}
                <span className="arrow">→</span>
              </button>
            </div>

            <p className="recaptcha-notice">
              このサイトはreCAPTCHAによって保護されており、Googleの
              <a href="https://policies.google.com/privacy" target="_blank" rel="noopener noreferrer">プライバシーポリシー</a>と
              <a href="https://policies.google.com/terms" target="_blank" rel="noopener noreferrer">利用規約</a>が適用されます。
            </p>
          </form>
        </div>
      </div>
    </section>
  );
};

window.Contact = Contact;