/* セクション: お問い合わせフォーム、フッター */

function Contact() {
  const [submitted, setSubmitted] = useState(false);
  const [form, setForm] = useState({
    name: "", company: "", tel: "", email: "", plan: "", message: "", agree: false,
  });
  const onChange = (e) => {
    const { name, value, type, checked } = e.target;
    setForm({ ...form, [name]: type === "checkbox" ? checked : value });
  };
  const onSubmit = (e) => {
    e.preventDefault();
    if (!form.agree) return;
    setSubmitted(true);
  };
  return (
    <section className="contact" id="contact" data-screen-label="09 Contact">
      <div className="container">
        <div className="contact__inner">
          <div className="contact__copy">
            <span className="eyebrow">Contact</span>
            <h2>
              お問い合わせ・<br />
              <span style={{color: "var(--gold)"}}>無料相談予約</span>
            </h2>
            <p className="section-lead" style={{maxWidth: "100%"}}>
              下記フォームよりお気軽にお問い合わせくださいませ。お電話・LINEでのご相談も承っております。通常1営業日以内にご返信いたします。
            </p>
            <div className="contact__channels">
              <a className="ch-card ch-tel" href="tel:0424042927">
                <div className="ch-icon"><Icons.phone /></div>
                <div className="ch-body">
                  <span className="ch-tag">電話で無料相談</span>
                  <span className="ch-main">042-404-2927</span>
                  <span className="ch-sub">月〜土 9:00 - 17:00（日曜のみ定休）</span>
                </div>
              </a>
              <a className="ch-card ch-line" href="https://lin.ee/Pc4iSRJ" target="_blank" rel="noopener noreferrer">
                <div className="ch-icon"><Icons.line /></div>
                <div className="ch-body">
                  <span className="ch-tag">LINEで無料相談</span>
                  <span className="ch-main">友だち追加</span>
                  <span className="ch-sub">追加後、お気軽にメッセージください</span>
                </div>
              </a>
              <a className="ch-card ch-mail" href="mailto:info@office-tree.jp?subject=%E3%80%90%E7%84%A1%E6%96%99%E7%9B%B8%E8%AB%87%E5%B8%8C%E6%9C%9B%E3%80%91%E6%B3%95%E4%BA%BA%E8%A8%AD%E7%AB%8B%E3%83%BB%E5%BB%BA%E8%A8%AD%E6%A5%AD%E8%A8%B1%E5%8F%AF%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">
                <div className="ch-icon"><Icons.mail /></div>
                <div className="ch-body">
                  <span className="ch-tag">メールで無料相談</span>
                  <span className="ch-main">info@office-tree.jp</span>
                  <span className="ch-sub">24時間受付・1営業日以内に返信</span>
                </div>
              </a>
            </div>
          </div>
          <div>
            {submitted ? (
              <div className="form__success">
                <div className="form__success-icon"><Icons.check /></div>
                <div className="form__success-title">お問い合わせを承りました</div>
                <div className="form__success-text">
                  この度はお問い合わせをいただき、誠にありがとうございます。<br />
                  内容を確認の上、1営業日以内に担当者よりご連絡を差し上げます。
                </div>
              </div>
            ) : (
              <form className="form" onSubmit={onSubmit}>
                <div className="form__row">
                  <div className="form__field">
                    <label className="form__label">お名前 <span className="req">必須</span></label>
                    <input className="form__input" name="name" value={form.name} onChange={onChange} required placeholder="山田 太郎" />
                  </div>
                  <div className="form__field">
                    <label className="form__label">屋号・会社名 <span className="opt">任意</span></label>
                    <input className="form__input" name="company" value={form.company} onChange={onChange} placeholder="○○工務店" />
                  </div>
                </div>
                <div className="form__row">
                  <div className="form__field">
                    <label className="form__label">お電話番号 <span className="req">必須</span></label>
                    <input className="form__input" name="tel" value={form.tel} onChange={onChange} required placeholder="090-1234-5678" />
                  </div>
                  <div className="form__field">
                    <label className="form__label">メールアドレス <span className="req">必須</span></label>
                    <input className="form__input" type="email" name="email" value={form.email} onChange={onChange} required placeholder="example@mail.com" />
                  </div>
                </div>
                <div className="form__row">
                  <div className="form__field form__field--full">
                    <label className="form__label">ご検討中のプラン <span className="opt">任意</span></label>
                    <select className="form__select" name="plan" value={form.plan} onChange={onChange}>
                      <option value="">選択してください</option>
                      <option>ライトプラン</option>
                      <option>スタンダードプラン</option>
                      <option>フルサポートプラン</option>
                      <option>まずは相談したい</option>
                    </select>
                  </div>
                </div>
                <div className="form__row">
                  <div className="form__field form__field--full">
                    <label className="form__label">ご相談内容 <span className="req">必須</span></label>
                    <textarea className="form__textarea" name="message" value={form.message} onChange={onChange} required placeholder="現在、個人事業主として鳶工事業を営んでおり、来年4月の法人化を検討しております。建設業許可取得もあわせてご相談したく…"></textarea>
                  </div>
                </div>
                <label className="form__check">
                  <input type="checkbox" name="agree" checked={form.agree} onChange={onChange} required />
                  <span>
                    <a href="https://office-tree.jp/policy.html" target="_blank" rel="noopener noreferrer">プライバシーポリシー</a>に同意の上、上記内容にて送信いたします。お預かりした個人情報は、お問い合わせへのご返信のみに使用いたします。
                  </span>
                </label>
                <button type="submit" className="form__submit">無 料 相 談 を 申 し 込 む</button>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__inner">
          <div className="footer__logo">
            <a href="#" className="logo">
              <span className="logo__text">
                行政書士法人 Tree
                <small>CONSTRUCTION LICENSE & SETUP</small>
              </span>
            </a>
            <p className="footer__info">
              〒186-0004<br />
              東京都国立市中1丁目9-8 第7叶ビル3F<br />
              TEL: 042-404-2927<br />
              月〜土 9:00 - 17:00（日曜のみ定休）<br /><br />
              東京都行政書士会所属<br />
              会員番号 第21081224号
            </p>
          </div>
          <div>
            <div className="footer__title">Services</div>
            <ul className="footer__list">
              <li><a href="#pricing">法人設立＋建設業許可（本ページ）</a></li>
              <li><a href="https://office-tree.jp/lp/kaitai/" target="_blank" rel="noopener noreferrer">解体工事業登録</a></li>
              <li><a href="https://office-tree.jp/lp/sanpai/" target="_blank" rel="noopener noreferrer">産業廃棄物収集運搬業</a></li>
              <li><a href="https://office-tree.jp/lp/keishin/" target="_blank" rel="noopener noreferrer">経営事項審査</a></li>
              <li><a href="https://office-tree.jp/lp/nyusatsu/" target="_blank" rel="noopener noreferrer">入札参加資格申請</a></li>
            </ul>
          </div>
          <div>
            <div className="footer__title">Company</div>
            <ul className="footer__list">
              <li><a href="https://office-tree.jp/" target="_blank" rel="noopener noreferrer">公式サイト</a></li>
              <li><a href="https://office-tree.jp/company.html" target="_blank" rel="noopener noreferrer">事務所案内</a></li>
              <li><a href="https://office-tree.jp/services.html" target="_blank" rel="noopener noreferrer">サービス一覧</a></li>
              <li><a href="https://office-tree.jp/ryokin/" target="_blank" rel="noopener noreferrer">料金一覧</a></li>
              <li><a href="https://office-tree.jp/blog/" target="_blank" rel="noopener noreferrer">ジャーナル</a></li>
            </ul>
          </div>
          <div>
            <div className="footer__title">Contact &amp; Legal</div>
            <ul className="footer__list">
              <li><a href="#contact">お問い合わせフォーム</a></li>
              <li><a href="tel:0424042927">042-404-2927</a></li>
              <li><a href="https://lin.ee/Pc4iSRJ" target="_blank" rel="noopener noreferrer">LINE無料相談</a></li>
              <li><a href="https://office-tree.jp/policy.html" target="_blank" rel="noopener noreferrer">プライバシーポリシー</a></li>
            </ul>
          </div>
        </div>
        <div className="footer__bottom">
          <span>© 2026 Tree GYOSEISHOSHI HOJIN. ALL RIGHTS RESERVED.</span>
          <span>建設業の挑戦を、書類で支える。</span>
        </div>
      </div>
    </footer>
  );
}

function FloatingCTA() {
  return (
    <div className="floating-cta">
      <div className="fc-inner">
        <div className="fc-label">
          Always Available
          <b>無料相談はこちら</b>
        </div>
        <a className="fc-btn fc-tel" href="tel:0424042927">
          <span className="ic">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
              <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
            </svg>
          </span>
          <span className="lbl-main">
            <span>電話で無料相談</span>
            <span>042-404-2927</span>
          </span>
        </a>
        <a className="fc-btn fc-line" href="https://lin.ee/Pc4iSRJ" target="_blank" rel="noopener noreferrer">
          <span className="ic">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 2C6.48 2 2 5.71 2 10.27c0 4.09 3.59 7.51 8.43 8.16.33.07.78.22.89.51.1.26.06.66.03.93l-.14.86c-.04.26-.2 1.01.88.55 1.08-.46 5.83-3.43 7.95-5.88h.01C21.55 13.78 22 12.08 22 10.27 22 5.71 17.52 2 12 2z"/>
            </svg>
          </span>
          <span className="lbl-main">
            <span>LINEで無料相談</span>
            <span>友だち追加</span>
          </span>
        </a>
        <a className="fc-btn fc-mail" href="#contact">
          <span className="ic">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
              <polyline points="22,6 12,13 2,6"/>
            </svg>
          </span>
          <span className="lbl-main">
            <span>メールで無料相談</span>
            <span>フォームへ</span>
          </span>
        </a>
      </div>
    </div>
  );
}

window.Contact = Contact;
window.Footer = Footer;
window.FloatingCTA = FloatingCTA;