// contact.jsx — contact page

function Contact({ t, lang, onNav }) {
  const [submitted, setSubmitted] = useState(false);
  const [sending, setSending] = useState(false);
  const [error, setError] = useState('');
  const [form, setForm] = useState({
    name: '', company: '', email: '', phone: '',
    industry: '', size: '', service: '', pain: '', consent: false,
    website: '', // honeypot — must stay empty
  });

  const industries = lang === 'zh'
    ? ['旅遊業', '旅宿業', '線上課程', '身心靈', '水電裝修', '牙醫診所', '美容/美髮', '健身/瑜伽', '其他']
    : ['Travel', 'Hospitality', 'Online Course', 'Wellness', 'Home Services', 'Dental', 'Beauty', 'Fitness', 'Other'];

  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const onSubmit = async (e) => {
    e.preventDefault();
    if (!form.consent || !form.name || !form.email || sending) return;
    setSending(true);
    setError('');
    try {
      const r = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      });
      const j = await r.json().catch(() => ({}));
      if (!r.ok || !j.ok) throw new Error(j.error || 'Submit failed');
      setSubmitted(true);
      setTimeout(() => window.scrollTo({ top: 0, behavior: 'smooth' }), 60);
    } catch (err) {
      setError(lang === 'zh'
        ? '送出失敗，請直接寄信至 alexma@painpoint-ai.com'
        : 'Submit failed. Please email alexma@painpoint-ai.com directly.');
    } finally {
      setSending(false);
    }
  };

  if (submitted) {
    return (
      <section className="section">
        <div className="wrap" style={{ minHeight: '60vh', display: 'grid', placeItems: 'center', textAlign: 'center' }}>
          <div style={{ maxWidth: 560 }}>
            <div className="kicker" style={{ marginBottom: 24 }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--accent)' }}></span>
              SUBMITTED · 已送出
            </div>
            <h1 className="h-1">{t.contact.submitted.title}</h1>
            <p className="lede" style={{ marginTop: 20, marginInline: 'auto' }}>{t.contact.submitted.body}</p>
            <button className="btn" style={{ marginTop: 32 }} onClick={() => { setSubmitted(false); onNav('home'); }}>
              {t.contact.submitted.back} <Arrow />
            </button>
          </div>
        </div>
      </section>
    );
  }

  const f = t.contact.form;

  return (
    <section className="section">
      <div className="wrap">
        <div className="contact-grid">
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}>{t.contact.eyebrow}</div>
            <h1 className="h-1">{t.contact.title}</h1>
            <p className="lede" style={{ marginTop: 24 }}>{t.contact.lede}</p>

            <div style={{ marginTop: 56 }}>
              <div className="tag" style={{ marginBottom: 20 }}>{t.contact.sideTitle}</div>
              <div style={{ display: 'flex', flexDirection: 'column' }}>
                {t.contact.sideList.map((s, i) => (
                  <div key={i} style={{
                    display: 'grid', gridTemplateColumns: '40px 1fr', gap: 16,
                    padding: '20px 0',
                    borderTop: '1px solid var(--line)',
                  }}>
                    <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.12em' }}>/{s.n}</span>
                    <div>
                      <div style={{ fontSize: 16, fontWeight: 500 }}>{s.t}</div>
                      <div style={{ fontSize: 14, color: 'var(--ink-2)', marginTop: 6, lineHeight: 1.55 }}>{s.b}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div style={{ marginTop: 48, padding: 24, border: '1px solid var(--line)', borderRadius: 14 }}>
              <div className="tag" style={{ marginBottom: 14 }}>DIRECT · 直接聯絡</div>
              <div style={{ fontSize: 14, lineHeight: 1.8 }}>
                <div><span style={{ color: 'var(--ink-3)' }}>E</span> &nbsp;<a href="mailto:alexma@painpoint-ai.com">alexma@painpoint-ai.com</a></div>
                <div><span style={{ color: 'var(--ink-3)' }}>T</span> &nbsp;<a href="tel:+886973773379">+886 973 773 379</a></div>
                <div><span style={{ color: 'var(--ink-3)' }}>W</span> &nbsp;www.painpoint-ai.com</div>
              </div>
            </div>
          </div>

          <form onSubmit={onSubmit} className="card-flat" style={{ padding: 'clamp(28px, 3.5vw, 44px)', display: 'grid', gap: 18, alignContent: 'start' }}>
            {/* honeypot — bots fill anything; humans never see this */}
            <input type="text" name="website" tabIndex="-1" autoComplete="off" aria-hidden="true"
                   value={form.website} onChange={(e) => update('website', e.target.value)}
                   style={{ position: 'absolute', left: '-10000px', width: 1, height: 1, opacity: 0 }} />
            <div className="field-row">
              <div className="field">
                <label>{f.name} *</label>
                <input required value={form.name} onChange={(e) => update('name', e.target.value)} placeholder={f.namePh} />
              </div>
              <div className="field">
                <label>{f.company}</label>
                <input value={form.company} onChange={(e) => update('company', e.target.value)} placeholder={f.companyPh} />
              </div>
            </div>
            <div className="field-row">
              <div className="field">
                <label>{f.email} *</label>
                <input required type="email" value={form.email} onChange={(e) => update('email', e.target.value)} placeholder={f.emailPh} />
              </div>
              <div className="field">
                <label>{f.phone}</label>
                <input value={form.phone} onChange={(e) => update('phone', e.target.value)} placeholder={f.phonePh} />
              </div>
            </div>
            <div className="field">
              <label>{f.industry}</label>
              <select value={form.industry} onChange={(e) => update('industry', e.target.value)}>
                <option value="">—</option>
                {industries.map(i => <option key={i} value={i}>{i}</option>)}
              </select>
            </div>
            <div className="field">
              <label>{f.size}</label>
              <div className="radio-group">
                {f.sizes.map(s => (
                  <span key={s} className="radio-pill" data-selected={form.size === s} onClick={() => update('size', s)}>{s}</span>
                ))}
              </div>
            </div>
            <div className="field">
              <label>{f.service}</label>
              <div className="radio-group">
                {f.services.map(s => (
                  <span key={s} className="radio-pill" data-selected={form.service === s} onClick={() => update('service', s)}>{s}</span>
                ))}
              </div>
            </div>
            <div className="field">
              <label>{f.pain}</label>
              <textarea value={form.pain} onChange={(e) => update('pain', e.target.value)} placeholder={f.painPh} rows="5" />
            </div>
            <label className="checkbox-row">
              <input type="checkbox" checked={form.consent} onChange={(e) => update('consent', e.target.checked)} />
              <span>{f.consent}</span>
            </label>
            {error && (
              <div role="alert" style={{
                padding: '12px 16px', border: '1px solid var(--accent)', borderRadius: 10,
                background: 'var(--accent-soft)', color: 'var(--accent-deep)', fontSize: 14,
              }}>
                {error}
              </div>
            )}
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 8 }}>
              <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.08em' }}>
                {lang === 'zh' ? '＊ 必填欄位' : '* required'}
              </span>
              <button className="btn btn-accent" type="submit"
                      disabled={!form.consent || !form.name || !form.email || sending}
                      style={{ opacity: (!form.consent || !form.name || !form.email || sending) ? 0.4 : 1 }}>
                {sending ? (lang === 'zh' ? '送出中…' : 'Sending…') : f.submit} <Arrow />
              </button>
            </div>
          </form>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Contact });