const { useState: useStateC } = React;

// Web3Forms access key — pegar la key real cuando la generen en https://web3forms.com
// La cuenta se crea con UNO de los dos correos (ej. tjg@ufarbe.com); el otro va en cc.
const W3F_ACCESS_KEY = '6bc07598-8c3a-4e58-8a57-68efe22712de';
const W3F_CC = 'livia@ufarbe.com'; // segundo socio en copia

const Contact = ({ lang }) => {
  const t = window.DICT[lang].contact;
  const [form, setForm] = useStateC({ name: '', org: '', email: '', jur: '', area: '', msg: '' });
  const [errors, setErrors] = useStateC({});
  const [sent, setSent] = useStateC(false);
  const [sending, setSending] = useStateC(false);

  const upd = (k) => (e) => {
    setForm((f) => ({ ...f, [k]: e.target.value }));
    setErrors((er) => ({ ...er, [k]: null }));
    setSent(false);
  };

  const submit = async (e) => {
    e.preventDefault();
    const next = {};
    if (!form.name.trim()) next.name = t.form.errors.required;
    if (!form.email.trim()) next.email = t.form.errors.required;else
    if (!/^\S+@\S+\.\S+$/.test(form.email)) next.email = t.form.errors.email;
    if (!form.msg.trim()) next.msg = t.form.errors.required;
    setErrors(next);
    if (Object.keys(next).length > 0) return;

    setSending(true);
    try {
      const res = await fetch('https://api.web3forms.com/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify({
          access_key: W3F_ACCESS_KEY,
          cc: W3F_CC,
          subject: `Nueva consulta — ${form.name}${form.org ? ' · ' + form.org : ''}`,
          from_name: 'unbekannte Farbe — web',
          replyto: form.email,
          name: form.name,
          organizacion: form.org,
          email: form.email,
          jurisdiccion: form.jur,
          area: form.area,
          mensaje: form.msg
        })
      });
      const data = await res.json();
      if (data.success) {
        setSent(true);
        setForm({ name: '', org: '', email: '', jur: '', area: '', msg: '' });
      } else {
        setErrors({ msg: 'No se pudo enviar. Intentá de nuevo.' });
      }
    } catch (err) {
      setErrors({ msg: 'Error de red. Intentá de nuevo.' });
    } finally {
      setSending(false);
    }
  };

  return (
    <section id="contact" data-screen-label="06 Contact">
      <div className="container">
        <div className="section-head">
          <div className="tag">
            <div className="eyebrow">{t.eyebrow}</div>
          </div>
          <div style={{ width: '100%' }}>
            <h2>{t.title1} <em>{t.title2}</em><br />{t.title3}</h2>
            <p style={{ marginTop: 24, fontSize: 16, color: 'var(--fg-dim)', lineHeight: 1.65 }}>
              {t.intro}
            </p>
          </div>
        </div>

        <div className="contact-grid">
          <form className="form" onSubmit={submit} noValidate>
            <div className="form-row">
              <div className={`field ${errors.name ? 'error' : ''}`}>
                <label style={{ fontSize: "12px", color: "rgb(168, 173, 189)" }}>{t.form.name}</label>
                <input type="text" value={form.name} onChange={upd('name')} />
                {errors.name && <span className="err-msg">{errors.name}</span>}
              </div>
              <div className="field">
                <label style={{ fontSize: "12px", color: "rgb(168, 173, 189)" }}>{t.form.org}</label>
                <input type="text" value={form.org} onChange={upd('org')} />
              </div>
            </div>

            <div className={`field ${errors.email ? 'error' : ''}`}>
              <label style={{ fontSize: "12px", color: "rgb(168, 173, 189)" }}>{t.form.email}</label>
              <input type="email" value={form.email} onChange={upd('email')} />
              {errors.email && <span className="err-msg">{errors.email}</span>}
            </div>

            <div className="form-row">
              <div className="field">
                <label style={{ fontSize: "12px", color: "rgb(168, 173, 189)" }}>{t.form.jur}</label>
                <select value={form.jur} onChange={upd('jur')}>
                  {t.form.jurOpts.map((o, i) => <option key={i} value={i === 0 ? '' : o}>{o}</option>)}
                </select>
              </div>
              <div className="field">
                <label style={{ fontSize: "12px", color: "rgb(168, 173, 189)" }}>{t.form.area}</label>
                <select value={form.area} onChange={upd('area')}>
                  {t.form.areaOpts.map((o, i) => <option key={i} value={i === 0 ? '' : o}>{o}</option>)}
                </select>
              </div>
            </div>

            <div className={`field ${errors.msg ? 'error' : ''}`}>
              <label style={{ lineHeight: "1", fontSize: "12px", color: "rgb(168, 173, 189)" }}>{t.form.msg}</label>
              <textarea rows="3" value={form.msg} onChange={upd('msg')} />
              {errors.msg && <span className="err-msg">{errors.msg}</span>}
            </div>

            <div className="form-submit">
              <span className="form-confirm" style={{ opacity: sent ? 1 : 0, transition: 'opacity 300ms' }}>
                ✓ {t.form.confirmed}
              </span>
              <button type="submit" className="btn primary" disabled={sending}>
                {sending ? 'Enviando…' : t.form.submit} <span className="arr">→</span>
              </button>
            </div>
          </form>
        </div>
      </div>
    </section>);

};

window.Contact = Contact;