/* eslint-disable */

const Contact = () => {
  const [sent, setSent] = React.useState(false);
  const submit = (e) => { e.preventDefault(); setSent(true); };
  return (
    <section className="section contact" id="contato">
      <div className="container">
        <Eyebrow tone="inverse">04 — contato</Eyebrow>
        <h2>vamos conversar sobre o seu próximo projeto.</h2>
        <p className="lede">
          no momento, estou dedicado a um projeto de longa prazo. tenho disponibilidade para mentorias para profissionais até nível júnior e capacitação de times em rotinas de dados, pesquisa de consumo e inteligência de negócios. Espere resposta em até dois dias úteis
        </p>
        <div className="contact-grid">
          {sent ? (
            <div className="success">
              <div style={{ fontSize: 14, letterSpacing: ".06em", textTransform: "uppercase", color: "var(--cream-100)" }}>
                mensagem enviada
              </div>
              <div style={{ fontSize: 22, lineHeight: 1.2 }}>obrigado — eu volto em até dois dias úteis.</div>
              <div style={{ fontFamily: "var(--font-sans)", fontSize: 15, color: "var(--cream-100)", lineHeight: 1.55 }}>
                Enquanto isso, dá uma olhada no portfolio ou me encontra no LinkedIn.
              </div>
            </div>
          ) : (
            <form onSubmit={submit}>
              <div className="field">
                <label htmlFor="c-nome">nome</label>
                <input id="c-nome" required defaultValue="" placeholder="seu nome" />
              </div>
              <div className="field">
                <label htmlFor="c-email">e-mail</label>
                <input id="c-email" type="email" required placeholder="voce@empresa.com.br" />
              </div>
              <div className="field">
                <label htmlFor="c-msg">mensagem</label>
                <textarea id="c-msg" rows="4" required placeholder="conte sobre o seu projeto, o problema, o prazo…"></textarea>
              </div>
              <div className="submit-row">
                <Btn variant="ghost" as="button">enviar →</Btn>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--cream-100)", letterSpacing: ".04em" }}>
                  resposta em até 2 dias úteis
                </span>
              </div>
            </form>
          )}

          <aside className="contact-aside">
            <dl>
              <dt>e-mail direto</dt>
              <dd><a href="mailto:rphlimacosta@gmail.com">rphlimacosta@gmail.com</a></dd>
              <dt>linkedin</dt>
              <dd><a href="https://linkedin.com/in/rphlimacosta">/in/rphlimacosta</a></dd>
              <dt>localização</dt>
              <dd>Rio de Janeiro · BR · −03:00</dd>
              <dt>idiomas</dt>
              <dd>PT · EN · ES</dd>
            </dl>
          </aside>
        </div>
      </div>
    </section>
  );
};

window.Contact = Contact;