{{/* Contact form partial */}}
<form class="contact-form" id="contactForm" method="POST" action="/api/contact">
  <div class="form-honeypot" aria-hidden="true">
    <label for="website">Leave empty</label>
    <input type="text" id="website" name="website" tabindex="-1" autocomplete="off">
  </div>

  <div class="form-group">
    <label for="name" class="form-label">Name</label>
    <input type="text" id="name" name="name" class="form-input" required maxlength="100" autocomplete="name">
  </div>

  <div class="form-group">
    <label for="email" class="form-label">Email</label>
    <input type="email" id="email" name="email" class="form-input" required maxlength="200" autocomplete="email">
  </div>

  <div class="form-group">
    <label for="category" class="form-label">What's this about?</label>
    <select id="category" name="category" class="form-select" required>
      <option value="">Select a topic…</option>
      <option value="product_question">Product question</option>
      <option value="order_inquiry">Order inquiry</option>
      <option value="wholesale">Wholesale</option>
      <option value="collaboration_press">Collaboration / Press</option>
      <option value="general">General</option>
    </select>
  </div>

  <div class="form-group">
    <label for="product_interest" class="form-label">Product interest (optional)</label>
    <select id="product_interest" name="product_interest" class="form-select">
      <option value="">Any / all</option>
      <option value="face_balm">Face Balm</option>
      <option value="body_balm">Body Balm</option>
      <option value="lip_balm">Lip Balm</option>
    </select>
  </div>

  <div class="form-group">
    <label for="message" class="form-label">Message</label>
    <textarea id="message" name="message" class="form-textarea" required maxlength="5000" placeholder="Tell Amber what you're looking for…"></textarea>
  </div>

  <div class="cf-turnstile" data-sitekey="0x4AAAAAADNXU5KZ9DfJl2VL" style="margin-bottom: var(--fk-space-lg);"></div>
  <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

  <div id="formMessage"></div>

  <button type="submit" class="btn btn--primary btn--lg" id="submitBtn">
    Send Message
  </button>
</form>