/* form.jsx — お問い合わせフォーム（送信機能なしUI） */

const ContactForm = () => {
  const [submitted, setSubmitted] = React.useState(false);
  const handleSubmit = (e) => {
    e.preventDefault();
    setSubmitted(true);
    setTimeout(() => {
      const el = document.getElementById("contact");
      if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
    }, 50);
  };

  return (
    <section className="form-section" id="contact">
      <div className="container">
        <Reveal className="section-head">
          <h2 className="section-title">お問い合わせ</h2>
          <p className="section-sub">下記フォームよりお気軽にお問い合わせください。担当者より2営業日以内にご返信いたします。</p>
        </Reveal>
        <Reveal delay={100}>
          <div className="form-card">
            {submitted && (
              <div className="form-success">
                ✓ お問い合わせ内容を送信しました（このサイトはサンプルのため実送信は行われません）
              </div>
            )}
            <form onSubmit={handleSubmit} noValidate>
              <div className="form-row">
                <label>お名前 <span className="req">必須</span></label>
                <input type="text" placeholder="例）港 太郎" required />
              </div>
              <div className="form-row">
                <label>メールアドレス <span className="req">必須</span></label>
                <input type="email" placeholder="例）example@minato-gyosei.jp" required />
              </div>
              <div className="form-row">
                <label>電話番号 <span className="opt">任意</span></label>
                <input type="tel" placeholder="例）090-1234-5678" />
              </div>
              <div className="form-row">
                <label>ご相談内容 <span className="req">必須</span></label>
                <select required defaultValue="">
                  <option value="" disabled>選択してください</option>
                  <option>許認可申請について</option>
                  <option>法人設立・運営サポート</option>
                  <option>相続・遺言サポート</option>
                  <option>車庫証明・自動車登録</option>
                  <option>契約書・内容証明</option>
                  <option>その他</option>
                </select>
              </div>
              <div className="form-row">
                <label>お問い合わせ詳細 <span className="req">必須</span></label>
                <textarea placeholder="ご相談内容の詳細をご記入ください" required />
              </div>
              <div className="form-submit">
                <button type="submit" className="btn btn-primary btn-lg">
                  <Icon name="mail" size={16} />送信する
                </button>
              </div>
            </form>
          </div>
        </Reveal>
      </div>
    </section>
  );
};

window.ContactForm = ContactForm;