/* global React */
const { useState: useFooterState } = React;

function Footer() {
  const [status, setStatus] = useFooterState(null);
  const [errorMsg, setErrorMsg] = useFooterState("");

  const handleSubmit = async (e) => {
    e.preventDefault();
    const form = e.currentTarget;
    const data = new FormData(form);
    setStatus("submitting");
    setErrorMsg("");
    try {
      const res = await fetch("https://formspree.io/f/xaqveqnr", {
        method: "POST",
        body: data,
        headers: { Accept: "application/json" },
      });
      if (res.ok) {
        setStatus("success");
        form.reset();
      } else {
        const json = await res.json().catch(() => ({}));
        const msg = json && json.errors
          ? json.errors.map((er) => er.message).join("、")
          : "送信に失敗しました。時間をおいて再度お試しください";
        setErrorMsg(msg);
        setStatus("error");
      }
    } catch (err) {
      setErrorMsg("ネットワークエラーが発生しました。通信状況をご確認ください");
      setStatus("error");
    }
  };

  return (
    <footer id="contact" className="footer section section--ink" data-screen-label="11 Contact & Footer">
      <div className="container">
        <div className="footer__cta">
          <div className="footer__cta-text">
            <span className="eyebrow">Contact</span>
            <h2 className="footer__cta-title heading-jp">
              <em>初回ご相談</em>は、<br/>無料です
            </h2>
            <p className="footer__cta-lede body-jp">
              貴社の事業内容・法務体制をお伺いした上で、最適なご提案をいたします<br/>
              初回のご相談の時間の範囲内であれば、法的な回答も致します<br/>
              オンラインミーティングにて、お気軽にご相談ください
            </p>
            <div className="footer__cta-actions">
              <a href="#contact-form" className="btn btn--gold">
                お問い合わせフォームへ
                <svg className="arrow" width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.2"/></svg>
              </a>
              <a href="#services" className="btn btn--ghost-dark">
                サービスを見る
              </a>
            </div>
          </div>
          <aside className="footer__cta-aside">
            <div className="footer__cta-aside-inner">
              <span className="kicker-en">Process</span>
              <h3>ご相談の流れ</h3>
              <ol className="footer__cta-aside-steps">
                <li><span>01</span>お問い合わせフォームよりご連絡</li>
                <li><span>02</span>30分の無料オンラインミーティング</li>
                <li><span>03</span>最適なプランをご提案</li>
                <li><span>04</span>即日から対応可能</li>
              </ol>
            </div>
          </aside>
        </div>

        {/* ===== Contact Form ===== */}
        <div id="contact-form" className="footer__form-wrap">
          <div className="footer__form-head">
            <span className="kicker-en">Contact Form</span>
            <h3 className="footer__form-title heading-jp">お問い合わせ</h3>
            <p className="footer__form-lede body-jp">
              下記フォームよりお気軽にご連絡ください。<br/>
              通常2営業日以内にご返信いたします。
            </p>
          </div>
          <form className="footer__form" action="https://formspree.io/f/xaqveqnr" method="POST" onSubmit={handleSubmit}>
            <div className="footer__form-grid">
              <label className="footer__field">
                <span className="footer__field-label">会社名 <em>必須</em></span>
                <input type="text" name="company" required placeholder="株式会社LegalAgent" />
              </label>
              <label className="footer__field">
                <span className="footer__field-label">お名前 <em>必須</em></span>
                <input type="text" name="name" required placeholder="山田 太郎" />
              </label>
              <label className="footer__field">
                <span className="footer__field-label">メールアドレス <em>必須</em></span>
                <input type="email" name="email" required placeholder="example@company.co.jp" />
              </label>
              <label className="footer__field">
                <span className="footer__field-label">お電話番号</span>
                <input type="tel" name="phone" placeholder="03-0000-0000" />
              </label>
              <label className="footer__field footer__field--full">
                <span className="footer__field-label">ご相談内容 <em>必須</em></span>
                <select name="topic" required defaultValue="">
                  <option value="" disabled>選択してください</option>
                  <option value="advisory">顧問契約・インハウス支援について</option>
                  <option value="ma">M&amp;A・資金調達対応について</option>
                  <option value="contract">契約書レビュー・作成について</option>
                  <option value="dispute">紛争・トラブル対応について</option>
                  <option value="ai">AI法務サービスについて</option>
                  <option value="other">その他</option>
                </select>
              </label>
              <label className="footer__field footer__field--full">
                <span className="footer__field-label">お問い合わせ詳細 <em>必須</em></span>
                <textarea name="message" rows="6" required placeholder="ご相談内容を具体的にお書きください。"></textarea>
              </label>
              <label className="footer__field footer__field--full footer__field--check">
                <input type="checkbox" name="agree" required />
                <span>
                  <a href="https://marbled-shrine-295.notion.site/privacy-policy" target="_blank" rel="noopener" className="hover-line">プライバシーポリシー</a>に同意します
                </span>
              </label>
            </div>
            <div className="footer__form-actions">
              <button type="submit" className="btn btn--gold" disabled={status === "submitting"}>
                {status === "submitting" ? "送信中..." : "送信する"}
                <svg className="arrow" width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.2"/></svg>
              </button>
              {status === "success" && (
                <p className="footer__form-status footer__form-status--success" role="status">
                  お問い合わせありがとうございます。内容を確認の上、追ってご連絡いたします
                </p>
              )}
              {status === "error" && (
                <p className="footer__form-status footer__form-status--error" role="alert">
                  {errorMsg}
                </p>
              )}
            </div>
          </form>
        </div>

        <div className="footer__bottom">
          <div className="footer__brand">
            <img src="assets/logo-mark.png" alt="LegalAgent" className="footer__brand-logo" />
            <span className="footer__brand-name">LegalAgent</span>
            <span className="footer__brand-en">AI Native Law Firm · Tokyo</span>
          </div>
          <div className="footer__cols">
            <div>
              <span className="label">Service</span>
              <ul>
                <li><a className="hover-line" href="#services">顧問・インハウス支援</a></li>
                <li><a className="hover-line" href="#services">M&amp;A・資金調達支援</a></li>
                <li><a className="hover-line" href="#strengths">強み</a></li>
                <li><a className="hover-line" href="#practice">対応分野</a></li>
              </ul>
            </div>
            <div>
              <span className="label">Company</span>
              <ul>
                <li><a className="hover-line" href="#lawyers">所属弁護士</a></li>
                <li><a className="hover-line" href="#results">実績</a></li>
                <li><a className="hover-line" href="#faq">FAQ</a></li>
                <li><a className="hover-line" href="#contact-form">お問い合わせ</a></li>
                <li><a className="hover-line" href="https://marbled-shrine-295.notion.site/privacy-policy" target="_blank" rel="noopener">プライバシーポリシー</a></li>
              </ul>
            </div>
            <div>
              <span className="label">Follow</span>
              <ul>
                <li><a className="hover-line" href="https://x.com/NoriakiAsato" target="_blank" rel="noopener">X (Twitter)</a></li>
                <li><a className="hover-line" href="https://www.facebook.com/noriaki.asato.9" target="_blank" rel="noopener">Facebook</a></li>
              </ul>
            </div>
          </div>
        </div>
        <div className="footer__copy">
          <span>© 2024–2026 Legal Agent Inc. All rights reserved.</span>
          <span className="footer__copy-en"><em>Counsel</em> for Modern Enterprises.</span>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;