// contact.jsx — contact page

function Contact({ t, lang, onNav }) {
  const [submitted, setSubmitted] = useState(false);
  const [form, setForm] = useState({
    name: '', company: '', email: '', phone: '',
    industry: '', size: '', service: '', pain: '', consent: false,
  });

  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 = (e) => {
    e.preventDefault();
    if (!form.consent || !form.name || !form.email) return;
    setSubmitted(true);
    setTimeout(() => window.scrollTo({ top: 0, behavior: 'smooth' }), 60);
  };

  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' }}>
            <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>
            <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}
                      style={{ opacity: (!form.consent || !form.name || !form.email) ? 0.4 : 1 }}>
                {f.submit} <Arrow />
              </button>
            </div>
          </form>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Contact });