const Contacts = () => (
  <section>
    <h4>Contact me!</h4>
    <div>
      <strong>Secure Scuttlebutt</strong>
      <ul>
        <li>
          <code>@xr/Q/zqaEwmmd4wg8xRU1TrMLQhc9qBqNCioCqmv1vQ=.ed25519</code>
        </li>
        <li>or</li>
        <li>
          <code>@2CFA0rXTIXzlwLvln3NhY8+RvuKFhNkejhLZhrDiCMU=.ed25519</code>
        </li>
      </ul>
    </div>
    <div>
      <strong>E-mail</strong>
      <ul>
        <li>
          <a href="mailto:contact@romuloalves.dev">contact@romuloalves.dev</a>
        </li>
      </ul>
    </div>
    <div>
      <strong>LinkedIn</strong>
      <ul>
        <li>
          <a href="https://www.linkedin.com/in/romuloalves" target="_blank" rel="noopener" title="/in/romuloalves">/in/romuloalves</a>
        </li>
      </ul>
    </div>
    <style jsx>{`
      h4 {
        font-size: 20px;
      }
      div {
        margin: 10px 0 0 20px;
      }
      ul {
        list-style: none;
      }
      li {
        margin: 5px 0 0 15px;
      }
      code {
        background: #eee;
        overflow-wrap: break-word;
      }
    `}</style>
  </section>
);

export default Contacts;