</div>

<div data-field="consent" class="pt-1">
      <Checkbox
        size="sm"
        name="consent"
        bind:checked={consent}
        label={t(T.contact_label_consent)}
      />
      {#if showError("consent")}
        <p class="mt-1 text-[0.7rem] text-error" role="alert">{showError("consent")}</p>
      {/if}
      <p class="mt-1 text-[0.7rem] leading-snug text-stein-500">{t(T.contact_privacy_note)}</p>
    </div>

{#if TURNSTILE_ENABLED}
      <div bind:this={turnstileEl} class="pt-1"></div>
    {/if}

{#if serverError}
      <div class="rounded-sm border border-error bg-error-subtle px-3 py-2 text-sm text-error shadow-sm" role="alert">
        {serverError}
      </div>
    {/if}

<div class="flex items-center gap-3 pt-2">
      <Button
        type="submit"
        variant="primary"
        size="sm"
        loading={formState === "pending"}
        disabled={!isValid && submitAttempted}
        label={formState === "pending" ? t(T.contact_submitting) : t(T.contact_submit)}
      />
      {#if !isValid && submitAttempted && !serverError}
        <span class="text-xs text-error">{t(T.contact_fix_errors)}</span>
      {/if}
    </div>
  </form>
{/if}