/* ============ 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 = "請填寫 Email";
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = "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>info@luxor.com.tw</dd>
              </div>
              <div>
                <dt>OFFICE HOURS</dt>
                <dd>週一至週五 09:00 — 18:00</dd>
              </div>
            </dl>
          </div>

          <div>
            {sent ? (
              <div className="lx-success">
                <div className="lx-success-mark">✓</div>
                <div>
                  <h4>您的訊息已送出</h4>
                  <p>
                    感謝您對路克索數位的關注。我們已收到您的諮詢需求，
                    顧問團隊將於兩個工作天內透過 Email 或電話與您聯繫。
                  </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.com" />
                    <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="+886 9XX XXX XXX" />
                    <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 ============ */
/* 選單各項改成各自獨立的分頁後，原本四欄連結跟上方導覽列完全重複，
   技術文件／客戶服務／Privacy 等也還沒有實際頁面，一併收掉，
   頁尾只留公司識別與版權。 */
function Footer() {
  return (
    <footer className="lx-footer is-slim">
      <div className="lx-footer-inner">
        <div className="lx-footer-brand">
          <img src="img/logo-luxor-cn.webp" alt="LUXOR" />
          <div className="lx-footer-name">路克索數位有限公司</div>
          <p className="lx-footer-tag">
            營造工程 · 數位轉型顧問<br/>
            Est. 1989 · Taipei<br/>
            整合 MIS × GIS × BIM × AI
          </p>
        </div>
      </div>
      <div className="lx-footer-bar">
        <span>© 2026 路克索數位有限公司 LUXOR DIGITAL CO., LTD.</span>
      </div>
    </footer>
  );
}
window.Footer = Footer;