/** @jsx React.createElement */
const { useState: useS2 } = React;

function Contact() {
  const [sent, setSent] = useS2(false);
  const [form, setForm] = useS2({ fullname: '', company: '', phone: '', email: '', message: '' });
  const [, force] = useS2(0);
  React.useEffect(() => {
    const h = () => force(n => n + 1);
    window.addEventListener('brand:rerender', h);
    return () => window.removeEventListener('brand:rerender', h);
  }, []);
  const B = window.BRAND;
  const email = `${B.emailLocal}@${B.domain}`;
  const up = k => e => setForm({ ...form, [k]: e.target.value });
  const submit = e => { e.preventDefault(); setSent(true); };

  return (
    <section id="contact" className="section section-contact on-dark">
      <div className="container contact-grid">
        <div className="contact-intro">
          <div className="eyebrow section-eyebrow">Hablemos</div>
          <h2 className="section-title-left">¿Cómo te podemos <span className="accent">ayudar</span>?</h2>
          <p className="lead">Contáctenos y cuéntenos su proyecto. Respondemos en menos de 48 horas hábiles.</p>
          <address className="contact-address">
            <div className="addr-title">CONTACTO</div>
            <div className="addr-row"><Icon name="phone" /> <span>{B.phone}</span></div>
            <div className="addr-row"><Icon name="mail" /> <a href={`mailto:${email}`}>{email}</a></div>
            <div className="addr-row"><Icon name="map-pin" /> <span>{B.location}</span></div>
          </address>
          {B.showSocial && (
            <div className="contact-social">
              <span className="follow-label">SÍGUENOS EN</span>
              <a href="#" aria-label="LinkedIn"><Icon name="linkedin" /></a>
              <a href="#" aria-label="Twitter"><Icon name="twitter" /></a>
              <a href="#" aria-label="Facebook"><Icon name="facebook" /></a>
            </div>
          )}
        </div>

        <form className="contact-form" onSubmit={submit}>
          {sent && <div className="form-alert">Gracias por contactarte con nosotros. Tu mensaje fue enviado con éxito.</div>}
          <div className="field">
            <label>NOMBRE*</label>
            <input required value={form.fullname} onChange={up('fullname')} />
          </div>
          <div className="field-row">
            <div className="field">
              <label>COMPAÑÍA</label>
              <input value={form.company} onChange={up('company')} />
            </div>
            <div className="field">
              <label>TELÉFONO</label>
              <input type="tel" value={form.phone} onChange={up('phone')} />
            </div>
          </div>
          <div className="field">
            <label>EMAIL*</label>
            <input required type="email" value={form.email} onChange={up('email')} />
          </div>
          <div className="field">
            <label>CUÉNTANOS SOBRE TU PROYECTO*</label>
            <textarea required rows={5} value={form.message} onChange={up('message')} />
          </div>
          <button type="submit" className="btn btn-primary btn-lg btn-block">Enviar</button>
        </form>
      </div>
    </section>
  );
}

window.Contact = Contact;