/* global React */
const { Icon, Button } = window.UI;

function ContactModal({ open, onClose }) {
  const [sent, setSent] = React.useState(false);
  React.useEffect(() => { if (!open) setTimeout(() => setSent(false), 250); }, [open]);
  const submit = (e) => { e.preventDefault(); setSent(true); };
  return (
    <div className={"sl-modal-bg " + (open ? "open" : "")} onClick={onClose}>
      <div className="sl-modal" onClick={(e) => e.stopPropagation()}>
        {!sent ? (
          <React.Fragment>
            <div className="sl-eyebrow">Contacto</div>
            <h3>Hablemos de tu operación</h3>
            <p>Contanos en qué etapa está tu empresa y dónde sentís la fricción. Respondemos en menos de 24 hs.</p>
            <form onSubmit={submit}>
              <div className="sl-field"><label>Nombre</label><input required placeholder="Tu nombre" /></div>
              <div className="sl-field"><label>Email</label><input required type="email" placeholder="nombre@empresa.com" /></div>
              <div className="sl-field"><label>¿En qué te ayudamos?</label><textarea rows="3" placeholder="Estructura, escalamiento, ejecución de un proyecto…" /></div>
              <Button icon="arrow-right" style={{ width: "100%", justifyContent: "center", marginTop: 6 }}>Enviar mensaje</Button>
            </form>
          </React.Fragment>
        ) : (
          <div className="sl-success">
            <div className="sl-success-ico"><Icon name="check" size={32} /></div>
            <h3>¡Mensaje enviado!</h3>
            <p>Gracias por escribirnos. Un operador de Summit Lab te va a contactar muy pronto.</p>
            <Button variant="dark" onClick={onClose} style={{ marginTop: 4 }}>Cerrar</Button>
          </div>
        )}
      </div>
    </div>
  );
}
window.ContactModal = ContactModal;