/* ============ Contact Form ============ */
function Contact() {
  const ref = useReveal(0.15);
  const [form, setForm] = useState({ name:"", company:"", email:"", phone:"", message:"" });
  const [interests, setInterests] = useState([]);
  const [errors, setErrors] = useState({});
  const [sent, setSent] = useState(false);
  const [human, setHuman] = useState(false);
  const [hp, setHp] = useState("");            // おとり項目(honeypot):人には見えず、ボットが自動入力しがち
  const mountedAt = useRef(Date.now());

  const opts = ["スマート BIM プラットフォーム", "IPCS スマート現場管理", "30 日間無料トライアル", "その他のご相談"];

  const toggle = (k) => {
    setInterests(i => i.includes(k) ? i.filter(x => x !== k) : [...i, k]);
  };

  const validate = () => {
    const e = {};
    if (!form.name.trim()) e.name = "お名前をご記入ください";
    if (!form.company.trim()) e.company = "会社名・団体名をご記入ください";
    if (!form.email.trim()) e.email = "メールアドレスをご記入ください";
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = "メールアドレスの形式が正しくありません";
    if (!form.message.trim() || form.message.length < 10) e.message = "10 文字以上でご記入ください";
    if (!human) e.human = "「私はロボットではありません」にチェックを入れてください";
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const submit = (ev) => {
    ev.preventDefault();
    if (hp) return;                                 // ボットがおとり項目を埋めた → 何もせず無視
    if (!validate()) return;
    if (Date.now() - mountedAt.current < 3000) {    // 送信が早すぎる → ボットの疑い
      setErrors(er => ({ ...er, human: "確認できませんでした。もう一度お試しください" }));
      return;
    }
    setSent(true);
  };

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

  return (
    <section className="lx-section lx-contact" id="contact">
      <div className="lx-container">
        <div className="lx-contact-grid lx-reveal" ref={ref}>
          <div className="lx-contact-info">
            <span className="lx-section-eyebrow-line">CONTACT · お問い合わせ</span>
            <h2 className="lx-section-title" style={{letterSpacing:'5px'}}>
              まずはお気軽に<br/>ご相談ください
            </h2>
            <p style={{marginTop:'24px', fontSize:'14px', lineHeight:'2', letterSpacing:'1.5px', color:'var(--lx-ink-3)', maxWidth:'420px'}}>
              プロジェクトの背景をお聞かせください。担当者よりご連絡のうえ、30 分の無料相談をご案内いたします。
            </p>
            <dl>
              <div>
                <dt>EMAIL</dt>
                <dd>{LX_EMAIL}</dd>
              </div>
              <div>
                <dt>TEL</dt>
                <dd>{LX_TEL}</dd>
              </div>
              <div>
                <dt>ADDRESS</dt>
                <dd>{LX_ZIP}<br/>{LX_ADDRESS}</dd>
              </div>
              <div>
                <dt>OFFICE HOURS</dt>
                <dd>{LX_HOURS}</dd>
              </div>
            </dl>
          </div>

          <div>
            {sent ? (
              <div className="lx-success">
                <div className="lx-success-mark">✓</div>
                <div>
                  <h4>送信が完了しました</h4>
                  <p>
                    ルクソールにご関心をお寄せいただきありがとうございます。お問い合わせを受け付けました。
                    担当者より 2 営業日以内にメールまたはお電話でご連絡いたします。
                  </p>
                </div>
              </div>
            ) : (
              <form className="lx-form" onSubmit={submit} noValidate>
                <div className="lx-form-row">
                  <div className={`lx-field ${errors.name ? "lx-field-error" : ""}`}>
                    <label>Name · お名前</label>
                    <input type="text" value={form.name} onChange={upd("name")} placeholder="山田 太郎" />
                    <div className="lx-field-msg">{errors.name}</div>
                  </div>
                  <div className={`lx-field ${errors.company ? "lx-field-error" : ""}`}>
                    <label>Company · 会社名 / 団体名</label>
                    <input type="text" value={form.company} onChange={upd("company")} placeholder="○○建設株式会社" />
                    <div className="lx-field-msg">{errors.company}</div>
                  </div>
                </div>

                <div className="lx-form-row">
                  <div className={`lx-field ${errors.email ? "lx-field-error" : ""}`}>
                    <label>Email</label>
                    <input type="email" value={form.email} onChange={upd("email")} placeholder="you@company.co.jp" />
                    <div className="lx-field-msg">{errors.email}</div>
                  </div>
                  <div className="lx-field">
                    <label>Phone · 電話番号</label>
                    <input type="tel" value={form.phone} onChange={upd("phone")} placeholder="090-1234-5678" />
                    <div className="lx-field-msg"></div>
                  </div>
                </div>

                <div className="lx-field">
                  <label>Interested In · ご相談内容</label>
                  <div className="lx-form-checks">
                    {opts.map(o => (
                      <label key={o} className={`lx-chip ${interests.includes(o) ? "is-checked" : ""}`}>
                        <input type="checkbox" checked={interests.includes(o)} onChange={() => toggle(o)} />
                        <span>{o}</span>
                      </label>
                    ))}
                  </div>
                </div>

                <div className={`lx-field ${errors.message ? "lx-field-error" : ""}`}>
                  <label>Message · プロジェクトのご要望</label>
                  <textarea value={form.message} onChange={upd("message")} placeholder="プロジェクトの規模、現在お使いのツール、LUXOR で解決したい課題などをご記入ください ..." />
                  <div className="lx-field-msg">{errors.message}</div>
                </div>

                <input
                  type="text" name="lx_url" tabIndex="-1" autoComplete="off"
                  value={hp} onChange={(e) => setHp(e.target.value)}
                  aria-hidden="true"
                  style={{position:'absolute', left:'-9999px', width:'1px', height:'1px', opacity:0}}
                />

                <div className={`lx-field ${errors.human ? "lx-field-error" : ""}`}>
                  <label className={`lx-robot ${human ? "is-checked" : ""}`}>
                    <input type="checkbox" checked={human} onChange={(e) => setHuman(e.target.checked)} />
                    <span className="lx-robot-box">{human ? "✓" : ""}</span>
                    <span>私はロボットではありません</span>
                  </label>
                  <div className="lx-field-msg">{errors.human}</div>
                </div>

                <div className="lx-submit-row">
                  <p className="lx-submit-note">
                    送信をもって当サイトのプライバシーポリシーに同意したものとみなします。
                    お預かりした情報は業務上のご連絡のみに使用します。
                  </p>
                  <button className="lx-btn-gold" type="submit">
                    送信する SUBMIT →
                  </button>
                </div>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}
window.Contact = Contact;

/* ============ Footer ============ */
/* メニュー各項目を独立したページにしたため、従来の 4 カラムのリンクは
   ヘッダーのナビと完全に重複する。フッターは会社情報と著作権表示のみとする。 */
function Footer() {
  return (
    <footer className="lx-footer is-slim">
      <div className="lx-footer-inner">
        <div className="lx-footer-brand">
          <img src="assets/logo-full-color.webp" alt="LUXOR" />
          <div className="lx-footer-name">{LX_COMPANY}</div>
          <p className="lx-footer-tag">
            建設分野の DX コンサルティング<br/>
            Est. 1989 · Taipei<br/>
            MIS × GIS × BIM × AI の統合
          </p>
          <p className="lx-footer-tag">
            {LX_ZIP} {LX_ADDRESS}<br/>
            TEL {LX_TEL}　MAIL {LX_EMAIL}
          </p>
        </div>
      </div>
      <div className="lx-footer-bar">
        <span>© 2026 {LX_COMPANY} {LX_COMPANY_EN}</span>
      </div>
    </footer>
  );
}
window.Footer = Footer;