/* REVO JURIS — Contact + enquiry form, Footer, mobile action bar (single-language) */

function Contact({ matter, setMatter }) {
  const lang = useLang();
  const tx = useTx();
  const cjk = lang === 'ZH' ? ' cjk' : '';
  const [sent, setSent] = React.useState(false);
  const [form, setForm] = React.useState({ name: '', phone: '', email: '', msg: '', consent: false });
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const submit = (e) => { e.preventDefault(); setSent(true); };
  return (
    <section className="band navy" id="contact">
      <div className="container">
        <SecHead head={CONTACT_HEAD} light />
        <div className="contact-grid">
          <div className="contact-info">
            {CONTACT_INFO.map((ci, i) => (
              <div className={'ci-row' + (ci.hot ? ' hot' : '')} key={i}>
                <div className="ci-ic"><Icon name={ci.icon} size={19} /></div>
                <div>
                  <div className={'ci-k' + cjk}>{tx(ci.k)}</div>
                  <div className={'ci-v' + (typeof ci.v === 'string' && /\d/.test(ci.v) ? ' tnum' : '') + cjk}>
                    {tx(ci.v)}{ci.sub && <span className={'zh' + cjk}>{tx(ci.sub)}</span>}
                  </div>
                </div>
              </div>
            ))}
          </div>

          <div className="enquiry">
            {sent ? (
              <div className="enquiry-success">
                <div className="sok"><Icon name="check" size={32} strokeWidth={2.5} /></div>
                <h3 className={cjk}>{tx(FORM.okTitle)}</h3>
                <p className={cjk}>{tx(FORM.okBody)}</p>
                <button className={'btn btn-outline' + cjk} style={{ marginTop: 22 }} onClick={() => { setSent(false); setForm({ name: '', phone: '', email: '', msg: '', consent: false }); }}>{tx(FORM.another)}</button>
              </div>
            ) : (
              <form onSubmit={submit}>
                <h3 className={cjk}>{tx(FORM.title)}</h3>
                <div className={'zh-h' + cjk} style={{ marginTop: 4, marginBottom: 24 }}>{tx(FORM.sub)}</div>
                <div className="field-group">
                  <label className={cjk}>{tx(FORM.matterLabel)}</label>
                  <div className="seg">
                    {FORM.matters.map(([id, lbl]) => (
                      <button type="button" key={id} className={'seg-opt' + (matter === id ? ' on' : '') + cjk} onClick={() => setMatter(id)}>{tx(lbl)}</button>
                    ))}
                  </div>
                </div>
                <div className="field-row">
                  <div><label className={cjk}>{tx(FORM.name)}</label><input className="field" required value={form.name} onChange={e => set('name', e.target.value)} placeholder={tx(FORM.namePh)} /></div>
                  <div><label className={cjk}>{tx(FORM.phone)}</label><input className="field" required value={form.phone} onChange={e => set('phone', e.target.value)} placeholder="+852 5715 5628" /></div>
                </div>
                <div className="field-group">
                  <label className={cjk}>{tx(FORM.email)} <span style={{ color: 'var(--ink-400)', fontWeight: 400 }}>{tx(FORM.optional)}</span></label>
                  <input className="field" type="email" value={form.email} onChange={e => set('email', e.target.value)} placeholder="you@email.com" />
                </div>
                <div className="field-group">
                  <label className={cjk}>{tx(FORM.msg)}</label>
                  <textarea className={'field' + cjk} value={form.msg} onChange={e => set('msg', e.target.value)} placeholder={tx(FORM.msgPh)} />
                </div>
                <label className={'consent' + cjk}>
                  <input type="checkbox" required checked={form.consent} onChange={e => set('consent', e.target.checked)} />
                  <span>{tx(FORM.consent)}</span>
                </label>
                <button type="submit" className={'btn btn-gold btn-block btn-lg' + cjk}><Icon name="send" size={18} />{tx(FORM.submit)}</button>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const lang = useLang();
  const tx = useTx();
  const cjk = lang === 'ZH' ? ' cjk' : '';
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <div>
            <Brand footer />
            <p className={'fdesc' + cjk}>{tx(FOOTER.desc)}</p>
          </div>
          <div>
            <h5 className={cjk}>{tx(FOOTER.areasH)}</h5>
            <ul>{FOOTER_AREAS.map((a, i) => <li key={i} className={cjk}><a href="#practice">{tx(a)}</a></li>)}</ul>
          </div>
          <div>
            <h5 className={cjk}>{tx(FOOTER.contactH)}</h5>
            <ul>{FOOTER_CONTACT.map((c, i) => <li key={i} className={cjk}>{tx(c)}</li>)}</ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span className={'copy' + cjk}>{tx(FOOTER.copy)}</span>
        </div>
        <p className={'disclaimer' + cjk}>{tx(FOOTER.disclaimer)}</p>
      </div>
    </footer>
  );
}

function MobileAction({ onEnquire, onHotline }) {
  const lang = useLang();
  const tx = useTx();
  const cjk = lang === 'ZH' ? ' cjk' : '';
  return (
    <div className="mobile-action">
      <button className={'btn btn-urgent' + cjk} onClick={onHotline}><Icon name="siren" size={17} />{tx(UI.hotShort)}</button>
      <button className={'btn btn-gold' + cjk} onClick={() => rjWA()}><Icon name="message-circle" size={17} />{tx(UI.findSolicitor)}</button>
    </div>
  );
}

Object.assign(window, { Contact, Footer, MobileAction });