<section id="contact">
  <div class="container">
    <div class="section-eyebrow reveal">{{ i18n "section_contact" }}</div>
    <h2 class="section-title reveal">{{ i18n "contact_title" }}</h2>

    <p class="contact-sub reveal">{{ .Params.contact_sub }}</p>

    <form id="contact-form" class="contact-form reveal" novalidate>
      <!-- Honeypot: hidden from humans, filled by bots -->
      <div class="cf-honey" aria-hidden="true">
        <label for="cf-website">Website</label>
        <input type="text" id="cf-website" name="website" tabindex="-1" autocomplete="off">
      </div>
      <input type="hidden" name="_t" id="cf-time">

      <div class="cf-row">
        <div class="cf-field">
          <label for="cf-name">{{ i18n "form_name" }} <span class="cf-req">*</span></label>
          <input type="text" id="cf-name" name="name" required autocomplete="name" maxlength="100">
        </div>
        <div class="cf-field">
          <label for="cf-email">{{ i18n "form_email" }} <span class="cf-req">*</span></label>
          <input type="email" id="cf-email" name="email" required autocomplete="email" maxlength="254">
        </div>
      </div>

      <div class="cf-field">
        <label for="cf-subject">{{ i18n "form_subject" }}</label>
        <input type="text" id="cf-subject" name="subject" maxlength="200">
      </div>

      <div class="cf-field">
        <label for="cf-message">{{ i18n "form_message" }} <span class="cf-req">*</span></label>
        <textarea id="cf-message" name="message" required maxlength="5000" rows="5"></textarea>
      </div>

      <div class="cf-footer">
        <button type="submit" class="btn btn-primary cf-submit">
          <i class="fa-solid fa-paper-plane"></i>
          <span>{{ i18n "form_send" }}</span>
        </button>
        <button type="reset" class="btn btn-outline cf-clear">
          {{ i18n "form_clear" }}
        </button>
        <p class="cf-status" aria-live="polite"></p>
      </div>
    </form>
  </div>
</section>
