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

function Footer({ showContact = true, showBottom = true } = {}) {
  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={showContact ? "contact" : undefined}
      className={`footer section section--ink ${showContact ? "" : "footer--site"}`}
      data-screen-label={showContact ? "09 Contact" : "13 Footer"}
    >
      <div className="container">
        {showContact && (
          <React.Fragment>
        <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="legal-outsourcing">法務アウトソーシングについて</option>
                  <option value="ma">M&amp;A支援について</option>
                  <option value="startup-legal">スタートアップ法務・資金調達支援について</option>
                  <option value="contract">契約書レビュー・作成について</option>
                  <option value="compliance">コンプライアンス支援について</option>
                  <option value="labor-hr">労務管理・人事労務について</option>
                  <option value="intellectual-property">知的財産権関連について</option>
                  <option value="dispute">紛争・トラブル対応について</option>
                  <option value="corporate-governance">コーポレートガバナンスについて</option>
                  <option value="ipo-support">IPO支援について</option>
                  <option value="security-legal">セキュリティ関連について</option>
                  <option value="ip-entertainment">IP・エンタメ法務について</option>
                  <option value="web3">Web3について</option>
                  <option value="ai-legal-consulting">生成AIに関する法的相談対応について</option>
                  <option value="advertising-review">広告審査について</option>
                  <option value="sender-information-disclosure">発信者情報開示について</option>
                  <option value="cross-border-english">英語案件（クロスボーダー）について</option>
                  <option value="fund-formation">ファンド設立について</option>
                  <option value="vc-cvc-investment">VC・CVC投資対応について</option>
                  <option value="antitrust-competition">独占禁止法・競争法・取引規制について</option>
                  <option value="data-privacy">個人情報保護・データ保護について</option>
                  <option value="fintech-payments">FinTech・資金決済法務について</option>
                  <option value="healthcare-pharma">ヘルスケア・薬機法・医療関連法務について</option>
                  <option value="it-saas-development">IT・SaaS・システム開発法務について</option>
                  <option value="crisis-management">危機管理・不祥事対応・社内調査について</option>
                  <option value="alliance-jv">事業提携・JV・アライアンスについて</option>
                  <option value="corporate-finance">ファイナンス・資金調達一般について</option>
                  <option value="labor-union-labor-standards">労働組合対応・労基署対応について</option>
                  <option value="restructuring-insolvency-collections">事業再生・倒産・債権回収について</option>
                  <option value="tax-disputes">税務争訟・税務調査対応について</option>
                  <option value="real-estate-construction">不動産・建設法務について</option>
                  <option value="environment-energy">環境・エネルギー法務について</option>
                  <option value="food-labeling-regulation">食品・景表法・表示規制について</option>
                  <option value="mobility-automotive">モビリティ・自動車関連法務について</option>
                  <option value="space-deeptech">宇宙・ディープテック法務について</option>
                  <option value="sports-law">スポーツ法務について</option>
                  <option value="education-school">学校法人・教育関連法務について</option>
                  <option value="public-sector-government">自治体・公共サービス関連法務について</option>
                  <option value="general-corporate">その他企業法務全般について</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>
          </React.Fragment>
        )}

        {showBottom && (
          <React.Fragment>
        <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>
            <address className="footer__brand-addr">
              〒103-0026<br/>
              東京都中央区日本橋兜町22-6<br/>
              東京セントラルプレイス5階
            </address>
          </div>
          <div className="footer__cols">
            <div>
              <span className="label">Service</span>
              <ul>
                <li><a className="hover-line" href="/services/legal-outsourcing/">法務アウトソーシング</a></li>
                <li><a className="hover-line" href="/services/ma/">M&amp;A支援</a></li>
                <li><a className="hover-line" href="/services/startup-legal/">スタートアップ法務</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">AI NATIVE LAW FIRM FOR MODERN ENTERPRISES.</span>
        </div>
          </React.Fragment>
        )}
      </div>
    </footer>
  );
}
window.Footer = Footer;